From 309571e9382467b196027083fc09f59aba70e64f Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Wed, 10 Dec 2025 07:16:25 +1100
Subject: [PATCH 01/10] fix: Audit API (#9264)

* fix some types

* fix extra or missing props

* fixes from audit

* fix default

* add default for statulight and missing prop in toggle button group example

* fix jsdoc

* fix build and correct api

* fix props in starter

* Update packages/@react-spectrum/s2/src/ActionMenu.tsx

Co-authored-by: Reid Barber <reid@reidbarber.com>

* fix review comments

* update default for contextual help

* remove offset and fix containerPadding

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>
Co-authored-by: Reid Barber <reid@reidbarber.com>
---
 .../gridlist/src/useGridListItem.ts           |  4 +-
 .../s2/chromatic/Breadcrumbs.stories.tsx      |  4 +-
 packages/@react-spectrum/s2/package.json      |  1 +
 packages/@react-spectrum/s2/src/ActionBar.tsx |  9 ++-
 .../@react-spectrum/s2/src/ActionMenu.tsx     |  5 ++
 .../@react-spectrum/s2/src/AlertDialog.tsx    |  5 +-
 .../@react-spectrum/s2/src/Breadcrumbs.tsx    |  4 +-
 .../@react-spectrum/s2/src/ContextualHelp.tsx | 13 ++--
 .../@react-spectrum/s2/src/DatePicker.tsx     |  9 ++-
 .../s2/src/DateRangePicker.tsx                |  6 +-
 packages/@react-spectrum/s2/src/Picker.tsx    |  2 +-
 packages/@react-spectrum/s2/src/Provider.tsx  |  5 +-
 .../@react-spectrum/s2/src/StatusLight.tsx    |  6 +-
 packages/@react-spectrum/s2/src/TableView.tsx |  4 +-
 packages/@react-spectrum/s2/src/TagGroup.tsx  |  4 +-
 .../s2/src/ToggleButtonGroup.tsx              |  4 +-
 packages/@react-spectrum/s2/src/Tooltip.tsx   | 11 ++-
 .../s2/stories/Breadcrumbs.stories.tsx        | 68 +++++++++++--------
 .../@react-spectrum/s2/test/TagGroup.test.tsx | 20 ++++++
 .../tree/test/TreeView.test.tsx               |  2 +-
 packages/@react-types/combobox/src/index.d.ts |  2 +-
 .../@react-types/numberfield/src/index.d.ts   |  5 +-
 packages/@react-types/tabs/src/index.d.ts     |  2 +-
 .../s2-docs/pages/s2/ToggleButtonGroup.mdx    |  2 +-
 packages/dev/s2-docs/pages/s2/Tooltip.mdx     |  2 +-
 .../react-aria-components/src/Breadcrumbs.tsx | 10 +--
 .../react-aria-components/src/Disclosure.tsx  |  6 +-
 .../test/Breadcrumbs.test.js                  |  4 +-
 .../test/Disclosure.test.js                   | 17 +++++
 .../test/TagGroup.test.js                     | 14 ++--
 starters/tailwind/src/SearchField.tsx         |  2 +-
 yarn.lock                                     |  1 +
 32 files changed, 165 insertions(+), 88 deletions(-)

diff --git a/packages/@react-aria/gridlist/src/useGridListItem.ts b/packages/@react-aria/gridlist/src/useGridListItem.ts
index 2ecfc4f8125..f4c32cdfa31 100644
--- a/packages/@react-aria/gridlist/src/useGridListItem.ts
+++ b/packages/@react-aria/gridlist/src/useGridListItem.ts
@@ -283,10 +283,10 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     onKeyDown,
     onFocus,
     // 'aria-label': [(node.textValue || undefined), rowAnnouncement].filter(Boolean).join(', '),
-    'aria-label': node.textValue || undefined,
+    'aria-label': node['aria-label'] || node.textValue || undefined,
     'aria-selected': state.selectionManager.canSelectItem(node.key) ? state.selectionManager.isSelected(node.key) : undefined,
     'aria-disabled': state.selectionManager.isDisabled(node.key) || undefined,
-    'aria-labelledby': descriptionId && node.textValue ? `${getRowId(state, node.key)} ${descriptionId}` : undefined,
+    'aria-labelledby': descriptionId && (node['aria-label'] || node.textValue) ? `${getRowId(state, node.key)} ${descriptionId}` : undefined,
     id: getRowId(state, node.key)
   });
 
diff --git a/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
index 76996eea018..7fa983a51b1 100644
--- a/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
@@ -12,7 +12,7 @@
 
 import {Breadcrumb, Breadcrumbs} from '../src';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import {Many} from '../stories/Breadcrumbs.stories';
+import {type IMany, Many} from '../stories/Breadcrumbs.stories';
 import type {Meta, StoryObj} from '@storybook/react';
 import {ReactNode} from 'react';
 import {shortName} from './utils';
@@ -27,7 +27,7 @@ const meta: Meta<typeof Breadcrumbs> = {
 
 export default meta;
 
-export const Dynamic: StoryObj<typeof Breadcrumbs> = {
+export const Dynamic: StoryObj<IMany> = {
   ...Many,
   parameters: {
     // TODO: move these options back to meta above once we get strings for ar-AE. This is just to prevent the RTL story's config from actually applying
diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json
index cb644b964bc..4d996a0c34c 100644
--- a/packages/@react-spectrum/s2/package.json
+++ b/packages/@react-spectrum/s2/package.json
@@ -164,6 +164,7 @@
     "@react-stately/utils": "^3.10.8",
     "@react-types/dialog": "^3.5.22",
     "@react-types/grid": "^3.3.6",
+    "@react-types/overlays": "^3.9.2",
     "@react-types/provider": "^3.8.13",
     "@react-types/shared": "^3.32.1",
     "@react-types/table": "^3.13.4",
diff --git a/packages/@react-spectrum/s2/src/ActionBar.tsx b/packages/@react-spectrum/s2/src/ActionBar.tsx
index e664e66f636..993d3632e90 100644
--- a/packages/@react-spectrum/s2/src/ActionBar.tsx
+++ b/packages/@react-spectrum/s2/src/ActionBar.tsx
@@ -15,11 +15,12 @@ import {announce} from '@react-aria/live-announcer';
 import {CloseButton} from './CloseButton';
 import {ContextValue, SlotProps} from 'react-aria-components';
 import {createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared';
 import {FocusScope, useKeyboard} from 'react-aria';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {lightDark, style} from '../style' with {type: 'macro'};
+import {StyleProps} from './style-utils' with { type: 'macro' };
 import {useControlledState} from '@react-stately/utils';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useEnterAnimation, useExitAnimation, useObjectRef, useResizeObserver} from '@react-aria/utils';
@@ -74,7 +75,7 @@ const actionBarStyles = style({
   }
 });
 
-export interface ActionBarProps extends SlotProps {
+export interface ActionBarProps extends SlotProps, StyleProps, DOMProps {
   /** A list of ActionButtons to display. */
   children: ReactNode,
   /** Whether the ActionBar should be displayed with a emphasized style. */
@@ -106,7 +107,8 @@ export const ActionBar = forwardRef(function ActionBar(props: ActionBarProps, re
 });
 
 const ActionBarInner = forwardRef(function ActionBarInner(props: ActionBarProps & {isExiting: boolean}, ref: ForwardedRef<HTMLDivElement | null>) {
-  let {isEmphasized, selectedItemCount = 0, children, onClearSelection, isExiting} = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {isEmphasized, selectedItemCount = 0, children, onClearSelection, isExiting, slot, ...otherProps} = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
 
   // Store the last count greater than zero so that we can retain it while rendering the fade-out animation.
@@ -158,6 +160,7 @@ const ActionBarInner = forwardRef(function ActionBarInner(props: ActionBarProps
     <FocusScope restoreFocus>
       <div
         ref={objectRef}
+        {...otherProps}
         {...keyboardProps}
         className={actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isEntering, isExiting})}
         style={{insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`}}>
diff --git a/packages/@react-spectrum/s2/src/ActionMenu.tsx b/packages/@react-spectrum/s2/src/ActionMenu.tsx
index ed891a42d70..c533d2c1702 100644
--- a/packages/@react-spectrum/s2/src/ActionMenu.tsx
+++ b/packages/@react-spectrum/s2/src/ActionMenu.tsx
@@ -29,6 +29,11 @@ export interface ActionMenuProps<T> extends
   Pick<MenuProps<T>, 'children' | 'items' | 'disabledKeys' | 'onAction'>,
   Pick<ActionButtonProps, 'isDisabled' | 'isQuiet' | 'autoFocus' | 'size'>,
   StyleProps, DOMProps, AriaLabelingProps {
+  /**
+   * The size of the Menu.
+   *
+   * @default 'M'
+   */
   menuSize?: 'S' | 'M' | 'L' | 'XL'
 }
 
diff --git a/packages/@react-spectrum/s2/src/AlertDialog.tsx b/packages/@react-spectrum/s2/src/AlertDialog.tsx
index dfa156cf042..7395b3169be 100644
--- a/packages/@react-spectrum/s2/src/AlertDialog.tsx
+++ b/packages/@react-spectrum/s2/src/AlertDialog.tsx
@@ -29,7 +29,10 @@ import {UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface AlertDialogProps extends DOMProps, UnsafeStyles {
-  /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog.  */
+  /**
+   * The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog.
+   * @default 'confirmation'
+   */
   variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning',
   /** The title of the AlertDialog. */
   title: string,
diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
index a8369b9e757..689055cfae9 100644
--- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
@@ -62,9 +62,9 @@ interface BreadcrumbsStyleProps {
   // TODO: showRoot?: boolean,
 }
 
-export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className' | keyof GlobalDOMAttributes>, BreadcrumbsStyleProps, StyleProps {
+export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, BreadcrumbsStyleProps, StyleProps {
   /** The children of the Breadcrumbs. */
-  children: ReactNode
+  children: ReactNode | ((item: T) => ReactNode)
 }
 
 export const BreadcrumbsContext = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);
diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
index 0590b534438..7cd5a31f5e0 100644
--- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
@@ -11,6 +11,7 @@ import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeStyles} from '../style/runtime';
+import {Placement} from '@react-types/overlays';
 import {Popover, PopoverDialogProps} from './Popover';
 import {space, style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils' with { type: 'macro' };
@@ -29,6 +30,11 @@ export interface ContextualHelpProps extends
   Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,
   Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,
   ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {
+  /**
+   * The placement of the popover with respect to the action button.
+   * @default 'bottom start'
+   */
+  placement?: Placement,
   /** Contents of the Contextual Help popover. */
   children: ReactNode,
   /**
@@ -58,11 +64,10 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
   let {
     children,
     defaultOpen,
-    // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.
+    containerPadding = 8,
     size = 'XS',
     crossOffset,
     isOpen,
-    offset = 8,
     onOpenChange,
     placement = 'bottom start',
     shouldFlip,
@@ -101,8 +106,8 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
         padding="none"
         placement={placement}
         shouldFlip={shouldFlip}
-        // not working => containerPadding={containerPadding}
-        offset={offset}
+        containerPadding={containerPadding}
+        offset={8}
         crossOffset={crossOffset}
         hideArrow>
         <div
diff --git a/packages/@react-spectrum/s2/src/DatePicker.tsx b/packages/@react-spectrum/s2/src/DatePicker.tsx
index 7ffc20b7b9f..e707c911ffe 100644
--- a/packages/@react-spectrum/s2/src/DatePicker.tsx
+++ b/packages/@react-spectrum/s2/src/DatePicker.tsx
@@ -20,6 +20,7 @@ import {
   Dialog,
   FormContext,
   OverlayTriggerStateContext,
+  PopoverProps,
   Provider,
   TimeValue
 } from 'react-aria-components';
@@ -27,7 +28,7 @@ import {baseColor, focusRing, fontRelative, space, style} from '../style' with {
 import {Calendar, CalendarProps, IconContext, TimeField} from '../';
 import CalendarIcon from '../s2wf-icons/S2_Icon_Calendar_20_N.svg';
 import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, PropsWithChildren, ReactElement, Ref, useContext, useRef, useState} from 'react';
+import {createContext, forwardRef, ReactElement, ReactNode, Ref, useContext, useRef, useState} from 'react';
 import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
 import {FieldGroup, FieldLabel, HelpText} from './Field';
 import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
@@ -42,6 +43,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 export interface DatePickerProps<T extends DateValue> extends
   Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
   Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
+  Pick<PopoverProps, 'shouldFlip'>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {
@@ -203,7 +205,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
               <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />
               <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />
             </FieldGroup>
-            <CalendarPopover>
+            <CalendarPopover shouldFlip={props.shouldFlip}>
               <Calendar
                 visibleMonths={maxVisibleMonths}
                 createCalendar={createCalendar} />
@@ -238,9 +240,10 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   );
 });
 
-export function CalendarPopover(props: PropsWithChildren): ReactElement {
+export function CalendarPopover(props: Omit<PopoverProps, 'children'> & {children: ReactNode}): ReactElement {
   return (
     <Popover
+      {...props}
       hideArrow
       padding="none">
       <div
diff --git a/packages/@react-spectrum/s2/src/DateRangePicker.tsx b/packages/@react-spectrum/s2/src/DateRangePicker.tsx
index 85c325c06c0..b12101c94f1 100644
--- a/packages/@react-spectrum/s2/src/DateRangePicker.tsx
+++ b/packages/@react-spectrum/s2/src/DateRangePicker.tsx
@@ -15,7 +15,8 @@ import {
   DateRangePickerProps as AriaDateRangePickerProps,
   ContextValue,
   DateValue,
-  FormContext
+  FormContext,
+  PopoverProps
 } from 'react-aria-components';
 import {CalendarButton, CalendarPopover, timeField} from './DatePicker';
 import {createContext, forwardRef, ReactElement, Ref, useContext, useState} from 'react';
@@ -34,6 +35,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 export interface DateRangePickerProps<T extends DateValue> extends
   Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
   Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
+  Pick<PopoverProps, 'shouldFlip'>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {
@@ -143,7 +145,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
                 <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />
               </div>
             </FieldGroup>
-            <CalendarPopover>
+            <CalendarPopover shouldFlip={props.shouldFlip}>
               <RangeCalendar
                 visibleMonths={maxVisibleMonths}
                 createCalendar={createCalendar} />
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
index 5fa7fda5aa0..0a5350e2826 100644
--- a/packages/@react-spectrum/s2/src/Picker.tsx
+++ b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -676,7 +676,7 @@ function DefaultProvider({context, value, children}: {context: React.Context<any
   return <context.Provider value={value}>{children}</context.Provider>;
 }
 
-export interface PickerSectionProps<T extends object> extends Omit<SectionProps<T>, keyof GlobalDOMAttributes> {}
+export interface PickerSectionProps<T extends object> extends Omit<SectionProps<T>, 'style' | 'className' | keyof GlobalDOMAttributes>, StyleProps {}
 export function PickerSection<T extends object>(props: PickerSectionProps<T>): ReactNode {
   let {size} = useContext(InternalPickerContext);
   return (
diff --git a/packages/@react-spectrum/s2/src/Provider.tsx b/packages/@react-spectrum/s2/src/Provider.tsx
index b1c34d198c4..bfbae3cc936 100644
--- a/packages/@react-spectrum/s2/src/Provider.tsx
+++ b/packages/@react-spectrum/s2/src/Provider.tsx
@@ -13,6 +13,8 @@
 import type {ColorScheme, Router} from '@react-types/provider';
 import {colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {createContext, JSX, ReactNode, useContext} from 'react';
+import {DOMProps} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
 import {Fonts} from './Fonts';
 import {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};
 import {I18nProvider, RouterProvider, useLocale} from 'react-aria-components';
@@ -20,7 +22,7 @@ import {mergeStyles} from '../style/runtime';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 
-export interface ProviderProps extends UnsafeStyles {
+export interface ProviderProps extends UnsafeStyles, DOMProps {
   /** The content of the Provider. */
   children: ReactNode,
   /**
@@ -113,6 +115,7 @@ function ProviderInner(props: ProviderProps) {
   let {locale, direction} = useLocale();
   return (
     <Element
+      {...filterDOMProps(props)}
       lang={locale}
       dir={direction}
       style={UNSAFE_style}
diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx
index f62161bf0b1..ee0b46aa718 100644
--- a/packages/@react-spectrum/s2/src/StatusLight.tsx
+++ b/packages/@react-spectrum/s2/src/StatusLight.tsx
@@ -26,8 +26,10 @@ interface StatusLightStyleProps {
   /**
    * The variant changes the color of the status light.
    * When status lights have a semantic meaning, they should use the variant for semantic colors.
+   *
+   * @default 'neutral'
    */
-  variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',
+  variant?: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',
   /**
    * The size of the StatusLight.
    *
@@ -108,7 +110,7 @@ const light = style<StatusLightStyleProps & {isSkeleton: boolean}>({
  */
 export const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);
-  let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;
+  let {children, size = 'M', variant = 'neutral', role, UNSAFE_className = '', UNSAFE_style, styles} = props;
   let domRef = useDOMRef(ref);
   let isSkeleton = useIsSkeleton();
 
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index cf47ed4d6cf..05dd53c7ee4 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -58,7 +58,7 @@ import Chevron from '../ui-icons/Chevron';
 import Close from '../s2wf-icons/S2_Icon_Close_20_N.svg';
 import {ColumnSize} from '@react-types/table';
 import {CustomDialog, DialogContainer} from '..';
-import {DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState, Node} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState, Node} from '@react-types/shared';
 import {getActiveElement, getOwnerDocument, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 import {IconContext} from './Icon';
@@ -120,7 +120,7 @@ interface S2TableProps {
 }
 
 // TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
-export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TableProps {
+export interface TableViewProps extends Omit<RACTableProps, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, S2TableProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight
 }
diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index cc87e336ce2..7b039822c43 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -35,7 +35,7 @@ import {ClearButton} from './ClearButton';
 import {Collection, CollectionBuilder} from '@react-aria/collections';
 import {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {DOMRef, DOMRefValue, GlobalDOMAttributes, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';
+import {DOMRef, DOMRefValue, GlobalDOMAttributes, HelpTextProps, LabelableProps, Node, SpectrumLabelableProps} from '@react-types/shared';
 import {FieldLabel, helpTextStyles} from './Field';
 import {flushSync} from 'react-dom';
 import {FormContext, useFormProps} from './Form';
@@ -52,7 +52,7 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 // Get types from RSP and extend those?
-export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes> {
+export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, LabelableProps {
   /** The children of the tag. */
   children: ReactNode
 }
diff --git a/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx b/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
index 79a972a40da..022f0bc0119 100644
--- a/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
@@ -13,10 +13,10 @@
 import {ActionButtonGroupProps, actionGroupStyle} from './ActionButtonGroup';
 import {ContextValue, ToggleButtonGroup as RACToggleButtonGroup, ToggleButtonGroupProps as RACToggleButtonGroupProps} from 'react-aria-components';
 import {createContext, ForwardedRef, forwardRef} from 'react';
-import {GlobalDOMAttributes} from '@react-types/shared';
+import {DOMProps, GlobalDOMAttributes} from '@react-types/shared';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RACToggleButtonGroupProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes> {
+export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RACToggleButtonGroupProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, DOMProps {
   /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
   isEmphasized?: boolean
 }
diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx
index abeaa5c0352..ea3ea7f3b62 100644
--- a/packages/@react-spectrum/s2/src/Tooltip.tsx
+++ b/packages/@react-spectrum/s2/src/Tooltip.tsx
@@ -23,11 +23,11 @@ import {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {typ
 import {ColorScheme} from '@react-types/provider';
 import {ColorSchemeContext} from './Provider';
 import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';
-import {DOMRef, GlobalDOMAttributes} from '@react-types/shared';
+import {DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
-export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay' | keyof GlobalDOMAttributes>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'> {
+export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay' | keyof GlobalDOMAttributes>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'crossOffset'> {
   /** The content of the tooltip. */
   children: ReactNode,
   /**
@@ -38,7 +38,7 @@ export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentPro
   placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom'
 }
 
-export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles {
   /** The content of the tooltip. */
   children: ReactNode
 }
@@ -139,7 +139,6 @@ export const Tooltip = forwardRef(function Tooltip(props: TooltipProps, ref: DOM
   let {
     containerPadding,
     crossOffset,
-    offset,
     placement = 'top',
     shouldFlip
   } = useContext(InternalTooltipTriggerContext);
@@ -166,7 +165,7 @@ export const Tooltip = forwardRef(function Tooltip(props: TooltipProps, ref: DOM
       arrowBoundaryOffset={borderRadius}
       containerPadding={containerPadding}
       crossOffset={crossOffset}
-      offset={offset}
+      offset={4}
       placement={placement}
       shouldFlip={shouldFlip}
       ref={tooltipRef}
@@ -195,7 +194,6 @@ export function TooltipTrigger(props: TooltipTriggerProps): ReactNode {
   let {
     containerPadding,
     crossOffset,
-    offset,
     placement,
     shouldFlip,
     ...triggerProps
@@ -207,7 +205,6 @@ export function TooltipTrigger(props: TooltipTriggerProps): ReactNode {
         value={{
           containerPadding: containerPadding,
           crossOffset: crossOffset,
-          offset: offset,
           placement: placement,
           shouldFlip: shouldFlip
         }}>
diff --git a/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx b/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
index ab5110309d2..0a6a6affc8f 100644
--- a/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Breadcrumb, Breadcrumbs} from '../src';
+import {Breadcrumb, Breadcrumbs, BreadcrumbsProps} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof Breadcrumbs> = {
@@ -57,24 +57,31 @@ export const Example: Story = {
   )
 };
 
-let items = [
+interface Item {
+  id: string,
+  name: string
+}
+let items: Item[] = [
   {id: 'home', name: 'Home'},
   {id: 'react-aria', name: 'React Aria'},
   {id: 'breadcrumbs', name: 'Breadcrumbs'}
 ];
-export const WithActions: Story = {
-  render: (args: any) => (
-    <Breadcrumbs onAction={action('onAction')} items={items} {...args}>
-      {item => (
-        <Breadcrumb href={item.href}>
-          {item.name}
-        </Breadcrumb>
-      )}
-    </Breadcrumbs>
-  )
+
+const BreadcrumbsExampleDynamic = (args: BreadcrumbsProps<Item>) => (
+  <Breadcrumbs onAction={action('onAction')} items={items} {...args}>
+    {item => (
+      <Breadcrumb>
+        {item.name}
+      </Breadcrumb>
+    )}
+  </Breadcrumbs>
+);
+
+export const WithActions: StoryObj<typeof BreadcrumbsExampleDynamic> = {
+  render: BreadcrumbsExampleDynamic
 };
 
-let manyItems = [
+let manyItems: Item[] = [
   {id: 'Folder 1', name: 'The quick brown fox jumps over'},
   {id: 'Folder 2', name: 'My Documents'},
   {id: 'Folder 3', name: 'Kangaroos jump high'},
@@ -83,9 +90,9 @@ let manyItems = [
   {id: 'Folder 6', name: 'Wattle trees'},
   {id: 'Folder 7', name: 'April 7'}
 ];
-
-export const Many: Story = {
-  render: (args: any) => (
+export type IMany = typeof BreadcrumbsExampleDynamic;
+export const Many: StoryObj<typeof BreadcrumbsExampleDynamic> = {
+  render: (args: BreadcrumbsProps<Item>) => (
     <div style={{width: '400px', resize: 'horizontal', overflow: 'hidden', padding: '4px'}}>
       <Breadcrumbs items={manyItems} {...args}>
         {item => (
@@ -98,7 +105,10 @@ export const Many: Story = {
   )
 };
 
-let manyItemsWithLinks = [
+interface ItemWithLink extends Item {
+  href: string
+}
+let manyItemsWithLinks: ItemWithLink[] = [
   {id: 'Folder 1', name: 'The quick brown fox jumps over', href: '/folder1'},
   {id: 'Folder 2', name: 'My Documents', href: '/folder2'},
   {id: 'Folder 3', name: 'Kangaroos jump high', href: '/folder3'},
@@ -108,16 +118,16 @@ let manyItemsWithLinks = [
   {id: 'Folder 7', name: 'April 7', href: '/folder7'}
 ];
 
-export const ManyWithLinks: Story = {
-  render: (args: any) => (
-    <div style={{width: '400px', resize: 'horizontal', overflow: 'hidden', padding: '4px'}}>
-      <Breadcrumbs items={manyItemsWithLinks} {...args}>
-        {item => (
-          <Breadcrumb href={item.href}>
-            {item.name}
-          </Breadcrumb>
-        )}
-      </Breadcrumbs>
-    </div>
-  )
+const BreadcrumbsExampleDynamicWithLinks = (args: BreadcrumbsProps<ItemWithLink>) => (
+  <Breadcrumbs onAction={action('onAction')} items={manyItemsWithLinks} {...args}>
+    {item => (
+      <Breadcrumb href={item.href}>
+        {item.name}
+      </Breadcrumb>
+    )}
+  </Breadcrumbs>
+);
+
+export const ManyWithLinks: StoryObj<typeof BreadcrumbsExampleDynamicWithLinks> = {
+  render: BreadcrumbsExampleDynamicWithLinks
 };
diff --git a/packages/@react-spectrum/s2/test/TagGroup.test.tsx b/packages/@react-spectrum/s2/test/TagGroup.test.tsx
index 55381107a14..9deff9e855d 100644
--- a/packages/@react-spectrum/s2/test/TagGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/TagGroup.test.tsx
@@ -15,6 +15,18 @@ import React from 'react';
 import {Tag, TagGroup} from '../src';
 import userEvent from '@testing-library/user-event';
 
+
+let TestTagGroup = ({tagGroupProps, itemProps}) => (
+  <TagGroup data-testid="group" {...tagGroupProps}>
+    <Tag {...itemProps} id="cat">Cat</Tag>
+    <Tag {...itemProps} id="dog">Dog</Tag>
+    <Tag {...itemProps} id="kangaroo">Kangaroo</Tag>
+  </TagGroup>
+);
+
+let renderTagGroup = (tagGroupProps = {}, itemProps = {}) => render(<TestTagGroup {...{tagGroupProps, itemProps}} />);
+
+
 describe('TagGroup', () => {
   let user;
   beforeAll(() => {
@@ -52,4 +64,12 @@ describe('TagGroup', () => {
     expect(onRemove).toHaveBeenCalledTimes(1);
     expect(onRemove).toHaveBeenCalledWith(new Set(['chocolate']));
   });
+
+  it('should aria label on tags', () => {
+    let {getAllByRole} = renderTagGroup({label: 'TagGroup label'}, {'aria-label': 'Test'});
+
+    for (let row of getAllByRole('row')) {
+      expect(row).toHaveAttribute('aria-label', 'Test');
+    }
+  });
 });
diff --git a/packages/@react-spectrum/tree/test/TreeView.test.tsx b/packages/@react-spectrum/tree/test/TreeView.test.tsx
index e7658edd446..f87c26f13a3 100644
--- a/packages/@react-spectrum/tree/test/TreeView.test.tsx
+++ b/packages/@react-spectrum/tree/test/TreeView.test.tsx
@@ -518,7 +518,7 @@ describe('Tree', () => {
     let rows = getAllByRole('row');
     expect(rows).toHaveLength(1);
 
-    expect(rows[0]).toHaveAttribute('aria-label', 'Test');
+    expect(rows[0]).toHaveAttribute('aria-label', 'test row');
   });
 
   describe('general interactions', () => {
diff --git a/packages/@react-types/combobox/src/index.d.ts b/packages/@react-types/combobox/src/index.d.ts
index 5b96371b82e..3558c274dc8 100644
--- a/packages/@react-types/combobox/src/index.d.ts
+++ b/packages/@react-types/combobox/src/index.d.ts
@@ -84,7 +84,7 @@ export interface SpectrumComboBoxProps<T> extends SpectrumTextInputBase, Omit<Ar
   /** Whether the ComboBox should be displayed with a quiet style. */
   isQuiet?: boolean,
   /** Alignment of the menu relative to the input target.
-   * @default 'end'
+   * @default 'start'
    */
   align?: 'start' | 'end',
   /**
diff --git a/packages/@react-types/numberfield/src/index.d.ts b/packages/@react-types/numberfield/src/index.d.ts
index 5139118794d..ab27493aa60 100644
--- a/packages/@react-types/numberfield/src/index.d.ts
+++ b/packages/@react-types/numberfield/src/index.d.ts
@@ -46,6 +46,9 @@ export interface AriaNumberFieldProps extends NumberFieldProps, DOMProps, AriaLa
 export interface SpectrumNumberFieldProps extends Omit<AriaNumberFieldProps, 'placeholder' | 'isInvalid' | 'validationState'>, SpectrumFieldValidation<number>, InputDOMProps, StyleProps, SpectrumLabelableProps {
   /** Whether the numberfield should be displayed with a quiet style. */
   isQuiet?: boolean,
-  /** Whether to hide the increment and decrement buttons. */
+  /**
+   * Whether to hide the increment and decrement buttons.
+   * @default false
+   */
   hideStepper?: boolean
 }
diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts
index a24d94a8338..9a20acc7ef9 100644
--- a/packages/@react-types/tabs/src/index.d.ts
+++ b/packages/@react-types/tabs/src/index.d.ts
@@ -60,7 +60,7 @@ export interface AriaTabPanelProps extends Omit<DOMProps, 'id'>, AriaLabelingPro
   id?: Key
 }
 
-export interface SpectrumTabsProps<T> extends AriaTabListBase, Omit<SingleSelection, 'onSelectionChange'>, DOMProps, StyleProps {
+export interface SpectrumTabsProps<T> extends AriaTabListBase, Omit<SingleSelection, 'onSelectionChange' | 'disallowEmptySelection'>, DOMProps, StyleProps {
   /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */
   children: ReactNode,
   /** The item objects for each tab, for dynamic collections. */
diff --git a/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx
index dd910602b6e..e29832d395e 100644
--- a/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx
@@ -11,7 +11,7 @@ export const description = 'Allows a user to toggle multiple options, with singl
 
 <PageDescription>{docs.exports.ToggleButtonGroup.description}</PageDescription>
 
-```tsx render docs={docs.exports.ToggleButtonGroup} links={docs.links} props={['selectionMode', 'orientation', 'size', 'density', 'staticColor', 'isQuiet', 'isJustified', 'isDisabled']} type="s2"
+```tsx render docs={docs.exports.ToggleButtonGroup} links={docs.links} props={['selectionMode', 'orientation', 'size', 'density', 'staticColor', 'isQuiet', 'isJustified', 'isDisabled', 'isEmphasized']} type="s2"
 "use client";
 import {ToggleButtonGroup, ToggleButton, Text} from '@react-spectrum/s2';
 import TextBold from '@react-spectrum/s2/icons/TextBold';
diff --git a/packages/dev/s2-docs/pages/s2/Tooltip.mdx b/packages/dev/s2-docs/pages/s2/Tooltip.mdx
index ec1955f281b..26e3f7d83f3 100644
--- a/packages/dev/s2-docs/pages/s2/Tooltip.mdx
+++ b/packages/dev/s2-docs/pages/s2/Tooltip.mdx
@@ -11,7 +11,7 @@ export const description = 'Displays a description of an element on hover or foc
 
 <PageDescription>{docs.exports.Tooltip.description}</PageDescription>
 
-```tsx render docs={docs.exports.TooltipTrigger} links={docs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="s2"
+```tsx render docs={docs.exports.TooltipTrigger} links={docs.links} props={['placement', 'crossOffset', 'shouldFlip']} type="s2"
 "use client";
 import {Tooltip, TooltipTrigger, ActionButton} from '@react-spectrum/s2';
 import Edit from '@react-spectrum/s2/icons/Edit';
diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx
index 21a0929ace6..9149c9c1ab7 100644
--- a/packages/react-aria-components/src/Breadcrumbs.tsx
+++ b/packages/react-aria-components/src/Breadcrumbs.tsx
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import {AriaBreadcrumbsProps, useBreadcrumbs} from 'react-aria';
+import {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -23,12 +24,11 @@ import {
 import {Collection, CollectionBuilder, CollectionNode, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext} from './Collection';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
 import {LinkContext} from './Link';
 import {Node} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 
-export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps, GlobalDOMAttributes<HTMLOListElement> {
+export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLOListElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-Breadcrumbs'
@@ -49,7 +49,7 @@ export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   [props, ref] = useContextProps(props, ref, BreadcrumbsContext);
   let {CollectionRoot} = useContext(CollectionRendererContext);
   let {navProps} = useBreadcrumbs(props);
-  let DOMProps = filterDOMProps(props, {global: true});
+  let DOMProps = filterDOMProps(props, {global: true, labelable: true});
 
   return (
     <CollectionBuilder content={<Collection {...props} />}>
@@ -82,7 +82,7 @@ export interface BreadcrumbRenderProps {
   isDisabled: boolean
 }
 
-export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>, GlobalDOMAttributes<HTMLLIElement>  {
+export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>, AriaLabelingProps, GlobalDOMAttributes<HTMLLIElement>  {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
    * @default 'react-aria-Breadcrumb'
@@ -116,7 +116,7 @@ export const Breadcrumb = /*#__PURE__*/ createLeafComponent(BreadcrumbNode, func
     defaultClassName: 'react-aria-Breadcrumb'
   });
 
-  let DOMProps = filterDOMProps(props as any, {global: true});
+  let DOMProps = filterDOMProps(props as any, {global: true, labelable: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/Disclosure.tsx b/packages/react-aria-components/src/Disclosure.tsx
index c4bb05d10aa..6bfebd7db32 100644
--- a/packages/react-aria-components/src/Disclosure.tsx
+++ b/packages/react-aria-components/src/Disclosure.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaDisclosureProps, useDisclosure, useFocusRing} from 'react-aria';
+import {AriaDisclosureProps, LabelAriaProps, useDisclosure, useFocusRing} from 'react-aria';
 import {ButtonContext} from './Button';
 import {
   ClassNameOrFunction,
@@ -206,7 +206,7 @@ export interface DisclosurePanelRenderProps {
   isFocusVisibleWithin: boolean
 }
 
-export interface DisclosurePanelProps extends RenderProps<DisclosurePanelRenderProps>, DOMProps, GlobalDOMAttributes<HTMLDivElement> {
+export interface DisclosurePanelProps extends RenderProps<DisclosurePanelRenderProps>, DOMProps, LabelAriaProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
    * @default 'react-aria-DisclosurePanel'
@@ -240,7 +240,7 @@ export const DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(func
       isFocusVisibleWithin
     }
   });
-  let DOMProps = filterDOMProps(props, {global: true});
+  let DOMProps = filterDOMProps(props, {global: true, labelable: true});
   return (
     <div
       {...mergeProps(DOMProps, renderProps, panelProps, focusWithinProps)}
diff --git a/packages/react-aria-components/test/Breadcrumbs.test.js b/packages/react-aria-components/test/Breadcrumbs.test.js
index ae631ce87d2..dbe0c7c4cc3 100644
--- a/packages/react-aria-components/test/Breadcrumbs.test.js
+++ b/packages/react-aria-components/test/Breadcrumbs.test.js
@@ -49,12 +49,14 @@ describe('Breadcrumbs', () => {
   });
 
   it('should support DOM props', () => {
-    let {getByRole, getAllByRole} = renderBreadcrumbs({'data-foo': 'bar'}, {'data-bar': 'foo'});
+    let {getByRole, getAllByRole} = renderBreadcrumbs({'data-foo': 'bar', 'aria-label': 'test group'}, {'data-bar': 'foo', 'aria-label': 'test item'});
     let breadcrumbs = getByRole('list');
     expect(breadcrumbs).toHaveAttribute('data-foo', 'bar');
+    expect(breadcrumbs).toHaveAttribute('aria-label', 'test group');
 
     for (let item of getAllByRole('listitem')) {
       expect(item).toHaveAttribute('data-bar', 'foo');
+      expect(item).toHaveAttribute('aria-label', 'test item');
     }
   });
 
diff --git a/packages/react-aria-components/test/Disclosure.test.js b/packages/react-aria-components/test/Disclosure.test.js
index 1ebfb13e91e..00411840f50 100644
--- a/packages/react-aria-components/test/Disclosure.test.js
+++ b/packages/react-aria-components/test/Disclosure.test.js
@@ -77,6 +77,23 @@ describe('Disclosure', () => {
     expect(disclosure).toHaveAttribute('data-foo', 'bar');
   });
 
+  it('should support aria label', () => {
+    const {container, getByRole} = render(
+      <Disclosure>
+        <Heading level={3} aria-label="Test disclosure heading">
+          <Button slot="trigger">Trigger</Button>
+        </Heading>
+        <DisclosurePanel aria-label="Test disclosure panel">
+          <p>Content</p>
+        </DisclosurePanel>
+      </Disclosure>
+    );
+    const heading = getByRole('heading');
+    expect(heading).toHaveAttribute('aria-label', 'Test disclosure heading');
+    const panel = container.querySelector('.react-aria-DisclosurePanel');
+    expect(panel).toHaveAttribute('aria-label', 'Test disclosure panel');
+  });
+
   it('should support disabled state', () => {
     const {getByTestId, getByRole, queryByText} = render(
       <Disclosure data-testid="disclosure" isDisabled>
diff --git a/packages/react-aria-components/test/TagGroup.test.js b/packages/react-aria-components/test/TagGroup.test.js
index 2dad220810a..adc4f07135b 100644
--- a/packages/react-aria-components/test/TagGroup.test.js
+++ b/packages/react-aria-components/test/TagGroup.test.js
@@ -527,9 +527,9 @@ describe('TagGroup', () => {
       let {getAllByRole} = renderTagGroup({selectionMode: 'single', onSelectionChange});
       let items = getAllByRole('row');
 
-      await user.pointer({target: items[0], keys: '[MouseLeft>]'});   
+      await user.pointer({target: items[0], keys: '[MouseLeft>]'});
       expect(onSelectionChange).toBeCalledTimes(1);
-  
+
       await user.pointer({target: items[0], keys: '[/MouseLeft]'});
       expect(onSelectionChange).toBeCalledTimes(1);
     });
@@ -539,9 +539,9 @@ describe('TagGroup', () => {
       let {getAllByRole} = renderTagGroup({selectionMode: 'single', onSelectionChange, shouldSelectOnPressUp: false});
       let items = getAllByRole('row');
 
-      await user.pointer({target: items[0], keys: '[MouseLeft>]'});   
+      await user.pointer({target: items[0], keys: '[MouseLeft>]'});
       expect(onSelectionChange).toBeCalledTimes(1);
-  
+
       await user.pointer({target: items[0], keys: '[/MouseLeft]'});
       expect(onSelectionChange).toBeCalledTimes(1);
     });
@@ -551,9 +551,9 @@ describe('TagGroup', () => {
       let {getAllByRole} = renderTagGroup({selectionMode: 'single', onSelectionChange, shouldSelectOnPressUp: true});
       let items = getAllByRole('row');
 
-      await user.pointer({target: items[0], keys: '[MouseLeft>]'});   
+      await user.pointer({target: items[0], keys: '[MouseLeft>]'});
       expect(onSelectionChange).toBeCalledTimes(0);
-  
+
       await user.pointer({target: items[0], keys: '[/MouseLeft]'});
       expect(onSelectionChange).toBeCalledTimes(1);
     });
@@ -572,7 +572,7 @@ describe('TagGroup', () => {
       let {getByRole} = renderTagGroup({selectionMode: 'multiple'}, {}, {onPressStart, onPressEnd, onPress, onClick});
       let tester = testUtilUser.createTester('GridList', {root: getByRole('grid')});
       await tester.triggerRowAction({row: 1, interactionType});
-  
+
       expect(onPressStart).toHaveBeenCalledTimes(1);
       expect(onPressEnd).toHaveBeenCalledTimes(1);
       expect(onPress).toHaveBeenCalledTimes(1);
diff --git a/starters/tailwind/src/SearchField.tsx b/starters/tailwind/src/SearchField.tsx
index 12e1d095eca..9c155fc889a 100644
--- a/starters/tailwind/src/SearchField.tsx
+++ b/starters/tailwind/src/SearchField.tsx
@@ -14,7 +14,7 @@ export interface SearchFieldProps extends AriaSearchFieldProps {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
-  placeholder?: string
+  placeholder?: string;
 }
 
 export function SearchField(
diff --git a/yarn.lock b/yarn.lock
index 46ceb7b0a44..9ec7b6d341c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7568,6 +7568,7 @@ __metadata:
     "@react-stately/utils": "npm:^3.10.8"
     "@react-types/dialog": "npm:^3.5.22"
     "@react-types/grid": "npm:^3.3.6"
+    "@react-types/overlays": "npm:^3.9.2"
     "@react-types/provider": "npm:^3.8.13"
     "@react-types/shared": "npm:^3.32.1"
     "@react-types/table": "npm:^3.13.4"

From 4ad97714c8a5790fa0f7ebc100889fb85a01d4e4 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 9 Dec 2025 12:44:44 -0800
Subject: [PATCH 02/10] docs: Fix deploying starter storybooks (#9310)

* Deploy static assets before HTML

* Fix starter build
---
 .circleci/config.yml                     | 6 +++---
 Makefile                                 | 6 +++---
 packages/dev/s2-docs/src/StarterKits.tsx | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 4ca3c8660de..40286df011e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -68,15 +68,15 @@ commands:
               circleci-agent step halt
             fi
       - aws-s3/sync:
-          arguments: --cache-control public,max-age=300,stale-while-revalidate=300 --exclude * --include *.html --include *.txt --include *.json --include *.md --include *.xml
+          arguments: --cache-control public,max-age=31536000,immutable --include * --exclude *.html --exclude *.rsc --exclude *.txt --exclude *.json --exclude *.md --exclude *.xml
           from: /tmp/dist/s2-docs/<< parameters.dir >>
           to: << parameters.bucket >>
       - aws-s3/sync:
-          arguments: --cache-control public,max-age=300,stale-while-revalidate=300 --content-type text/x-component;charset=utf-8 --exclude * --include *.rsc
+          arguments: --cache-control public,max-age=300,stale-while-revalidate=300 --exclude * --include *.html --include *.txt --include *.json --include *.md --include *.xml
           from: /tmp/dist/s2-docs/<< parameters.dir >>
           to: << parameters.bucket >>
       - aws-s3/sync:
-          arguments: --cache-control public,max-age=31536000,immutable --include * --exclude *.html --exclude *.rsc --exclude *.txt --exclude *.json --exclude *.md --exclude *.xml
+          arguments: --cache-control public,max-age=300,stale-while-revalidate=300 --content-type text/x-component;charset=utf-8 --exclude * --include *.rsc
           from: /tmp/dist/s2-docs/<< parameters.dir >>
           to: << parameters.bucket >>
 
diff --git a/Makefile b/Makefile
index 177a21cc062..9cdfaecf903 100644
--- a/Makefile
+++ b/Makefile
@@ -157,13 +157,13 @@ s2-docs-stage:
 	DOCS_ENV=stage PUBLIC_URL=/ $(MAKE) build-s2-docs
 	cp packages/dev/docs/pages/disallow-robots.txt dist/s2-docs/react-aria/robots.txt
 	cp packages/dev/docs/pages/disallow-robots.txt dist/s2-docs/s2/robots.txt
-	$(MAKE) starters
+	$(MAKE) build-starters
 
 s2-docs-production:
 	DOCS_ENV=prod PUBLIC_URL=/ $(MAKE) build-s2-docs
 	cp packages/dev/docs/pages/robots.txt dist/s2-docs/react-aria/robots.txt
 	cp packages/dev/docs/pages/robots.txt dist/s2-docs/s2/robots.txt
-	$(MAKE) starters
+	$(MAKE) build-starters
 
 build-s2-docs:
 	yarn workspace @react-spectrum/s2-docs generate:md
@@ -184,7 +184,7 @@ build-s2-docs:
 	yarn parcel build 'packages/@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,stately}/*/docs/*.mdx'  --dist-dir dist/s2-docs/react-aria/$(PUBLIC_URL) --public-url $(PUBLIC_URL)
 
-starters:
+build-starters:
 	$(MAKE) starter-zip
 	$(MAKE) tailwind-starter
 	mv starters/docs/storybook-static dist/s2-docs/react-aria-starter
diff --git a/packages/dev/s2-docs/src/StarterKits.tsx b/packages/dev/s2-docs/src/StarterKits.tsx
index a96217082d6..ec08b05336a 100644
--- a/packages/dev/s2-docs/src/StarterKits.tsx
+++ b/packages/dev/s2-docs/src/StarterKits.tsx
@@ -18,7 +18,7 @@ export function StarterKits() {
   return (
     <section className={style({display: 'flex', gap: 16, flexWrap: 'wrap'})}>
       <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
-        <Card href={`react-aria-starter.${gitHash}.zip`}>
+        <Card href={`react-aria-starter.${gitHash}.zip`} download>
           <div className={style({display: 'flex', alignItems: 'center'})}>
             <svg viewBox="0 0 1000 1000" className={preview}>
               <rect fill="#639" width="100%" height="100%" />
@@ -34,7 +34,7 @@ export function StarterKits() {
         <Link isStandalone variant="secondary" href="react-aria-starter/" target="_blank" UNSAFE_style={{width: 'fit-content'}}>Preview</Link>
       </div>
       <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
-        <Card href={`react-aria-tailwind-starter.${gitHash}.zip`}>
+        <Card href={`react-aria-tailwind-starter.${gitHash}.zip`} download>
           <div className={style({display: 'flex', alignItems: 'center'})}>
             <svg fill="none" viewBox="-4 -4 62 41" className={preview}>
               <g clipPath="url(#prefix__clip0)">

From d3d1c923481e5d878d619bdf299cb6a7cab92197 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 9 Dec 2025 13:15:50 -0800
Subject: [PATCH 03/10] chore: remove unstable from S2 toast (#9311)

---
 packages/@react-spectrum/s2/src/index.ts       |  2 +-
 .../s2/stories/Toast.stories.tsx               | 16 ++++++++--------
 packages/dev/s2-docs/pages/s2/Toast.mdx        | 18 +++++++++---------
 packages/dev/s2-docs/src/CodePlatter.tsx       |  2 +-
 packages/dev/s2-docs/src/CopyButton.tsx        |  2 +-
 packages/dev/s2-docs/src/IconSearchView.tsx    |  2 +-
 packages/dev/s2-docs/src/IllustrationCards.tsx |  2 +-
 packages/dev/s2-docs/src/Layout.tsx            |  2 +-
 packages/dev/s2-docs/src/MarkdownMenu.tsx      |  2 +-
 packages/dev/s2-docs/src/client.tsx            |  2 +-
 10 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index 41aaa06b79d..f95bbc0496d 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -83,7 +83,7 @@ export {Tabs, TabList, Tab, TabPanel, TabsContext} from './Tabs';
 export {TagGroup, Tag, TagGroupContext} from './TagGroup';
 export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextField';
 export {TimeField, TimeFieldContext} from './TimeField';
-export {ToastContainer as UNSTABLE_ToastContainer, ToastQueue as UNSTABLE_ToastQueue} from './Toast';
+export {ToastContainer, ToastQueue} from './Toast';
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {ToggleButtonGroup, ToggleButtonGroupContext} from './ToggleButtonGroup';
 export {Tooltip, TooltipTrigger} from './Tooltip';
diff --git a/packages/@react-spectrum/s2/stories/Toast.stories.tsx b/packages/@react-spectrum/s2/stories/Toast.stories.tsx
index 1aeff128f1e..a783dcd73c8 100644
--- a/packages/@react-spectrum/s2/stories/Toast.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Toast.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Button, ButtonGroup, UNSTABLE_ToastContainer, UNSTABLE_ToastQueue} from '../src';
+import {Button, ButtonGroup, ToastContainer, ToastQueue} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 import {SpectrumToast, SpectrumToastValue, ToastOptions, ToastPlacement} from '../src/Toast';
 import {UNSTABLE_ToastStateContext} from 'react-aria-components';
@@ -52,35 +52,35 @@ type Story = StoryObj<ToastStoryProps>;
 export const Example: Story = {
   render: (args) => (
     <>
-      <UNSTABLE_ToastContainer placement={args.placement} />
+      <ToastContainer placement={args.placement} />
       <ButtonGroup>
         <Button
-          onPress={() => UNSTABLE_ToastQueue.neutral('Toast available', {...args, onAction: action('onAction'), onClose: action('onClose')})}
+          onPress={() => ToastQueue.neutral('Toast available', {...args, onAction: action('onAction'), onClose: action('onClose')})}
           variant="secondary">
           Show Neutral Toast
         </Button>
         <Button
-          onPress={() => UNSTABLE_ToastQueue.positive('Toast is done!', {...args, onAction: action('onAction'), onClose: action('onClose')})}
+          onPress={() => ToastQueue.positive('Toast is done!', {...args, onAction: action('onAction'), onClose: action('onClose')})}
           variant="primary">
           Show Positive Toast
         </Button>
         <Button
-          onPress={() => UNSTABLE_ToastQueue.negative('Toast is burned!', {...args, onAction: action('onAction'), onClose: action('onClose')})}
+          onPress={() => ToastQueue.negative('Toast is burned!', {...args, onAction: action('onAction'), onClose: action('onClose')})}
           variant="negative">
           Show Negative Toast
         </Button>
         <Button
-          onPress={() => UNSTABLE_ToastQueue.info('Toasting…', {...args, onAction: action('onAction'), onClose: action('onClose')})}
+          onPress={() => ToastQueue.info('Toasting…', {...args, onAction: action('onAction'), onClose: action('onClose')})}
           variant="accent">
           Show Info Toast
         </Button>
         <Button
-          onPress={() => UNSTABLE_ToastQueue.info('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', {...args, onClose: action('onClose')})}
+          onPress={() => ToastQueue.info('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', {...args, onClose: action('onClose')})}
           variant="accent">
           Show Long Toast
         </Button>
         <Button
-          onPress={() => UNSTABLE_ToastQueue.info('LoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquaUtenimaminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipeacommodoconsequat.', {...args, onClose: action('onClose')})}
+          onPress={() => ToastQueue.info('LoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquaUtenimaminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipeacommodoconsequat.', {...args, onClose: action('onClose')})}
           variant="accent">
           Show Long Word Toast
         </Button>
diff --git a/packages/dev/s2-docs/pages/s2/Toast.mdx b/packages/dev/s2-docs/pages/s2/Toast.mdx
index 203d5610b9a..a188e2e826f 100644
--- a/packages/dev/s2-docs/pages/s2/Toast.mdx
+++ b/packages/dev/s2-docs/pages/s2/Toast.mdx
@@ -1,7 +1,7 @@
 import {Layout} from '../../src/Layout';
 export default Layout;
 
-import {Button, ButtonGroup, UNSTABLE_ToastContainer as ToastContainer, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+import {Button, ButtonGroup, ToastContainer, ToastQueue} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 import {InterfaceType} from '../../src/types';
 import {VersionBadge} from '../../src/VersionBadge';
@@ -12,11 +12,11 @@ export const description = 'Displays a temporary notification of an action, erro
 
 # Toast
 
-<PageDescription>{docs.exports.UNSTABLE_ToastContainer.description}</PageDescription>
+<PageDescription>{docs.exports.ToastContainer.description}</PageDescription>
 
-```tsx render docs={docs.exports.UNSTABLE_ToastContainer} links={docs.links} props={['placement']} initialProps={{placement: 'bottom'}} type="s2" wide
+```tsx render docs={docs.exports.ToastContainer} links={docs.links} props={['placement']} initialProps={{placement: 'bottom'}} type="s2" wide
 "use client";
-import {UNSTABLE_ToastContainer as ToastContainer, ButtonGroup, Button, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+import {ToastContainer, ButtonGroup, Button, ToastQueue} from '@react-spectrum/s2';
 
 function App(props) {
   return (
@@ -55,7 +55,7 @@ Use the `actionLabel` and `onAction` options to add an action button to the toas
 
 ```tsx render
 "use client";
-import {Button, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+import {Button, ToastQueue} from '@react-spectrum/s2';
 
 <Button
   onPress={() => ToastQueue.info('An update is available', {
@@ -75,7 +75,7 @@ Use the `timeout` option to automatically hide a toast after a delay. For access
 
 ```tsx render
 "use client";
-import {Button, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+import {Button, ToastQueue} from '@react-spectrum/s2';
 
 <Button
   onPress={() => ToastQueue.positive('Toast is done!', {
@@ -93,7 +93,7 @@ Use the close function returned by `ToastQueue` to programmatically dismiss a to
 
 ```tsx render
 "use client";
-import {Button, UNSTABLE_ToastQueue as ToastQueue, Text} from '@react-spectrum/s2';
+import {Button, ToastQueue, Text} from '@react-spectrum/s2';
 import {useState} from 'react';
 
 function Example() {
@@ -123,11 +123,11 @@ function Example() {
 
 ### ToastContainer
 
-<PropTable component={docs.exports.UNSTABLE_ToastContainer} links={docs.links} />
+<PropTable component={docs.exports.ToastContainer} links={docs.links} />
 
 ### ToastQueue
 
-<InterfaceType {...docs.exports.UNSTABLE_ToastQueue} />
+<InterfaceType {...docs.exports.ToastQueue} />
 
 #### Toast Options
 
diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx
index ac9d5abf6d6..b82d72414bc 100644
--- a/packages/dev/s2-docs/src/CodePlatter.tsx
+++ b/packages/dev/s2-docs/src/CodePlatter.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {ActionButton, ActionButtonGroup, Button, ButtonGroup, Content, createIcon, Dialog, DialogContainer, Heading, Link, Menu, MenuItem, MenuTrigger, Text, UNSTABLE_ToastQueue as ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
+import {ActionButton, ActionButtonGroup, Button, ButtonGroup, Content, createIcon, Dialog, DialogContainer, Heading, Link, Menu, MenuItem, MenuTrigger, Text, ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
 import {CopyButton} from './CopyButton';
 import {createCodeSandbox, getCodeSandboxFiles} from './CodeSandbox';
 import {createStackBlitz} from './StackBlitz';
diff --git a/packages/dev/s2-docs/src/CopyButton.tsx b/packages/dev/s2-docs/src/CopyButton.tsx
index c045e19f9b5..b026849fecb 100644
--- a/packages/dev/s2-docs/src/CopyButton.tsx
+++ b/packages/dev/s2-docs/src/CopyButton.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {ActionButton, UNSTABLE_ToastQueue as ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
+import {ActionButton, ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Copy from '@react-spectrum/s2/icons/Copy';
 import React, {useEffect, useRef, useState} from 'react';
diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index 22eefb1ce6f..ab1ad77364d 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -4,7 +4,7 @@
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Close from '@react-spectrum/s2/icons/Close';
-import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text, ToastQueue} from '@react-spectrum/s2';
 import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {iconAliases} from './iconAliases.js';
 // @ts-ignore
diff --git a/packages/dev/s2-docs/src/IllustrationCards.tsx b/packages/dev/s2-docs/src/IllustrationCards.tsx
index f475fbd058b..3d9a968edd1 100644
--- a/packages/dev/s2-docs/src/IllustrationCards.tsx
+++ b/packages/dev/s2-docs/src/IllustrationCards.tsx
@@ -3,7 +3,7 @@
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
 // eslint-disable-next-line monorepo/no-internal-import
 import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
-import {Content, Heading, IllustratedMessage, pressScale, ProgressCircle, Radio, RadioGroup, SearchField, SegmentedControl, SegmentedControlItem, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+import {Content, Heading, IllustratedMessage, pressScale, ProgressCircle, Radio, RadioGroup, SearchField, SegmentedControl, SegmentedControlItem, Text, ToastQueue} from '@react-spectrum/s2';
 import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 // @ts-ignore
 import Gradient from '@react-spectrum/s2/icons/Gradient';
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index fdfda84ac22..180b1a880a2 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -14,7 +14,7 @@ import {ClassAPI} from './ClassAPI';
 import {Code} from './Code';
 import {CodeBlock} from './CodeBlock';
 import {CodePlatterProvider} from './CodePlatter';
-import {Divider, Provider, UNSTABLE_ToastContainer as ToastContainer} from '@react-spectrum/s2';
+import {Divider, Provider, ToastContainer} from '@react-spectrum/s2';
 import {ExampleSwitcher} from './ExampleSwitcher';
 import {getCurrentPage, getPages} from './getPages';
 import {getLibraryFromPage, getLibraryLabel} from './library';
diff --git a/packages/dev/s2-docs/src/MarkdownMenu.tsx b/packages/dev/s2-docs/src/MarkdownMenu.tsx
index 7391e0d5213..a902c7955a5 100644
--- a/packages/dev/s2-docs/src/MarkdownMenu.tsx
+++ b/packages/dev/s2-docs/src/MarkdownMenu.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {ActionButton, Menu, MenuItem, MenuTrigger, Text, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+import {ActionButton, Menu, MenuItem, MenuTrigger, Text, ToastQueue} from '@react-spectrum/s2';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Copy from '@react-spectrum/s2/icons/Copy';
 import {getLibraryFromUrl, getLibraryLabel} from './library';
diff --git a/packages/dev/s2-docs/src/client.tsx b/packages/dev/s2-docs/src/client.tsx
index 34da4c3d0b2..5ccd1d8f130 100644
--- a/packages/dev/s2-docs/src/client.tsx
+++ b/packages/dev/s2-docs/src/client.tsx
@@ -5,7 +5,7 @@ import {getBaseUrl, getRSCUrl} from './pageUtils';
 import {getPrefetchedPromise, prefetchRoute} from './prefetch';
 import {type ReactElement} from 'react';
 import {setNavigationPromise} from './Router';
-import {UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
+import {ToastQueue} from '@react-spectrum/s2';
 
 let isClientLink = (link: HTMLAnchorElement) => {
   return (

From 35aae1565b806925daf0006e0c28d44c7021a025 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 9 Dec 2025 13:26:00 -0800
Subject: [PATCH 04/10] docs: Update S2 getting started guide (#9306)

---
 packages/@react-spectrum/s2/src/index.ts      |   2 +-
 .../s2-docs/pages/react-aria/frameworks.mdx   |   2 +-
 packages/dev/s2-docs/pages/s2/CardView.mdx    |   2 +-
 packages/dev/s2-docs/pages/s2/ComboBox.mdx    |   2 +-
 packages/dev/s2-docs/pages/s2/Link.mdx        |   2 +-
 packages/dev/s2-docs/pages/s2/Menu.mdx        |   2 +-
 packages/dev/s2-docs/pages/s2/Picker.mdx      |   2 +-
 packages/dev/s2-docs/pages/s2/Provider.mdx    |   2 +-
 packages/dev/s2-docs/pages/s2/TableView.mdx   |   2 +-
 packages/dev/s2-docs/pages/s2/TagGroup.mdx    |   2 +-
 packages/dev/s2-docs/pages/s2/TreeView.mdx    |   2 +-
 .../dev/s2-docs/pages/s2/getting-started.mdx  | 726 ++++++++++++++----
 packages/dev/s2-docs/pages/s2/routing.mdx     | 273 -------
 packages/dev/s2-docs/pages/s2/styling.mdx     |  38 +-
 packages/dev/s2-docs/src/routers-s2.mdx       | 105 +++
 packages/dev/s2-docs/src/routers.mdx          |   1 -
 16 files changed, 673 insertions(+), 492 deletions(-)
 delete mode 100644 packages/dev/s2-docs/pages/s2/routing.mdx
 create mode 100644 packages/dev/s2-docs/src/routers-s2.mdx

diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index f95bbc0496d..0865c16c0cb 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -166,5 +166,5 @@ export type {ToggleButtonProps} from './ToggleButton';
 export type {ToggleButtonGroupProps} from './ToggleButtonGroup';
 export type {TooltipProps} from './Tooltip';
 export type {TreeViewProps, TreeViewItemProps, TreeViewItemContentProps, TreeViewLoadMoreItemProps} from './TreeView';
-export type {AutocompleteProps, FileTriggerProps, TooltipTriggerComponentProps as TooltipTriggerProps, SortDescriptor, Color, Key, Selection} from 'react-aria-components';
+export type {AutocompleteProps, FileTriggerProps, TooltipTriggerComponentProps as TooltipTriggerProps, SortDescriptor, Color, Key, Selection, RouterConfig} from 'react-aria-components';
 export type {ListData, TreeData, AsyncListData} from 'react-stately';
diff --git a/packages/dev/s2-docs/pages/react-aria/frameworks.mdx b/packages/dev/s2-docs/pages/react-aria/frameworks.mdx
index 726d539475e..4cd7207045e 100644
--- a/packages/dev/s2-docs/pages/react-aria/frameworks.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/frameworks.mdx
@@ -38,7 +38,7 @@ export const description = 'How to integrate with your framework.';
         import {isRTL} from 'react-aria-components';
         import {ClientProviders} from './provider';
 
-        export default function RootLayout({children}) {
+        export default async function RootLayout({children}) {
           // Get the user's preferred language from the Accept-Language header.
           // You could also get this from a database, URL param, etc.
           const acceptLanguage = (await headers()).get('accept-language');
diff --git a/packages/dev/s2-docs/pages/s2/CardView.mdx b/packages/dev/s2-docs/pages/s2/CardView.mdx
index f0608c8e887..85bbe72aafa 100644
--- a/packages/dev/s2-docs/pages/s2/CardView.mdx
+++ b/packages/dev/s2-docs/pages/s2/CardView.mdx
@@ -487,7 +487,7 @@ function PhotoCard({item, layout}: {item: Item, layout: string}) {
 
 ### Links
 
-Use the `href` prop on a Card to create a link. See the [client side routing guide](routing) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior.  See the [selection guide](selection) for more details.
+Use the `href` prop on a Card to create a link. See the [getting started guide](getting-started) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior.  See the [selection guide](selection) for more details.
 
 ```tsx render docs={docs.exports.CardView} links={docs.links} props={['selectionMode', 'selectionStyle']} wide type="s2"
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
index 19a920af145..c9885b0bfb7 100644
--- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx
+++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
@@ -230,7 +230,7 @@ function Example() {
 
 ### Links
 
-Use the `href` prop on a `<ComboBoxItem>` to create a link. See the [client side routing guide](routing) to learn how to integrate with your framework. Link items in a `ComboBox` are not selectable.
+Use the `href` prop on a `<ComboBoxItem>` to create a link. See the [getting started guide](getting-started) to learn how to integrate with your framework. Link items in a `ComboBox` are not selectable.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/Link.mdx b/packages/dev/s2-docs/pages/s2/Link.mdx
index d189e1d917b..97a0e7aa009 100644
--- a/packages/dev/s2-docs/pages/s2/Link.mdx
+++ b/packages/dev/s2-docs/pages/s2/Link.mdx
@@ -21,7 +21,7 @@ export const description = 'Allows a user to navigate to another page.';
 
 ## Events
 
-Links with an `href` will be handled by the browser, or via a [client side router](routing). Links without an `href` will be rendered as a `<span role="link">` instead of an `<a>`. Use the `onPress` event to handle user interaction.
+Links with an `href` will be handled by the browser, or via a [client side router](getting-started). Links without an `href` will be rendered as a `<span role="link">` instead of an `<a>`. Use the `onPress` event to handle user interaction.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/Menu.mdx b/packages/dev/s2-docs/pages/s2/Menu.mdx
index efbe599a95a..196640edff7 100644
--- a/packages/dev/s2-docs/pages/s2/Menu.mdx
+++ b/packages/dev/s2-docs/pages/s2/Menu.mdx
@@ -250,7 +250,7 @@ import {Menu, MenuTrigger, MenuItem, SubmenuTrigger, ActionButton} from '@react-
 
 ### Links
 
-Use the `href` prop on a `<MenuItem>` to create a link. See the [client side routing guide](routing) to learn how to integrate with your framework.
+Use the `href` prop on a `<MenuItem>` to create a link. See the [getting started guide](getting-started) to learn how to integrate with your framework.
 
 ```tsx render docs={docs.exports.Menu} links={docs.links} props={['hideLinkOutIcon']} type="s2" wide
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/Picker.mdx b/packages/dev/s2-docs/pages/s2/Picker.mdx
index 6f10ad0e1f0..9c753d2f71b 100644
--- a/packages/dev/s2-docs/pages/s2/Picker.mdx
+++ b/packages/dev/s2-docs/pages/s2/Picker.mdx
@@ -191,7 +191,7 @@ function AsyncLoadingExample() {
 
 ### Links
 
-Use the `href` prop on a `<PickerItem>` to create a link. See the [client side routing guide](routing) to learn how to integrate with your framework. Link items in a `Picker` are not selectable.
+Use the `href` prop on a `<PickerItem>` to create a link. See the [getting started guide](getting-started) to learn how to integrate with your framework. Link items in a `Picker` are not selectable.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/Provider.mdx b/packages/dev/s2-docs/pages/s2/Provider.mdx
index 6a1454145b0..1ce093aa288 100644
--- a/packages/dev/s2-docs/pages/s2/Provider.mdx
+++ b/packages/dev/s2-docs/pages/s2/Provider.mdx
@@ -84,7 +84,7 @@ By default, React Spectrum chooses the locale matching the user’s browser/oper
 
 ## Client side routing
 
-The Provider component accepts an optional `router` prop. This enables React Spectrum components that render links to perform client side navigation using your application or framework's client side router. See the [client side routing guide](routing) for details on how to set this up.
+The Provider component accepts an optional `router` prop. This enables React Spectrum components that render links to perform client side navigation using your application or framework's client side router. See the [getting started guide](getting-started) for details on how to set this up.
 
 ```tsx
 let navigate = useNavigateFromYourRouter();
diff --git a/packages/dev/s2-docs/pages/s2/TableView.mdx b/packages/dev/s2-docs/pages/s2/TableView.mdx
index e61b059574f..7801139f8ca 100644
--- a/packages/dev/s2-docs/pages/s2/TableView.mdx
+++ b/packages/dev/s2-docs/pages/s2/TableView.mdx
@@ -196,7 +196,7 @@ function AsyncSortTable() {
 
 ### Links
 
-Use the `href` prop on a Row to create a link. See the [client side routing guide](routing) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior.  See the [selection guide](selection) for more details.
+Use the `href` prop on a Row to create a link. See the [getting started guide](getting-started) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior.  See the [selection guide](selection) for more details.
 
 ```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode']} initialProps={{'aria-label': 'Bookmarks', selectionMode: 'multiple'}} wide type="s2"
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/TagGroup.mdx b/packages/dev/s2-docs/pages/s2/TagGroup.mdx
index cfa8e736cac..d654578de65 100644
--- a/packages/dev/s2-docs/pages/s2/TagGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/TagGroup.mdx
@@ -163,7 +163,7 @@ import {TagGroup, Tag, Image, Text} from '@react-spectrum/s2';
 
 ### Links
 
-Use the `href` prop on a `<Tag>` to create a link. See the [client side routing guide](routing) to learn how to integrate with your framework.
+Use the `href` prop on a `<Tag>` to create a link. See the [getting started guide](getting-started) to learn how to integrate with your framework.
 
 ```tsx render type="s2"
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/TreeView.mdx b/packages/dev/s2-docs/pages/s2/TreeView.mdx
index 6a3f7e43387..2d4da27a4a0 100644
--- a/packages/dev/s2-docs/pages/s2/TreeView.mdx
+++ b/packages/dev/s2-docs/pages/s2/TreeView.mdx
@@ -230,7 +230,7 @@ function AsyncLoadingExample() {
 
 ### Links
 
-Use the `href` prop on a `<TreeItem>` to create a link. See the [client side routing guide](routing) to learn how to integrate with your framework.
+Use the `href` prop on a `<TreeItem>` to create a link. See the [getting started guide](getting-started) to learn how to integrate with your framework.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/getting-started.mdx b/packages/dev/s2-docs/pages/s2/getting-started.mdx
index b98842f8c8a..337a816f25d 100644
--- a/packages/dev/s2-docs/pages/s2/getting-started.mdx
+++ b/packages/dev/s2-docs/pages/s2/getting-started.mdx
@@ -1,7 +1,19 @@
 import {Layout} from '../../src/Layout';
+export default Layout;
+
 import {InstallCommand} from '../../src/InstallCommand';
+import {Command} from '../../src/Command';
 import {BundlerSwitcher, BundlerSwitcherItem} from '../../src/BundlerSwitcher';
-export default Layout;
+import {Tabs, TabList, Tab, TabPanel, Text, InlineAlert, Heading, Content} from '@react-spectrum/s2';
+import {StepList, Step, Counter} from '../../src/Step';
+import Nextjs from '../../src/icons/Nextjs';
+import ReactRouter from '../../src/icons/ReactRouter';
+import Vite from '../../src/icons/Vite';
+import Parcel from '../../src/icons/Parcel';
+import Webpack from '../../src/icons/Webpack';
+import Rollup from '../../src/icons/Rollup';
+import ESBuild from '../../src/icons/Esbuild';
+import Routers from '../../src/routers-s2.mdx';
 import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
 
 export const section = 'Overview';
@@ -13,175 +25,549 @@ export const description = 'Getting started with React Spectrum';
 
 ## Installation
 
-Spectrum 2 in React Spectrum can be installed with your preferred package manager:
+Install React Spectrum with your preferred package manager.
 
 <InstallCommand pkg="@react-spectrum/s2" />
 
-## Configuring your bundler
-
-React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. Currently, Parcel v2.12.0 and newer supports macros out of the box. When using other build tools, you can install a plugin to enable them.
-
-First, install `unplugin-parcel-macros` using your package manager:
-
-<InstallCommand pkg="unplugin-parcel-macros" flags="--dev" />
-
-Then, configure your bundler to use the plugin:
-
-<BundlerSwitcher>
-  <BundlerSwitcherItem id="webpack" label="Webpack">
-    ```js
-    // webpack.config.js
-    const macros = require('unplugin-parcel-macros');
-
-    module.exports = {
-      // ...
-      plugins: [
-        macros.webpack()
-      ]
-    };
-    ```
-  </BundlerSwitcherItem>
-  <BundlerSwitcherItem id="next" label="Next.js">
-    ```js
-    // next.config.js
-    const macros = require('unplugin-parcel-macros');
-
-    // Create a single instance of the plugin that's shared between server and client builds.
-    let plugin = macros.webpack();
-
-    module.exports = {
-      webpack(config) {
-        config.plugins.push(plugin);
-        return config;
-      }
-    };
-    ```
-  </BundlerSwitcherItem>
-  <BundlerSwitcherItem id="vite" label="Vite">
-    ```js
-    // vite.config.js
-    import macros from 'unplugin-parcel-macros';
-
-    export default {
-      plugins: [
-        macros.vite()
-      ]
-    };
-    ```
-  </BundlerSwitcherItem>
-  <BundlerSwitcherItem id="rollup" label="Rollup">
-    ```js
-    // rollup.config.js
-    import macros from 'unplugin-parcel-macros';
-
-    export default {
-      plugins: [
-        macros.rollup()
-      ]
-    };
-    ```
-  </BundlerSwitcherItem>
-  <BundlerSwitcherItem id="esbuild" label="ESBuild">
-    ```js
-    // build.mjs
-    import {build} from 'esbuild';
-    import macros from 'unplugin-parcel-macros';
-
-    build({
-      plugins: [
-        macros.esbuild()
-      ]
-    });
-    ```
-  </BundlerSwitcherItem>
-</BundlerSwitcher>
-
-- Note that plugin order is important: `unplugin-parcel-macros` must run before other plugins like Babel.
-- You may also need to configure other tools such as TypeScript, Babel, ESLint, and Jest to support parsing import attributes. See [Usage with other tools](https://parceljs.org/features/macros/#usage-with-other-tools).
-- See the [examples folder](https://github.com/adobe/react-spectrum/tree/main/examples) for working setups with various build tools.
-- For details on optimizing the output CSS, see [CSS Optimization](styling#css-optimization).
-
-## Setting up your app
-
-Wrap your app in an S2 `<Provider>` component to load Spectrum 2 fonts for the user's locale and apply the appropriate Spectrum background layer for your app. When using S2 together with other versions of Spectrum, ensure that the S2 provider is the inner-most provider.
-
-```tsx
-import {Provider} from '@react-spectrum/s2';
-
-function App() {
-  return (
-    <Provider background="base">
-      {/* ... */}
-    </Provider>
-  );
-}
-```
-
-### Optimizing full-page apps
-
-When building a full page S2 app that's not embedded within a larger page, import `@react-spectrum/s2/page.css` to apply the background color and color scheme to the `<html>` element instead of the `<Provider>`. This ensures that the page has styles even before your JavaScript loads. A `<Provider>` is still necessary in addition to `page.css` in order to include the fonts, set the locale, etc.
-
-```tsx
-// Apply S2 background to the <html> element
-import '@react-spectrum/s2/page.css';
-
-function App() {
-  return (
-    <Provider>
-      {/* ... */}
-    </Provider>
-  );
-}
-```
-
-By default, this uses the `base` background layer. This can be customized by setting the `data-background` attribute on the `<html>` element.
-
-```tsx
-<html data-background="layer-1">
-  {/* ... */}
-</html>
-```
-
-### Server-side rendering
-
-When using SSR, the `<Provider>` component can be rendered as the root `<html>` element. The `locale` prop should always be specified to avoid hydration errors. `page.css` is not needed in this case.
-
-```tsx
-<Provider elementType="html" locale="en-US">
-  <body>
-    {/* ... */}
-  </body>
-</Provider>
-```
-
-### Overriding the color scheme
-
-By default, React Spectrum follows the operating system color scheme setting, supporting both light and dark mode. The `colorScheme` prop can be set on `<Provider>` to force the app to always render in a certain color scheme.
-
-```tsx
-import {Provider} from '@react-spectrum/s2';
-
-<Provider colorScheme="light">
-  {/* your app */}
-</Provider>
-```
-
-When using `page.css`, set the `data-color-scheme` attribute on the `<html>` element.
-
-```tsx
-<html data-color-scheme="light">
-  {/* ... */}
-</html>
-```
-
-### Overriding the locale
-
-By default, React Spectrum uses the browser/operating system language setting for localized strings, date and number formatting, and to determine the layout direction (left-to-right or right-to-left). This can be overridden by setting the `locale` prop on the `<Provider>`.
-
-```tsx
-import {Provider} from '@react-spectrum/s2';
-
-<Provider locale="en-US">
-  {/* your app */}
-</Provider>
-```
+## Framework setup
+
+<Tabs aria-label="Frameworks" density="compact">
+  <TabList><Tab id="parcel"><Parcel /><Text>Parcel</Text></Tab><Tab id="webpack"><Webpack /><Text>webpack</Text></Tab><Tab id="vite"><Vite /><Text>Vite</Text></Tab><Tab id="next"><Nextjs /><Text>Next.js</Text></Tab><Tab id="react-router"><ReactRouter /><Text>React Router</Text></Tab><Tab id="rollup"><Rollup /><Text>Rollup</Text></Tab><Tab id="esbuild"><ESBuild /><Text>ESBuild</Text></Tab></TabList>
+  <TabPanel id="parcel">
+    To use React Spectrum in a client-only Parcel SPA, setup style macros, configure React Spectrum links to use your client side router, and optimize the client bundle to include localized strings for your supported languages.
+
+    <StepList>
+      <Step>
+        <Counter />React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To optimize CSS generated by style macros into a single [shared bundle](https://parceljs.org/features/code-splitting/#manual-shared-bundles), add the following to your project root `package.json`:
+
+        ```json
+        {
+          "@parcel/bundler-default": {
+            "manualSharedBundles": [
+              {
+                "name": "s2-styles",
+                "types": ["css"],
+                "assets": [
+                  "**/@react-spectrum/s2/**",
+                  // Update this glob as needed to match your source files.
+                  "src/**/*.{js,jsx,ts,tsx}"
+                ]
+              }
+            ]
+          }
+        }
+        ```
+      </Step>
+      <Routers components={props.components} />
+      <Step>
+        <Counter />By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.
+        <InstallCommand pkg="@react-aria/parcel-resolver-optimize-locales" />
+
+        Add the following to your `.parcelrc`.
+
+        ```json
+        {
+          "extends": "@parcel/config-default",
+          "resolvers": ["@react-aria/parcel-resolver-optimize-locales", "..."]
+        }
+        ```
+
+        In your project root `package.json`, add a `"locales"` field containing the languages you want to support.
+
+        ```json
+        {
+          "locales": ["en-US", "fr-FR"]
+        }
+        ```
+      </Step>
+    </StepList>
+  </TabPanel>
+  <TabPanel id="webpack">
+    To use React Spectrum in a client-only webpack SPA, setup style macros, configure React Spectrum links to use your client side router, and optimize the client bundle to include localized strings for your supported languages.
+
+    <StepList>
+      <Step>
+        <Counter />React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the following plugins:
+        <InstallCommand pkg="unplugin-parcel-macros mini-css-extract-plugin css-minimizer-webpack-plugin swc-minify-webpack-plugin lightningcss browserslist" flags="--dev" />
+      </Step>
+      <Step>
+        <Counter />Edit `webpack.config.js`:
+
+        ```ts
+        // webpack.config.js
+        const macros = require('unplugin-parcel-macros');
+        const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+        const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+        const {SwcMinifyWebpackPlugin} = require("swc-minify-webpack-plugin");
+        const {browserslistToTargets} = require('lightningcss');
+        const browserslist = require('browserslist');
+
+        // Adjust this to target the browsers your product supports.
+        // https://browserslist.dev/
+        const BROWSERSLIST = 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions';
+
+        module.exports = {
+          // ...
+          plugins: [
+            // Enable style macros.
+            macros.webpack(),
+            // Extract CSS bundles.
+            new MiniCssExtractPlugin({
+              // Use content hash in filename for long term cacheability.
+              filename: '[name].[contenthash].css',
+              // Ignore warnings about CSS order. Style macros generate atomic CSS,
+              // which is resiliant to ordering differences.
+              ignoreOrder: true
+            })
+          ],
+          optimization: {
+            // Always enable minimizer plugins (even in development), to reduce duplicate CSS rules.
+            minimize: true,
+            minimizer: [
+              // Minify JavaScript during the production build only.
+              // (Used SWC here, but you can also use Terser if you prefer.)
+              argv.mode === 'production'
+                ? new SwcMinifyWebpackPlugin()
+                : null,
+              // Use lightningcss to compile CSS. This removes duplicate rules and outputs compatible CSS for your browserslist.
+              // In production it also minifies.
+              new CssMinimizerPlugin({
+                minify: CssMinimizerPlugin.lightningCssMinify,
+                minimizerOptions: {
+                  minify: argv.mode === 'production',
+                  targets: browserslistToTargets(browserslist(BROWSERSLIST))
+                }
+              })
+            ],
+            splitChunks: {
+              cacheGroups: {
+                // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
+                // Because atomic CSS has so much overlap between components, loading all CSS up front results in
+                // smaller bundles instead of producing duplication between pages.
+                s2: {
+                  name: 's2-styles',
+                  test(module) {
+                    return module.type === 'css/mini-extract' && (module.identifier().includes('@react-spectrum/s2') || /\.macro-(.*?)\.css/.test(module.identifier()));
+                  },
+                  chunks: 'all',
+                  enforce: true
+                }
+              }
+            }
+          }
+        };
+        ```
+      </Step>
+      <Routers components={props.components} />
+      <Step>
+        <Counter />By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.
+        <InstallCommand pkg="@react-aria/optimize-locales-plugin" />
+
+        Edit `webpack.config.ts` to add the plugin, and configure the `locales` parameter.
+
+        ```ts
+        // webpack.config.js
+        const optimizeLocales = require('@react-aria/optimize-locales-plugin');
+
+        module.exports = {
+          // ...
+          plugins: [
+            optimizeLocales.webpack({
+              locales: ['en-US', 'fr-FR']
+            })
+          ]
+        };
+        ```
+      </Step>
+    </StepList>
+  </TabPanel>
+  <TabPanel id="vite">
+    To use React Spectrum in a client-only Vite SPA, setup style macros, configure React Spectrum links to use your client side router, and optimize the client bundle to include localized strings for your supported languages.
+
+    <StepList>
+      <Step>
+        <Counter />React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the bundler plugin:
+        <InstallCommand pkg="unplugin-parcel-macros" flags="--dev" />
+      </Step>
+      <Step>
+        <Counter />Edit `vite.config.ts` to add the plugin and optimize the CSS bundle:
+
+        ```ts
+        // vite.config.ts
+        import {defineConfig} from 'vite';
+        import react from '@vitejs/plugin-react';
+        import macros from 'unplugin-parcel-macros';
+
+        export default defineConfig({
+          plugins: [
+            macros.vite(), // Must be first!
+            react()
+          ],
+          build: {
+            target: ['es2022'],
+            // Lightning CSS produces much a smaller CSS bundle than the default minifier.
+            cssMinify: 'lightningcss',
+            rollupOptions: {
+              output: {
+                // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
+                // Because atomic CSS has so much overlap between components, loading all CSS up front results in
+                // smaller bundles instead of producing duplication between pages.
+                manualChunks(id) {
+                  if (/macro-(.*)\.css$/.test(id) || /@react-spectrum\/s2\/.*\.css$/.test(id)) {
+                    return 's2-styles';
+                  }
+                }
+              }
+            }
+          }
+        });
+        ```
+      </Step>
+      <Routers components={props.components} />
+      <Step>
+        <Counter />By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.
+        <InstallCommand pkg="@react-aria/optimize-locales-plugin" />
+
+        Edit `vite.config.ts` to add the plugin, and configure the `locales` parameter.
+
+        ```ts
+        // vite.config.ts
+        import {defineConfig} from 'vite';
+        import localesPlugin from '@react-aria/optimize-locales-plugin';
+
+        export default defineConfig({
+          plugins: [
+            // ...
+            {
+              ...optimizeLocales.vite({
+                locales: ['en-US', 'fr-FR']
+              }),
+              enforce: 'pre'
+            }
+          ],
+        });
+        ```
+      </Step>
+    </StepList>
+  </TabPanel>
+  <TabPanel id="next">
+    To use React Spectrum with Next.js (app router), setup style macros, ensure the locale on the server matches the client, and configure React Spectrum links to use the Next.js router.
+
+    <InlineAlert variant="notice">
+      <Heading>Turbopack is not supported</Heading>
+      <Content>`unplugin-parcel-macros` currently only works with webpack, not Turbopack. When using Next.js 16 or later, make sure to start your app with the `--webpack` flag.</Content>
+    </InlineAlert>
+
+    <StepList>
+      <Step>
+        <Counter />React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the bundler plugin:
+        <InstallCommand pkg="unplugin-parcel-macros" flags="--dev" />
+      </Step>
+      <Step>
+        <Counter />Edit `next.config.ts` to add the plugin and optimize the CSS:
+
+        ```js
+        // next.config.ts
+        import macros from 'unplugin-parcel-macros';
+
+        // Create a single instance of the plugin that's shared between server and client builds.
+        let plugin = macros.webpack();
+
+        export default {
+          webpack(config) {
+            config.plugins.push(plugin);
+
+            // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
+            // Because atomic CSS has so much overlap between components, loading all CSS up front results in
+            // smaller bundles instead of producing duplication between pages.
+            config.optimization.splitChunks ||= {};
+            config.optimization.splitChunks.cacheGroups ||= {};
+            config.optimization.splitChunks.cacheGroups.s2 = {
+              name: 's2-styles',
+              test(module) {
+                return (module.type === 'css/mini-extract' && module.identifier().includes('@react-spectrum/s2')) || /macro-(.*?)\.css/.test(module.identifier());
+              },
+              chunks: 'all',
+              enforce: true
+            };
+
+            return config;
+          }
+        };
+        ```
+      </Step>
+      <Step>
+        <Counter />Create `app/provider.tsx`. This should render a [Provider](Provider) to set the locale, page background, and color scheme, load Spectrum fonts, and integrate with the Next.js router. When using S2 together with other versions of Spectrum, ensure that the S2 provider is the inner-most provider.
+
+        ```tsx
+        // app/provider.tsx
+        "use client";
+
+        import {useRouter} from 'next/navigation';
+        import {Provider} from '@react-spectrum/s2';
+
+        // Configure the type of the `routerOptions` prop on all React Spectrum components.
+        declare module '@react-spectrum/s2' {
+          interface RouterConfig {
+            routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>['push']>[1]>
+          }
+        }
+
+        export function ClientProvider({lang, children}) {
+          let router = useRouter();
+
+          return (
+            <Provider elementType="html" locale={lang} router={{navigate: router.push}}>
+              {children}
+            </Provider>
+          );
+        }
+        ```
+      </Step>
+      <Step>
+        <Counter />In your root layout, determine the user's preferred language and render a `ClientProvider` in place of the `<html>` element.
+
+        ```tsx
+        // app/layout.tsx
+        import {headers} from 'next/headers';
+        import {ClientProvider} from './provider';
+
+        export default async function RootLayout({children}) {
+          // Get the user's preferred language from the Accept-Language header.
+          // You could also get this from a database, URL param, etc.
+          const acceptLanguage = (await headers()).get('accept-language');
+          const lang = acceptLanguage?.split(/[,;]/)[0] || 'en-US';
+
+          return (
+            <ClientProvider lang={lang}>
+              <body>
+                {children}
+              </body>
+            </ClientProvider>
+          );
+        }
+        ```
+      </Step>
+    </StepList>
+  </TabPanel>
+  <TabPanel id="react-router">
+    To use React Spectrum with React Router (framework mode), setup style macros, ensure the locale on the server matches the client, and configure React Spectrum links to use client side routing. If you're using declarative mode, choose your bundler above.
+
+    <StepList>
+      <Step>
+        <Counter />React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the bundler plugin:
+        <InstallCommand pkg="unplugin-parcel-macros" flags="--dev" />
+      </Step>
+      <Step>
+        <Counter />Edit `vite.config.ts` to add the plugin and optimize the CSS bundle:
+
+        ```ts
+        // vite.config.ts
+        import {defineConfig} from 'vite';
+        import macros from 'unplugin-parcel-macros';
+
+        export default defineConfig({
+          plugins: [
+            macros.vite(), // Must be first!
+            // ...
+          ],
+          build: {
+            target: ['es2022'],
+            // Lightning CSS produces much a smaller CSS bundle than the default minifier.
+            cssMinify: 'lightningcss',
+            rollupOptions: {
+              output: {
+                // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
+                // Because atomic CSS has so much overlap between components, loading all CSS up front results in
+                // smaller bundles instead of producing duplication between pages.
+                manualChunks(id) {
+                  if (/macro-(.*)\.css$/.test(id) || /@react-spectrum\/s2\/.*\.css$/.test(id)) {
+                    return 's2-styles';
+                  }
+                }
+              }
+            }
+          }
+        });
+        ```
+      </Step>
+      <Step>
+        <Counter />In your root layout, determine the user's preferred language in a `loader` function and render a [Provider](Provider) to set the locale, page background, and color scheme, load Spectrum fonts, and integrate with React Router. When using S2 together with other versions of Spectrum, ensure that the S2 provider is the inner-most provider.
+
+        ```tsx
+        // app/root.tsx
+        import {Provider} from '@react-spectrum/s2';
+        import {useNavigate, useHref, useRouteLoaderData, type NavigateOptions, type LoaderFunctionArgs} from 'react-router';
+        import type { Route } from "./+types/root";
+
+        /*- begin highlight -*/
+        // Configure the type of the `routerOptions` prop on all React Spectrum components.
+        declare module '@react-spectrum/s2' {
+          interface RouterConfig {
+            routerOptions: NavigateOptions
+          }
+        }
+        /*- end highlight -*/
+
+        export async function loader({request}: Route.LoaderArgs) {
+          // Get the requested language (e.g. from headers, URL param, database, etc.)
+          /*- begin highlight -*/
+          const acceptLanguage = request.headers.get('accept-language');
+          const lang = acceptLanguage?.split(/[,;]/)[0] || 'en-US';
+          /*- end highlight -*/
+          return {lang};
+        }
+
+        export function Layout({children}) {
+          /*- begin highlight -*/
+          let {lang} = useRouteLoaderData('root') || {lang: 'en-US'};
+          let navigate = useNavigate();
+          /*- end highlight -*/
+
+          return (
+            /*- begin highlight -*/
+            <Provider elementType="html" locale={lang} router={{navigate, useHref}}>
+            {/*- end highlight -*/}
+              <head>
+                {/* ... */}
+              </head>
+              <body>
+                {/*- begin highlight -*/}
+                {/*- end highlight -*/}
+                {children}
+                {/* ... */}
+              </body>
+            </Provider>
+          );
+        }
+        ```
+      </Step>
+      <Step>
+        <Counter />By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.
+        <InstallCommand pkg="@react-aria/optimize-locales-plugin" />
+
+        Edit `vite.config.ts` to add the plugin, and configure the `locales` parameter.
+
+        ```ts
+        // vite.config.ts
+        import {defineConfig} from 'vite';
+        import localesPlugin from '@react-aria/optimize-locales-plugin';
+
+        export default defineConfig({
+          plugins: [
+            {
+              ...optimizeLocales.vite({
+                locales: ['en-US', 'fr-FR']
+              }),
+              enforce: 'pre'
+            }
+          ],
+        });
+        ```
+      </Step>
+    </StepList>
+  </TabPanel>
+  <TabPanel id="rollup">
+    To use React Spectrum in a client-only Rollup SPA, setup style macros, configure React Spectrum links to use your client side router, and optimize the client bundle to include localized strings for your supported languages.
+
+    <StepList>
+      <Step>
+        <Counter />React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the bundler plugin:
+        <InstallCommand pkg="unplugin-parcel-macros" flags="--dev" />
+      </Step>
+      <Step>
+        <Counter />Edit `rollup.config.js` to add the plugin and optimize the CSS bundle:
+
+        ```ts
+        // rollup.config.ts
+        import macros from 'unplugin-parcel-macros';
+
+        export default {
+          plugins: [
+            macros.rollup(), // Must be first!
+            // ...
+          ],
+          output: {
+            // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
+            // Because atomic CSS has so much overlap between components, loading all CSS up front results in
+            // smaller bundles instead of producing duplication between pages.
+            manualChunks(id) {
+              if (/macro-(.*)\.css$/.test(id) || /@react-spectrum\/s2\/.*\.css$/.test(id)) {
+                return 's2-styles';
+              }
+            }
+          }
+        };
+        ```
+      </Step>
+      <Routers components={props.components} />
+      <Step>
+        <Counter />By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.
+        <InstallCommand pkg="@react-aria/optimize-locales-plugin" />
+
+        Edit `rollup.config.js` to add the plugin, and configure the `locales` parameter.
+
+        ```ts
+        // rollup.config.js
+        import optimizeLocales from '@react-aria/optimize-locales-plugin';
+
+        export default {
+          // ...
+          plugins: [
+            optimizeLocales.rollup({
+              locales: ['en-US', 'fr-FR']
+            })
+          ]
+        };
+        ```
+      </Step>
+    </StepList>
+  </TabPanel>
+  <TabPanel id="esbuild">
+    To use React Spectrum in a client-only ESBuild SPA, setup style macros, configure React Spectrum links to use your client side router, and optimize the client bundle to include localized strings for your supported languages.
+
+    <StepList>
+      <Step>
+        <Counter />React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the bundler plugin:
+        <InstallCommand pkg="unplugin-parcel-macros" flags="--dev" />
+      </Step>
+      <Step>
+        <Counter />Edit your build script to add the plugin:
+
+        ```ts
+        // build.mjs
+        import {build} from 'esbuild';
+        import macros from 'unplugin-parcel-macros';
+
+        build({
+          plugins: [
+            macros.esbuild(), // Must be first!
+            // ...
+          ]
+        });
+        ```
+      </Step>
+      <Routers components={props.components} />
+      <Step>
+        <Counter />By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.
+        <InstallCommand pkg="@react-aria/optimize-locales-plugin" />
+
+        Edit your build script to add the plugin, and configure the `locales` parameter.
+
+        ```ts
+        import {build} from 'esbuild';
+        import optimizeLocales from '@react-aria/optimize-locales-plugin';
+
+        build({
+          // ...
+          plugins: [
+            optimizeLocales.esbuild({
+              locales: ['en-US', 'fr-FR']
+            })
+          ]
+        });
+        ```
+      </Step>
+    </StepList>
+  </TabPanel>
+</Tabs>
diff --git a/packages/dev/s2-docs/pages/s2/routing.mdx b/packages/dev/s2-docs/pages/s2/routing.mdx
deleted file mode 100644
index 457afc02853..00000000000
--- a/packages/dev/s2-docs/pages/s2/routing.mdx
+++ /dev/null
@@ -1,273 +0,0 @@
-import {Layout} from '../../src/Layout';
-export default Layout;
-
-import docs from 'docs:@react-spectrum/s2';
-
-export const section = 'Guides';
-export const tags = ['links', 'navigation'];
-export const description = 'Integrating client side routing with React Spectrum';
-
-# Client Side Routing
-
-<PageDescription>Many React Spectrum components support rendering as HTML links. This page discusses how to set up your app to integrate React Spectrum links with your framework or client side router.</PageDescription>
-
-## Introduction
-
-React Spectrum components such as [Menu](Menu), [Tabs](Tabs), [TableView](TableView), and many others support rendering elements as links that perform navigation when the user interacts with them. Each component that supports link behavior accepts the `href` prop, which causes the component to render an `<a>` element. Other link DOM props such as `target` and `download` are also supported.
-
-By default, links perform native browser navigation when they are interacted with. However, many apps and frameworks use client side routers to avoid a full page reload when navigating between pages. The [Provider](getting-started#setting-up-your-app) component can configure all React Spectrum components within it to navigate using the client side router you provide. Set this up once in the root of your app, and any React Spectrum component with the `href` prop will automatically navigate using your router.
-
-Note that external links to different origins will not trigger client side routing, and will use native browser navigation. Additionally, if the link has a [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) other than `"_self"`, uses the [download](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download) attribute, or the user presses modifier keys such as <Keyboard>Command</Keyboard> or <Keyboard>Alt</Keyboard> to change the default behavior, browser native navigation will occur instead of client side routing.
-
-## Provider setup
-
-The `Provider` component accepts a `router` prop, which can be set to a router object. This should include a `navigate` function received from your router for performing a client side navigation programmatically. It can optionally also include a `useHref` function that converts a router-specific href to a native HTML href, e.g. prepending a base path. The following example shows the general pattern. Framework-specific examples are shown below.
-
-```tsx
-import {Provider} from '@react-spectrum/s2';
-import {useNavigate, useHref} from 'your-router';
-
-function App() {
-  let navigate = useNavigate();
-
-  return (
-    <Provider router={{navigate, useHref}}>
-      {/* ... */}
-    </Provider>
-  );
-}
-```
-
-### Router options
-
-All React Spectrum link components accept a `routerOptions` prop, which is an object that is passed through to the client side router's `navigate` function as the second argument. This can be used to control any router-specific behaviors, such as scrolling, replacing instead of pushing to the history, etc.
-
-```tsx
-<MenuItem href="/login" routerOptions={{replace: true}}>{/* ...*/}</MenuItem>
-```
-
-When using TypeScript, you can configure the `RouterConfig` type globally so that all link components have auto complete and type safety using a type provided by your router.
-
-```tsx
-import type {RouterOptions} from 'your-router';
-
-declare module '@react-spectrum/s2' {
-  interface RouterConfig {
-    routerOptions: RouterOptions
-  }
-}
-```
-
-### React Router
-
-The [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) hook from `react-router-dom` returns a `navigate` function you can pass to `Provider`. The [useHref](https://reactrouter.com/en/main/hooks/use-href) hook can also be provided if you're using React Router's `basename` option. Ensure that the component that calls `useNavigate` and renders `Provider` is inside the router component (e.g. `BrowserRouter`) so that it has access to React Router's internal context. The React Router `<Routes>` element should also be defined inside React Spectrum's `<Provider>` so that links inside the rendered routes have access to the router.
-
-```tsx
-import {BrowserRouter, useNavigate, useHref, type NavigateOptions} from 'react-router-dom';
-import {Provider} from '@react-spectrum/s2';
-
-declare module '@react-spectrum/s2' {
-  interface RouterConfig {
-    routerOptions: NavigateOptions
-  }
-}
-
-function App() {
-  let navigate = useNavigate();
-
-  return (
-    <Provider router={{navigate, useHref}}>
-      {/* Your app here... */}
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        {/* ... */}
-      </Routes>
-    </Provider>
-  );
-}
-
-<BrowserRouter>
-  <App />
-</BrowserRouter>
-```
-
-### Next.js
-
-#### App router
-
-The [useRouter](https://nextjs.org/docs/app/api-reference/functions/use-router) hook from `next/navigation` returns a router object that can be used to perform navigation. `Provider` should be rendered from a client component at the root of each page or layout that includes React Spectrum components. You can create a new client component for this, or combine it with other top-level providers as described in the [Next.js docs](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers).
-
-```tsx
-// app/provider.tsx
-"use client";
-
-import {useRouter} from 'next/navigation';
-import {Provider} from '@react-spectrum/s2';
-
-declare module '@react-spectrum/s2' {
-  interface RouterConfig {
-    routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>['push']>[1]>
-  }
-}
-
-export function ClientProviders({children}) {
-  let router = useRouter();
-
-  return (
-    <Provider router={{navigate: router.push}}>
-      {children}
-    </Provider>
-  );
-}
-```
-
-Then, in your page or layout server component, wrap your app in the `ClientProviders` component that you defined.
-
-```tsx
-// app/layout.tsx
-import {ClientProviders} from './provider';
-
-export default function RootLayout({children}) {
-  return (
-    <html>
-      <body>
-        <ClientProviders>{children}</ClientProviders>
-      </body>
-    </html>
-  );
-}
-```
-
-If you are using the Next.js [basePath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) setting, you'll need to configure an environment variable to access it. Then, provide a custom `useHref` function to prepend it to the href for all links.
-
-```tsx
-// next.config.js
-const basePath = '...';
-const nextConfig = {
-  basePath,
-  env: {
-    BASE_PATH: basePath
-  }
-};
-```
-
-```tsx
-// app/provider.tsx
-// ...
-
-export function ClientProviders({children}) {
-  let router = useRouter();
-  /*- begin highlight -*/
-  let useHref = (href: string) => process.env.BASE_PATH + href;
-  /*- end highlight -*/
-
-  return (
-    <Provider router={{navigate: router.push, useHref}}>
-      {children}
-    </Provider>
-  );
-}
-```
-
-#### Pages router
-
-The [useRouter](https://nextjs.org/docs/pages/api-reference/functions/use-router) hook from `next/router` returns a router object that can be used to perform navigation. `Provider` should be rendered at the root of each page that includes React Spectrum components, or in `pages/_app.tsx` to add it to all pages.
-
-```tsx
-// pages/_app.tsx
-import type {AppProps} from 'next/app';
-import {useRouter, type NextRouter} from 'next/router';
-import {Provider} from '@react-spectrum/s2';
-
-declare module '@react-spectrum/s2' {
-  interface RouterConfig {
-    routerOptions: NonNullable<Parameters<NextRouter['push']>[2]>
-  }
-}
-
-export default function MyApp({Component, pageProps}: AppProps) {
-  let router = useRouter();
-
-  return (
-    <Provider 
-      router={{
-        navigate: (href, opts) => router.push(href, undefined, opts),
-      }}>
-      <Component {...pageProps} />
-    </Provider>
-  );
-}
-```
-
-When using the [basePath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) configuration option, provide a `useHref` option to the `router` passed to `Provider` to prepend it to links automatically.
-
-```tsx
-// pages/_app.tsx
-// ...
-
-export default function MyApp({Component, pageProps}: AppProps) {
-  let router = useRouter();
-
-  return (
-    <Provider 
-      router={{
-        navigate: (href, opts) => router.push(href, undefined, opts),
-        /*- begin highlight -*/
-        useHref: (href: string) => router.basePath + href
-        /*- end highlight -*/
-      }}>
-      <Component {...pageProps} />
-    </Provider>
-  );
-}
-```
-
-### Remix
-
-Remix uses React Router under the hood, so the same [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) and [useHref](https://reactrouter.com/en/main/hooks/use-href) hooks described above also work in Remix apps. `Provider` should be rendered at the root of each page that includes React Spectrum components, or in `app/root.tsx` to add it to all pages. See the [Remix docs](https://remix.run/docs/en/main/file-conventions/root) for more details.
-
-```tsx
-// app/root.tsx
-import {useNavigate, useHref, Outlet} from '@remix-run/react';
-import type {NavigateOptions} from 'react-router-dom';
-import {Provider} from '@react-spectrum/s2';
-
-declare module '@react-spectrum/s2' {
-  interface RouterConfig {
-    routerOptions: NavigateOptions
-  }
-}
-
-export default function App() {
-  let navigate = useNavigate();
-
-  return (
-    <html lang="en">
-      <head>
-        {/* ... */}
-      </head>
-      <body>
-        <Provider router={{navigate, useHref}}>
-          <Outlet />
-        </Provider>
-        {/* ... */}
-      </body>
-    </html>
-  );
-}
-```
-
-## TanStack Router
-
-To use [TanStack Router](https://tanstack.com/router) with React Spectrum, use the [createLink](https://tanstack.com/router/latest/docs/framework/react/guide/custom-link) function to wrap each React Spectrum component as a link. `RouterProvider` is not needed.
-
-```tsx
-// src/Link.tsx
-import {createLink} from '@tanstack/react-router';
-import {Link as SpectrumLink, MenuItem} from '@react-spectrum/s2';
-
-export const Link = createLink(SpectrumLink);
-export const MenuItemLink = createLink(MenuItem);
-```
-
-In your app, use these components instead of importing directly from `@react-spectrum/s2`.
diff --git a/packages/dev/s2-docs/pages/s2/styling.mdx b/packages/dev/s2-docs/pages/s2/styling.mdx
index 787e4425780..735b44626ca 100644
--- a/packages/dev/s2-docs/pages/s2/styling.mdx
+++ b/packages/dev/s2-docs/pages/s2/styling.mdx
@@ -280,43 +280,7 @@ Follow these best practices:
 - Use a CSS minifier like `lightningcss` to deduplicate common rules (consider in dev for easier debugging).
 - Bundle all CSS for S2 components and style macros into a single CSS bundle rather than code splitting to avoid duplicate rules across chunks.
 
-### Parcel
-
-Parcel supports macros out of the box and optimizes CSS with [Lightning CSS](https://lightningcss.dev). You can bundle all S2 and macro CSS into a single file using [manual shared bundles](https://parceljs.org/features/code-splitting/#manual-shared-bundles).
-
-```js
-// package.json
-{
-  "@parcel/bundler-default": {
-    "manualSharedBundles": [
-      {
-        "name": "s2-styles",
-        "assets": [
-          "**/@react-spectrum/s2/**",
-          // Update this glob as needed to match your source files.
-          "src/**/*.{js,jsx,ts,tsx}"
-        ],
-        "types": ["css"]
-      }
-    ]
-  }
-}
-```
-
-### Webpack
-
-- Use [MiniCssExtractPlugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) to extract styles. Do not use `style-loader`.
-- Use [CssMinimizerWebpackPlugin](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/) with [Lightning CSS](https://lightningcss.dev) to optimize CSS (optionally in development).
-- Use [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) to bundle all S2 and macro CSS into a single bundle.
-
-See the [webpack example](https://github.com/adobe/react-spectrum/blob/main/examples/s2-webpack-5-example/webpack.config.js) for a full configuration.
-
-### Vite
-
-- Configure `cssMinify` to use [Lightning CSS](https://lightningcss.dev).
-- Configure Rollup to combine all S2 and macro CSS into a single bundle using [`output.manualChunks`](https://rollupjs.org/configuration-options/#output-manualchunks).
-
-See the [Vite example](https://github.com/adobe/react-spectrum/blob/main/examples/s2-vite-project/vite.config.ts) for full configuration options.
+See the [getting started guide](getting-started) to learn how to setup your framework or bundler.
 
 ## CSS Resets
 
diff --git a/packages/dev/s2-docs/src/routers-s2.mdx b/packages/dev/s2-docs/src/routers-s2.mdx
new file mode 100644
index 00000000000..ee6fbbce238
--- /dev/null
+++ b/packages/dev/s2-docs/src/routers-s2.mdx
@@ -0,0 +1,105 @@
+import {Step, Counter} from './Step';
+
+<Step>
+  <Counter />Render a [Provider](Provider) at the root of your app to set the locale, page background, and color scheme, load Spectrum fonts, and integrate with your client side router. When using S2 together with other versions of Spectrum, ensure that the S2 provider is the inner-most provider.
+
+  A `router` has two properties:
+          
+  1. `navigate` – a function received from your router for performing a client side navigation programmatically.
+  2. `useHref` (optional) – converts a router-specific href to a native HTML href, e.g. prepending a base path.
+
+  <ExampleSwitcher type="router" examples={['React Router', 'TanStack Router']}>
+
+  ```tsx
+  // src/app.tsx
+  import {Provider} from '@react-spectrum/s2';
+  import {BrowserRouter, useNavigate, useHref, type NavigateOptions} from 'react-router';
+
+  /*- begin highlight -*/
+  // Configure the type of the `routerOptions` prop on all React Spectrum components.
+  declare module '@react-spectrum/s2' {
+    interface RouterConfig {
+      routerOptions: NavigateOptions
+    }
+  }
+  /*- end highlight -*/
+
+  function App() {
+    let navigate = useNavigate();
+
+    return (
+      /*- begin highlight -*/
+      <Provider background="base" router={{navigate, useHref}}>
+        {/*- end highlight -*/}
+        {/* Your app here... */}
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          {/* ... */}
+        </Routes>
+      </Provider>
+    );
+  }
+  ```
+
+  ```tsx
+  // src/routes/__root.tsx
+  import {Provider} from '@react-spectrum/s2';
+  import {useRouter, type NavigateOptions, type ToOptions} from '@tanstack/react-router';
+
+  /*- begin highlight -*/
+  // Configure the type of the `href` and `routerOptions` props on all React Spectrum components.
+  declare module '@react-spectrum/s2' {
+    interface RouterConfig {
+      href: ToOptions,
+      routerOptions: Omit<NavigateOptions, keyof ToOptions>
+    }
+  }
+  /*- end highlight -*/
+
+  export const Route = createRootRoute({
+    component: () => {
+      let router = useRouter();
+      return (
+        /*- begin highlight -*/
+        <Provider
+          background="base"
+          router={{
+            navigate: (href, opts) => router.navigate({...href, ...opts}),
+            useHref: href => router.buildLocation(href).href
+          }}>
+          {/*- end highlight -*/}
+          {/* Your app here... */}
+        </Provider>
+      );
+    }
+  });
+  ```
+
+  </ExampleSwitcher>
+</Step>
+<Step>
+  <Counter />When building a full page S2 app that's not embedded within a larger page, import `page.css` to apply the background color and color scheme to the `<html>` element instead of the `<Provider>`. This ensures that the page has styles even before your JavaScript loads.
+
+  ```tsx
+  // Apply S2 background to the <html> element
+  /*- begin highlight -*/
+  import '@react-spectrum/s2/page.css';
+  /*- end highlight -*/
+
+  function App() {
+    return (
+      <Provider router={{/* ... */}}>
+        {/* ... */}
+      </Provider>
+    );
+  }
+  ```
+
+  By default, this uses the `base` background layer. This can be customized by setting the `data-background` attribute on the `<html>` element. The `data-color-scheme` attribute can also be set to force light or dark mode.
+
+  ```tsx
+  <html data-background="layer-1">
+    {/* ... */}
+  </html>
+  ```
+</Step>
diff --git a/packages/dev/s2-docs/src/routers.mdx b/packages/dev/s2-docs/src/routers.mdx
index 8f7d0bfea84..2937f937f29 100644
--- a/packages/dev/s2-docs/src/routers.mdx
+++ b/packages/dev/s2-docs/src/routers.mdx
@@ -42,7 +42,6 @@ function App() {
 // src/routes/__root.tsx
 import {RouterProvider} from 'react-aria-components';
 import {useRouter, type NavigateOptions, type ToOptions} from '@tanstack/react-router';
-import ReactDOM from 'react-dom/client';
 
 /*- begin highlight -*/
 // Configure the type of the `href` and `routerOptions` props on all React Aria components.

From 1ff236cb5404981639b0827ae40fc812e0fd6fb5 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 9 Dec 2025 13:31:43 -0800
Subject: [PATCH 05/10] docs: More assorted docs fixes (#9304)

* Add missing prop descriptions to Card

* Fix blog videos playing full screen on iOS

* Fix Select Autocomplete example overflowing popover

* Fix S2 form button group alignment

* Fix some examples that were too wide on mobile

* Fix Toolbar separator styling

* Fix DatePicker horizontal scrolling

* Adjust Calendar cell size to fit in available space

* Fix long words in blog heading overflowing

e.g. Internationalization

* Fix Toast animation

* Remove beta preview badge

* Fix DatePicker anatomy

* Add ErrorBoundary around examples

* Ensure toc always updates after navigations

* Don't wrap prop defaults
---
 .../datepicker/docs/datepicker-anatomy.svg    |  2 +-
 .../docs/daterangepicker-anatomy.svg          |  4 +-
 packages/@react-spectrum/s2/src/Card.tsx      |  2 +
 .../dev/s2-docs/pages/react-aria/Select.mdx   |  2 +-
 .../dev/s2-docs/pages/react-aria/Toolbar.mdx  |  7 +-
 .../blog/accessible-color-descriptions.mdx    |  4 +-
 .../blog/building-a-button-part-1.mdx         |  6 +-
 .../blog/building-a-button-part-2.mdx         |  4 +-
 .../blog/building-a-button-part-3.mdx         |  2 +-
 .../react-aria/blog/building-a-combobox.mdx   |  8 +-
 .../blog/date-and-time-pickers-for-all.mdx    |  6 +-
 .../pages/react-aria/blog/drag-and-drop.mdx   |  6 +-
 ...w-we-internationalized-our-numberfield.mdx |  2 +-
 .../pages/react-aria/blog/rtl-date-time.mdx   |  6 +-
 packages/dev/s2-docs/pages/s2/Form.mdx        |  3 +-
 packages/dev/s2-docs/pages/s2/selection.mdx   | 84 +++++++++----------
 packages/dev/s2-docs/src/ExampleOutput.tsx    | 31 ++++++-
 packages/dev/s2-docs/src/Header.tsx           | 10 +--
 packages/dev/s2-docs/src/Layout.tsx           |  2 +-
 packages/dev/s2-docs/src/Nav.tsx              |  3 +-
 packages/dev/s2-docs/src/PropTable.tsx        |  2 +-
 packages/dev/s2-docs/src/textWidth.ts         |  9 +-
 packages/dev/s2-docs/src/typography.tsx       | 19 +++--
 starters/docs/src/Calendar.css                | 23 ++++-
 starters/docs/src/DatePicker.css              |  5 ++
 starters/docs/src/GridList.css                |  1 +
 starters/docs/src/RangeCalendar.css           | 16 ++--
 starters/docs/src/Slider.css                  |  2 +-
 starters/docs/src/Tabs.css                    |  5 ++
 starters/docs/src/Toolbar.css                 | 14 +---
 starters/docs/src/Toolbar.tsx                 |  9 +-
 starters/tailwind/src/Calendar.tsx            |  6 +-
 starters/tailwind/src/Meter.tsx               |  4 +-
 starters/tailwind/src/ProgressBar.tsx         |  4 +-
 starters/tailwind/src/RangeCalendar.tsx       |  4 +-
 starters/tailwind/src/SearchField.tsx         |  2 +-
 starters/tailwind/src/Slider.tsx              |  2 +-
 starters/tailwind/src/Tabs.tsx                |  4 +-
 38 files changed, 195 insertions(+), 130 deletions(-)

diff --git a/packages/@react-aria/datepicker/docs/datepicker-anatomy.svg b/packages/@react-aria/datepicker/docs/datepicker-anatomy.svg
index c2aa884b884..74d972f0ce9 100644
--- a/packages/@react-aria/datepicker/docs/datepicker-anatomy.svg
+++ b/packages/@react-aria/datepicker/docs/datepicker-anatomy.svg
@@ -167,7 +167,7 @@
       <rect id="Rectangle_140611" data-name="Rectangle 140611" width="85" height="1" transform="translate(417 272) rotate(180)" fill="var(--anatomy-gray-500)"/>
     </g>
     <g id="Group_151085" data-name="Group 151085" transform="translate(29 -2)">
-      <text id="Dialog" transform="translate(708 189)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">Dialog</tspan></text>
+      <text id="Dialog" transform="translate(708 189)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">Popover</tspan></text>
       <path id="Union_58" data-name="Union 58" d="M-8872-124.5a2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.45,2h27.568v1h-27.568a2.5,2.5,0,0,1-2.45,2A2.5,2.5,0,0,1-8872-124.5Z" transform="translate(9543 309)" fill="var(--anatomy-gray-500)"/>
     </g>
   </g>
diff --git a/packages/@react-aria/datepicker/docs/daterangepicker-anatomy.svg b/packages/@react-aria/datepicker/docs/daterangepicker-anatomy.svg
index f03ddde5199..58c03e7dfea 100644
--- a/packages/@react-aria/datepicker/docs/daterangepicker-anatomy.svg
+++ b/packages/@react-aria/datepicker/docs/daterangepicker-anatomy.svg
@@ -175,12 +175,12 @@
       <rect id="Rectangle_3657-4" data-name="Rectangle 3657" width="1" height="24" transform="translate(401.5 -343)" fill="var(--anatomy-gray-500)"/>
     </g>
     <g id="Group_151084" data-name="Group 151084" transform="translate(-1 20)">
-      <text id="Calendar" transform="translate(327 275)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="-45.76" y="0">Calendar</tspan></text>
+      <text id="Calendar" transform="translate(295 275)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="-45.76" y="0">RangeCalendar</tspan></text>
       <circle id="Ellipse_872" data-name="Ellipse 872" cx="2.5" cy="2.5" r="2.5" transform="translate(422 273.999) rotate(180)" fill="var(--anatomy-gray-500)"/>
       <rect id="Rectangle_140611" data-name="Rectangle 140611" width="85" height="1" transform="translate(417 272) rotate(180)" fill="var(--anatomy-gray-500)"/>
     </g>
     <g id="Group_151085" data-name="Group 151085" transform="translate(29 -2)">
-      <text id="Dialog" transform="translate(708 189)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">Dialog</tspan></text>
+      <text id="Dialog" transform="translate(708 189)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">Popover</tspan></text>
       <path id="Union_58" data-name="Union 58" d="M-8872-124.5a2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.45,2h27.568v1h-27.568a2.5,2.5,0,0,1-2.45,2A2.5,2.5,0,0,1-8872-124.5Z" transform="translate(9543 309)" fill="var(--anatomy-gray-500)"/>
     </g>
     <g id="Group_151087" data-name="Group 151087" transform="translate(156)">
diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx
index 86222fbeea6..388889cab08 100644
--- a/packages/@react-spectrum/s2/src/Card.tsx
+++ b/packages/@react-spectrum/s2/src/Card.tsx
@@ -654,6 +654,7 @@ const avatarSize = {
 
 export interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {
   // Quiet is not supported due to lack of indent between preview and avatar.
+  /** The visual style of the Card. */
   variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
@@ -706,6 +707,7 @@ const buttonSize = {
 
 export interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'> {
   // Quiet is not supported due to lack of indent between preview and thumbnail.
+  /** The visual style of the Card. */
   variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Select.mdx b/packages/dev/s2-docs/pages/react-aria/Select.mdx
index 3a0199a2bb4..d1b93746eb8 100644
--- a/packages/dev/s2-docs/pages/react-aria/Select.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Select.mdx
@@ -124,7 +124,7 @@ function Example() {
         <SelectValue />
         <ChevronDown size={18} />
       </Button>
-      <Popover hideArrow className="select-popover">
+      <Popover hideArrow className="select-popover" style={{display: 'flex', flexDirection: 'column'}}>
         {/*- begin highlight -*/}
         <Autocomplete filter={contains}>
           <SearchField aria-label="Search tags" placeholder="Search tags" autoFocus style={{margin: 4}} />
diff --git a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
index 6e6f8b02344..ab7aec77eca 100644
--- a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
@@ -21,7 +21,8 @@ export const description = 'A container for a set of interactive controls, such
   import {ToggleButton} from 'vanilla-starter/ToggleButton';
   import {Button} from 'vanilla-starter/Button';
   import {Select, SelectItem} from 'vanilla-starter/Select';
-  import {Group, Separator} from 'react-aria-components';
+  import {Separator} from 'vanilla-starter/Separator';
+  import {Group} from 'react-aria-components';
   import {Bold, Italic, Underline, ClipboardCopy, Scissors, ClipboardPaste} from 'lucide-react';
 
   <Toolbar/* PROPS */>
@@ -36,7 +37,7 @@ export const description = 'A container for a set of interactive controls, such
         <Underline size={16} />
       </ToggleButton>
     </ToggleButtonGroup>
-    <Separator orientation="vertical" />
+    <Separator />
     <Group aria-label="Clipboard">
       <Button aria-label="Copy">
         <ClipboardCopy size={16} />
@@ -48,7 +49,7 @@ export const description = 'A container for a set of interactive controls, such
         <ClipboardPaste size={16} />
       </Button>
     </Group>
-    <Separator orientation="vertical" />
+    <Separator />
     <Select aria-label="Font" defaultSelectedKey="helvetica">
       <SelectItem id="helvetica">Helvetica</SelectItem>
       <SelectItem id="times">Times</SelectItem>
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
index d2d99b7114e..73cdd921263 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
@@ -37,7 +37,7 @@ Accessibility is at the core of all of our work on the React Spectrum team, and
 
 Our initial implementation followed the typical ARIA patterns such as [slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) to implement ColorArea, ColorSlider, and ColorWheel, and [listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) to implement ColorSwatchPicker. This provided good support for mouse, touch, and keyboard input, but the screen reader experience left something to be desired. Out of the box, screen readers would only announce raw channel values like “Red: 182, Green: 96, Blue: 38”. I don’t know about you, but I can’t imagine what color that is just by hearing those numbers!
 
-<video src={initialVideoUrl + '#t=0.1'} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" aria-label="Demo of VoiceOver announcement in ColorArea before improvements" />
+<video src={initialVideoUrl + '#t=0.1'} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" playsInline aria-label="Demo of VoiceOver announcement in ColorArea before improvements" />
 
 ## Improving screen reader announcements
 
@@ -165,6 +165,6 @@ After developing this algorithm to generate color descriptions, we integrated it
 
 The video below shows interacting with a ColorArea with color descriptions. You can also try it yourself with a screen reader in the example above.
 
-<video src={finalVideoUrl + '#t=0.1'} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" aria-label="Demo of VoiceOver announcement in ColorArea after improvements" />
+<video src={finalVideoUrl + '#t=0.1'} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" playsInline aria-label="Demo of VoiceOver announcement in ColorArea after improvements" />
 
 Check out our [ColorPicker](../ColorPicker) components in React Aria to build accessible, customizable, and styleable color pickers in your own applications.
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
index 2eec14230be..8b4f3680a26 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
@@ -62,7 +62,7 @@ Mobile browsers often introduce delays before emulated mouse events like onClick
 
 The CSS `:active` and `:hover` pseudo-classes are also affected by mouse event emulation. For example, when tapping down on a button and dragging your finger off, the active state persists even when your finger is not over it. This makes it appear like lifting your finger will activate the button when it will not. This is not how native buttons behave, so it can feel inconsistent with user expectations.
 
-<video src={draggingVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
+<video src={draggingVideoUrl} loop autoPlay muted playsInline style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 ## Pointer events
 
@@ -82,7 +82,7 @@ Touch events can also be canceled by scrolling. If you touch a button and then s
 
 Text selection gestures are another case where we need to determine the user's intent. On iOS, for example, a long press begins text selection. However, when pressing a button, you wouldn't usually expect text selection to start.
 
-<video src={textSelectionVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
+<video src={textSelectionVideoUrl} loop autoPlay muted playsInline style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 It is possible to add the `user-select: none` CSS property to the button to make it non-selectable, but even with that enabled, Safari still tries to select elements nearby. The only way to avoid this is to add `user-select: none` to the entire page. We wouldn't want to do this all the time though, because some elements should allow text selection to occur. React Aria automatically handles adding `user-select: none` to the page on touch start on a pressable element, and removes it after a short delay on press up. The delay is necessary because iOS may begin selecting even after touch up within some threshold.
 
@@ -106,7 +106,7 @@ Each of these events receive a unified `PressEvent` object rather than the under
 
 With the [usePress](../usePress) hook, our buttons handle interactions consistently. Dragging your pointer off the button correctly removes the active state, text selection is canceled, and issues with emulated mouse events are avoided.
 
-<video src={buttonVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
+<video src={buttonVideoUrl} loop autoPlay muted playsInline style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 Try a live example for yourself in our [Button](s2:Button) docs!
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
index 49a56effcf5..9837d62e55f 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
@@ -43,7 +43,7 @@ The first thing that may come to mind when you think about implementing a hover
 
 On touch devices, `:hover` is emulated for backward compatibility with older apps that weren't designed with touch in mind. Depending on the browser, `:hover` might never match, might match only while the user is touching an element, or may be sticky and act more like focus. On iOS for example, tapping once on an element shows the hover style, and tapping away from the element removes it.
 
-<video src={hoverVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
+<video src={hoverVideoUrl} loop autoPlay muted playsInline style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 This is not how you'd usually expect a button to behave, but browsers need to do this kind of emulation for apps that may only show or hide content on hover (e.g. navigation menus). If they did not, then perhaps this content would not be accessible at all to touch users. Unfortunately, there is no built-in way of opting out of this behavior, so we need to find another way to apply our hover styles.
 
@@ -75,7 +75,7 @@ We've wrapped all of this behavior into the [useHover](../useHover) hook in Reac
 
 The [Button](s2:Button) component, and all other components in React Spectrum that support hover states, use the [useHover](../useHover) hook to handle interactions, and apply a CSS class when they are hovered. This ensures that hover states are only applied when interacting with a mouse, which avoids unexpected behavior on touch devices.
 
-<video src={hoveriPadVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
+<video src={hoveriPadVideoUrl} loop autoPlay muted playsInline style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 Try a live example for yourself in our [Button](s2:Button) docs!
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
index 175b15889a1..aaa9270b98c 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
@@ -43,7 +43,7 @@ There are many aspects of focus management, and perhaps we will cover more in fu
 
 An important feature for keyboard users is a **focus ring**. This is a visual affordance for the currently focused element, which allows a keyboard user to know which element they are currently on. It may only be visible when navigating with a keyboard, however, so as not to distract mouse and touchscreen users.
 
-<video src={focusRingVideoUrl} loop autoPlay muted style={{maxWidth: 'min(100%, 640px)', display: 'block', margin: '20px auto'}} />
+<video src={focusRingVideoUrl} loop autoPlay muted playsInline style={{maxWidth: 'min(100%, 640px)', display: 'block', margin: '20px auto'}} />
 
 As you can see in the above video, the focus ring appears around each button when it receives keyboard focus, but when the user interacts with a mouse it does not appear. To implement this, we attach global event listeners for pointer, keyboard, and focus events at the document level and keep track of the most recent input modality that the user was interacting with. If the user most recently interacted with a keyboard or assistive technology, we show the focus ring, otherwise we do not show it.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
index 402597a94f1..4b5cace2cf0 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
@@ -38,7 +38,7 @@ After many months of research, development, and extensive testing across browser
 - **Asynchronous loading** — Autocomplete suggestions can be loaded asynchronously, and large lists can be loaded on demand through infinite scrolling.
 - **Customizability** — React Aria hooks allow full control over the rendering and styling of your ComboBox component, while letting us take care of the behavioral complexities for you. Use our default filter or you can provide custom filtering for complete control.
 
-<video src={comboboxVideoUrl} loop autoPlay muted style={{maxWidth: 'min(100%, 1920px)', display: 'block', margin: '40px auto'}} />
+<video src={comboboxVideoUrl} loop autoPlay muted playsInline style={{maxWidth: 'min(100%, 1920px)', display: 'block', margin: '40px auto'}} />
 
 ## Building a ComboBox
 
@@ -70,7 +70,7 @@ Luckily for us, iOS 13 added support for the [VisualViewport](https://developer.
 when the onscreen keyboard was opened or dismissed by listening to the VisualViewport's `resize` event. Leveraging these two allowed us to create a tray that properly adjusts to the presence of iOS onscreen keyboard. Check out the video below
 to see how the ComboBox tray worked before and after we switched to the VisualViewport API. If you'd like to track the visual viewport size in your own app, you can use the [useViewportSize](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/useViewportSize.ts) hook available in the `@react-aria/utils` package.
 
-<video src={comboboxVisualViewportUrl} loop autoPlay muted style={{maxWidth: 'min(80%, 350px)', display: 'block', margin: '20px auto'}} />
+<video src={comboboxVisualViewportUrl} loop autoPlay muted playsInline style={{maxWidth: 'min(80%, 350px)', display: 'block', margin: '20px auto'}} />
 
 ### Page Scrolling
 
@@ -79,7 +79,7 @@ now that our ComboBox tray sizes itself to fit in the visual viewport, users cou
 or root element of the document. This preserves the user's ability to scroll through the options in the tray but blocks any attempt to scroll the page itself until the tray is closed. The video below
 illustrates the difference in scrolling behavior before and after our fix. If you are building your own overlays and would like to prevent this kind of document scrolling behavior, check out the [usePreventScroll](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts) hook in the `react-aria/overlays` package.
 
-<video src={comboboxScrollingUrl} loop autoPlay muted style={{maxWidth: 'min(80%, 350px)', display: 'block', margin: '20px auto'}} />
+<video src={comboboxScrollingUrl} loop autoPlay muted playsInline style={{maxWidth: 'min(80%, 350px)', display: 'block', margin: '20px auto'}} />
 
 ## Accessibility
 
@@ -140,7 +140,7 @@ we only trigger the `LiveAnnouncer` on Apple devices to avoid announcement overl
 
 If you are interested in using this `LiveAnnouncer` yourself, check out [LiveAnnouncer](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx) in `@react-aria/live-announcer`. Otherwise, the [useComboBox](../ComboBox/useComboBox.html) hook provides you with all of the custom messaging out of the box. See the video below for a sneak peek!
 
-<video src={comboboxAccessibilityUrl} controls aria-label="Demo of VoiceOver announcement in ComboBox" style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} />
+<video src={comboboxAccessibilityUrl} controls playsInline aria-label="Demo of VoiceOver announcement in ComboBox" style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} />
 
 ## Conclusion
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
index a313f7f166b..a15c70bdc27 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
@@ -43,7 +43,7 @@ In building these components, we have focused on the following areas:
 - **Accessibility** – All of our date and time picker components have been tested across desktop and mobile devices, and with many different input methods including mouse, touch, and keyboard. We have worked hard to ensure screen reader announcements are clear and consistent.
 - **Customizability** – As with all of React Aria, our hooks give you full control over the rendering and styling of your components, while letting us handle the internationalization and accessibility challenges for you. We have examples using many different styling libraries, such as Tailwind CSS, Styled Components, CSS modules, and Chakra UI.
 
-<video src={datepickerVideo} loop autoPlay muted style={{width: '100%', display: 'block', margin: '40px auto'}} />
+<video src={datepickerVideo} loop autoPlay muted playsInline style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 ## User experience
 
@@ -65,7 +65,7 @@ We took a different approach, and followed the lead of native date picker UIs on
 
 This approach has benefits for internationalization and accessibility, as well as usability on mobile. For internationalization, individual segments avoid the problem of parsing dates in various formats entirely. The date format is automatically determined based on the locale, and the user only needs to fill in the values and not worry about messing up the separators or getting the order wrong. Each segment is also individually labeled for accessibility, so users always know which field they are on (e.g. "year", "month", "day", etc.). This is much easier to use for screen reader users than a plain text field where the expected format is unknown. Finally, on mobile, we can take advantage of the numeric software keyboard, which is nicer to use than a full QWERTY keyboard.
 
-<video src={datepickerScreenReader + '#t=0.1'} preload="metadata" controls aria-label="Demo of the DateField component using VoiceOver, showing keyboard controls of incrementing and decrementing date and time segments." style={{width: '100%', display: 'block', margin: '40px auto'}} />
+<video src={datepickerScreenReader + '#t=0.1'} preload="metadata" controls playsInline aria-label="Demo of the DateField component using VoiceOver, showing keyboard controls of incrementing and decrementing date and time segments." style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 The [useDateField](../DateField/useDateField.html) and [useTimeField](../TimeField/useTimeField.html) hooks (or the [DateField](s2:DateField) and [TimeField](s2:TimeField) React Spectrum components) may be used standalone in cases where the user is likely to already know the date they need to enter, or the date is far in the past or future, e.g. a birthday or passport expiration date. In these cases, browsing through a calendar UI to find a date is tedious, and entering the date with a keyboard is much more efficient.
 
@@ -83,7 +83,7 @@ For range calendars, we also ensure that the selected date range is clearly comm
 
 Another important area we considered with our calendar components was mobile. With touch screen readers, users access each control on screen using swipe gestures to move a virtual cursor forward and backward. Because of this, calendars can be quite tedious to navigate because they contain so many elements, especially when multiple months are displayed at once. We made sure to provide context when a user enters a calendar of the whole range of visible dates, and included an extra visually hidden "next" button at the end of the dates so a user doesn't need to swipe all the way back to the start to navigate to the next month. The column headers are also skipped to improve ease of navigation, since the day names are already included in the label of each cell.
 
-<video src={calendarMobileScreenReader + '#t=0.1'} preload="metadata" controls aria-label="Demo of the Calendar component using VoiceOver on iOS" style={{maxHeight: '600px', maxWidth: 'min(100%, 1920px)', width: '100%', display: 'block', margin: '40px auto'}}>
+<video src={calendarMobileScreenReader + '#t=0.1'} preload="metadata" controls playsInline aria-label="Demo of the Calendar component using VoiceOver on iOS" style={{maxHeight: '600px', maxWidth: 'min(100%, 1920px)', width: '100%', display: 'block', margin: '40px auto'}}>
   <track src={calendarMobileScreenReaderVTT} default kind="captions" label="English Captions" srcLang="en-us" type="text/vtt" />
 </video>
 
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 5e4d285e125..24f4e3bac53 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
@@ -41,7 +41,7 @@ We are excited to announce the release of drag and drop support in [React Aria](
 - **Interoperability** – Drag data can be provided in multiple data formats for compatibility with many targets and external applications via the native HTML drag and drop API. Drag and drop integrates with multiple selection to allow dragging many objects at once.
 - **Customizability** – Interactions such as hit testing, keyboard navigation, and drop operations can be customized, as well as UIs for drag previews and drop indicators.
 
-<video src={heroVideo} loop autoPlay muted style={{width: '100%', display: 'block', margin: '40px auto'}} />
+<video src={heroVideo} loop autoPlay muted playsInline style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 ## Introduction
 
@@ -65,13 +65,13 @@ For mouse and touch screen users, React Aria uses the native [HTML drag and drop
 
 In addition to native drag and drop, we have also implemented keyboard and screen reader accessible interactions from scratch. Keyboard users can focus a draggable element and press the `Enter` key to start dragging it. This enters a drag and drop mode across the whole page, which allows the user to press `Tab` to navigate only between drop targets that accept the dragged data, while skipping over all other elements. This reduces the number of elements on the page that must be traversed to find a drop target, and removes the guess work often found with other alternatives such as copy and paste. Once a target is chosen, pressing the `Enter` key again performs the drop.
 
-<video src={dndKeyboard + '#t=0.1'} preload="metadata" controls aria-label="Demo of drag and drop using a keyboard, showing list items being selected and dragged to corresponding drop targets." style={{width: '100%', display: 'block', margin: '40px auto'}} />
+<video src={dndKeyboard + '#t=0.1'} preload="metadata" controls playsInline aria-label="Demo of drag and drop using a keyboard, showing list items being selected and dragged to corresponding drop targets." style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 For screen reader users, the interactions are similar. We've taken great care to include prompts and announcements to help guide the user through the process, which adapt to the device, and are localized into over 30 languages. Drag sources and drop targets include ARIA descriptions indicating that the user can press `Enter` or double tap to drag or drop, depending on their device. We also use an ARIA live region to announce when a drag starts, with instructions on how to navigate and perform a drop, and to announce when a drop is completed successfully or canceled by the user.
 
 In addition, while in drag and drop mode, all elements other than valid drop targets are hidden from screen readers. Desktop screen reader users can use the `Tab` key to navigate as described earlier, but touch screen readers navigate by swiping through elements using a virtual cursor, and double tapping to drop. Hiding all non-drop target elements makes it much easier to find valid places to drop, without needing to swipe through potentially hundreds of unrelated elements.
 
-<video src={dndMobile + '#t=0.1'} preload="metadata" controls aria-label="Demo of drag and drop using VoiceOver on iOS" style={{maxHeight: '600px', width: '100%', display: 'block', margin: '40px auto'}}>
+<video src={dndMobile + '#t=0.1'} preload="metadata" controls playsInline aria-label="Demo of drag and drop using VoiceOver on iOS" style={{maxHeight: '600px', width: '100%', display: 'block', margin: '40px auto'}}>
   <track src={dndMobileVTT} default kind="captions" label="English Captions" srcLang="en-us" type="text/vtt" />
 </video>
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
index dcaa7ebb1f5..7a2f436cdf3 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
@@ -90,7 +90,7 @@ A number field should help the user enter a valid number and avoid accidental in
 In addition, we also support several different numbering systems, including the Latin, Arabic, and Han positional decimal systems. There are many different ways of entering numbers, including different hardware keyboard layouts, and various input method editors such as Pinyin, which uses combinations of Latin characters to represent Chinese logograms. These are supported via composition events, which the browser fires as the user enters each Latin character. While these characters by themselves are not valid numbers, we cannot validate them until the sequence is complete and the Latin characters are replaced by the Chinese logogram.
 
 <figure style={{display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '20px 0'}}>
-  <video src={pinyinEntering} loop autoPlay muted style={{margin: 0, marginBottom: 5, width: '300px'}} />
+  <video src={pinyinEntering} loop autoPlay muted playsInline style={{margin: 0, marginBottom: 5, width: '300px'}} />
   <Caption>Entering the number 21 in the Han positional decimal system using the iOS Pinyin keyboard</Caption>
 </figure>
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
index 1bf45a5bd6f..2b1deeec93b 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
@@ -36,7 +36,7 @@ Internationalization is a core feature of our Date and Time components. We suppo
 
 In a [previous blog post](date-and-time-pickers-for-all#date-fields), we discussed the reasoning behind the component structure of our date and time components. In short, we designed these components to render individually focusable segments for each date and time unit, eliminating the challenges of parsing various date formats — an issue commonly encountered with free-form text fields. Since the date and time format is automatically determined based on the user's locale, the user only needs to fill in the values without worrying about the appropriate separators or the order. This made for a smoother, more intuitive experience for the user, removing the guesswork associated with formatting and parsing dates in various locales.
 
-<video src={localeVideoURL} muted controls aria-label="Example of a React Spectrum DateField component in various locales" style={{width: '100%', display: 'block', margin: '40px auto'}} />
+<video src={localeVideoURL} muted controls playsInline aria-label="Example of a React Spectrum DateField component in various locales" style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 ## Unicode Bidirectional Algorithm
 
@@ -54,7 +54,7 @@ Below is an example of how the dates were being formatted based on user-entered
 
 <RTLActualPlaceholder role="img" aria-label="SVG diagram showing RTL actual placeholder issue" />
 
-<video src={placeholderVideoURL} muted controls aria-label="Demo of the date segments shifting when backspacing" style={{width: '100%', display: 'block', margin: '40px auto'}} />
+<video src={placeholderVideoURL} muted controls playsInline aria-label="Demo of the date segments shifting when backspacing" style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 ## TimeFields
 
@@ -137,7 +137,7 @@ After fixing the formatting, we also needed to update the keyboard navigation. P
 
 Below is an example of a date field in Hebrew with the correct date format but incorrect keyboard navigation. Pressing the left arrow key should navigate you to the segment to the immediate left, while the right arrow key should navigate you to the segment to the immediate right.
 
-<video src={keyboardVideoURL} muted controls aria-label="Demo of keyboard navigation prior to fixes" style={{width: '100%', display: 'block', margin: '40px auto'}} />
+<video src={keyboardVideoURL} muted controls playsInline aria-label="Demo of keyboard navigation prior to fixes" style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 As a result, we updated the keyboard navigation in right-to-left languages to calculate the distance between the currently focused segment and other segments to identify the closest node based on whether the left or right arrow key was pressed, rather than reying on the DOM order.
 
diff --git a/packages/dev/s2-docs/pages/s2/Form.mdx b/packages/dev/s2-docs/pages/s2/Form.mdx
index 5aaa30ef302..38c13eed408 100644
--- a/packages/dev/s2-docs/pages/s2/Form.mdx
+++ b/packages/dev/s2-docs/pages/s2/Form.mdx
@@ -14,12 +14,13 @@ export const description = 'Provides layout and alignment for a grouping of fiel
 
 ```tsx render docs={docs.exports.Form} links={docs.links} props={['size', 'labelPosition', 'labelAlign', 'necessityIndicator', 'isRequired', 'isDisabled', 'isEmphasized']} type="s2"
 import {Form, TextField, Checkbox, ButtonGroup, Button} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 <Form/* PROPS */>
   <TextField label="Name" placeholder="Enter your full name" />
   <TextField label="Email" type="email" placeholder="Enter your email" />
   <Checkbox>I agree to the terms</Checkbox>
-  <ButtonGroup>
+  <ButtonGroup styles={style({gridColumnStart: 'field'})}>
     <Button type="submit" variant="primary">Submit</Button>
     <Button type="reset" variant="secondary">Reset</Button>
   </ButtonGroup>
diff --git a/packages/dev/s2-docs/pages/s2/selection.mdx b/packages/dev/s2-docs/pages/s2/selection.mdx
index 2bc61c3e28c..6b17a209e32 100644
--- a/packages/dev/s2-docs/pages/s2/selection.mdx
+++ b/packages/dev/s2-docs/pages/s2/selection.mdx
@@ -29,7 +29,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['lion']));
 
   return (
-    <div>
+    <>
       <CardView
         aria-label="Nature photos"
         ///- begin highlight -///
@@ -37,7 +37,7 @@ function Example() {
         selectedKeys={selectedKeys}
         onSelectionChange={setSelectedKeys}
         ///- end highlight -///
-        styles={style({width: 360, height: 520})}
+        styles={style({width: 360, maxWidth: 'full', height: 520})}
       >
         <AssetCard id="desert" textValue="Desert Sunset">
           <CardPreview>
@@ -77,7 +77,7 @@ function Example() {
         </AssetCard>
       </CardView>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -92,7 +92,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['rulers']));
 
   return (
-    <div className={style({width: 'full', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center'})}>
+    <>
       <MenuTrigger>
         <ActionButton>View</ActionButton>
         <Menu
@@ -109,7 +109,7 @@ function Example() {
         </Menu>
       </MenuTrigger>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -128,7 +128,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['aws']));
 
   return (
-    <div className={style({width: 'full', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center'})}>
+    <>
       <SelectBoxGroup
         aria-label="Cloud providers"
         ///- begin highlight -///
@@ -152,7 +152,7 @@ function Example() {
         </SelectBox>
       </SelectBoxGroup>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -178,7 +178,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['cheese']));
 
   return (
-    <div>
+    <>
       <TableView
         aria-label="Sandwich contents"
         ///- begin highlight -///
@@ -204,7 +204,7 @@ function Example() {
         </TableBody>
       </TableView>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -219,7 +219,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['cheese']));
 
   return (
-    <div>
+    <>
       <TagGroup
         label="Sandwich contents"
         ///- begin highlight -///
@@ -236,7 +236,7 @@ function Example() {
         <Tag id="ham">Ham</Tag>
       </TagGroup>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -254,7 +254,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['bold']));
 
   return (
-    <div>
+    <>
       <ToggleButtonGroup
         aria-label="Text style"
         ///- begin highlight -///
@@ -277,7 +277,7 @@ function Example() {
         </ToggleButton>
       </ToggleButtonGroup>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -292,7 +292,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['project']));
 
   return (
-    <div>
+    <>
       <TreeView
         aria-label="Files"
         defaultExpandedKeys={['documents', 'photos', 'project']}
@@ -301,7 +301,7 @@ function Example() {
         selectedKeys={selectedKeys}
         onSelectionChange={setSelectedKeys}
         ///- end highlight -///
-        styles={style({height: 250, width: 360})}
+        styles={style({height: 250, width: 360, maxWidth: 'full'})}
       >
         <TreeViewItem id="documents" textValue="Documents">
           <TreeViewItemContent>Documents</TreeViewItemContent>
@@ -323,7 +323,7 @@ function Example() {
         </TreeViewItem>
       </TreeView>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -416,7 +416,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['lion']));
 
   return (
-    <div>
+    <>
       <CardView
         aria-label="Nature photos"
         ///- begin highlight -///
@@ -424,7 +424,7 @@ function Example() {
         selectedKeys={selectedKeys}
         onSelectionChange={setSelectedKeys}
         ///- end highlight -///
-        styles={style({width: 360, height: 320})}
+        styles={style({width: 360, maxWidth: 'full', height: 320})}
       >
         <AssetCard id="desert" textValue="Desert Sunset">
           <CardPreview>
@@ -464,7 +464,7 @@ function Example() {
         </AssetCard>
       </CardView>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -479,7 +479,7 @@ function Example() {
   let [selectedKey, setSelectedKey] = useState<Key>('kangaroo');
 
   return (
-    <div>
+    <>
       <ComboBox
         label="Favorite Animal"
         placeholder="Select an animal"
@@ -496,7 +496,7 @@ function Example() {
         <ComboBoxItem id="skunk">Skunk</ComboBoxItem>
       </ComboBox>
       <p className={style({font: 'body'})}>selectedKey: {selectedKey}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -511,7 +511,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['grid']));
 
   return (
-    <div className={style({width: 'full', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center'})}>
+    <>
       <MenuTrigger>
         <ActionButton>View</ActionButton>
         <Menu
@@ -528,7 +528,7 @@ function Example() {
         </Menu>
       </MenuTrigger>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -543,7 +543,7 @@ function Example() {
   let [selectedKey, setSelectedKey] = useState<Key>('month');
 
   return (
-    <div>
+    <>
       <SegmentedControl
         aria-label="Time granularity"
         ///- begin highlight -///
@@ -557,7 +557,7 @@ function Example() {
         <SegmentedControlItem id="year">Year</SegmentedControlItem>
       </SegmentedControl>
       <p className={style({font: 'body'})}>selectedKey: {selectedKey}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -575,7 +575,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['aws']));
 
   return (
-    <div className={style({width: 'full', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center'})}>
+    <>
       <SelectBoxGroup
         aria-label="Cloud provider"
         ///- begin highlight -///
@@ -599,7 +599,7 @@ function Example() {
         </SelectBox>
       </SelectBoxGroup>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -623,7 +623,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['cheese']));
 
   return (
-    <div>
+    <>
       <TableView
         aria-label="Sandwich contents"
         ///- begin highlight -///
@@ -647,7 +647,7 @@ function Example() {
         </TableBody>
       </TableView>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -662,7 +662,7 @@ function Example() {
   let [selectedKey, setSelectedKey] = useState<Key>('files');
 
   return (
-    <div>
+    <>
       <Tabs
         aria-label="Tabs"
         ///- begin highlight -///
@@ -680,7 +680,7 @@ function Example() {
         <TabPanel id="settings">Settings content</TabPanel>
       </Tabs>
       <p className={style({font: 'body'})}>selectedKey: {selectedKey}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -695,7 +695,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['cheese']));
 
   return (
-    <div>
+    <>
       <TagGroup
         label="Sandwich contents"
         ///- begin highlight -///
@@ -710,7 +710,7 @@ function Example() {
         <Tag id="tuna">Tuna Salad</Tag>
       </TagGroup>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -728,7 +728,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['left']));
 
   return (
-    <div>
+    <>
       <ToggleButtonGroup
         aria-label="Text alignment"
         ///- begin highlight -///
@@ -751,7 +751,7 @@ function Example() {
         </ToggleButton>
       </ToggleButtonGroup>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -766,7 +766,7 @@ function Example() {
   let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['documents']));
 
   return (
-    <div>
+    <>
       <TreeView
         aria-label="Files"
         defaultExpandedKeys={['documents', 'photos']}
@@ -775,7 +775,7 @@ function Example() {
         selectedKeys={selectedKeys}
         onSelectionChange={setSelectedKeys}
         ///- end highlight -///
-        styles={style({height: 250, width: 360})}
+        styles={style({height: 250, width: 360, maxWidth: 'full'})}
       >
         <TreeViewItem id="documents" textValue="Documents">
           <TreeViewItemContent>Documents</TreeViewItemContent>
@@ -791,7 +791,7 @@ function Example() {
         </TreeViewItem>
       </TreeView>
       <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -903,7 +903,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
   aria-label="Files"
   selectionMode="multiple"
   defaultExpandedKeys={['computer']}
-  styles={style({height: 250, width: 360})}>
+  styles={style({height: 250, width: 360, maxWidth: 'full'})}>
   <TreeViewItem id="computer" textValue="My Computer">
     <TreeViewItemContent>My Computer</TreeViewItemContent>
     <TreeViewItem
@@ -1026,7 +1026,7 @@ const files = [
   /*- begin highlight -*/
   onAction={id => alert(`Opening ${id}`)}
   /*- end highlight -*/
-  styles={style({height: 250, width: 360})}>
+  styles={style({height: 250, width: 360, maxWidth: 'full'})}>
   <TreeViewItem id="computer" textValue="My Computer">
     <TreeViewItemContent>My Computer</TreeViewItemContent>
     <Collection items={files}>
@@ -1292,7 +1292,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 <TreeView
   aria-label="Pokemon evolution"
-  styles={style({height: 250, width: 360})}
+  styles={style({height: 250, width: 360, maxWidth: 'full'})}
   defaultExpandedKeys={['bulbasaur', 'ivysaur']}
   selectionMode="multiple">
   <TreeViewItem id="bulbasaur" textValue="Bulbasaur">
@@ -1545,7 +1545,7 @@ let items = [
 
 <TreeView
   aria-label="Pokemon evolution"
-  styles={style({height: 250, width: 360})}
+  styles={style({height: 250, width: 360, maxWidth: 'full'})}
   defaultExpandedKeys={[1, 2]}
   selectionMode="multiple"
   ///- begin highlight -///
diff --git a/packages/dev/s2-docs/src/ExampleOutput.tsx b/packages/dev/s2-docs/src/ExampleOutput.tsx
index cb76cc5a21d..6ed335ed0cc 100644
--- a/packages/dev/s2-docs/src/ExampleOutput.tsx
+++ b/packages/dev/s2-docs/src/ExampleOutput.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import {cloneElement, createElement, isValidElement} from 'react';
+import {cloneElement, Component, createElement, isValidElement, ReactNode} from 'react';
+import {Content, Heading, InlineAlert} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 interface ExampleOutputProps {
@@ -48,7 +49,9 @@ export function ExampleOutput({component, props = {}, align = 'center', orientat
         boxSizing: 'border-box'
       })({align, orientation})}
       style={{background: getBackgroundColor(props.staticColor || (props.isOverBackground ? 'white' : undefined))}}>
-      {isValidElement(component) ? cloneElement(component, props) : createElement(component, props)}
+      <ErrorBoundary>
+        {isValidElement(component) ? cloneElement(component, props) : createElement(component, props)}
+      </ErrorBoundary>
     </div>
   );
 }
@@ -61,3 +64,27 @@ function getBackgroundColor(staticColor: 'black' | 'white' | undefined) {
   }
   return undefined;
 }
+
+class ErrorBoundary extends Component<{children: ReactNode}, {error: string | null}> {
+  constructor(props) {
+    super(props);
+    this.state = {error: null};
+  }
+
+  static getDerivedStateFromError(e: Error) {
+    return {error: e.message};
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <InlineAlert variant="negative">
+          <Heading>Error</Heading>
+          <Content>{this.state.error}</Content>
+        </InlineAlert>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/packages/dev/s2-docs/src/Header.tsx b/packages/dev/s2-docs/src/Header.tsx
index 0916b5e7a0e..e5bbe425027 100644
--- a/packages/dev/s2-docs/src/Header.tsx
+++ b/packages/dev/s2-docs/src/Header.tsx
@@ -1,14 +1,12 @@
 'use client';
 
-import {Badge, pressScale, Text} from '@react-spectrum/s2';
 import {baseColor, focusRing, space, style} from '@react-spectrum/s2/style' with { type: 'macro' };
-// @ts-ignore
-import BetaApp from '@react-spectrum/s2/icons/BetaApp';
 import {getBaseUrl} from './pageUtils';
 import {getLibraryFromPage, getLibraryIcon, getLibraryLabel} from './library';
 import GithubLogo from './icons/GithubLogo';
-// @ts-ignore
 import {Link} from 'react-aria-components';
+// @ts-ignore
+import {pressScale} from '@react-spectrum/s2';
 import React, {CSSProperties, useId, useRef, useState} from 'react';
 import SearchMenuTrigger, {preloadSearchMenu} from './SearchMenuTrigger';
 import {useLayoutEffect} from '@react-aria/utils';
@@ -170,10 +168,6 @@ export default function Header() {
             isSearchOpen={searchOpen}
             overlayId={searchMenuId} />
           <div className={style({display: 'flex', alignItems: 'center', gap: 4, justifySelf: 'end'})}>
-            <Badge variant="indigo" size="M" styles={style({marginEnd: 8})}>
-              <BetaApp />
-              <Text>Beta Preview</Text>
-            </Badge>
             <Link className={renderProps => linkStyles({...renderProps})} href={docs} ref={docsRef} style={pressScale(docsRef)} >Docs</Link>
             <Link className={renderProps => linkStyles({...renderProps})} href={release} ref={releasesRef} style={pressScale(releasesRef)} >Releases</Link>
             <Link className={renderProps => linkStyles({...renderProps})} href={blog} target={subdirectory === 's2' ? '_blank' : ''} rel="noopener noreferrer" ref={blogRef} style={pressScale(blogRef)} >Blog</Link>
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 180b1a880a2..7e8563ef5d1 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -160,7 +160,7 @@ export async function Layout(props: PageProps & {children: ReactElement<any>}) {
   let {children} = props;
   let pages = await getPages();
   let currentPage = getCurrentPage(props.currentPage);
-  let isToastPage = currentPage.name === 'Toast.mdx' || currentPage.url?.includes('/s2/Toast');
+  let isToastPage = currentPage.name === 's2/Toast';
   let isSubpage = currentPage.exports?.isSubpage;
   let section = currentPage.exports?.section;
   let isLongForm = isSubpage && section === 'Blog';
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index b1cb12495af..46dc988acf0 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -323,6 +323,7 @@ export function SideNavLink(props) {
 }
 
 function useCurrentSection() {
+  let {currentPage} = useRouter();
   let [selected, setSelected] = useState('');
 
   useEffect(() => {
@@ -348,7 +349,7 @@ function useCurrentSection() {
     }
 
     return () => observer.disconnect();
-  }, []);
+  }, [currentPage]);
 
   return selected;
 }
diff --git a/packages/dev/s2-docs/src/PropTable.tsx b/packages/dev/s2-docs/src/PropTable.tsx
index 8f45cfb0d1c..311e00bcfe8 100644
--- a/packages/dev/s2-docs/src/PropTable.tsx
+++ b/packages/dev/s2-docs/src/PropTable.tsx
@@ -186,7 +186,7 @@ function Rows({props, showDefault, showRequired}: {props: TInterface['properties
           </code>
         </TableCell>
         {showDefault &&
-          <TableCell hideBorder={!!prop.description} styles={prop.default ? undefined : style({display: {default: 'none', sm: '[table-cell]'}})}>
+          <TableCell hideBorder={!!prop.description} styles={prop.default ? undefined : style({display: {default: 'none', sm: '[table-cell]'}, whiteSpace: 'nowrap'})}>
             <strong className={style({font: 'ui', fontWeight: 'bold', display: {sm: 'none'}})}>Default: </strong>
             {prop.default
               ? <span className={codeStyle}><Code lang="tsx">{prop.default}</Code></span>
diff --git a/packages/dev/s2-docs/src/textWidth.ts b/packages/dev/s2-docs/src/textWidth.ts
index 531aaa48e21..67315188ee7 100644
--- a/packages/dev/s2-docs/src/textWidth.ts
+++ b/packages/dev/s2-docs/src/textWidth.ts
@@ -85,8 +85,15 @@ let letters: Record<string, number> = {
 
 // Gets the width of a string of text. Multiply by font size to get pixel width.
 export function getTextWidth(s: string) {
+  let longestWord = '';
+  for (let segment of s.split(/\s+/)) {
+    if (segment.length > longestWord.length) {
+      longestWord = segment;
+    }
+  }
+
   let width = 0;
-  for (let c of s) {
+  for (let c of longestWord) {
     let w = letters[c];
     if (w != null) {
       width += w;
diff --git a/packages/dev/s2-docs/src/typography.tsx b/packages/dev/s2-docs/src/typography.tsx
index 52c973f0826..5c926dd27f3 100644
--- a/packages/dev/s2-docs/src/typography.tsx
+++ b/packages/dev/s2-docs/src/typography.tsx
@@ -60,11 +60,20 @@ function AnchorLink({anchorId, isHovered, level, headingText}) {
 
 const h1 = style({
   font: 'heading-3xl',
+  // This variable is used to calculate the line height.
+  // Normally it is set by the fontSize, but the custom clamp prevents this.
+  '--fs': {
+    type: 'opacity',
+    value: {
+      default: 'pow(1.125, 10)', // heading-2xl
+      isLongForm: 'pow(1.125, 8)' // heading-xl
+    }
+  },
   fontSize: {
     default: {
       // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
-      default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
-      isLongForm: 'heading-xl'
+      default: `clamp(${35 / 16}rem, (100vw - 32px) / var(--width-per-em), ${55 / 16}rem)`,
+      isLongForm: `clamp(${35 / 16}rem, (100vw - 32px) / var(--width-per-em), ${44 / 16}rem)`
     },
     lg: {
       default: 'heading-3xl',
@@ -90,7 +99,7 @@ export function H2({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h2 {...props} data-anchor-link id={id} className={style({font: 'heading-lg', marginTop: 48, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
+    <h2 {...props} data-anchor-link id={id} className={style({font: 'heading-lg', marginTop: 48, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance', position: 'relative', overflowX: 'clip'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={2} headingText={children} />
     </h2>
@@ -101,7 +110,7 @@ export function H3({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h3 {...props} data-anchor-link id={id} className={style({font: 'heading', marginTop: 36, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
+    <h3 {...props} data-anchor-link id={id} className={style({font: 'heading', marginTop: 36, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance', position: 'relative', overflowX: 'clip'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={3} headingText={children} />
     </h3>
@@ -112,7 +121,7 @@ export function H4({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h4 {...props} data-anchor-link id={id} className={style({font: 'heading-sm', maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
+    <h4 {...props} data-anchor-link id={id} className={style({font: 'heading-sm', maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance', position: 'relative', overflowX: 'clip'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={4} headingText={children} />
     </h4>
diff --git a/starters/docs/src/Calendar.css b/starters/docs/src/Calendar.css
index 9556f7fdfa0..668d14bab68 100644
--- a/starters/docs/src/Calendar.css
+++ b/starters/docs/src/Calendar.css
@@ -2,8 +2,9 @@
 @import "./utilities.css";
 
 .react-aria-Calendar {
-  width: fit-content;
+  width: calc(var(--spacing-9) * 7);
   max-width: 100%;
+  container-type: inline-size;
   color: var(--text-color);
   font: var(--font-size) system-ui;
 
@@ -20,6 +21,10 @@
     }
   }
 
+  .react-aria-CalendarGrid {
+    border-spacing: 0;
+  }
+
   [slot=errorMessage] {
     font: var(--font-size-sm) system-ui;
     color: var(--invalid-color);
@@ -32,9 +37,13 @@
 }
 
 .react-aria-CalendarCell {
-  width: var(--spacing-8);
-  line-height: var(--spacing-8);
-  margin: calc(var(--spacing-1) / 2);
+  --gap: var(--spacing-1);
+  width: calc((100cqw / 7) - var(--gap));
+  aspect-ratio: 1;
+  margin: calc(var(--gap) / 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: var(--font-size);
   text-align: center;
   border-radius: 9999px;
@@ -43,6 +52,12 @@
   transition: scale 200ms;
   -webkit-tap-highlight-color: transparent;
 
+  @media (min-resolution: 200dpi) {
+    @container (width < 300px) {
+      --gap: 0px;
+    }
+  }
+
   &[data-outside-month] {
     display: none;
   }
diff --git a/starters/docs/src/DatePicker.css b/starters/docs/src/DatePicker.css
index 98675277e15..d23cfa242e7 100644
--- a/starters/docs/src/DatePicker.css
+++ b/starters/docs/src/DatePicker.css
@@ -1,6 +1,8 @@
 @import "./theme.css";
 
 .react-aria-DatePicker {
+  max-width: 100%;
+
   .react-aria-Group {
     display: flex;
     width: 100%;
@@ -12,5 +14,8 @@
     flex: 1;
     min-width: 0;
     padding-right: var(--spacing-10);
+    overflow-x: auto;
+    overflow-y: clip;
+    scrollbar-width: none;
   }
 }
diff --git a/starters/docs/src/GridList.css b/starters/docs/src/GridList.css
index 21635b8b751..bc07c1a43c1 100644
--- a/starters/docs/src/GridList.css
+++ b/starters/docs/src/GridList.css
@@ -80,6 +80,7 @@
   padding-bottom: var(--spacing-4);
   background: var(--overlay-background);
   box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
+  min-width: 0;
   max-width: 250px;
   overflow: clip;
   position: relative;
diff --git a/starters/docs/src/RangeCalendar.css b/starters/docs/src/RangeCalendar.css
index 350fd10c7bd..8aac1390a1b 100644
--- a/starters/docs/src/RangeCalendar.css
+++ b/starters/docs/src/RangeCalendar.css
@@ -1,8 +1,9 @@
 @import "./theme.css";
 
 .react-aria-RangeCalendar {
-  width: fit-content;
+  width: calc(var(--spacing-9) * 7);
   max-width: 100%;
+  container-type: inline-size;
   font: var(--font-size) system-ui;
   color: var(--text-color);
 
@@ -19,8 +20,9 @@
     }
   }
 
-  table {
+  .react-aria-CalendarGrid {
     border-collapse: collapse;
+    border-spacing: 0;
   }
 
   [slot=errorMessage] {
@@ -30,12 +32,14 @@
 
   .react-aria-CalendarCell {
     margin: 2px 0;
-    padding: 0 2px;
+    padding: 0 calc(var(--gap) / 2);
     position: relative;
     z-index: 1;
 
     span {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 100%;
       border-radius: 9999px;
@@ -61,7 +65,7 @@
         border-start-start-radius: 9999px;
         border-end-start-radius: 9999px;
         border-inline-start-width: 0.5px;
-        margin-inline-start: 1.5px;
+        margin-inline-start: calc(var(--gap) / 2 - 0.5px);
         padding-inline-start: 0;
       }
 
@@ -70,7 +74,7 @@
         border-end-end-radius: 9999px;
         border-start-end-radius: 9999px;
         border-inline-end-width: 0.5px;
-        margin-inline-end: 1.5px;
+        margin-inline-end: calc(var(--gap) / 2 - 0.5px);
         padding-inline-end: 0;
       }
 
diff --git a/starters/docs/src/Slider.css b/starters/docs/src/Slider.css
index f47e3b4deae..634fa567a99 100644
--- a/starters/docs/src/Slider.css
+++ b/starters/docs/src/Slider.css
@@ -6,7 +6,7 @@
   grid-template-areas: "label output"
                        "track track";
   grid-template-columns: 1fr auto;
-  max-width: min(100%, 300px);
+  max-width: min(calc(100% - 12px), 300px);
   font: var(--font-size) system-ui;
   color: var(--text-color);
 
diff --git a/starters/docs/src/Tabs.css b/starters/docs/src/Tabs.css
index 8b1a50b4956..a7b91fbc247 100644
--- a/starters/docs/src/Tabs.css
+++ b/starters/docs/src/Tabs.css
@@ -4,6 +4,7 @@
   display: flex;
   gap: var(--spacing-2);
   color: var(--text-color);
+  max-width: 100%;
 
   &[data-orientation=horizontal] {
     flex-direction: column;
@@ -27,6 +28,10 @@
 
   &[data-orientation=horizontal] {
     border-bottom: 0.5px solid var(--border-color);
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: clip;
+    scrollbar-width: none;
 
     .react-aria-SelectionIndicator {
       left: 0;
diff --git a/starters/docs/src/Toolbar.css b/starters/docs/src/Toolbar.css
index ce52d1f84a0..4e32c81b673 100644
--- a/starters/docs/src/Toolbar.css
+++ b/starters/docs/src/Toolbar.css
@@ -21,19 +21,9 @@
   }
 
   .react-aria-Separator {
-    align-self: stretch;
-    background-color: var(--border-color);
-
-    &:not([aria-orientation=vertical]) {
-      border: none;
-      height: 0.5px;
-      width: 100%;
-      margin: 10px 0;
-    }
-
     &[aria-orientation=vertical] {
-      width: 0.5px;
-      margin: 0px 10px;
+      height: auto;
+      margin: 0px var(--spacing-1);
     }
   }
 }
diff --git a/starters/docs/src/Toolbar.tsx b/starters/docs/src/Toolbar.tsx
index 46c4b4819ba..0510bd8bf3c 100644
--- a/starters/docs/src/Toolbar.tsx
+++ b/starters/docs/src/Toolbar.tsx
@@ -1,11 +1,14 @@
 'use client';
-import {Toolbar as RACToolbar, ToggleButtonGroupContext, ToolbarProps} from 'react-aria-components';
+import {Toolbar as RACToolbar, SeparatorContext, ToggleButtonGroupContext, ToolbarProps} from 'react-aria-components';
 import './Toolbar.css';
 
 export function Toolbar(props: ToolbarProps) {
+  let {orientation = 'horizontal'} = props;
   return (
-    <ToggleButtonGroupContext.Provider value={{orientation: props.orientation}}>
-      <RACToolbar {...props} />
+    <ToggleButtonGroupContext.Provider value={{orientation}}>
+      <SeparatorContext.Provider value={{orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal'}}>
+        <RACToolbar {...props} />
+      </SeparatorContext.Provider>
     </ToggleButtonGroupContext.Provider>
   );
 }
diff --git a/starters/tailwind/src/Calendar.tsx b/starters/tailwind/src/Calendar.tsx
index 1e9f1174ca6..00a78a90411 100644
--- a/starters/tailwind/src/Calendar.tsx
+++ b/starters/tailwind/src/Calendar.tsx
@@ -20,7 +20,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 const cellStyles = tv({
   extend: focusRing,
-  base: 'w-9 h-9 text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none [-webkit-tap-highlight-color:transparent]',
+  base: 'w-[calc(100cqw/7)] aspect-square text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none [-webkit-tap-highlight-color:transparent]',
   variants: {
     isSelected: {
       false: 'text-neutral-900 dark:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 pressed:bg-neutral-300 dark:pressed:bg-neutral-600',
@@ -40,7 +40,7 @@ export function Calendar<T extends DateValue>(
   { errorMessage, ...props }: CalendarProps<T>
 ) {
   return (
-    <AriaCalendar {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col font-sans')}>
+    <AriaCalendar {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col font-sans w-[calc(9*var(--spacing)*7)] max-w-full @container')}>
       <CalendarHeader />
       <CalendarGrid className="border-spacing-0">
         <CalendarGridHeader />
@@ -61,7 +61,7 @@ export function CalendarHeader() {
       <Button variant="quiet" slot="previous">
         {direction === 'rtl' ? <ChevronRight aria-hidden size={18} /> : <ChevronLeft aria-hidden size={18} />}
       </Button>
-      <Heading className="flex-1 font-sans font-semibold [font-variation-settings:normal] text-lg text-center mx-2 my-0 text-neutral-900 dark:text-neutral-200" />
+      <Heading className="flex-1 font-sans font-semibold [font-variation-settings:normal] text-base text-center mx-2 my-0 text-neutral-900 dark:text-neutral-200" />
       <Button variant="quiet" slot="next">
         {direction === 'rtl' ? <ChevronLeft aria-hidden size={18} /> : <ChevronRight aria-hidden size={18} />}
       </Button>
diff --git a/starters/tailwind/src/Meter.tsx b/starters/tailwind/src/Meter.tsx
index 8006f986c96..9af4d864b71 100644
--- a/starters/tailwind/src/Meter.tsx
+++ b/starters/tailwind/src/Meter.tsx
@@ -14,7 +14,7 @@ export interface MeterProps extends AriaMeterProps {
 
 export function Meter({ label, ...props }: MeterProps) {
   return (
-    <AriaMeter {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2 font-sans')}>
+    <AriaMeter {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2 font-sans max-w-full')}>
       {({ percentage, valueText }) => (
         <>
           <div className="flex justify-between gap-2">
@@ -24,7 +24,7 @@ export function Meter({ label, ...props }: MeterProps) {
               {' ' + valueText}
             </span>
           </div>
-          <div className="w-64 h-2 rounded-full bg-neutral-300 dark:bg-neutral-700 outline outline-1 -outline-offset-1 outline-transparent relative">
+          <div className="w-64 max-w-full h-2 rounded-full bg-neutral-300 dark:bg-neutral-700 outline outline-1 -outline-offset-1 outline-transparent relative">
             <div className={`absolute top-0 left-0 h-full rounded-full ${getColor(percentage)} forced-colors:bg-[Highlight]`} style={{ width: percentage + '%' }} />
           </div>
         </>
diff --git a/starters/tailwind/src/ProgressBar.tsx b/starters/tailwind/src/ProgressBar.tsx
index 41c454203d6..fed9ab8d896 100644
--- a/starters/tailwind/src/ProgressBar.tsx
+++ b/starters/tailwind/src/ProgressBar.tsx
@@ -13,14 +13,14 @@ export interface ProgressBarProps extends AriaProgressBarProps {
 
 export function ProgressBar({ label, ...props }: ProgressBarProps) {
   return (
-    <AriaProgressBar {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2 font-sans')}>
+    <AriaProgressBar {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2 font-sans max-w-full')}>
       {({ percentage, valueText, isIndeterminate }) => (
         <>
           <div className="flex justify-between gap-2">
             <Label>{label}</Label>
             <span className="text-sm text-neutral-600 dark:text-neutral-400">{valueText}</span>
           </div>
-          <div className="w-64 h-2 rounded-full bg-neutral-300 dark:bg-neutral-700 outline outline-1 -outline-offset-1 outline-transparent relative overflow-hidden">
+          <div className="w-64 max-w-full h-2 rounded-full bg-neutral-300 dark:bg-neutral-700 outline outline-1 -outline-offset-1 outline-transparent relative overflow-hidden">
             <div className={`absolute top-0 h-full rounded-full bg-blue-500 forced-colors:bg-[Highlight] ${isIndeterminate ? 'left-full animate-in duration-1000 slide-in-from-left-[20rem] repeat-infinite ease-out' : 'left-0'}`} style={{ width: (isIndeterminate ? 40 : percentage) + '%' }} />
           </div>
         </>
diff --git a/starters/tailwind/src/RangeCalendar.tsx b/starters/tailwind/src/RangeCalendar.tsx
index 0dfa7ad0443..6a522fb53e7 100644
--- a/starters/tailwind/src/RangeCalendar.tsx
+++ b/starters/tailwind/src/RangeCalendar.tsx
@@ -41,12 +41,12 @@ export function RangeCalendar<T extends DateValue>(
   { errorMessage, ...props }: RangeCalendarProps<T>
 ) {
   return (
-    <AriaRangeCalendar {...props} className={composeTailwindRenderProps(props.className, 'font-sans')}>
+    <AriaRangeCalendar {...props} className={composeTailwindRenderProps(props.className, 'font-sans w-[calc(9*var(--spacing)*7)] max-w-full @container')}>
       <CalendarHeader />
       <CalendarGrid className="[&_td]:px-0 [&_td]:py-px border-spacing-0">
         <CalendarGridHeader />
         <CalendarGridBody>
-          {(date) => <CalendarCell date={date} className="group w-9 h-9 text-sm outline outline-0 cursor-default outside-month:text-neutral-300 selected:bg-blue-100 dark:selected:bg-blue-700/30 forced-colors:selected:bg-[Highlight] invalid:selected:bg-red-100 dark:invalid:selected:bg-red-700/30 forced-colors:invalid:selected:bg-[Mark] [td:first-child_&]:rounded-s-full selection-start:rounded-s-full [td:last-child_&]:rounded-e-full selection-end:rounded-e-full [-webkit-tap-highlight-color:transparent]">
+          {(date) => <CalendarCell date={date} className="group w-[calc(100cqw/7)] aspect-square text-sm outline outline-0 cursor-default outside-month:text-neutral-300 selected:bg-blue-100 dark:selected:bg-blue-700/30 forced-colors:selected:bg-[Highlight] invalid:selected:bg-red-100 dark:invalid:selected:bg-red-700/30 forced-colors:invalid:selected:bg-[Mark] [td:first-child_&]:rounded-s-full selection-start:rounded-s-full [td:last-child_&]:rounded-e-full selection-end:rounded-e-full [-webkit-tap-highlight-color:transparent]">
             {({formattedDate, isSelected, isSelectionStart, isSelectionEnd, isFocusVisible, isDisabled}) =>
               <span
                 className={cell({
diff --git a/starters/tailwind/src/SearchField.tsx b/starters/tailwind/src/SearchField.tsx
index 9c155fc889a..cd7d1745421 100644
--- a/starters/tailwind/src/SearchField.tsx
+++ b/starters/tailwind/src/SearchField.tsx
@@ -21,7 +21,7 @@ export function SearchField(
   { label, description, errorMessage, placeholder, ...props }: SearchFieldProps
 ) {
   return (
-    <AriaSearchField {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 min-w-[40px] font-sans')}>
+    <AriaSearchField {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 min-w-[40px] font-sans max-w-full')}>
       {label && <Label>{label}</Label>}
       <FieldGroup>
         <SearchIcon aria-hidden className="w-4 h-4 ml-2 text-neutral-500 dark:text-neutral-400 forced-colors:text-[ButtonText] group-disabled:text-neutral-200 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText]" />
diff --git a/starters/tailwind/src/Slider.tsx b/starters/tailwind/src/Slider.tsx
index c08d6ae88bf..9cbebcc6bef 100644
--- a/starters/tailwind/src/Slider.tsx
+++ b/starters/tailwind/src/Slider.tsx
@@ -61,7 +61,7 @@ export function Slider<T extends number | number[]>(
   { label, thumbLabels, ...props }: SliderProps<T>
 ) {
   return (
-    <AriaSlider {...props} className={composeTailwindRenderProps(props.className, 'font-sans orientation-horizontal:grid orientation-vertical:flex grid-cols-[1fr_auto] flex-col items-center gap-2 orientation-horizontal:w-64')}>
+    <AriaSlider {...props} className={composeTailwindRenderProps(props.className, 'font-sans orientation-horizontal:grid orientation-vertical:flex grid-cols-[1fr_auto] flex-col items-center gap-2 orientation-horizontal:w-64 orientation-horizontal:max-w-[calc(100%-10px)]')}>
       <Label>{label}</Label>
       <SliderOutput className="text-sm text-neutral-500 dark:text-neutral-400 orientation-vertical:hidden">
         {({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}
diff --git a/starters/tailwind/src/Tabs.tsx b/starters/tailwind/src/Tabs.tsx
index 6496bde342f..15917d8d33c 100644
--- a/starters/tailwind/src/Tabs.tsx
+++ b/starters/tailwind/src/Tabs.tsx
@@ -19,7 +19,7 @@ import { focusRing } from './utils';
 import { twMerge } from 'tailwind-merge';
 
 const tabsStyles = tv({
-  base: 'flex gap-4 font-sans',
+  base: 'flex gap-4 font-sans max-w-full',
   variants: {
     orientation: {
       horizontal: 'flex-col',
@@ -40,7 +40,7 @@ export function Tabs(props: TabsProps) {
 }
 
 const tabListStyles = tv({
-  base: 'flex',
+  base: 'flex max-w-full p-1 -m-1 overflow-x-auto overflow-y-clip [scrollbar-width:none]',
   variants: {
     orientation: {
       horizontal: 'flex-row',

From 4205ecd82c4d21daf355ed633c1ec1d1368d67cf Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 9 Dec 2025 14:05:45 -0800
Subject: [PATCH 06/10] docs: S2 homepage (#9295)

* wip s2 homepage

* test

* add some decriptions

* add some more decriptions

* add even more decriptions

* Add use client to illustrations

* Fix some icons

* temp: simulate HCM

* more homepage stuff

* temp: test fix

* temp: more hcm

* fixes and a11y improvements

* improvements and fixes

* update test

* responsive

* Add reduce motion example

* Display a fixed number of icon rows

* better hcm

* improve press animation

* add reusable utilities example

* fix mobile example

* colors

* Always set ColorSchemeContext

So that react tree doesn't re-mount if you change it

* Fix react warning

* lint

* fix

* move hcm/rem simulation behind a flag

* Add mobile animation

* Improve Field HCM

* temp: private Slider staticColor prop

* Add arrows

* Add arrows, header, and footer

* fix safari

* updates

* hover

* fix link

* add new description copy

* add example of title v-slider

* fix some urls

* Fix toast rename

---------

Co-authored-by: Danni <darobins@adobe.com>
---
 ...r-react-static-npm-2.16.1-138e4b8f05.patch |  13 +-
 .../gradient/generic1/3D.tsx                  |   2 +-
 .../gradient/generic1/3Dasset.tsx             |   2 +-
 .../gradient/generic1/AIGenerate.tsx          |   2 +-
 .../gradient/generic1/AIGenerateImage.tsx     |   2 +-
 .../gradient/generic1/AIchat.tsx              |   2 +-
 .../gradient/generic1/Accessibility.tsx       |   2 +-
 .../gradient/generic1/Animation.tsx           |   2 +-
 .../gradient/generic1/Apps.tsx                |   2 +-
 .../gradient/generic1/Artboard.tsx            |   2 +-
 .../gradient/generic1/Assets.tsx              |   2 +-
 .../gradient/generic1/AudioWave.tsx           |   2 +-
 .../gradient/generic1/BadgeVerified.tsx       |   2 +-
 .../gradient/generic1/Bell.tsx                |   2 +-
 .../gradient/generic1/Bolt.tsx                |   2 +-
 .../gradient/generic1/Brand.tsx               |   2 +-
 .../gradient/generic1/Briefcase.tsx           |   2 +-
 .../gradient/generic1/BrightnessContrast.tsx  |   2 +-
 .../gradient/generic1/Browser.tsx             |   2 +-
 .../gradient/generic1/Brush.tsx               |   2 +-
 .../gradient/generic1/BuildTable.tsx          |   2 +-
 .../gradient/generic1/Buildings.tsx           |   2 +-
 .../gradient/generic1/Calendar.tsx            |   2 +-
 .../gradient/generic1/Camera.tsx              |   2 +-
 .../gradient/generic1/CardTapPayment.tsx      |   2 +-
 .../gradient/generic1/Channel.tsx             |   2 +-
 .../gradient/generic1/ChartAreaStack.tsx      |   2 +-
 .../gradient/generic1/Chatbubble.tsx          |   2 +-
 .../gradient/generic1/Checkmark.tsx           |   2 +-
 .../gradient/generic1/Clipboard.tsx           |   2 +-
 .../gradient/generic1/Clock.tsx               |   2 +-
 .../gradient/generic1/Cloud.tsx               |   2 +-
 .../gradient/generic1/CloudUpload.tsx         |   2 +-
 .../gradient/generic1/CodeBrackets.tsx        |   2 +-
 .../gradient/generic1/Color.tsx               |   2 +-
 .../gradient/generic1/CommentText.tsx         |   2 +-
 .../gradient/generic1/Confetti.tsx            |   2 +-
 .../gradient/generic1/Conversationbubbles.tsx |   2 +-
 .../gradient/generic1/Crop.tsx                |   2 +-
 .../gradient/generic1/Cursor.tsx              |   2 +-
 .../gradient/generic1/Cut.tsx                 |   2 +-
 .../gradient/generic1/Data.tsx                |   2 +-
 .../gradient/generic1/DataAnalytics.tsx       |   2 +-
 .../gradient/generic1/Desktop.tsx             |   2 +-
 .../gradient/generic1/Diamond.tsx             |   2 +-
 .../gradient/generic1/Document.tsx            |   2 +-
 .../gradient/generic1/Download.tsx            |   2 +-
 .../gradient/generic1/DropToUpload.tsx        |   2 +-
 .../gradient/generic1/Education.tsx           |   2 +-
 .../gradient/generic1/Effects.tsx             |   2 +-
 .../gradient/generic1/Emoji.tsx               |   2 +-
 .../gradient/generic1/EmptyStateExport.tsx    |   2 +-
 .../gradient/generic1/Explosion.tsx           |   2 +-
 .../gradient/generic1/ExportTo.tsx            |   2 +-
 .../gradient/generic1/Exposure.tsx            |   2 +-
 .../gradient/generic1/FileImage.tsx           |   2 +-
 .../gradient/generic1/FileShared.tsx          |   2 +-
 .../gradient/generic1/FileText.tsx            |   2 +-
 .../gradient/generic1/FileVideo.tsx           |   2 +-
 .../gradient/generic1/FileZip.tsx             |   2 +-
 .../gradient/generic1/Filmstrip.tsx           |   2 +-
 .../gradient/generic1/Filter.tsx              |   2 +-
 .../gradient/generic1/Filters.tsx             |   2 +-
 .../gradient/generic1/Fireworks.tsx           |   2 +-
 .../gradient/generic1/Flag.tsx                |   2 +-
 .../gradient/generic1/FlagCheckmark.tsx       |   2 +-
 .../gradient/generic1/FlagCross.tsx           |   2 +-
 .../gradient/generic1/FolderClose.tsx         |   2 +-
 .../gradient/generic1/FolderOpen.tsx          |   2 +-
 .../gradient/generic1/FolderShared.tsx        |   2 +-
 .../gradient/generic1/GearSetting.tsx         |   2 +-
 .../gradient/generic1/Gift.tsx                |   2 +-
 .../gradient/generic1/Globe.tsx               |   2 +-
 .../gradient/generic1/GlobeGrid.tsx           |   2 +-
 .../gradient/generic1/GraphBarChart.tsx       |   2 +-
 .../gradient/generic1/Hand.tsx                |   2 +-
 .../gradient/generic1/Handshake.tsx           |   2 +-
 .../gradient/generic1/Heart.tsx               |   2 +-
 .../gradient/generic1/HelpCircle.tsx          |   2 +-
 .../gradient/generic1/Home.tsx                |   2 +-
 .../gradient/generic1/Illustration.tsx        |   2 +-
 .../gradient/generic1/Image.tsx               |   2 +-
 .../gradient/generic1/ImageStack.tsx          |   2 +-
 .../gradient/generic1/InfiniteLooping.tsx     |   2 +-
 .../gradient/generic1/Information.tsx         |   2 +-
 .../gradient/generic1/Interaction.tsx         |   2 +-
 .../gradient/generic1/Laptop.tsx              |   2 +-
 .../gradient/generic1/Layers.tsx              |   2 +-
 .../gradient/generic1/Libraries.tsx           |   2 +-
 .../gradient/generic1/Lightbulb.tsx           |   2 +-
 .../gradient/generic1/LightbulbRays.tsx       |   2 +-
 .../gradient/generic1/Lighten.tsx             |   2 +-
 .../gradient/generic1/Link.tsx                |   2 +-
 .../gradient/generic1/Location.tsx            |   2 +-
 .../gradient/generic1/LockClose.tsx           |   2 +-
 .../gradient/generic1/LockOpen.tsx            |   2 +-
 .../gradient/generic1/Logo.tsx                |   2 +-
 .../gradient/generic1/MagicWand.tsx           |   2 +-
 .../gradient/generic1/MailClose.tsx           |   2 +-
 .../gradient/generic1/MailOpen.tsx            |   2 +-
 .../gradient/generic1/Market.tsx              |   2 +-
 .../gradient/generic1/MegaphonePromote.tsx    |   2 +-
 .../gradient/generic1/MegaphonePromote2.tsx   |   2 +-
 .../gradient/generic1/Mention.tsx             |   2 +-
 .../gradient/generic1/Microphone.tsx          |   2 +-
 .../gradient/generic1/Minimize.tsx            |   2 +-
 .../gradient/generic1/MovieCamera.tsx         |   2 +-
 .../gradient/generic1/MusicNote.tsx           |   2 +-
 .../gradient/generic1/NoElements.tsx          |   2 +-
 .../gradient/generic1/Paperairplane.tsx       |   2 +-
 .../gradient/generic1/Paperclip.tsx           |   2 +-
 .../gradient/generic1/Pause.tsx               |   2 +-
 .../gradient/generic1/Pencil.tsx              |   2 +-
 .../gradient/generic1/Phone.tsx               |   2 +-
 .../gradient/generic1/PieChart.tsx            |   2 +-
 .../gradient/generic1/PiggyBank.tsx           |   2 +-
 .../gradient/generic1/Pin.tsx                 |   2 +-
 .../gradient/generic1/Play.tsx                |   2 +-
 .../gradient/generic1/PlayTriangle.tsx        |   2 +-
 .../gradient/generic1/Plugin.tsx              |   2 +-
 .../gradient/generic1/Prompt.tsx              |   2 +-
 .../gradient/generic1/Properties.tsx          |   2 +-
 .../gradient/generic1/Redo.tsx                |   2 +-
 .../gradient/generic1/Remix.tsx               |   2 +-
 .../gradient/generic1/Replace.tsx             |   2 +-
 .../gradient/generic1/Revert.tsx              |   2 +-
 .../gradient/generic1/Ribbon.tsx              |   2 +-
 .../gradient/generic1/Rocket.tsx              |   2 +-
 .../gradient/generic1/RotateCCW.tsx           |   2 +-
 .../gradient/generic1/RotateCW.tsx            |   2 +-
 .../gradient/generic1/Ruler.tsx               |   2 +-
 .../gradient/generic1/Search.tsx              |   2 +-
 .../gradient/generic1/Segmentation.tsx        |   2 +-
 .../gradient/generic1/Server.tsx              |   2 +-
 .../gradient/generic1/Shapes.tsx              |   2 +-
 .../gradient/generic1/ShoppingBag.tsx         |   2 +-
 .../gradient/generic1/ShoppingCart.tsx        |   2 +-
 .../gradient/generic1/Sparkles.tsx            |   2 +-
 .../gradient/generic1/SpeedFast.tsx           |   2 +-
 .../gradient/generic1/StampClone.tsx          |   2 +-
 .../gradient/generic1/Star.tsx                |   2 +-
 .../gradient/generic1/StepForward.tsx         |   2 +-
 .../gradient/generic1/Switch.tsx              |   2 +-
 .../gradient/generic1/Tablet.tsx              |   2 +-
 .../gradient/generic1/Tag.tsx                 |   2 +-
 .../gradient/generic1/Targeted.tsx            |   2 +-
 .../gradient/generic1/Text.tsx                |   2 +-
 .../gradient/generic1/ThreeArrowsCircle.tsx   |   2 +-
 .../gradient/generic1/ThumbsUp.tsx            |   2 +-
 .../gradient/generic1/Transform.tsx           |   2 +-
 .../gradient/generic1/Translate.tsx           |   2 +-
 .../gradient/generic1/Trash.tsx               |   2 +-
 .../gradient/generic1/Trophy.tsx              |   2 +-
 .../gradient/generic1/Update.tsx              |   2 +-
 .../gradient/generic1/Upload.tsx              |   2 +-
 .../gradient/generic1/User.tsx                |   2 +-
 .../gradient/generic1/UserAvatar.tsx          |   2 +-
 .../gradient/generic1/UserGroup.tsx           |   2 +-
 .../gradient/generic1/VectorDraw.tsx          |   2 +-
 .../gradient/generic1/Video.tsx               |   2 +-
 .../gradient/generic1/Volume.tsx              |   2 +-
 .../gradient/generic1/VolumeOne.tsx           |   2 +-
 .../gradient/generic1/Wallet.tsx              |   2 +-
 .../gradient/generic2/3D.tsx                  |   2 +-
 .../gradient/generic2/3Dasset.tsx             |   2 +-
 .../gradient/generic2/AIGenerate.tsx          |   2 +-
 .../gradient/generic2/AIGenerateImage.tsx     |   2 +-
 .../gradient/generic2/AIchat.tsx              |   2 +-
 .../gradient/generic2/Accessibility.tsx       |   2 +-
 .../gradient/generic2/Animation.tsx           |   2 +-
 .../gradient/generic2/Apps.tsx                |   2 +-
 .../gradient/generic2/Artboard.tsx            |   2 +-
 .../gradient/generic2/Assets.tsx              |   2 +-
 .../gradient/generic2/AudioWave.tsx           |   2 +-
 .../gradient/generic2/BadgeVerified.tsx       |   2 +-
 .../gradient/generic2/Bell.tsx                |   2 +-
 .../gradient/generic2/Bolt.tsx                |   2 +-
 .../gradient/generic2/Brand.tsx               |   2 +-
 .../gradient/generic2/Briefcase.tsx           |   2 +-
 .../gradient/generic2/BrightnessContrast.tsx  |   2 +-
 .../gradient/generic2/Browser.tsx             |   2 +-
 .../gradient/generic2/Brush.tsx               |   2 +-
 .../gradient/generic2/BuildTable.tsx          |   2 +-
 .../gradient/generic2/Buildings.tsx           |   2 +-
 .../gradient/generic2/Calendar.tsx            |   2 +-
 .../gradient/generic2/Camera.tsx              |   2 +-
 .../gradient/generic2/CardTapPayment.tsx      |   2 +-
 .../gradient/generic2/Channel.tsx             |   2 +-
 .../gradient/generic2/ChartAreaStack.tsx      |   2 +-
 .../gradient/generic2/Chatbubble.tsx          |   2 +-
 .../gradient/generic2/Checkmark.tsx           |   2 +-
 .../gradient/generic2/Clipboard.tsx           |   2 +-
 .../gradient/generic2/Clock.tsx               |   2 +-
 .../gradient/generic2/Cloud.tsx               |   2 +-
 .../gradient/generic2/CloudUpload.tsx         |   2 +-
 .../gradient/generic2/CodeBrackets.tsx        |   2 +-
 .../gradient/generic2/Color.tsx               |   2 +-
 .../gradient/generic2/CommentText.tsx         |   2 +-
 .../gradient/generic2/Confetti.tsx            |   2 +-
 .../gradient/generic2/Conversationbubbles.tsx |   2 +-
 .../gradient/generic2/Crop.tsx                |   2 +-
 .../gradient/generic2/Cursor.tsx              |   2 +-
 .../gradient/generic2/Cut.tsx                 |   2 +-
 .../gradient/generic2/Data.tsx                |   2 +-
 .../gradient/generic2/DataAnalytics.tsx       |   2 +-
 .../gradient/generic2/Desktop.tsx             |   2 +-
 .../gradient/generic2/Diamond.tsx             |   2 +-
 .../gradient/generic2/Document.tsx            |   2 +-
 .../gradient/generic2/Download.tsx            |   2 +-
 .../gradient/generic2/DropToUpload.tsx        |   2 +-
 .../gradient/generic2/Education.tsx           |   2 +-
 .../gradient/generic2/Effects.tsx             |   2 +-
 .../gradient/generic2/Emoji.tsx               |   2 +-
 .../gradient/generic2/EmptyStateExport.tsx    |   2 +-
 .../gradient/generic2/Explosion.tsx           |   2 +-
 .../gradient/generic2/ExportTo.tsx            |   2 +-
 .../gradient/generic2/Exposure.tsx            |   2 +-
 .../gradient/generic2/FileImage.tsx           |   2 +-
 .../gradient/generic2/FileShared.tsx          |   2 +-
 .../gradient/generic2/FileText.tsx            |   2 +-
 .../gradient/generic2/FileVideo.tsx           |   2 +-
 .../gradient/generic2/FileZip.tsx             |   2 +-
 .../gradient/generic2/Filmstrip.tsx           |   2 +-
 .../gradient/generic2/Filter.tsx              |   2 +-
 .../gradient/generic2/Filters.tsx             |   2 +-
 .../gradient/generic2/Fireworks.tsx           |   2 +-
 .../gradient/generic2/Flag.tsx                |   2 +-
 .../gradient/generic2/FlagCheckmark.tsx       |   2 +-
 .../gradient/generic2/FlagCross.tsx           |   2 +-
 .../gradient/generic2/FolderClose.tsx         |   2 +-
 .../gradient/generic2/FolderOpen.tsx          |   2 +-
 .../gradient/generic2/FolderShared.tsx        |   2 +-
 .../gradient/generic2/GearSetting.tsx         |   2 +-
 .../gradient/generic2/Gift.tsx                |   2 +-
 .../gradient/generic2/Globe.tsx               |   2 +-
 .../gradient/generic2/GlobeGrid.tsx           |   2 +-
 .../gradient/generic2/GraphBarChart.tsx       |   2 +-
 .../gradient/generic2/Hand.tsx                |   2 +-
 .../gradient/generic2/Handshake.tsx           |   2 +-
 .../gradient/generic2/Heart.tsx               |   2 +-
 .../gradient/generic2/HelpCircle.tsx          |   2 +-
 .../gradient/generic2/Home.tsx                |   2 +-
 .../gradient/generic2/Illustration.tsx        |   2 +-
 .../gradient/generic2/Image.tsx               |   2 +-
 .../gradient/generic2/ImageStack.tsx          |   2 +-
 .../gradient/generic2/InfiniteLooping.tsx     |   2 +-
 .../gradient/generic2/Information.tsx         |   2 +-
 .../gradient/generic2/Interaction.tsx         |   2 +-
 .../gradient/generic2/Laptop.tsx              |   2 +-
 .../gradient/generic2/Layers.tsx              |   2 +-
 .../gradient/generic2/Libraries.tsx           |   2 +-
 .../gradient/generic2/Lightbulb.tsx           |   2 +-
 .../gradient/generic2/LightbulbRays.tsx       |   2 +-
 .../gradient/generic2/Lighten.tsx             |   2 +-
 .../gradient/generic2/Link.tsx                |   2 +-
 .../gradient/generic2/Location.tsx            |   2 +-
 .../gradient/generic2/LockClose.tsx           |   2 +-
 .../gradient/generic2/LockOpen.tsx            |   2 +-
 .../gradient/generic2/Logo.tsx                |   2 +-
 .../gradient/generic2/MagicWand.tsx           |   2 +-
 .../gradient/generic2/MailClose.tsx           |   2 +-
 .../gradient/generic2/MailOpen.tsx            |   2 +-
 .../gradient/generic2/Market.tsx              |   2 +-
 .../gradient/generic2/MegaphonePromote.tsx    |   2 +-
 .../gradient/generic2/MegaphonePromote2.tsx   |   2 +-
 .../gradient/generic2/Mention.tsx             |   2 +-
 .../gradient/generic2/Microphone.tsx          |   2 +-
 .../gradient/generic2/Minimize.tsx            |   2 +-
 .../gradient/generic2/MovieCamera.tsx         |   2 +-
 .../gradient/generic2/MusicNote.tsx           |   2 +-
 .../gradient/generic2/NoElements.tsx          |   2 +-
 .../gradient/generic2/Paperairplane.tsx       |   2 +-
 .../gradient/generic2/Paperclip.tsx           |   2 +-
 .../gradient/generic2/Pause.tsx               |   2 +-
 .../gradient/generic2/Pencil.tsx              |   2 +-
 .../gradient/generic2/Phone.tsx               |   2 +-
 .../gradient/generic2/PieChart.tsx            |   2 +-
 .../gradient/generic2/PiggyBank.tsx           |   2 +-
 .../gradient/generic2/Pin.tsx                 |   2 +-
 .../gradient/generic2/Play.tsx                |   2 +-
 .../gradient/generic2/PlayTriangle.tsx        |   2 +-
 .../gradient/generic2/Plugin.tsx              |   2 +-
 .../gradient/generic2/Prompt.tsx              |   2 +-
 .../gradient/generic2/Properties.tsx          |   2 +-
 .../gradient/generic2/Redo.tsx                |   2 +-
 .../gradient/generic2/Remix.tsx               |   2 +-
 .../gradient/generic2/Replace.tsx             |   2 +-
 .../gradient/generic2/Revert.tsx              |   2 +-
 .../gradient/generic2/Ribbon.tsx              |   2 +-
 .../gradient/generic2/Rocket.tsx              |   2 +-
 .../gradient/generic2/RotateCCW.tsx           |   2 +-
 .../gradient/generic2/RotateCW.tsx            |   2 +-
 .../gradient/generic2/Ruler.tsx               |   2 +-
 .../gradient/generic2/Search.tsx              |   2 +-
 .../gradient/generic2/Segmentation.tsx        |   2 +-
 .../gradient/generic2/Server.tsx              |   2 +-
 .../gradient/generic2/Shapes.tsx              |   2 +-
 .../gradient/generic2/ShoppingBag.tsx         |   2 +-
 .../gradient/generic2/ShoppingCart.tsx        |   2 +-
 .../gradient/generic2/Sparkles.tsx            |   2 +-
 .../gradient/generic2/SpeedFast.tsx           |   2 +-
 .../gradient/generic2/StampClone.tsx          |   2 +-
 .../gradient/generic2/Star.tsx                |   2 +-
 .../gradient/generic2/StepForward.tsx         |   2 +-
 .../gradient/generic2/Switch.tsx              |   2 +-
 .../gradient/generic2/Tablet.tsx              |   2 +-
 .../gradient/generic2/Tag.tsx                 |   2 +-
 .../gradient/generic2/Targeted.tsx            |   2 +-
 .../gradient/generic2/Text.tsx                |   2 +-
 .../gradient/generic2/ThreeArrowsCircle.tsx   |   2 +-
 .../gradient/generic2/ThumbsUp.tsx            |   2 +-
 .../gradient/generic2/Transform.tsx           |   2 +-
 .../gradient/generic2/Translate.tsx           |   2 +-
 .../gradient/generic2/Trash.tsx               |   2 +-
 .../gradient/generic2/Trophy.tsx              |   2 +-
 .../gradient/generic2/Update.tsx              |   2 +-
 .../gradient/generic2/Upload.tsx              |   2 +-
 .../gradient/generic2/User.tsx                |   2 +-
 .../gradient/generic2/UserAvatar.tsx          |   2 +-
 .../gradient/generic2/UserGroup.tsx           |   2 +-
 .../gradient/generic2/VectorDraw.tsx          |   2 +-
 .../gradient/generic2/Video.tsx               |   2 +-
 .../gradient/generic2/Volume.tsx              |   2 +-
 .../gradient/generic2/VolumeOne.tsx           |   2 +-
 .../gradient/generic2/Wallet.tsx              |   2 +-
 .../s2/spectrum-illustrations/linear/3D.tsx   |   2 +-
 .../spectrum-illustrations/linear/3Dasset.tsx |   2 +-
 .../spectrum-illustrations/linear/AIChat.tsx  |   2 +-
 .../linear/AIGenerate.tsx                     |   2 +-
 .../linear/AIGenerateImage.tsx                |   2 +-
 .../linear/Accessibility.tsx                  |   2 +-
 .../linear/Addproject.tsx                     |   2 +-
 .../linear/AlertNotice.tsx                    |   2 +-
 .../linear/Animation.tsx                      |   2 +-
 .../s2/spectrum-illustrations/linear/Apps.tsx |   2 +-
 .../linear/ArrowDown.tsx                      |   2 +-
 .../linear/ArrowLeft.tsx                      |   2 +-
 .../linear/ArrowRight.tsx                     |   2 +-
 .../spectrum-illustrations/linear/ArrowUp.tsx |   2 +-
 .../linear/Artboard.tsx                       |   2 +-
 .../spectrum-illustrations/linear/Assets.tsx  |   2 +-
 .../linear/AudioWave.tsx                      |   2 +-
 .../linear/BadgeVerified.tsx                  |   2 +-
 .../s2/spectrum-illustrations/linear/Bell.tsx |   2 +-
 .../s2/spectrum-illustrations/linear/Bolt.tsx |   2 +-
 .../spectrum-illustrations/linear/Brand.tsx   |   2 +-
 .../linear/Briefcase.tsx                      |   2 +-
 .../linear/BrightnessContrast.tsx             |   2 +-
 .../spectrum-illustrations/linear/Browser.tsx |   2 +-
 .../linear/BrowserError.tsx                   |   2 +-
 .../linear/BrowserNotCompatible.tsx           |   2 +-
 .../spectrum-illustrations/linear/Brush.tsx   |   2 +-
 .../s2/spectrum-illustrations/linear/Bug.tsx  |   2 +-
 .../linear/BuildTable.tsx                     |   2 +-
 .../linear/Buildings.tsx                      |   2 +-
 .../linear/Calendar.tsx                       |   2 +-
 .../spectrum-illustrations/linear/Camera.tsx  |   2 +-
 .../linear/CardTapPayment.tsx                 |   2 +-
 .../spectrum-illustrations/linear/Channel.tsx |   2 +-
 .../linear/ChartAreaStack.tsx                 |   2 +-
 .../linear/Chatbubble.tsx                     |   2 +-
 .../spectrum-illustrations/linear/Check.tsx   |   2 +-
 .../linear/Clipboard.tsx                      |   2 +-
 .../spectrum-illustrations/linear/Clock.tsx   |   2 +-
 .../spectrum-illustrations/linear/Close.tsx   |   2 +-
 .../spectrum-illustrations/linear/Cloud.tsx   |   2 +-
 .../linear/CloudStateDisconnected.tsx         |   2 +-
 .../linear/CloudStateError.tsx                |   2 +-
 .../linear/CloudUpload.tsx                    |   2 +-
 .../linear/CodeBrackets.tsx                   |   2 +-
 .../spectrum-illustrations/linear/Color.tsx   |   2 +-
 .../linear/CommentText.tsx                    |   2 +-
 .../linear/ConfettiCelebration.tsx            |   2 +-
 .../linear/Conversationbubbles.tsx            |   2 +-
 .../s2/spectrum-illustrations/linear/Crop.tsx |   2 +-
 .../spectrum-illustrations/linear/Cursor.tsx  |   2 +-
 .../s2/spectrum-illustrations/linear/Cut.tsx  |   2 +-
 .../s2/spectrum-illustrations/linear/Data.tsx |   2 +-
 .../linear/DataAnalytics.tsx                  |   2 +-
 .../spectrum-illustrations/linear/Desktop.tsx |   2 +-
 .../spectrum-illustrations/linear/Diamond.tsx |   2 +-
 .../linear/Document.tsx                       |   2 +-
 .../linear/Download.tsx                       |   2 +-
 .../linear/DropToUpload.tsx                   |   2 +-
 .../linear/Education.tsx                      |   2 +-
 .../spectrum-illustrations/linear/Effects.tsx |   2 +-
 .../linear/Emoji160.tsx                       |   2 +-
 .../linear/EmptyStateExport.tsx               |   2 +-
 .../spectrum-illustrations/linear/Error.tsx   |   2 +-
 .../linear/Explosion.tsx                      |   2 +-
 .../linear/ExportTo.tsx                       |   2 +-
 .../linear/Exposure.tsx                       |   2 +-
 .../linear/FileAlert.tsx                      |   2 +-
 .../linear/FileImage.tsx                      |   2 +-
 .../linear/FileText.tsx                       |   2 +-
 .../linear/FileVideo.tsx                      |   2 +-
 .../spectrum-illustrations/linear/FileZip.tsx |   2 +-
 .../linear/Filmstrip.tsx                      |   2 +-
 .../spectrum-illustrations/linear/Filter.tsx  |   2 +-
 .../spectrum-illustrations/linear/Filters.tsx |   2 +-
 .../linear/Fireworks.tsx                      |   2 +-
 .../s2/spectrum-illustrations/linear/Flag.tsx |   2 +-
 .../linear/FlagCheckmark.tsx                  |   2 +-
 .../linear/FlagCross.tsx                      |   2 +-
 .../linear/FolderClose.tsx                    |   2 +-
 .../linear/FolderOpen.tsx                     |   2 +-
 .../linear/FolderShared.tsx                   |   2 +-
 .../linear/GearSetting.tsx                    |   2 +-
 .../s2/spectrum-illustrations/linear/Gift.tsx |   2 +-
 .../spectrum-illustrations/linear/Globe.tsx   |   2 +-
 .../linear/GlobeGrid.tsx                      |   2 +-
 .../linear/GraphBarChart.tsx                  |   2 +-
 .../s2/spectrum-illustrations/linear/Hand.tsx |   2 +-
 .../linear/Handshake.tsx                      |   2 +-
 .../spectrum-illustrations/linear/Heart.tsx   |   2 +-
 .../linear/HelpCircle.tsx                     |   2 +-
 .../s2/spectrum-illustrations/linear/Home.tsx |   2 +-
 .../linear/Illustration.tsx                   |   2 +-
 .../spectrum-illustrations/linear/Image.tsx   |   2 +-
 .../linear/ImageStack.tsx                     |   2 +-
 .../linear/InfiniteLooping.tsx                |   2 +-
 .../linear/Information.tsx                    |   2 +-
 .../linear/Interaction.tsx                    |   2 +-
 .../spectrum-illustrations/linear/Laptop.tsx  |   2 +-
 .../spectrum-illustrations/linear/Layers.tsx  |   2 +-
 .../linear/Libraries.tsx                      |   2 +-
 .../linear/Lightbulb.tsx                      |   2 +-
 .../linear/LightbulbRays.tsx                  |   2 +-
 .../spectrum-illustrations/linear/Lighten.tsx |   2 +-
 .../s2/spectrum-illustrations/linear/Link.tsx |   2 +-
 .../linear/Location.tsx                       |   2 +-
 .../linear/LockClose.tsx                      |   2 +-
 .../linear/LockOpen.tsx                       |   2 +-
 .../s2/spectrum-illustrations/linear/Logo.tsx |   2 +-
 .../linear/MagicWand.tsx                      |   2 +-
 .../linear/MailClose.tsx                      |   2 +-
 .../linear/MailOpen.tsx                       |   2 +-
 .../spectrum-illustrations/linear/Market.tsx  |   2 +-
 .../linear/MegaphonePromote.tsx               |   2 +-
 .../linear/MegaphonePromoteExpressive.tsx     |   2 +-
 .../spectrum-illustrations/linear/Mention.tsx |   2 +-
 .../linear/Microphone.tsx                     |   2 +-
 .../linear/MicrophoneOff.tsx                  |   2 +-
 .../linear/Minimize.tsx                       |   2 +-
 .../linear/MovieCamera.tsx                    |   2 +-
 .../linear/MusicNote.tsx                      |   2 +-
 .../linear/NoBrands.tsx                       |   2 +-
 .../linear/NoComment.tsx                      |   2 +-
 .../linear/NoComments.tsx                     |   2 +-
 .../linear/NoElements.tsx                     |   2 +-
 .../spectrum-illustrations/linear/NoFile.tsx  |   2 +-
 .../linear/NoFilter.tsx                       |   2 +-
 .../spectrum-illustrations/linear/NoImage.tsx |   2 +-
 .../linear/NoLibraries.tsx                    |   2 +-
 .../linear/NoLibrariesBrands.tsx              |   2 +-
 .../linear/NoReviewLinks.tsx                  |   2 +-
 .../linear/NoSearchResults.tsx                |   2 +-
 .../linear/NoSharedFile.tsx                   |   2 +-
 .../linear/Paperairplane.tsx                  |   2 +-
 .../linear/Paperclip.tsx                      |   2 +-
 .../spectrum-illustrations/linear/Pause.tsx   |   2 +-
 .../spectrum-illustrations/linear/Pencil.tsx  |   2 +-
 .../spectrum-illustrations/linear/Phone.tsx   |   2 +-
 .../linear/PieChart.tsx                       |   2 +-
 .../linear/PiggyBank.tsx                      |   2 +-
 .../s2/spectrum-illustrations/linear/Pin.tsx  |   2 +-
 .../s2/spectrum-illustrations/linear/Play.tsx |   2 +-
 .../linear/PlayTriangle.tsx                   |   2 +-
 .../spectrum-illustrations/linear/Plugin.tsx  |   2 +-
 .../spectrum-illustrations/linear/Prompt.tsx  |   2 +-
 .../linear/Properties.tsx                     |   2 +-
 .../s2/spectrum-illustrations/linear/Redo.tsx |   2 +-
 .../spectrum-illustrations/linear/Remix.tsx   |   2 +-
 .../spectrum-illustrations/linear/Replace.tsx |   2 +-
 .../linear/ReportAbuse.tsx                    |   2 +-
 .../spectrum-illustrations/linear/Revert.tsx  |   2 +-
 .../spectrum-illustrations/linear/Ribbon.tsx  |   2 +-
 .../spectrum-illustrations/linear/Rocket.tsx  |   2 +-
 .../linear/RotateCCW.tsx                      |   2 +-
 .../linear/RotateCW.tsx                       |   2 +-
 .../spectrum-illustrations/linear/Ruler.tsx   |   2 +-
 .../spectrum-illustrations/linear/Search.tsx  |   2 +-
 .../linear/Segmentation.tsx                   |   2 +-
 .../spectrum-illustrations/linear/Server.tsx  |   2 +-
 .../spectrum-illustrations/linear/Shapes.tsx  |   2 +-
 .../linear/ShoppingBag.tsx                    |   2 +-
 .../linear/ShoppingCart.tsx                   |   2 +-
 .../linear/Sparkles.tsx                       |   2 +-
 .../linear/SpeedFast.tsx                      |   2 +-
 .../linear/StampClone.tsx                     |   2 +-
 .../s2/spectrum-illustrations/linear/Star.tsx |   2 +-
 .../linear/StepForward.tsx                    |   2 +-
 .../linear/Stopwatch.tsx                      |   2 +-
 .../spectrum-illustrations/linear/Switch.tsx  |   2 +-
 .../spectrum-illustrations/linear/Tablet.tsx  |   2 +-
 .../s2/spectrum-illustrations/linear/Tag.tsx  |   2 +-
 .../linear/Targeted.tsx                       |   2 +-
 .../s2/spectrum-illustrations/linear/Text.tsx |   2 +-
 .../linear/ThreeArrowsCircle.tsx              |   2 +-
 .../linear/ThumbsDown.tsx                     |   2 +-
 .../linear/ThumbsUp.tsx                       |   2 +-
 .../linear/Transform.tsx                      |   2 +-
 .../linear/Translate.tsx                      |   2 +-
 .../spectrum-illustrations/linear/Trash.tsx   |   2 +-
 .../spectrum-illustrations/linear/Trophy.tsx  |   2 +-
 .../spectrum-illustrations/linear/Update.tsx  |   2 +-
 .../spectrum-illustrations/linear/Upload.tsx  |   2 +-
 .../s2/spectrum-illustrations/linear/User.tsx |   2 +-
 .../linear/UserAvatar.tsx                     |   2 +-
 .../linear/UserGroup.tsx                      |   2 +-
 .../linear/VectorDraw.tsx                     |   2 +-
 .../spectrum-illustrations/linear/Video.tsx   |   2 +-
 .../spectrum-illustrations/linear/Volume.tsx  |   2 +-
 .../linear/VolumeOff.tsx                      |   2 +-
 .../linear/VolumeOne.tsx                      |   2 +-
 .../spectrum-illustrations/linear/Wallet.tsx  |   2 +-
 .../spectrum-illustrations/linear/Warning.tsx |   2 +-
 packages/@react-spectrum/s2/src/Avatar.tsx    |   3 +-
 .../@react-spectrum/s2/src/Breadcrumbs.tsx    |   7 +-
 packages/@react-spectrum/s2/src/Card.tsx      |   4 +-
 .../@react-spectrum/s2/src/Disclosure.tsx     |   6 +-
 packages/@react-spectrum/s2/src/Field.tsx     |  34 +-
 packages/@react-spectrum/s2/src/Form.tsx      |   6 +-
 packages/@react-spectrum/s2/src/Menu.tsx      |  19 +-
 .../@react-spectrum/s2/src/NumberField.tsx    |   3 +-
 packages/@react-spectrum/s2/src/Popover.tsx   |   5 +-
 packages/@react-spectrum/s2/src/Provider.tsx  |   4 +-
 packages/@react-spectrum/s2/src/Slider.tsx    |  14 +-
 packages/@react-spectrum/s2/src/Switch.tsx    |   1 +
 packages/@react-spectrum/s2/src/TextField.tsx |   5 +-
 .../@react-spectrum/s2/src/Toast.module.css   |  29 +-
 packages/@react-spectrum/s2/src/Toast.tsx     |  47 +-
 packages/@react-spectrum/s2/src/TreeView.tsx  |   3 +-
 packages/@react-spectrum/s2/style/index.ts    |   5 +-
 .../s2/style/spectrum-theme.ts                |  54 +-
 .../@react-spectrum/s2/style/style-macro.ts   |  58 +-
 packages/@react-spectrum/s2/style/types.ts    |   2 +-
 .../IconTransformer.js                        |   2 +
 packages/dev/s2-docs/.parcelrc-s2-docs        |   3 +-
 packages/dev/s2-docs/assets/favicon.ico       | Bin 0 -> 15086 bytes
 .../dev/s2-docs/pages/s2/home/Collapsing.tsx  |  23 +
 packages/dev/s2-docs/pages/s2/home/Colors.tsx |  59 ++
 .../dev/s2-docs/pages/s2/home/DarkMode.tsx    | 144 ++++
 .../dev/s2-docs/pages/s2/home/ExampleApp.tsx  | 385 +++++++++++
 .../dev/s2-docs/pages/s2/home/ExampleApp2.tsx | 630 ++++++++++++++++++
 packages/dev/s2-docs/pages/s2/home/HCM.tsx    |  56 ++
 packages/dev/s2-docs/pages/s2/home/Home.tsx   | 585 ++++++++++++++++
 packages/dev/s2-docs/pages/s2/home/Icons.tsx  | 104 +++
 packages/dev/s2-docs/pages/s2/home/Mobile.tsx | 311 +++++++++
 .../s2-docs/pages/s2/home/ObjectStyles.tsx    | 160 +++++
 packages/dev/s2-docs/pages/s2/home/Press.tsx  | 143 ++++
 .../s2-docs/pages/s2/home/ReduceMotion.tsx    |  71 ++
 packages/dev/s2-docs/pages/s2/home/Rems.tsx   |  47 ++
 .../dev/s2-docs/pages/s2/home/Responsive.tsx  | 125 ++++
 packages/dev/s2-docs/pages/s2/home/States.tsx | 195 ++++++
 .../pages/s2/home/SubmenuAnimation.tsx        | 399 +++++++++++
 .../dev/s2-docs/pages/s2/home/Typography.tsx  | 114 ++++
 .../s2-docs/pages/s2/home/app/AccountMenu.tsx |  78 +++
 .../dev/s2-docs/pages/s2/home/app/Arrows.tsx  |  70 ++
 .../dev/s2-docs/pages/s2/home/app/Home.tsx    | 138 ++++
 .../dev/s2-docs/pages/s2/home/app/Ideas.tsx   | 102 +++
 .../pages/s2/home/app/Notifications.tsx       |  81 +++
 .../dev/s2-docs/pages/s2/home/app/Photos.tsx  | 107 +++
 .../dev/s2-docs/pages/s2/home/app/Sidebar.tsx | 211 ++++++
 .../dev/s2-docs/pages/s2/home/app/banner.svg  |  27 +
 packages/dev/s2-docs/pages/s2/home/bg.svg     |  35 +
 packages/dev/s2-docs/pages/s2/index.mdx       | 129 ++--
 packages/dev/s2-docs/src/Layout.tsx           |   4 +-
 packages/dev/s2-docs/src/color.macro.ts       |   8 +-
 packages/dev/s2-docs/src/footer.css           |   2 +-
 .../react-aria-components/src/ListBox.tsx     |  10 +-
 scripts/generateS2IconIndex.js                |   2 +-
 yarn.lock                                     |   4 +-
 573 files changed, 5227 insertions(+), 691 deletions(-)
 create mode 100644 packages/dev/s2-docs/assets/favicon.ico
 create mode 100644 packages/dev/s2-docs/pages/s2/home/Collapsing.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/Colors.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/DarkMode.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/ExampleApp.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/ExampleApp2.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/HCM.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/Home.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/Icons.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/Mobile.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/ObjectStyles.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/Press.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/ReduceMotion.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/Rems.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/Responsive.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/States.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/SubmenuAnimation.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/Typography.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/app/AccountMenu.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/app/Arrows.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/app/Home.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/app/Ideas.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/app/Notifications.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/app/Photos.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/app/Sidebar.tsx
 create mode 100644 packages/dev/s2-docs/pages/s2/home/app/banner.svg
 create mode 100644 packages/dev/s2-docs/pages/s2/home/bg.svg

diff --git a/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch b/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch
index 6f42707f858..2b0d8b956e0 100644
--- a/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch
+++ b/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch
@@ -1,7 +1,18 @@
 diff --git a/lib/ReactStaticPackager.js b/lib/ReactStaticPackager.js
-index 551b6071819ea7c8c28106281793841d63791856..00ee58c81302cf433ad27a8a8ce2c2d1be5ce716 100644
+index 551b6071819ea7c8c28106281793841d63791856..1556a6abc7a38fc1959eec279810a14614c08772 100644
 --- a/lib/ReactStaticPackager.js
 +++ b/lib/ReactStaticPackager.js
+@@ -291,8 +291,9 @@ async function loadBundleUncached(bundle, bundleGraph, getInlineBundleContents)
+             packagingBundles.set(entryBundle, getInlineBundleContents(entryBundle, bundleGraph));
+           }
+           let packagedBundle = await (0, _nullthrows().default)(packagingBundles.get(entryBundle));
++          let inlineType = (0, _nullthrows().default)(entryBundle.getMainEntry()).meta.inlineType;
+           let contents = await (0, _utils().blobToString)(packagedBundle.contents);
+-          contents = `module.exports = ${contents}`;
++          contents = `module.exports = ${inlineType === 'string' ? JSON.stringify(contents) : contents}`;
+           return [[entryBundle.id, [entryBundle, (0, _nullthrows().default)(entryBundle.getMainEntry()), contents]]];
+         });
+       } else if ((entryBundle === null || entryBundle === void 0 ? void 0 : entryBundle.type) === 'js') {
 @@ -597,7 +597,7 @@ function runModule(code, filename, id, require, parcelRequire) {
    return module.exports;
  }
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3D.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3D.tsx
index 9239fa9322c..5fdaa36606d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3D.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3D.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import _3D_L from 'illustration:./S2_fill_3D_generic1_160.svg';
 import _3D_M from 'illustration:./S2_fill_3D_generic1_96.svg';
 import _3D_S from 'illustration:./S2_fill_3D_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3Dasset.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3Dasset.tsx
index 3250052537f..a73fb748a30 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3Dasset.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3Dasset.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import _3Dasset_L from 'illustration:./S2_fill_3Dasset_generic1_160.svg';
 import _3Dasset_M from 'illustration:./S2_fill_3Dasset_generic1_96.svg';
 import _3Dasset_S from 'illustration:./S2_fill_3Dasset_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerate.tsx
index 55f8f4d71b8..3163842c44d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerate.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AIGenerate_L from 'illustration:./S2_fill_AIGenerate_generic1_160.svg';
 import AIGenerate_M from 'illustration:./S2_fill_AIGenerate_generic1_96.svg';
 import AIGenerate_S from 'illustration:./S2_fill_AIGenerate_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerateImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerateImage.tsx
index c5a32ff9c39..e6ef34728ee 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerateImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerateImage.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AIGenerateImage_L from 'illustration:./S2_fill_AIGenerateImage_generic1_160.svg';
 import AIGenerateImage_M from 'illustration:./S2_fill_AIGenerateImage_generic1_96.svg';
 import AIGenerateImage_S from 'illustration:./S2_fill_AIGenerateImage_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIchat.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIchat.tsx
index 72781349830..2b06894f375 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIchat.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIchat.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AIchat_L from 'illustration:./S2_fill_AIchat_generic1_160.svg';
 import AIchat_M from 'illustration:./S2_fill_AIchat_generic1_96.svg';
 import AIchat_S from 'illustration:./S2_fill_AIchat_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Accessibility.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Accessibility.tsx
index 3114aced332..1c34f77b2e0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Accessibility.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Accessibility.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Accessibility_L from 'illustration:./S2_fill_accessibility_generic1_160.svg';
 import Accessibility_M from 'illustration:./S2_fill_accessibility_generic1_96.svg';
 import Accessibility_S from 'illustration:./S2_fill_accessibility_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Animation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Animation.tsx
index f0c24c0da39..2a57d101105 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Animation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Animation.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Animation_L from 'illustration:./S2_fill_animation_generic1_160.svg';
 import Animation_M from 'illustration:./S2_fill_animation_generic1_96.svg';
 import Animation_S from 'illustration:./S2_fill_animation_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Apps.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Apps.tsx
index 2ee5a949589..ae1ee37f222 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Apps.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Apps.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Apps_L from 'illustration:./S2_fill_apps_generic1_160.svg';
 import Apps_M from 'illustration:./S2_fill_apps_generic1_96.svg';
 import Apps_S from 'illustration:./S2_fill_apps_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Artboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Artboard.tsx
index 068ec81b5ae..244314661f4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Artboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Artboard.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Artboard_L from 'illustration:./S2_fill_artboard_generic1_160.svg';
 import Artboard_M from 'illustration:./S2_fill_artboard_generic1_96.svg';
 import Artboard_S from 'illustration:./S2_fill_artboard_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Assets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Assets.tsx
index 6ba77e31fa6..22ffd9b19b9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Assets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Assets.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Assets_L from 'illustration:./S2_fill_assets_generic1_160.svg';
 import Assets_M from 'illustration:./S2_fill_assets_generic1_96.svg';
 import Assets_S from 'illustration:./S2_fill_assets_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AudioWave.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AudioWave.tsx
index b410ba86511..eb82e5e673e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AudioWave.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AudioWave.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AudioWave_L from 'illustration:./S2_fill_audioWave_generic1_160.svg';
 import AudioWave_M from 'illustration:./S2_fill_audioWave_generic1_96.svg';
 import AudioWave_S from 'illustration:./S2_fill_audioWave_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BadgeVerified.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BadgeVerified.tsx
index 3960726148a..b3006dd1029 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BadgeVerified.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BadgeVerified.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BadgeVerified_L from 'illustration:./S2_fill_badgeVerified_generic1_160.svg';
 import BadgeVerified_M from 'illustration:./S2_fill_badgeVerified_generic1_96.svg';
 import BadgeVerified_S from 'illustration:./S2_fill_badgeVerified_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bell.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bell.tsx
index 37b2fc90486..278e8a9d5f2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bell.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bell.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Bell_L from 'illustration:./S2_fill_bell_generic1_160.svg';
 import Bell_M from 'illustration:./S2_fill_bell_generic1_96.svg';
 import Bell_S from 'illustration:./S2_fill_bell_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bolt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bolt.tsx
index 2b4f383d1f2..256fa639220 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bolt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bolt.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Bolt_L from 'illustration:./S2_fill_bolt_generic1_160.svg';
 import Bolt_M from 'illustration:./S2_fill_bolt_generic1_96.svg';
 import Bolt_S from 'illustration:./S2_fill_bolt_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brand.tsx
index 15026a3c447..1e15528b1fb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brand.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Brand_L from 'illustration:./S2_fill_brand_generic1_160.svg';
 import Brand_M from 'illustration:./S2_fill_brand_generic1_96.svg';
 import Brand_S from 'illustration:./S2_fill_brand_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Briefcase.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Briefcase.tsx
index b530cc2cdbf..43a2148d8d1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Briefcase.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Briefcase.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Briefcase_L from 'illustration:./S2_fill_briefcase_generic1_160.svg';
 import Briefcase_M from 'illustration:./S2_fill_briefcase_generic1_96.svg';
 import Briefcase_S from 'illustration:./S2_fill_briefcase_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BrightnessContrast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BrightnessContrast.tsx
index 3d1877ca6af..f8661287744 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BrightnessContrast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BrightnessContrast.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BrightnessContrast_L from 'illustration:./S2_fill_brightnessContrast_generic1_160.svg';
 import BrightnessContrast_M from 'illustration:./S2_fill_brightnessContrast_generic1_96.svg';
 import BrightnessContrast_S from 'illustration:./S2_fill_brightnessContrast_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Browser.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Browser.tsx
index e698d9b3905..70d4bbdd054 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Browser.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Browser.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Browser_L from 'illustration:./S2_fill_browser_generic1_160.svg';
 import Browser_M from 'illustration:./S2_fill_browser_generic1_96.svg';
 import Browser_S from 'illustration:./S2_fill_browser_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brush.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brush.tsx
index eec91006219..4a5ab873775 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brush.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brush.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Brush_L from 'illustration:./S2_fill_brush_generic1_160.svg';
 import Brush_M from 'illustration:./S2_fill_brush_generic1_96.svg';
 import Brush_S from 'illustration:./S2_fill_brush_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BuildTable.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BuildTable.tsx
index 99fbb30a79c..96a67470f90 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BuildTable.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BuildTable.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BuildTable_L from 'illustration:./S2_fill_buildTable_generic1_160.svg';
 import BuildTable_M from 'illustration:./S2_fill_buildTable_generic1_96.svg';
 import BuildTable_S from 'illustration:./S2_fill_buildTable_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Buildings.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Buildings.tsx
index 899a5c066aa..a1e15c68163 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Buildings.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Buildings.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Buildings_L from 'illustration:./S2_fill_buildings_generic1_160.svg';
 import Buildings_M from 'illustration:./S2_fill_buildings_generic1_96.svg';
 import Buildings_S from 'illustration:./S2_fill_buildings_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Calendar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Calendar.tsx
index 618a7a3cd67..3ab8992dd3e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Calendar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Calendar.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Calendar_L from 'illustration:./S2_fill_calendar_generic1_160.svg';
 import Calendar_M from 'illustration:./S2_fill_calendar_generic1_96.svg';
 import Calendar_S from 'illustration:./S2_fill_calendar_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Camera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Camera.tsx
index e82429a4783..17961a746f6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Camera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Camera.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Camera_L from 'illustration:./S2_fill_camera_generic1_160.svg';
 import Camera_M from 'illustration:./S2_fill_camera_generic1_96.svg';
 import Camera_S from 'illustration:./S2_fill_camera_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CardTapPayment.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CardTapPayment.tsx
index 5587b1665c0..af94acf0be4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CardTapPayment.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CardTapPayment.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CardTapPayment_L from 'illustration:./S2_fill_cardTapPayment_generic1_160.svg';
 import CardTapPayment_M from 'illustration:./S2_fill_cardTapPayment_generic1_96.svg';
 import CardTapPayment_S from 'illustration:./S2_fill_cardTapPayment_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Channel.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Channel.tsx
index d836121081d..9d8d04d1c31 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Channel.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Channel.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Channel_L from 'illustration:./S2_fill_channel_generic1_160.svg';
 import Channel_M from 'illustration:./S2_fill_channel_generic1_96.svg';
 import Channel_S from 'illustration:./S2_fill_channel_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ChartAreaStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ChartAreaStack.tsx
index 4dcb7012521..55779990a9f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ChartAreaStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ChartAreaStack.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ChartAreaStack_L from 'illustration:./S2_fill_chartAreaStack_generic1_160.svg';
 import ChartAreaStack_M from 'illustration:./S2_fill_chartAreaStack_generic1_96.svg';
 import ChartAreaStack_S from 'illustration:./S2_fill_chartAreaStack_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Chatbubble.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Chatbubble.tsx
index df2a75b3fcf..8b3e3c9a24f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Chatbubble.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Chatbubble.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Chatbubble_L from 'illustration:./S2_fill_chatbubble_generic1_160.svg';
 import Chatbubble_M from 'illustration:./S2_fill_chatbubble_generic1_96.svg';
 import Chatbubble_S from 'illustration:./S2_fill_chatbubble_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Checkmark.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Checkmark.tsx
index dcaad219c5f..b6a102803dc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Checkmark.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Checkmark.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Checkmark_L from 'illustration:./S2_fill_checkmark_generic1_160.svg';
 import Checkmark_M from 'illustration:./S2_fill_checkmark_generic1_96.svg';
 import Checkmark_S from 'illustration:./S2_fill_checkmark_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clipboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clipboard.tsx
index f735c32c63c..31b26bfcf42 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clipboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clipboard.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Clipboard_L from 'illustration:./S2_fill_clipboard_generic1_160.svg';
 import Clipboard_M from 'illustration:./S2_fill_clipboard_generic1_96.svg';
 import Clipboard_S from 'illustration:./S2_fill_clipboard_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clock.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clock.tsx
index b59c4a71ba6..c8ca94c9f52 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clock.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clock.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Clock_L from 'illustration:./S2_fill_clock_generic1_160.svg';
 import Clock_M from 'illustration:./S2_fill_clock_generic1_96.svg';
 import Clock_S from 'illustration:./S2_fill_clock_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cloud.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cloud.tsx
index c07da529515..9312a6f7a78 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cloud.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cloud.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Cloud_L from 'illustration:./S2_fill_cloud_generic1_160.svg';
 import Cloud_M from 'illustration:./S2_fill_cloud_generic1_96.svg';
 import Cloud_S from 'illustration:./S2_fill_cloud_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CloudUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CloudUpload.tsx
index 2ff147512db..3c72ecc8ca3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CloudUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CloudUpload.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CloudUpload_L from 'illustration:./S2_fill_cloudUpload_generic1_160.svg';
 import CloudUpload_M from 'illustration:./S2_fill_cloudUpload_generic1_96.svg';
 import CloudUpload_S from 'illustration:./S2_fill_cloudUpload_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CodeBrackets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CodeBrackets.tsx
index 00ad70c8e34..1c4f75ca123 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CodeBrackets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CodeBrackets.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CodeBrackets_L from 'illustration:./S2_fill_CodeBrackets_generic1_160.svg';
 import CodeBrackets_M from 'illustration:./S2_fill_CodeBrackets_generic1_96.svg';
 import CodeBrackets_S from 'illustration:./S2_fill_CodeBrackets_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Color.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Color.tsx
index c0fad5e8de3..7a429876a20 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Color.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Color.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Color_L from 'illustration:./S2_fill_color_generic1_160.svg';
 import Color_M from 'illustration:./S2_fill_color_generic1_96.svg';
 import Color_S from 'illustration:./S2_fill_color_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CommentText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CommentText.tsx
index 4580d6b0349..f31ae6b8fbd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CommentText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CommentText.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CommentText_L from 'illustration:./S2_fill_commentText_generic1_160.svg';
 import CommentText_M from 'illustration:./S2_fill_commentText_generic1_96.svg';
 import CommentText_S from 'illustration:./S2_fill_commentText_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Confetti.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Confetti.tsx
index da55321b2af..22454d93cf3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Confetti.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Confetti.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Confetti_L from 'illustration:./S2_fill_confetti_generic1_160.svg';
 import Confetti_M from 'illustration:./S2_fill_confetti_generic1_96.svg';
 import Confetti_S from 'illustration:./S2_fill_confetti_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Conversationbubbles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Conversationbubbles.tsx
index 74ff704b317..9d055875209 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Conversationbubbles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Conversationbubbles.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Conversationbubbles_L from 'illustration:./S2_fill_conversationbubbles_generic1_160.svg';
 import Conversationbubbles_M from 'illustration:./S2_fill_conversationbubbles_generic1_96.svg';
 import Conversationbubbles_S from 'illustration:./S2_fill_conversationbubbles_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Crop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Crop.tsx
index 3e45a1297e7..05e09ce0c34 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Crop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Crop.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Crop_L from 'illustration:./S2_fill_crop_generic1_160.svg';
 import Crop_M from 'illustration:./S2_fill_crop_generic1_96.svg';
 import Crop_S from 'illustration:./S2_fill_crop_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cursor.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cursor.tsx
index 81173d7e841..ba879fd573e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cursor.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cursor.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Cursor_L from 'illustration:./S2_fill_cursor_generic1_160.svg';
 import Cursor_M from 'illustration:./S2_fill_cursor_generic1_96.svg';
 import Cursor_S from 'illustration:./S2_fill_cursor_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cut.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cut.tsx
index 15f3b70d5af..d115f178cc8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cut.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cut.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Cut_L from 'illustration:./S2_fill_cut_generic1_160.svg';
 import Cut_M from 'illustration:./S2_fill_cut_generic1_96.svg';
 import Cut_S from 'illustration:./S2_fill_cut_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Data.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Data.tsx
index 49f1bb2b00c..9cdd94503e1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Data.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Data.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Data_L from 'illustration:./S2_fill_data_generic1_160.svg';
 import Data_M from 'illustration:./S2_fill_data_generic1_96.svg';
 import Data_S from 'illustration:./S2_fill_data_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DataAnalytics.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DataAnalytics.tsx
index f7af5c8e5a2..438f6d63aaf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DataAnalytics.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DataAnalytics.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import DataAnalytics_L from 'illustration:./S2_fill_dataAnalytics_generic1_160.svg';
 import DataAnalytics_M from 'illustration:./S2_fill_dataAnalytics_generic1_96.svg';
 import DataAnalytics_S from 'illustration:./S2_fill_dataAnalytics_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Desktop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Desktop.tsx
index 0a4bc59fb28..68cd8c9f301 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Desktop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Desktop.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Desktop_L from 'illustration:./S2_fill_desktop_generic1_160.svg';
 import Desktop_M from 'illustration:./S2_fill_desktop_generic1_96.svg';
 import Desktop_S from 'illustration:./S2_fill_desktop_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Diamond.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Diamond.tsx
index d341ae2be08..bd3da255dc3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Diamond.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Diamond.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Diamond_L from 'illustration:./S2_fill_diamond_generic1_160.svg';
 import Diamond_M from 'illustration:./S2_fill_diamond_generic1_96.svg';
 import Diamond_S from 'illustration:./S2_fill_diamond_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Document.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Document.tsx
index e9b5c47b01a..11fef6e56dd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Document.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Document.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Document_L from 'illustration:./S2_fill_document_generic1_160.svg';
 import Document_M from 'illustration:./S2_fill_document_generic1_96.svg';
 import Document_S from 'illustration:./S2_fill_document_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Download.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Download.tsx
index 15ea7b73af5..06d68171711 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Download.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Download.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Download_L from 'illustration:./S2_fill_download_generic1_160.svg';
 import Download_M from 'illustration:./S2_fill_download_generic1_96.svg';
 import Download_S from 'illustration:./S2_fill_download_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DropToUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DropToUpload.tsx
index 66be3c581eb..25a613e0aaf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DropToUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DropToUpload.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import DropToUpload_L from 'illustration:./S2_fill_dropToUpload_generic1_160.svg';
 import DropToUpload_M from 'illustration:./S2_fill_dropToUpload_generic1_96.svg';
 import DropToUpload_S from 'illustration:./S2_fill_dropToUpload_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Education.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Education.tsx
index 9db62402495..90ee5c0fe57 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Education.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Education.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Education_L from 'illustration:./S2_fill_education_generic1_160.svg';
 import Education_M from 'illustration:./S2_fill_education_generic1_96.svg';
 import Education_S from 'illustration:./S2_fill_education_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Effects.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Effects.tsx
index d4b8633496a..dab620e8a73 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Effects.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Effects.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Effects_L from 'illustration:./S2_fill_effects_generic1_160.svg';
 import Effects_M from 'illustration:./S2_fill_effects_generic1_96.svg';
 import Effects_S from 'illustration:./S2_fill_effects_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Emoji.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Emoji.tsx
index 16065b71e61..e764c8302d7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Emoji.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Emoji.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Emoji_L from 'illustration:./S2_fill_emoji_generic1_160.svg';
 import Emoji_M from 'illustration:./S2_fill_emoji_generic1_96.svg';
 import Emoji_S from 'illustration:./S2_fill_emoji_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/EmptyStateExport.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/EmptyStateExport.tsx
index 8f8c75a2346..1491a4fce35 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/EmptyStateExport.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/EmptyStateExport.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import EmptyStateExport_L from 'illustration:./S2_fill_EmptyStateExport_generic1_160.svg';
 import EmptyStateExport_M from 'illustration:./S2_fill_EmptyStateExport_generic1_96.svg';
 import EmptyStateExport_S from 'illustration:./S2_fill_EmptyStateExport_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Explosion.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Explosion.tsx
index f46ec15a345..b87c7b31b0e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Explosion.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Explosion.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Explosion_L from 'illustration:./S2_fill_explosion_generic1_160.svg';
 import Explosion_M from 'illustration:./S2_fill_explosion_generic1_96.svg';
 import Explosion_S from 'illustration:./S2_fill_explosion_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ExportTo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ExportTo.tsx
index 872e1c296a2..ee45278412c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ExportTo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ExportTo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ExportTo_L from 'illustration:./S2_fill_exportTo_generic1_160.svg';
 import ExportTo_M from 'illustration:./S2_fill_exportTo_generic1_96.svg';
 import ExportTo_S from 'illustration:./S2_fill_exportTo_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Exposure.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Exposure.tsx
index c08c29b85e9..b4148b112d5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Exposure.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Exposure.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Exposure_L from 'illustration:./S2_fill_exposure_generic1_160.svg';
 import Exposure_M from 'illustration:./S2_fill_exposure_generic1_96.svg';
 import Exposure_S from 'illustration:./S2_fill_exposure_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileImage.tsx
index 0ddd2120ae8..aaca1069d70 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileImage.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileImage_L from 'illustration:./S2_fill_fileImage_generic1_160.svg';
 import FileImage_M from 'illustration:./S2_fill_fileImage_generic1_96.svg';
 import FileImage_S from 'illustration:./S2_fill_fileImage_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileShared.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileShared.tsx
index aaf1a927ec1..b541c0c1cfd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileShared.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileShared.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileShared_L from 'illustration:./S2_fill_fileShared_generic1_160.svg';
 import FileShared_M from 'illustration:./S2_fill_fileShared_generic1_96.svg';
 import FileShared_S from 'illustration:./S2_fill_fileShared_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileText.tsx
index fa7c1d24efb..16f2c0218b0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileText.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileText_L from 'illustration:./S2_fill_fileText_generic1_160.svg';
 import FileText_M from 'illustration:./S2_fill_fileText_generic1_96.svg';
 import FileText_S from 'illustration:./S2_fill_fileText_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileVideo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileVideo.tsx
index 1c9978af13f..e498140d619 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileVideo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileVideo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileVideo_L from 'illustration:./S2_fill_fileVideo_generic1_160.svg';
 import FileVideo_M from 'illustration:./S2_fill_fileVideo_generic1_96.svg';
 import FileVideo_S from 'illustration:./S2_fill_fileVideo_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileZip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileZip.tsx
index f75d5916928..7e4370b215f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileZip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileZip.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileZip_L from 'illustration:./S2_fill_fileZip_generic1_160.svg';
 import FileZip_M from 'illustration:./S2_fill_fileZip_generic1_96.svg';
 import FileZip_S from 'illustration:./S2_fill_fileZip_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filmstrip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filmstrip.tsx
index 505f99541c8..2b5660abe41 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filmstrip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filmstrip.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Filmstrip_L from 'illustration:./S2_fill_filmstrip_generic1_160.svg';
 import Filmstrip_M from 'illustration:./S2_fill_filmstrip_generic1_96.svg';
 import Filmstrip_S from 'illustration:./S2_fill_filmstrip_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filter.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filter.tsx
index 42034b162b9..a90c998e17b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filter.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filter.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Filter_L from 'illustration:./S2_fill_filter_generic1_160.svg';
 import Filter_M from 'illustration:./S2_fill_filter_generic1_96.svg';
 import Filter_S from 'illustration:./S2_fill_filter_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filters.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filters.tsx
index a402bb15d49..21e074a009f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filters.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filters.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Filters_L from 'illustration:./S2_fill_filters_generic1_160.svg';
 import Filters_M from 'illustration:./S2_fill_filters_generic1_96.svg';
 import Filters_S from 'illustration:./S2_fill_filters_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Fireworks.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Fireworks.tsx
index 81c083d58cb..46304b46e8e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Fireworks.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Fireworks.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Fireworks_L from 'illustration:./S2_fill_fireworks_generic1_160.svg';
 import Fireworks_M from 'illustration:./S2_fill_fireworks_generic1_96.svg';
 import Fireworks_S from 'illustration:./S2_fill_fireworks_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Flag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Flag.tsx
index 183ee4a4912..7b1edff8f67 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Flag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Flag.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Flag_L from 'illustration:./S2_fill_flag_generic1_160.svg';
 import Flag_M from 'illustration:./S2_fill_flag_generic1_96.svg';
 import Flag_S from 'illustration:./S2_fill_flag_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCheckmark.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCheckmark.tsx
index 78b8ac6867b..1fe1dde69a1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCheckmark.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCheckmark.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FlagCheckmark_L from 'illustration:./S2_fill_flagCheckmark_generic1_160.svg';
 import FlagCheckmark_M from 'illustration:./S2_fill_flagCheckmark_generic1_96.svg';
 import FlagCheckmark_S from 'illustration:./S2_fill_flagCheckmark_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCross.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCross.tsx
index 19d43e591dc..002a8c0d547 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCross.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCross.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FlagCross_L from 'illustration:./S2_fill_flagCross_generic1_160.svg';
 import FlagCross_M from 'illustration:./S2_fill_flagCross_generic1_96.svg';
 import FlagCross_S from 'illustration:./S2_fill_flagCross_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderClose.tsx
index f3eb62ca43a..a13f9ebde4e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderClose.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FolderClose_L from 'illustration:./S2_fill_folderClose_generic1_160.svg';
 import FolderClose_M from 'illustration:./S2_fill_folderClose_generic1_96.svg';
 import FolderClose_S from 'illustration:./S2_fill_folderClose_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderOpen.tsx
index ca16c17cd23..09d4fc886cd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderOpen.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FolderOpen_L from 'illustration:./S2_fill_folderOpen_generic1_160.svg';
 import FolderOpen_M from 'illustration:./S2_fill_folderOpen_generic1_96.svg';
 import FolderOpen_S from 'illustration:./S2_fill_folderOpen_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderShared.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderShared.tsx
index 86be278e7b3..d38303653e5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderShared.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderShared.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FolderShared_L from 'illustration:./S2_fill_folderShared_generic1_160.svg';
 import FolderShared_M from 'illustration:./S2_fill_folderShared_generic1_96.svg';
 import FolderShared_S from 'illustration:./S2_fill_folderShared_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GearSetting.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GearSetting.tsx
index 6568ccb60a1..e0516faae1f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GearSetting.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GearSetting.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import GearSetting_L from 'illustration:./S2_fill_gearSetting_generic1_160.svg';
 import GearSetting_M from 'illustration:./S2_fill_gearSetting_generic1_96.svg';
 import GearSetting_S from 'illustration:./S2_fill_gearSetting_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Gift.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Gift.tsx
index 762e244ac11..b669092497c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Gift.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Gift.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Gift_L from 'illustration:./S2_fill_gift_generic1_160.svg';
 import Gift_M from 'illustration:./S2_fill_gift_generic1_96.svg';
 import Gift_S from 'illustration:./S2_fill_gift_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Globe.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Globe.tsx
index 21213ee3fa4..2042e4ed931 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Globe.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Globe.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Globe_L from 'illustration:./S2_fill_globe_generic1_160.svg';
 import Globe_M from 'illustration:./S2_fill_globe_generic1_96.svg';
 import Globe_S from 'illustration:./S2_fill_globe_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GlobeGrid.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GlobeGrid.tsx
index 8429c8f4b3e..4a8a6d440bc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GlobeGrid.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GlobeGrid.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import GlobeGrid_L from 'illustration:./S2_fill_globeGrid_generic1_160.svg';
 import GlobeGrid_M from 'illustration:./S2_fill_globeGrid_generic1_96.svg';
 import GlobeGrid_S from 'illustration:./S2_fill_globeGrid_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GraphBarChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GraphBarChart.tsx
index 57833d6c603..f6a44afae1f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GraphBarChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GraphBarChart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import GraphBarChart_L from 'illustration:./S2_fill_graphBarChart_generic1_160.svg';
 import GraphBarChart_M from 'illustration:./S2_fill_graphBarChart_generic1_96.svg';
 import GraphBarChart_S from 'illustration:./S2_fill_graphBarChart_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Hand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Hand.tsx
index fb80412368a..c3defcce7ba 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Hand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Hand.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Hand_L from 'illustration:./S2_fill_hand_generic1_160.svg';
 import Hand_M from 'illustration:./S2_fill_hand_generic1_96.svg';
 import Hand_S from 'illustration:./S2_fill_hand_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Handshake.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Handshake.tsx
index e1a2bc17a84..a23b42c3fa9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Handshake.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Handshake.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Handshake_L from 'illustration:./S2_fill_handshake_generic1_160.svg';
 import Handshake_M from 'illustration:./S2_fill_handshake_generic1_96.svg';
 import Handshake_S from 'illustration:./S2_fill_handshake_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Heart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Heart.tsx
index 53cb66ef390..5ea79a4adda 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Heart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Heart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Heart_L from 'illustration:./S2_fill_heart_generic1_160.svg';
 import Heart_M from 'illustration:./S2_fill_heart_generic1_96.svg';
 import Heart_S from 'illustration:./S2_fill_heart_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/HelpCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/HelpCircle.tsx
index a22067f8807..a765a6e9a78 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/HelpCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/HelpCircle.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import HelpCircle_L from 'illustration:./S2_fill_helpCircle_generic1_160.svg';
 import HelpCircle_M from 'illustration:./S2_fill_helpCircle_generic1_96.svg';
 import HelpCircle_S from 'illustration:./S2_fill_helpCircle_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Home.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Home.tsx
index 39a6eb4c91b..1d582735266 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Home.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Home.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Home_L from 'illustration:./S2_fill_home_generic1_160.svg';
 import Home_M from 'illustration:./S2_fill_home_generic1_96.svg';
 import Home_S from 'illustration:./S2_fill_home_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Illustration.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Illustration.tsx
index e23105dfc61..df7a8430632 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Illustration.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Illustration.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Illustration_L from 'illustration:./S2_fill_illustration_generic1_160.svg';
 import Illustration_M from 'illustration:./S2_fill_illustration_generic1_96.svg';
 import Illustration_S from 'illustration:./S2_fill_illustration_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Image.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Image.tsx
index ca6ed1e968d..5499b59afe0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Image.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Image.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Image_L from 'illustration:./S2_fill_image_generic1_160.svg';
 import Image_M from 'illustration:./S2_fill_image_generic1_96.svg';
 import Image_S from 'illustration:./S2_fill_image_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ImageStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ImageStack.tsx
index 1dffed46262..591df857424 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ImageStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ImageStack.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ImageStack_L from 'illustration:./S2_fill_imageStack_generic1_160.svg';
 import ImageStack_M from 'illustration:./S2_fill_imageStack_generic1_96.svg';
 import ImageStack_S from 'illustration:./S2_fill_imageStack_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/InfiniteLooping.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/InfiniteLooping.tsx
index bb55e88307d..ea738ccb058 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/InfiniteLooping.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/InfiniteLooping.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import InfiniteLooping_L from 'illustration:./S2_fill_infiniteLooping_generic1_160.svg';
 import InfiniteLooping_M from 'illustration:./S2_fill_infiniteLooping_generic1_96.svg';
 import InfiniteLooping_S from 'illustration:./S2_fill_infiniteLooping_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Information.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Information.tsx
index 35b53de0888..1cdfff81c02 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Information.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Information.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Information_L from 'illustration:./S2_fill_information_generic1_160.svg';
 import Information_M from 'illustration:./S2_fill_information_generic1_96.svg';
 import Information_S from 'illustration:./S2_fill_information_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Interaction.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Interaction.tsx
index 9456a33fc78..5f8ad49219c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Interaction.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Interaction.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Interaction_L from 'illustration:./S2_fill_interaction_generic1_160.svg';
 import Interaction_M from 'illustration:./S2_fill_interaction_generic1_96.svg';
 import Interaction_S from 'illustration:./S2_fill_interaction_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Laptop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Laptop.tsx
index bd2da36b87a..8f2d8f5c84e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Laptop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Laptop.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Laptop_L from 'illustration:./S2_fill_laptop_generic1_160.svg';
 import Laptop_M from 'illustration:./S2_fill_laptop_generic1_96.svg';
 import Laptop_S from 'illustration:./S2_fill_laptop_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Layers.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Layers.tsx
index 93f5ec23628..f853619acca 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Layers.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Layers.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Layers_L from 'illustration:./S2_fill_layers_generic1_160.svg';
 import Layers_M from 'illustration:./S2_fill_layers_generic1_96.svg';
 import Layers_S from 'illustration:./S2_fill_layers_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Libraries.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Libraries.tsx
index ab41ef018fc..8341c97d036 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Libraries.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Libraries.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Libraries_L from 'illustration:./S2_fill_libraries_generic1_160.svg';
 import Libraries_M from 'illustration:./S2_fill_libraries_generic1_96.svg';
 import Libraries_S from 'illustration:./S2_fill_libraries_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lightbulb.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lightbulb.tsx
index 98e11b83ae5..d3423e2df32 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lightbulb.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lightbulb.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Lightbulb_L from 'illustration:./S2_fill_lightbulb_generic1_160.svg';
 import Lightbulb_M from 'illustration:./S2_fill_lightbulb_generic1_96.svg';
 import Lightbulb_S from 'illustration:./S2_fill_lightbulb_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LightbulbRays.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LightbulbRays.tsx
index 7423fea24ba..f21e5a18b34 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LightbulbRays.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LightbulbRays.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import LightbulbRays_L from 'illustration:./S2_fill_lightbulbRays_generic1_160.svg';
 import LightbulbRays_M from 'illustration:./S2_fill_lightbulbRays_generic1_96.svg';
 import LightbulbRays_S from 'illustration:./S2_fill_lightbulbRays_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lighten.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lighten.tsx
index 3cbe481f3db..f14ddd79675 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lighten.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lighten.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Lighten_L from 'illustration:./S2_fill_lighten_generic1_160.svg';
 import Lighten_M from 'illustration:./S2_fill_lighten_generic1_96.svg';
 import Lighten_S from 'illustration:./S2_fill_lighten_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Link.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Link.tsx
index 55e870fe617..bc9a2a94168 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Link.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Link.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Link_L from 'illustration:./S2_fill_link_generic1_160.svg';
 import Link_M from 'illustration:./S2_fill_link_generic1_96.svg';
 import Link_S from 'illustration:./S2_fill_link_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Location.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Location.tsx
index fce080f505d..d41250baeae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Location.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Location.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Location_L from 'illustration:./S2_fill_location_generic1_160.svg';
 import Location_M from 'illustration:./S2_fill_location_generic1_96.svg';
 import Location_S from 'illustration:./S2_fill_location_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockClose.tsx
index ce062dc3500..3bff1fc2745 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockClose.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import LockClose_L from 'illustration:./S2_fill_lockClose_generic1_160.svg';
 import LockClose_M from 'illustration:./S2_fill_lockClose_generic1_96.svg';
 import LockClose_S from 'illustration:./S2_fill_lockClose_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockOpen.tsx
index 0c10df8cbac..ad27638b728 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockOpen.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import LockOpen_L from 'illustration:./S2_fill_lockOpen_generic1_160.svg';
 import LockOpen_M from 'illustration:./S2_fill_lockOpen_generic1_96.svg';
 import LockOpen_S from 'illustration:./S2_fill_lockOpen_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Logo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Logo.tsx
index 244e0e36b52..3fe59612520 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Logo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Logo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Logo_L from 'illustration:./S2_fill_logo_generic1_160.svg';
 import Logo_M from 'illustration:./S2_fill_logo_generic1_96.svg';
 import Logo_S from 'illustration:./S2_fill_logo_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MagicWand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MagicWand.tsx
index 21793e99381..1296c05978c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MagicWand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MagicWand.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MagicWand_L from 'illustration:./S2_fill_magicWand_generic1_160.svg';
 import MagicWand_M from 'illustration:./S2_fill_magicWand_generic1_96.svg';
 import MagicWand_S from 'illustration:./S2_fill_magicWand_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailClose.tsx
index 8b23d1570f6..b3ed412740b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailClose.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MailClose_L from 'illustration:./S2_fill_mailClose_generic1_160.svg';
 import MailClose_M from 'illustration:./S2_fill_mailClose_generic1_96.svg';
 import MailClose_S from 'illustration:./S2_fill_mailClose_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailOpen.tsx
index bf09f16d533..aaa6bacf3d2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailOpen.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MailOpen_L from 'illustration:./S2_fill_mailOpen_generic1_160.svg';
 import MailOpen_M from 'illustration:./S2_fill_mailOpen_generic1_96.svg';
 import MailOpen_S from 'illustration:./S2_fill_mailOpen_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Market.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Market.tsx
index 0fd35a9f316..c29c674dbd7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Market.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Market.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Market_L from 'illustration:./S2_fill_market_generic1_160.svg';
 import Market_M from 'illustration:./S2_fill_market_generic1_96.svg';
 import Market_S from 'illustration:./S2_fill_market_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote.tsx
index 2322f3c07fb..9065d7739e7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MegaphonePromote_L from 'illustration:./S2_fill_megaphonePromote_generic1_160.svg';
 import MegaphonePromote_M from 'illustration:./S2_fill_megaphonePromote_generic1_96.svg';
 import MegaphonePromote_S from 'illustration:./S2_fill_megaphonePromote_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote2.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote2.tsx
index 3384df87af3..abb949cc31f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote2.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote2.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MegaphonePromote2_L from 'illustration:./S2_fill_megaphonePromote2_generic1_160.svg';
 import MegaphonePromote2_M from 'illustration:./S2_fill_megaphonePromote2_generic1_96.svg';
 import MegaphonePromote2_S from 'illustration:./S2_fill_megaphonePromote2_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Mention.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Mention.tsx
index 4ec4560f402..8fa7c4f55db 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Mention.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Mention.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Mention_L from 'illustration:./S2_fill_mention_generic1_160.svg';
 import Mention_M from 'illustration:./S2_fill_mention_generic1_96.svg';
 import Mention_S from 'illustration:./S2_fill_mention_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Microphone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Microphone.tsx
index 3d4137b03d3..5a2867aadd5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Microphone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Microphone.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Microphone_L from 'illustration:./S2_fill_microphone_generic1_160.svg';
 import Microphone_M from 'illustration:./S2_fill_microphone_generic1_96.svg';
 import Microphone_S from 'illustration:./S2_fill_microphone_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Minimize.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Minimize.tsx
index afecc59bd45..90152d85165 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Minimize.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Minimize.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Minimize_L from 'illustration:./S2_fill_minimize_generic1_160.svg';
 import Minimize_M from 'illustration:./S2_fill_minimize_generic1_96.svg';
 import Minimize_S from 'illustration:./S2_fill_minimize_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MovieCamera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MovieCamera.tsx
index 556a379ed63..ba6e8c008f4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MovieCamera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MovieCamera.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MovieCamera_L from 'illustration:./S2_fill_movieCamera_generic1_160.svg';
 import MovieCamera_M from 'illustration:./S2_fill_movieCamera_generic1_96.svg';
 import MovieCamera_S from 'illustration:./S2_fill_movieCamera_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MusicNote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MusicNote.tsx
index 2db9e63020a..c0b8e846062 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MusicNote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MusicNote.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MusicNote_L from 'illustration:./S2_fill_musicNote_generic1_160.svg';
 import MusicNote_M from 'illustration:./S2_fill_musicNote_generic1_96.svg';
 import MusicNote_S from 'illustration:./S2_fill_musicNote_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/NoElements.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/NoElements.tsx
index 15eca4886dc..144cdcfb819 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/NoElements.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/NoElements.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoElements_L from 'illustration:./S2_fill_noElements_generic1_160.svg';
 import NoElements_M from 'illustration:./S2_fill_noElements_generic1_96.svg';
 import NoElements_S from 'illustration:./S2_fill_noElements_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperairplane.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperairplane.tsx
index 8b5224246db..81fcc98ee00 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperairplane.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperairplane.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Paperairplane_L from 'illustration:./S2_fill_paperairplane_generic1_160.svg';
 import Paperairplane_M from 'illustration:./S2_fill_paperairplane_generic1_96.svg';
 import Paperairplane_S from 'illustration:./S2_fill_paperairplane_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperclip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperclip.tsx
index 8f057f0690e..da8a90399dd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperclip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperclip.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Paperclip_L from 'illustration:./S2_fill_paperclip_generic1_160.svg';
 import Paperclip_M from 'illustration:./S2_fill_paperclip_generic1_96.svg';
 import Paperclip_S from 'illustration:./S2_fill_paperclip_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pause.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pause.tsx
index 7038b69fc40..bd504e5a946 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pause.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pause.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Pause_L from 'illustration:./S2_fill_pause_generic1_160.svg';
 import Pause_M from 'illustration:./S2_fill_pause_generic1_96.svg';
 import Pause_S from 'illustration:./S2_fill_pause_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pencil.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pencil.tsx
index 3d64aa3c9f0..02381e67b72 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pencil.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pencil.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Pencil_L from 'illustration:./S2_fill_pencil_generic1_160.svg';
 import Pencil_M from 'illustration:./S2_fill_pencil_generic1_96.svg';
 import Pencil_S from 'illustration:./S2_fill_pencil_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Phone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Phone.tsx
index c1fd3313aee..2e46d382cd1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Phone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Phone.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Phone_L from 'illustration:./S2_fill_phone_generic1_160.svg';
 import Phone_M from 'illustration:./S2_fill_phone_generic1_96.svg';
 import Phone_S from 'illustration:./S2_fill_phone_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PieChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PieChart.tsx
index 32aff3bd056..fa82452667c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PieChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PieChart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import PieChart_L from 'illustration:./S2_fill_pieChart_generic1_160.svg';
 import PieChart_M from 'illustration:./S2_fill_pieChart_generic1_96.svg';
 import PieChart_S from 'illustration:./S2_fill_pieChart_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PiggyBank.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PiggyBank.tsx
index 45127aa7432..82e7d7f4b32 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PiggyBank.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PiggyBank.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import PiggyBank_L from 'illustration:./S2_fill_piggyBank_generic1_160.svg';
 import PiggyBank_M from 'illustration:./S2_fill_piggyBank_generic1_96.svg';
 import PiggyBank_S from 'illustration:./S2_fill_piggyBank_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pin.tsx
index a71f7320083..439d26094db 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pin.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Pin_L from 'illustration:./S2_fill_pin_generic1_160.svg';
 import Pin_M from 'illustration:./S2_fill_pin_generic1_96.svg';
 import Pin_S from 'illustration:./S2_fill_pin_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Play.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Play.tsx
index 23de4a221bb..1b56e807478 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Play.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Play.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Play_L from 'illustration:./S2_fill_play_generic1_160.svg';
 import Play_M from 'illustration:./S2_fill_play_generic1_96.svg';
 import Play_S from 'illustration:./S2_fill_play_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PlayTriangle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PlayTriangle.tsx
index 4112fb7569e..aef2a2f919e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PlayTriangle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PlayTriangle.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import PlayTriangle_L from 'illustration:./S2_fill_playTriangle_generic1_160.svg';
 import PlayTriangle_M from 'illustration:./S2_fill_playTriangle_generic1_96.svg';
 import PlayTriangle_S from 'illustration:./S2_fill_playTriangle_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Plugin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Plugin.tsx
index a23bc85e2c9..dc5027817e7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Plugin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Plugin.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Plugin_L from 'illustration:./S2_fill_plugin_generic1_160.svg';
 import Plugin_M from 'illustration:./S2_fill_plugin_generic1_96.svg';
 import Plugin_S from 'illustration:./S2_fill_plugin_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Prompt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Prompt.tsx
index 0e92ef52cfe..8c6c51d65e4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Prompt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Prompt.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Prompt_L from 'illustration:./S2_fill_prompt_generic1_160.svg';
 import Prompt_M from 'illustration:./S2_fill_prompt_generic1_96.svg';
 import Prompt_S from 'illustration:./S2_fill_prompt_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Properties.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Properties.tsx
index 91f8aca7f40..52aa3d65e10 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Properties.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Properties.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Properties_L from 'illustration:./S2_fill_properties_generic1_160.svg';
 import Properties_M from 'illustration:./S2_fill_properties_generic1_96.svg';
 import Properties_S from 'illustration:./S2_fill_properties_generic1_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Redo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Redo.tsx
index 033c23717ef..b5bc8ce8c29 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Redo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Redo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Redo_L from 'illustration:./S2_fill_redo_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Remix.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Remix.tsx
index 5acdab8fe5a..e6942c0932d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Remix.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Remix.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Remix_L from 'illustration:./S2_fill_remix_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Replace.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Replace.tsx
index 8cf8f892e79..bd054dde9ca 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Replace.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Replace.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Replace_L from 'illustration:./S2_fill_replace_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Revert.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Revert.tsx
index 859c7ee7fde..405e5a01153 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Revert.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Revert.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Revert_L from 'illustration:./S2_fill_revert_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ribbon.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ribbon.tsx
index 84aa06c1a71..32ad18a7b93 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ribbon.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ribbon.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Ribbon_L from 'illustration:./S2_fill_ribbon_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Rocket.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Rocket.tsx
index a3e5791478f..913684ea19c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Rocket.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Rocket.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Rocket_L from 'illustration:./S2_fill_rocket_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCCW.tsx
index eb77dd00c8d..14704a0242c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCCW.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import RotateCCW_L from 'illustration:./S2_fill_rotateCCW_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCW.tsx
index dcd4512d855..8d5c145224e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCW.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import RotateCW_L from 'illustration:./S2_fill_rotateCW_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ruler.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ruler.tsx
index ccfe0af42bb..63fe2cc31d2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ruler.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ruler.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Ruler_L from 'illustration:./S2_fill_ruler_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Search.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Search.tsx
index d8ec1b48882..b66a72e5023 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Search.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Search.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Search_L from 'illustration:./S2_fill_search_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Segmentation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Segmentation.tsx
index c65358928b2..2a4c558b8a3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Segmentation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Segmentation.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Segmentation_L from 'illustration:./S2_fill_segmentation_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Server.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Server.tsx
index 9d5b171b839..420d1e8c03d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Server.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Server.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Server_L from 'illustration:./S2_fill_server_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Shapes.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Shapes.tsx
index 353617b97dd..f3808f0b037 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Shapes.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Shapes.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Shapes_L from 'illustration:./S2_fill_shapes_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingBag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingBag.tsx
index 14cb9c92b54..bc93e93d166 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingBag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingBag.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ShoppingBag_L from 'illustration:./S2_fill_shoppingBag_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingCart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingCart.tsx
index 745a95fdef8..54e245495ab 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingCart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingCart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ShoppingCart_L from 'illustration:./S2_fill_shoppingCart_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Sparkles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Sparkles.tsx
index f51711b8772..9f609b5b767 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Sparkles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Sparkles.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Sparkles_L from 'illustration:./S2_fill_sparkles_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/SpeedFast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/SpeedFast.tsx
index 952f0f4c660..0a1e06391dc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/SpeedFast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/SpeedFast.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import SpeedFast_L from 'illustration:./S2_fill_speedFast_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StampClone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StampClone.tsx
index c4c15fc990e..128e0acdf70 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StampClone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StampClone.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import StampClone_L from 'illustration:./S2_fill_stampClone_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Star.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Star.tsx
index 3eae2279731..c8995e3f8b1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Star.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Star.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Star_L from 'illustration:./S2_fill_star_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StepForward.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StepForward.tsx
index 801762b8b78..fc325e4b1f0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StepForward.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StepForward.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import StepForward_L from 'illustration:./S2_fill_stepForward_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Switch.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Switch.tsx
index 7030d695074..e18dad82b89 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Switch.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Switch.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Switch_L from 'illustration:./S2_fill_switch_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tablet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tablet.tsx
index 5750524f767..91773114657 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tablet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tablet.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Tablet_L from 'illustration:./S2_fill_tablet_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tag.tsx
index 46fee28098b..1d776ddd72c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tag.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Tag_L from 'illustration:./S2_fill_tag_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Targeted.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Targeted.tsx
index 1776c737196..3a804d0cb70 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Targeted.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Targeted.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Targeted_L from 'illustration:./S2_fill_targeted_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Text.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Text.tsx
index 301ee85aa73..f9fe2af83b2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Text.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Text.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Text_L from 'illustration:./S2_fill_text_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThreeArrowsCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThreeArrowsCircle.tsx
index 74cdba1f126..384d8791e63 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThreeArrowsCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThreeArrowsCircle.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ThreeArrowsCircle_L from 'illustration:./S2_fill_threeArrowsCircle_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThumbsUp.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThumbsUp.tsx
index 84b2a0d5fbd..6c8293f5722 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThumbsUp.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThumbsUp.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ThumbsUp_L from 'illustration:./S2_fill_thumbsUp_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Transform.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Transform.tsx
index 78a594f417b..de32ee93a97 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Transform.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Transform.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Transform_L from 'illustration:./S2_fill_transform_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Translate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Translate.tsx
index 8e2fba37fb0..c459d01bfc9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Translate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Translate.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Translate_L from 'illustration:./S2_fill_translate_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trash.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trash.tsx
index c0c918267b3..bc2d9847724 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trash.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trash.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Trash_L from 'illustration:./S2_fill_trash_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trophy.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trophy.tsx
index 1abf4f1cd41..d1ba88085d1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trophy.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trophy.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Trophy_L from 'illustration:./S2_fill_trophy_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Update.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Update.tsx
index 68cb384c631..d6b65ec6b6c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Update.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Update.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Update_L from 'illustration:./S2_fill_update_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Upload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Upload.tsx
index 5b6874eb6fa..fc6349c73ba 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Upload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Upload.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Upload_L from 'illustration:./S2_fill_upload_generic1_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/User.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/User.tsx
index 8e8799ca452..3c9de971f41 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/User.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/User.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserAvatar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserAvatar.tsx
index 74648e7c5ec..b1f3d224bf2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserAvatar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserAvatar.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserGroup.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserGroup.tsx
index ae1c41c58c2..4a588589438 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserGroup.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserGroup.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VectorDraw.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VectorDraw.tsx
index 1edbf9aa757..dd7c054fc21 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VectorDraw.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VectorDraw.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Video.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Video.tsx
index 615815ecbe6..56b8609bcff 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Video.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Video.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Volume.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Volume.tsx
index abd41027299..72f60c72584 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Volume.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Volume.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VolumeOne.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VolumeOne.tsx
index c0a9de197b8..cdeef3226ae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VolumeOne.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VolumeOne.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Wallet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Wallet.tsx
index 0f02a464f52..676da52c546 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Wallet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Wallet.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3D.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3D.tsx
index 303e3d0fd5b..9d0242e552f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3D.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3D.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import _3D_L from 'illustration:./S2_fill_3D_generic2_160.svg';
 import _3D_M from 'illustration:./S2_fill_3D_generic2_96.svg';
 import _3D_S from 'illustration:./S2_fill_3D_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3Dasset.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3Dasset.tsx
index 870304921f1..b02d02e9ac5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3Dasset.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3Dasset.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import _3Dasset_L from 'illustration:./S2_fill_3Dasset_generic2_160.svg';
 import _3Dasset_M from 'illustration:./S2_fill_3Dasset_generic2_96.svg';
 import _3Dasset_S from 'illustration:./S2_fill_3Dasset_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerate.tsx
index a8c6d6f5ad8..46333c41268 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerate.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AIGenerate_L from 'illustration:./S2_fill_AIGenerate_generic2_160.svg';
 import AIGenerate_M from 'illustration:./S2_fill_AIGenerate_generic2_96.svg';
 import AIGenerate_S from 'illustration:./S2_fill_AIGenerate_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerateImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerateImage.tsx
index 9d608156ce3..73bae747120 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerateImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerateImage.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AIGenerateImage_L from 'illustration:./S2_fill_AIGenerateImage_generic2_160.svg';
 import AIGenerateImage_M from 'illustration:./S2_fill_AIGenerateImage_generic2_96.svg';
 import AIGenerateImage_S from 'illustration:./S2_fill_AIGenerateImage_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIchat.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIchat.tsx
index e9baa6031c3..4b1980c88f8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIchat.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIchat.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AIchat_L from 'illustration:./S2_fill_AIchat_generic2_160.svg';
 import AIchat_M from 'illustration:./S2_fill_AIchat_generic2_96.svg';
 import AIchat_S from 'illustration:./S2_fill_AIchat_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Accessibility.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Accessibility.tsx
index 827e1af7c66..20e97972f08 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Accessibility.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Accessibility.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Accessibility_L from 'illustration:./S2_fill_accessibility_generic2_160.svg';
 import Accessibility_M from 'illustration:./S2_fill_accessibility_generic2_96.svg';
 import Accessibility_S from 'illustration:./S2_fill_accessibility_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Animation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Animation.tsx
index 17efad21863..d50aa5076b5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Animation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Animation.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Animation_L from 'illustration:./S2_fill_animation_generic2_160.svg';
 import Animation_M from 'illustration:./S2_fill_animation_generic2_96.svg';
 import Animation_S from 'illustration:./S2_fill_animation_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Apps.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Apps.tsx
index 0f40110a02e..96790597b33 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Apps.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Apps.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Apps_L from 'illustration:./S2_fill_apps_generic2_160.svg';
 import Apps_M from 'illustration:./S2_fill_apps_generic2_96.svg';
 import Apps_S from 'illustration:./S2_fill_apps_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Artboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Artboard.tsx
index 240edd55e58..2182141bee1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Artboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Artboard.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Artboard_L from 'illustration:./S2_fill_artboard_generic2_160.svg';
 import Artboard_M from 'illustration:./S2_fill_artboard_generic2_96.svg';
 import Artboard_S from 'illustration:./S2_fill_artboard_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Assets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Assets.tsx
index c1223e9cc18..e0b34b7d8c0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Assets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Assets.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Assets_L from 'illustration:./S2_fill_assets_generic2_160.svg';
 import Assets_M from 'illustration:./S2_fill_assets_generic2_96.svg';
 import Assets_S from 'illustration:./S2_fill_assets_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AudioWave.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AudioWave.tsx
index 3ba67aee9f6..7da52022f6c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AudioWave.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AudioWave.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AudioWave_L from 'illustration:./S2_fill_audioWave_generic2_160.svg';
 import AudioWave_M from 'illustration:./S2_fill_audioWave_generic2_96.svg';
 import AudioWave_S from 'illustration:./S2_fill_audioWave_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BadgeVerified.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BadgeVerified.tsx
index 947cfee412a..cde5e93784a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BadgeVerified.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BadgeVerified.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BadgeVerified_L from 'illustration:./S2_fill_badgeVerified_generic2_160.svg';
 import BadgeVerified_M from 'illustration:./S2_fill_badgeVerified_generic2_96.svg';
 import BadgeVerified_S from 'illustration:./S2_fill_badgeVerified_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bell.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bell.tsx
index 6326c781039..1e86d0b307a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bell.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bell.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Bell_L from 'illustration:./S2_fill_bell_generic2_160.svg';
 import Bell_M from 'illustration:./S2_fill_bell_generic2_96.svg';
 import Bell_S from 'illustration:./S2_fill_bell_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bolt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bolt.tsx
index dc3848d4942..d1a4af218ee 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bolt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bolt.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Bolt_L from 'illustration:./S2_fill_bolt_generic2_160.svg';
 import Bolt_M from 'illustration:./S2_fill_bolt_generic2_96.svg';
 import Bolt_S from 'illustration:./S2_fill_bolt_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brand.tsx
index d2788aa331b..f6a94219489 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brand.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Brand_L from 'illustration:./S2_fill_brand_generic2_160.svg';
 import Brand_M from 'illustration:./S2_fill_brand_generic2_96.svg';
 import Brand_S from 'illustration:./S2_fill_brand_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Briefcase.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Briefcase.tsx
index 085ea96e90e..4b32fb07fee 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Briefcase.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Briefcase.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Briefcase_L from 'illustration:./S2_fill_briefcase_generic2_160.svg';
 import Briefcase_M from 'illustration:./S2_fill_briefcase_generic2_96.svg';
 import Briefcase_S from 'illustration:./S2_fill_briefcase_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BrightnessContrast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BrightnessContrast.tsx
index 8de257eeb3a..d3a42f44343 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BrightnessContrast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BrightnessContrast.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BrightnessContrast_L from 'illustration:./S2_fill_brightnessContrast_generic2_160.svg';
 import BrightnessContrast_M from 'illustration:./S2_fill_brightnessContrast_generic2_96.svg';
 import BrightnessContrast_S from 'illustration:./S2_fill_brightnessContrast_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Browser.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Browser.tsx
index 0547f8a8e07..6953e63eb38 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Browser.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Browser.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Browser_L from 'illustration:./S2_fill_browser_generic2_160.svg';
 import Browser_M from 'illustration:./S2_fill_browser_generic2_96.svg';
 import Browser_S from 'illustration:./S2_fill_browser_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brush.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brush.tsx
index 1f2b834170f..5afcb37af51 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brush.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brush.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Brush_L from 'illustration:./S2_fill_brush_generic2_160.svg';
 import Brush_M from 'illustration:./S2_fill_brush_generic2_96.svg';
 import Brush_S from 'illustration:./S2_fill_brush_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BuildTable.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BuildTable.tsx
index 6eecbeb21d9..5883bc4ee9d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BuildTable.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BuildTable.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BuildTable_L from 'illustration:./S2_fill_buildTable_generic2_160.svg';
 import BuildTable_M from 'illustration:./S2_fill_buildTable_generic2_96.svg';
 import BuildTable_S from 'illustration:./S2_fill_buildTable_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Buildings.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Buildings.tsx
index c219ee7b244..661754c8ee3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Buildings.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Buildings.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Buildings_L from 'illustration:./S2_fill_buildings_generic2_160.svg';
 import Buildings_M from 'illustration:./S2_fill_buildings_generic2_96.svg';
 import Buildings_S from 'illustration:./S2_fill_buildings_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Calendar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Calendar.tsx
index d19e35a41d5..9fae896e6f7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Calendar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Calendar.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Calendar_L from 'illustration:./S2_fill_calendar_generic2_160.svg';
 import Calendar_M from 'illustration:./S2_fill_calendar_generic2_96.svg';
 import Calendar_S from 'illustration:./S2_fill_calendar_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Camera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Camera.tsx
index 1f830a72489..5e1dc3fcbb3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Camera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Camera.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Camera_L from 'illustration:./S2_fill_camera_generic2_160.svg';
 import Camera_M from 'illustration:./S2_fill_camera_generic2_96.svg';
 import Camera_S from 'illustration:./S2_fill_camera_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CardTapPayment.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CardTapPayment.tsx
index a439c61dc91..1ffe5edb8eb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CardTapPayment.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CardTapPayment.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CardTapPayment_L from 'illustration:./S2_fill_cardTapPayment_generic2_160.svg';
 import CardTapPayment_M from 'illustration:./S2_fill_cardTapPayment_generic2_96.svg';
 import CardTapPayment_S from 'illustration:./S2_fill_cardTapPayment_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Channel.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Channel.tsx
index e107f2595ca..954fe0723bf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Channel.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Channel.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Channel_L from 'illustration:./S2_fill_channel_generic2_160.svg';
 import Channel_M from 'illustration:./S2_fill_channel_generic2_96.svg';
 import Channel_S from 'illustration:./S2_fill_channel_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ChartAreaStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ChartAreaStack.tsx
index 54b43d88b5b..0730f78e58e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ChartAreaStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ChartAreaStack.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ChartAreaStack_L from 'illustration:./S2_fill_chartAreaStack_generic2_160.svg';
 import ChartAreaStack_M from 'illustration:./S2_fill_chartAreaStack_generic2_96.svg';
 import ChartAreaStack_S from 'illustration:./S2_fill_chartAreaStack_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Chatbubble.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Chatbubble.tsx
index c6d4565bbb4..f3999ab8909 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Chatbubble.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Chatbubble.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Chatbubble_L from 'illustration:./S2_fill_chatbubble_generic2_160.svg';
 import Chatbubble_M from 'illustration:./S2_fill_chatbubble_generic2_96.svg';
 import Chatbubble_S from 'illustration:./S2_fill_chatbubble_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Checkmark.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Checkmark.tsx
index 97cb46b0426..da8340d125a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Checkmark.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Checkmark.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Checkmark_L from 'illustration:./S2_fill_checkmark_generic2_160.svg';
 import Checkmark_M from 'illustration:./S2_fill_checkmark_generic2_96.svg';
 import Checkmark_S from 'illustration:./S2_fill_checkmark_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clipboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clipboard.tsx
index d295d37b905..37fad1f76c3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clipboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clipboard.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Clipboard_L from 'illustration:./S2_fill_clipboard_generic2_160.svg';
 import Clipboard_M from 'illustration:./S2_fill_clipboard_generic2_96.svg';
 import Clipboard_S from 'illustration:./S2_fill_clipboard_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clock.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clock.tsx
index 18861bb9001..30786d2a03a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clock.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clock.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Clock_L from 'illustration:./S2_fill_clock_generic2_160.svg';
 import Clock_M from 'illustration:./S2_fill_clock_generic2_96.svg';
 import Clock_S from 'illustration:./S2_fill_clock_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cloud.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cloud.tsx
index e0411575032..c30faa87523 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cloud.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cloud.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Cloud_L from 'illustration:./S2_fill_cloud_generic2_160.svg';
 import Cloud_M from 'illustration:./S2_fill_cloud_generic2_96.svg';
 import Cloud_S from 'illustration:./S2_fill_cloud_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CloudUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CloudUpload.tsx
index 8045cff4c2b..a80bc2b13a1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CloudUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CloudUpload.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CloudUpload_L from 'illustration:./S2_fill_cloudUpload_generic2_160.svg';
 import CloudUpload_M from 'illustration:./S2_fill_cloudUpload_generic2_96.svg';
 import CloudUpload_S from 'illustration:./S2_fill_cloudUpload_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CodeBrackets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CodeBrackets.tsx
index 07e2d94c63d..8c93ba7b89c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CodeBrackets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CodeBrackets.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CodeBrackets_L from 'illustration:./S2_fill_CodeBrackets_generic2_160.svg';
 import CodeBrackets_M from 'illustration:./S2_fill_CodeBrackets_generic2_96.svg';
 import CodeBrackets_S from 'illustration:./S2_fill_CodeBrackets_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Color.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Color.tsx
index 23f037b4e53..a1a5dd85042 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Color.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Color.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Color_L from 'illustration:./S2_fill_color_generic2_160.svg';
 import Color_M from 'illustration:./S2_fill_color_generic2_96.svg';
 import Color_S from 'illustration:./S2_fill_color_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CommentText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CommentText.tsx
index dad5769d17e..a279b9b78aa 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CommentText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CommentText.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CommentText_L from 'illustration:./S2_fill_commentText_generic2_160.svg';
 import CommentText_M from 'illustration:./S2_fill_commentText_generic2_96.svg';
 import CommentText_S from 'illustration:./S2_fill_commentText_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Confetti.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Confetti.tsx
index bf56836fcbd..b149b5e1d3a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Confetti.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Confetti.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Confetti_L from 'illustration:./S2_fill_confetti_generic2_160.svg';
 import Confetti_M from 'illustration:./S2_fill_confetti_generic2_96.svg';
 import Confetti_S from 'illustration:./S2_fill_confetti_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Conversationbubbles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Conversationbubbles.tsx
index 4c1cae662f0..c815dc280ae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Conversationbubbles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Conversationbubbles.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Conversationbubbles_L from 'illustration:./S2_fill_conversationbubbles_generic2_160.svg';
 import Conversationbubbles_M from 'illustration:./S2_fill_conversationbubbles_generic2_96.svg';
 import Conversationbubbles_S from 'illustration:./S2_fill_conversationbubbles_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Crop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Crop.tsx
index 86b0d946d8a..dc401beb9f3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Crop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Crop.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Crop_L from 'illustration:./S2_fill_crop_generic2_160.svg';
 import Crop_M from 'illustration:./S2_fill_crop_generic2_96.svg';
 import Crop_S from 'illustration:./S2_fill_crop_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cursor.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cursor.tsx
index 7fc8e5e8d4a..90851232b6e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cursor.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cursor.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Cursor_L from 'illustration:./S2_fill_cursor_generic2_160.svg';
 import Cursor_M from 'illustration:./S2_fill_cursor_generic2_96.svg';
 import Cursor_S from 'illustration:./S2_fill_cursor_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cut.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cut.tsx
index 11b6d1ac976..9a3cf2b6a11 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cut.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cut.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Cut_L from 'illustration:./S2_fill_cut_generic2_160.svg';
 import Cut_M from 'illustration:./S2_fill_cut_generic2_96.svg';
 import Cut_S from 'illustration:./S2_fill_cut_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Data.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Data.tsx
index 35268818eda..913341a14f7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Data.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Data.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Data_L from 'illustration:./S2_fill_data_generic2_160.svg';
 import Data_M from 'illustration:./S2_fill_data_generic2_96.svg';
 import Data_S from 'illustration:./S2_fill_data_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DataAnalytics.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DataAnalytics.tsx
index c92aec2b8bd..6e60dbc6c50 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DataAnalytics.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DataAnalytics.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import DataAnalytics_L from 'illustration:./S2_fill_dataAnalytics_generic2_160.svg';
 import DataAnalytics_M from 'illustration:./S2_fill_dataAnalytics_generic2_96.svg';
 import DataAnalytics_S from 'illustration:./S2_fill_dataAnalytics_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Desktop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Desktop.tsx
index fc1901b54b7..85dda72d881 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Desktop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Desktop.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Desktop_L from 'illustration:./S2_fill_desktop_generic2_160.svg';
 import Desktop_M from 'illustration:./S2_fill_desktop_generic2_96.svg';
 import Desktop_S from 'illustration:./S2_fill_desktop_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Diamond.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Diamond.tsx
index 75ce17bcc77..424f9dffe79 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Diamond.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Diamond.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Diamond_L from 'illustration:./S2_fill_diamond_generic2_160.svg';
 import Diamond_M from 'illustration:./S2_fill_diamond_generic2_96.svg';
 import Diamond_S from 'illustration:./S2_fill_diamond_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Document.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Document.tsx
index 73a7be049f5..30cc87f4ba3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Document.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Document.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Document_L from 'illustration:./S2_fill_document_generic2_160.svg';
 import Document_M from 'illustration:./S2_fill_document_generic2_96.svg';
 import Document_S from 'illustration:./S2_fill_document_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Download.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Download.tsx
index 48e6334ac00..4c0c7ed0da8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Download.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Download.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Download_L from 'illustration:./S2_fill_download_generic2_160.svg';
 import Download_M from 'illustration:./S2_fill_download_generic2_96.svg';
 import Download_S from 'illustration:./S2_fill_download_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DropToUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DropToUpload.tsx
index 2360b363312..110b3b5129c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DropToUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DropToUpload.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import DropToUpload_L from 'illustration:./S2_fill_dropToUpload_generic2_160.svg';
 import DropToUpload_M from 'illustration:./S2_fill_dropToUpload_generic2_96.svg';
 import DropToUpload_S from 'illustration:./S2_fill_dropToUpload_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Education.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Education.tsx
index 0cfc8443bce..81d3b6df8c5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Education.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Education.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Education_L from 'illustration:./S2_fill_education_generic2_160.svg';
 import Education_M from 'illustration:./S2_fill_education_generic2_96.svg';
 import Education_S from 'illustration:./S2_fill_education_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Effects.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Effects.tsx
index c35adc055f1..ec801568cd4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Effects.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Effects.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Effects_L from 'illustration:./S2_fill_effects_generic2_160.svg';
 import Effects_M from 'illustration:./S2_fill_effects_generic2_96.svg';
 import Effects_S from 'illustration:./S2_fill_effects_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Emoji.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Emoji.tsx
index b7cac0983d5..b1b00e848ff 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Emoji.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Emoji.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Emoji_L from 'illustration:./S2_fill_emoji_generic2_160.svg';
 import Emoji_M from 'illustration:./S2_fill_emoji_generic2_96.svg';
 import Emoji_S from 'illustration:./S2_fill_emoji_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/EmptyStateExport.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/EmptyStateExport.tsx
index 13b47cb8499..736d429d00f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/EmptyStateExport.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/EmptyStateExport.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import EmptyStateExport_L from 'illustration:./S2_fill_EmptyStateExport_generic2_160.svg';
 import EmptyStateExport_M from 'illustration:./S2_fill_EmptyStateExport_generic2_96.svg';
 import EmptyStateExport_S from 'illustration:./S2_fill_EmptyStateExport_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Explosion.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Explosion.tsx
index 7778aa12d7f..d76ea88df4d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Explosion.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Explosion.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Explosion_L from 'illustration:./S2_fill_explosion_generic2_160.svg';
 import Explosion_M from 'illustration:./S2_fill_explosion_generic2_96.svg';
 import Explosion_S from 'illustration:./S2_fill_explosion_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ExportTo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ExportTo.tsx
index 453ce5c6e48..530ef34251f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ExportTo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ExportTo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ExportTo_L from 'illustration:./S2_fill_exportTo_generic2_160.svg';
 import ExportTo_M from 'illustration:./S2_fill_exportTo_generic2_96.svg';
 import ExportTo_S from 'illustration:./S2_fill_exportTo_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Exposure.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Exposure.tsx
index 5f095732177..d2e8a182b8a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Exposure.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Exposure.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Exposure_L from 'illustration:./S2_fill_exposure_generic2_160.svg';
 import Exposure_M from 'illustration:./S2_fill_exposure_generic2_96.svg';
 import Exposure_S from 'illustration:./S2_fill_exposure_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileImage.tsx
index fa5be3f193a..f010b8713a5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileImage.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileImage_L from 'illustration:./S2_fill_fileImage_generic2_160.svg';
 import FileImage_M from 'illustration:./S2_fill_fileImage_generic2_96.svg';
 import FileImage_S from 'illustration:./S2_fill_fileImage_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileShared.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileShared.tsx
index a5799aa302a..f063d929e73 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileShared.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileShared.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileShared_L from 'illustration:./S2_fill_fileShared_generic2_160.svg';
 import FileShared_M from 'illustration:./S2_fill_fileShared_generic2_96.svg';
 import FileShared_S from 'illustration:./S2_fill_fileShared_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileText.tsx
index 3012003eebd..e3a44957903 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileText.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileText_L from 'illustration:./S2_fill_fileText_generic2_160.svg';
 import FileText_M from 'illustration:./S2_fill_fileText_generic2_96.svg';
 import FileText_S from 'illustration:./S2_fill_fileText_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileVideo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileVideo.tsx
index 6251cc456ec..5e9fb2cefcb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileVideo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileVideo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileVideo_L from 'illustration:./S2_fill_fileVideo_generic2_160.svg';
 import FileVideo_M from 'illustration:./S2_fill_fileVideo_generic2_96.svg';
 import FileVideo_S from 'illustration:./S2_fill_fileVideo_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileZip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileZip.tsx
index 460b9ee0021..1a047770024 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileZip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileZip.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileZip_L from 'illustration:./S2_fill_fileZip_generic2_160.svg';
 import FileZip_M from 'illustration:./S2_fill_fileZip_generic2_96.svg';
 import FileZip_S from 'illustration:./S2_fill_fileZip_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filmstrip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filmstrip.tsx
index 24274491b54..661778ac2d7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filmstrip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filmstrip.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Filmstrip_L from 'illustration:./S2_fill_filmstrip_generic2_160.svg';
 import Filmstrip_M from 'illustration:./S2_fill_filmstrip_generic2_96.svg';
 import Filmstrip_S from 'illustration:./S2_fill_filmstrip_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filter.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filter.tsx
index e9d103e406b..0b1c3bff75b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filter.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filter.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Filter_L from 'illustration:./S2_fill_filter_generic2_160.svg';
 import Filter_M from 'illustration:./S2_fill_filter_generic2_96.svg';
 import Filter_S from 'illustration:./S2_fill_filter_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filters.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filters.tsx
index 5b7fd62e928..5247d3e38bb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filters.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filters.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Filters_L from 'illustration:./S2_fill_filters_generic2_160.svg';
 import Filters_M from 'illustration:./S2_fill_filters_generic2_96.svg';
 import Filters_S from 'illustration:./S2_fill_filters_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Fireworks.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Fireworks.tsx
index d9282a81279..7a31f085538 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Fireworks.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Fireworks.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Fireworks_L from 'illustration:./S2_fill_fireworks_generic2_160.svg';
 import Fireworks_M from 'illustration:./S2_fill_fireworks_generic2_96.svg';
 import Fireworks_S from 'illustration:./S2_fill_fireworks_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Flag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Flag.tsx
index aca1d14bb87..f6186fd55ce 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Flag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Flag.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Flag_L from 'illustration:./S2_fill_flag_generic2_160.svg';
 import Flag_M from 'illustration:./S2_fill_flag_generic2_96.svg';
 import Flag_S from 'illustration:./S2_fill_flag_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCheckmark.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCheckmark.tsx
index db540ef8ca1..d178bbdfcee 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCheckmark.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCheckmark.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FlagCheckmark_L from 'illustration:./S2_fill_flagCheckmark_generic2_160.svg';
 import FlagCheckmark_M from 'illustration:./S2_fill_flagCheckmark_generic2_96.svg';
 import FlagCheckmark_S from 'illustration:./S2_fill_flagCheckmark_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCross.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCross.tsx
index 17a1b09ff2e..122bc7d0850 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCross.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCross.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FlagCross_L from 'illustration:./S2_fill_flagCross_generic2_160.svg';
 import FlagCross_M from 'illustration:./S2_fill_flagCross_generic2_96.svg';
 import FlagCross_S from 'illustration:./S2_fill_flagCross_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderClose.tsx
index 8f6d85ff11f..84c7e005382 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderClose.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FolderClose_L from 'illustration:./S2_fill_folderClose_generic2_160.svg';
 import FolderClose_M from 'illustration:./S2_fill_folderClose_generic2_96.svg';
 import FolderClose_S from 'illustration:./S2_fill_folderClose_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderOpen.tsx
index 7d1f5e2af7d..061a8ca7fe6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderOpen.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FolderOpen_L from 'illustration:./S2_fill_folderOpen_generic2_160.svg';
 import FolderOpen_M from 'illustration:./S2_fill_folderOpen_generic2_96.svg';
 import FolderOpen_S from 'illustration:./S2_fill_folderOpen_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderShared.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderShared.tsx
index 88f369dbc80..3b2ea8ae83d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderShared.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderShared.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FolderShared_L from 'illustration:./S2_fill_folderShared_generic2_160.svg';
 import FolderShared_M from 'illustration:./S2_fill_folderShared_generic2_96.svg';
 import FolderShared_S from 'illustration:./S2_fill_folderShared_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GearSetting.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GearSetting.tsx
index 13a6e603686..76ca6b6ba10 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GearSetting.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GearSetting.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import GearSetting_L from 'illustration:./S2_fill_gearSetting_generic2_160.svg';
 import GearSetting_M from 'illustration:./S2_fill_gearSetting_generic2_96.svg';
 import GearSetting_S from 'illustration:./S2_fill_gearSetting_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Gift.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Gift.tsx
index 54ac29d3471..b63befa0ed4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Gift.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Gift.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Gift_L from 'illustration:./S2_fill_gift_generic2_160.svg';
 import Gift_M from 'illustration:./S2_fill_gift_generic2_96.svg';
 import Gift_S from 'illustration:./S2_fill_gift_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Globe.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Globe.tsx
index 6ca54394ea7..fa1498e8a1e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Globe.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Globe.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Globe_L from 'illustration:./S2_fill_globe_generic2_160.svg';
 import Globe_M from 'illustration:./S2_fill_globe_generic2_96.svg';
 import Globe_S from 'illustration:./S2_fill_globe_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GlobeGrid.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GlobeGrid.tsx
index 0ff335010c5..c33a5b2b62a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GlobeGrid.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GlobeGrid.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import GlobeGrid_L from 'illustration:./S2_fill_globeGrid_generic2_160.svg';
 import GlobeGrid_M from 'illustration:./S2_fill_globeGrid_generic2_96.svg';
 import GlobeGrid_S from 'illustration:./S2_fill_globeGrid_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GraphBarChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GraphBarChart.tsx
index ce6056937f8..5a27396ffc1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GraphBarChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GraphBarChart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import GraphBarChart_L from 'illustration:./S2_fill_graphBarChart_generic2_160.svg';
 import GraphBarChart_M from 'illustration:./S2_fill_graphBarChart_generic2_96.svg';
 import GraphBarChart_S from 'illustration:./S2_fill_graphBarChart_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Hand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Hand.tsx
index 1f7fd4d1995..6422d01da52 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Hand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Hand.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Hand_L from 'illustration:./S2_fill_hand_generic2_160.svg';
 import Hand_M from 'illustration:./S2_fill_hand_generic2_96.svg';
 import Hand_S from 'illustration:./S2_fill_hand_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Handshake.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Handshake.tsx
index 3d93bfdd2f2..feb1eead46e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Handshake.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Handshake.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Handshake_L from 'illustration:./S2_fill_handshake_generic2_160.svg';
 import Handshake_M from 'illustration:./S2_fill_handshake_generic2_96.svg';
 import Handshake_S from 'illustration:./S2_fill_handshake_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Heart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Heart.tsx
index f1eb672aa82..5bf64cf9b4f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Heart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Heart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Heart_L from 'illustration:./S2_fill_heart_generic2_160.svg';
 import Heart_M from 'illustration:./S2_fill_heart_generic2_96.svg';
 import Heart_S from 'illustration:./S2_fill_heart_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/HelpCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/HelpCircle.tsx
index f118530c2cd..f5ed7117acc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/HelpCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/HelpCircle.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import HelpCircle_L from 'illustration:./S2_fill_helpCircle_generic2_160.svg';
 import HelpCircle_M from 'illustration:./S2_fill_helpCircle_generic2_96.svg';
 import HelpCircle_S from 'illustration:./S2_fill_helpCircle_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Home.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Home.tsx
index 1db379fedff..b1ae690a1bb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Home.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Home.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Home_L from 'illustration:./S2_fill_home_generic2_160.svg';
 import Home_M from 'illustration:./S2_fill_home_generic2_96.svg';
 import Home_S from 'illustration:./S2_fill_home_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Illustration.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Illustration.tsx
index afc6435c9ba..ffae10c4961 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Illustration.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Illustration.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Illustration_L from 'illustration:./S2_fill_illustration_generic2_160.svg';
 import Illustration_M from 'illustration:./S2_fill_illustration_generic2_96.svg';
 import Illustration_S from 'illustration:./S2_fill_illustration_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Image.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Image.tsx
index a26ce819ef6..55229251937 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Image.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Image.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Image_L from 'illustration:./S2_fill_image_generic2_160.svg';
 import Image_M from 'illustration:./S2_fill_image_generic2_96.svg';
 import Image_S from 'illustration:./S2_fill_image_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ImageStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ImageStack.tsx
index 62503d240bf..66ab51f4e13 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ImageStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ImageStack.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ImageStack_L from 'illustration:./S2_fill_imageStack_generic2_160.svg';
 import ImageStack_M from 'illustration:./S2_fill_imageStack_generic2_96.svg';
 import ImageStack_S from 'illustration:./S2_fill_imageStack_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/InfiniteLooping.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/InfiniteLooping.tsx
index f02fdad017e..66fdfed3ea4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/InfiniteLooping.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/InfiniteLooping.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import InfiniteLooping_L from 'illustration:./S2_fill_infiniteLooping_generic2_160.svg';
 import InfiniteLooping_M from 'illustration:./S2_fill_infiniteLooping_generic2_96.svg';
 import InfiniteLooping_S from 'illustration:./S2_fill_infiniteLooping_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Information.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Information.tsx
index 1d282ff2e19..308795d5630 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Information.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Information.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Information_L from 'illustration:./S2_fill_information_generic2_160.svg';
 import Information_M from 'illustration:./S2_fill_information_generic2_96.svg';
 import Information_S from 'illustration:./S2_fill_information_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Interaction.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Interaction.tsx
index 00072e154ee..a5038f14177 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Interaction.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Interaction.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Interaction_L from 'illustration:./S2_fill_interaction_generic2_160.svg';
 import Interaction_M from 'illustration:./S2_fill_interaction_generic2_96.svg';
 import Interaction_S from 'illustration:./S2_fill_interaction_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Laptop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Laptop.tsx
index 3707167be01..fee7c17c1a1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Laptop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Laptop.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Laptop_L from 'illustration:./S2_fill_laptop_generic2_160.svg';
 import Laptop_M from 'illustration:./S2_fill_laptop_generic2_96.svg';
 import Laptop_S from 'illustration:./S2_fill_laptop_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Layers.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Layers.tsx
index 33808443877..d617c3181aa 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Layers.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Layers.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Layers_L from 'illustration:./S2_fill_layers_generic2_160.svg';
 import Layers_M from 'illustration:./S2_fill_layers_generic2_96.svg';
 import Layers_S from 'illustration:./S2_fill_layers_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Libraries.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Libraries.tsx
index c3d2bcfc5df..ae78af8f4a2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Libraries.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Libraries.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Libraries_L from 'illustration:./S2_fill_libraries_generic2_160.svg';
 import Libraries_M from 'illustration:./S2_fill_libraries_generic2_96.svg';
 import Libraries_S from 'illustration:./S2_fill_libraries_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lightbulb.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lightbulb.tsx
index bc202ce8aab..f7269938870 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lightbulb.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lightbulb.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Lightbulb_L from 'illustration:./S2_fill_lightbulb_generic2_160.svg';
 import Lightbulb_M from 'illustration:./S2_fill_lightbulb_generic2_96.svg';
 import Lightbulb_S from 'illustration:./S2_fill_lightbulb_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LightbulbRays.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LightbulbRays.tsx
index b932864b66c..d9b43ff6300 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LightbulbRays.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LightbulbRays.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import LightbulbRays_L from 'illustration:./S2_fill_lightbulbRays_generic2_160.svg';
 import LightbulbRays_M from 'illustration:./S2_fill_lightbulbRays_generic2_96.svg';
 import LightbulbRays_S from 'illustration:./S2_fill_lightbulbRays_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lighten.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lighten.tsx
index f3610973eaf..e830e346d73 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lighten.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lighten.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Lighten_L from 'illustration:./S2_fill_lighten_generic2_160.svg';
 import Lighten_M from 'illustration:./S2_fill_lighten_generic2_96.svg';
 import Lighten_S from 'illustration:./S2_fill_lighten_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Link.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Link.tsx
index 44a211db6f6..b746286b778 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Link.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Link.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Link_L from 'illustration:./S2_fill_link_generic2_160.svg';
 import Link_M from 'illustration:./S2_fill_link_generic2_96.svg';
 import Link_S from 'illustration:./S2_fill_link_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Location.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Location.tsx
index 28856e541df..b40a57f775b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Location.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Location.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Location_L from 'illustration:./S2_fill_location_generic2_160.svg';
 import Location_M from 'illustration:./S2_fill_location_generic2_96.svg';
 import Location_S from 'illustration:./S2_fill_location_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockClose.tsx
index 4f882226883..cd174a97cca 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockClose.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import LockClose_L from 'illustration:./S2_fill_lockClose_generic2_160.svg';
 import LockClose_M from 'illustration:./S2_fill_lockClose_generic2_96.svg';
 import LockClose_S from 'illustration:./S2_fill_lockClose_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockOpen.tsx
index 37ba6a9f745..54cce08ca27 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockOpen.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import LockOpen_L from 'illustration:./S2_fill_lockOpen_generic2_160.svg';
 import LockOpen_M from 'illustration:./S2_fill_lockOpen_generic2_96.svg';
 import LockOpen_S from 'illustration:./S2_fill_lockOpen_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Logo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Logo.tsx
index e64e013df7a..e9225c37175 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Logo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Logo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Logo_L from 'illustration:./S2_fill_logo_generic2_160.svg';
 import Logo_M from 'illustration:./S2_fill_logo_generic2_96.svg';
 import Logo_S from 'illustration:./S2_fill_logo_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MagicWand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MagicWand.tsx
index 588fccb0133..4fb0022bd0e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MagicWand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MagicWand.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MagicWand_L from 'illustration:./S2_fill_magicWand_generic2_160.svg';
 import MagicWand_M from 'illustration:./S2_fill_magicWand_generic2_96.svg';
 import MagicWand_S from 'illustration:./S2_fill_magicWand_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailClose.tsx
index 3d8da1e0096..e452ee5f38a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailClose.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MailClose_L from 'illustration:./S2_fill_mailClose_generic2_160.svg';
 import MailClose_M from 'illustration:./S2_fill_mailClose_generic2_96.svg';
 import MailClose_S from 'illustration:./S2_fill_mailClose_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailOpen.tsx
index d8595def4fa..083abf3c5a6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailOpen.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MailOpen_L from 'illustration:./S2_fill_mailOpen_generic2_160.svg';
 import MailOpen_M from 'illustration:./S2_fill_mailOpen_generic2_96.svg';
 import MailOpen_S from 'illustration:./S2_fill_mailOpen_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Market.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Market.tsx
index 2ca1f6bf9ab..9ef2649d762 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Market.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Market.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Market_L from 'illustration:./S2_fill_market_generic2_160.svg';
 import Market_M from 'illustration:./S2_fill_market_generic2_96.svg';
 import Market_S from 'illustration:./S2_fill_market_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote.tsx
index f783e0e3872..ec342e0cf23 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MegaphonePromote_L from 'illustration:./S2_fill_megaphonePromote_generic2_160.svg';
 import MegaphonePromote_M from 'illustration:./S2_fill_megaphonePromote_generic2_96.svg';
 import MegaphonePromote_S from 'illustration:./S2_fill_megaphonePromote_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote2.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote2.tsx
index 2fba07aae3d..f4ef705e21b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote2.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote2.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MegaphonePromote2_L from 'illustration:./S2_fill_megaphonePromote2_generic2_160.svg';
 import MegaphonePromote2_M from 'illustration:./S2_fill_megaphonePromote2_generic2_96.svg';
 import MegaphonePromote2_S from 'illustration:./S2_fill_megaphonePromote2_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Mention.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Mention.tsx
index 76857762d57..e0c8295f22e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Mention.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Mention.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Mention_L from 'illustration:./S2_fill_mention_generic2_160.svg';
 import Mention_M from 'illustration:./S2_fill_mention_generic2_96.svg';
 import Mention_S from 'illustration:./S2_fill_mention_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Microphone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Microphone.tsx
index fe49d70f91d..16bca772278 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Microphone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Microphone.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Microphone_L from 'illustration:./S2_fill_microphone_generic2_160.svg';
 import Microphone_M from 'illustration:./S2_fill_microphone_generic2_96.svg';
 import Microphone_S from 'illustration:./S2_fill_microphone_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Minimize.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Minimize.tsx
index 83342d78042..93cd990406b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Minimize.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Minimize.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Minimize_L from 'illustration:./S2_fill_minimize_generic2_160.svg';
 import Minimize_M from 'illustration:./S2_fill_minimize_generic2_96.svg';
 import Minimize_S from 'illustration:./S2_fill_minimize_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MovieCamera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MovieCamera.tsx
index e326fd478f0..686537c7112 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MovieCamera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MovieCamera.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MovieCamera_L from 'illustration:./S2_fill_movieCamera_generic2_160.svg';
 import MovieCamera_M from 'illustration:./S2_fill_movieCamera_generic2_96.svg';
 import MovieCamera_S from 'illustration:./S2_fill_movieCamera_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MusicNote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MusicNote.tsx
index 6faa86a63aa..2e9cf4b032f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MusicNote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MusicNote.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MusicNote_L from 'illustration:./S2_fill_musicNote_generic2_160.svg';
 import MusicNote_M from 'illustration:./S2_fill_musicNote_generic2_96.svg';
 import MusicNote_S from 'illustration:./S2_fill_musicNote_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/NoElements.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/NoElements.tsx
index 13f49b22fae..303513f3ee1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/NoElements.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/NoElements.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoElements_L from 'illustration:./S2_fill_noElements_generic2_160.svg';
 import NoElements_M from 'illustration:./S2_fill_noElements_generic2_96.svg';
 import NoElements_S from 'illustration:./S2_fill_noElements_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperairplane.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperairplane.tsx
index 6ae40844909..68d464bd601 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperairplane.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperairplane.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Paperairplane_L from 'illustration:./S2_fill_paperairplane_generic2_160.svg';
 import Paperairplane_M from 'illustration:./S2_fill_paperairplane_generic2_96.svg';
 import Paperairplane_S from 'illustration:./S2_fill_paperairplane_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperclip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperclip.tsx
index 8ae365629bf..1bdf3a905b5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperclip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperclip.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Paperclip_L from 'illustration:./S2_fill_paperclip_generic2_160.svg';
 import Paperclip_M from 'illustration:./S2_fill_paperclip_generic2_96.svg';
 import Paperclip_S from 'illustration:./S2_fill_paperclip_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pause.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pause.tsx
index 0762573ed8d..e9536ba42c3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pause.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pause.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Pause_L from 'illustration:./S2_fill_pause_generic2_160.svg';
 import Pause_M from 'illustration:./S2_fill_pause_generic2_96.svg';
 import Pause_S from 'illustration:./S2_fill_pause_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pencil.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pencil.tsx
index 8d43b4799a2..87e1595d395 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pencil.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pencil.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Pencil_L from 'illustration:./S2_fill_pencil_generic2_160.svg';
 import Pencil_M from 'illustration:./S2_fill_pencil_generic2_96.svg';
 import Pencil_S from 'illustration:./S2_fill_pencil_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Phone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Phone.tsx
index 4734d03a852..411d938f959 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Phone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Phone.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Phone_L from 'illustration:./S2_fill_phone_generic2_160.svg';
 import Phone_M from 'illustration:./S2_fill_phone_generic2_96.svg';
 import Phone_S from 'illustration:./S2_fill_phone_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PieChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PieChart.tsx
index dff5fd75c91..42bfa0f8dae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PieChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PieChart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import PieChart_L from 'illustration:./S2_fill_pieChart_generic2_160.svg';
 import PieChart_M from 'illustration:./S2_fill_pieChart_generic2_96.svg';
 import PieChart_S from 'illustration:./S2_fill_pieChart_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PiggyBank.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PiggyBank.tsx
index df88e98f7c2..d3ebf1dba92 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PiggyBank.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PiggyBank.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import PiggyBank_L from 'illustration:./S2_fill_piggyBank_generic2_160.svg';
 import PiggyBank_M from 'illustration:./S2_fill_piggyBank_generic2_96.svg';
 import PiggyBank_S from 'illustration:./S2_fill_piggyBank_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pin.tsx
index a2281ba3233..07b0fb7e461 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pin.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Pin_L from 'illustration:./S2_fill_pin_generic2_160.svg';
 import Pin_M from 'illustration:./S2_fill_pin_generic2_96.svg';
 import Pin_S from 'illustration:./S2_fill_pin_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Play.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Play.tsx
index 2f0218af52a..a8e2b2f5551 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Play.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Play.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Play_L from 'illustration:./S2_fill_play_generic2_160.svg';
 import Play_M from 'illustration:./S2_fill_play_generic2_96.svg';
 import Play_S from 'illustration:./S2_fill_play_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PlayTriangle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PlayTriangle.tsx
index 712f019a26d..5ccfdac43be 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PlayTriangle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PlayTriangle.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import PlayTriangle_L from 'illustration:./S2_fill_playTriangle_generic2_160.svg';
 import PlayTriangle_M from 'illustration:./S2_fill_playTriangle_generic2_96.svg';
 import PlayTriangle_S from 'illustration:./S2_fill_playTriangle_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Plugin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Plugin.tsx
index a05bc911a61..ff567524dfd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Plugin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Plugin.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Plugin_L from 'illustration:./S2_fill_plugin_generic2_160.svg';
 import Plugin_M from 'illustration:./S2_fill_plugin_generic2_96.svg';
 import Plugin_S from 'illustration:./S2_fill_plugin_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Prompt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Prompt.tsx
index 828e4b6cebb..dd02b0e020b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Prompt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Prompt.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Prompt_L from 'illustration:./S2_fill_prompt_generic2_160.svg';
 import Prompt_M from 'illustration:./S2_fill_prompt_generic2_96.svg';
 import Prompt_S from 'illustration:./S2_fill_prompt_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Properties.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Properties.tsx
index 7d22aaf53cb..eafaa2f3866 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Properties.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Properties.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Properties_L from 'illustration:./S2_fill_properties_generic2_160.svg';
 import Properties_M from 'illustration:./S2_fill_properties_generic2_96.svg';
 import Properties_S from 'illustration:./S2_fill_properties_generic2_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Redo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Redo.tsx
index a459577e57e..fc0e6c6d0b3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Redo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Redo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Redo_L from 'illustration:./S2_fill_redo_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Remix.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Remix.tsx
index e319fb57ca4..e1f336901ba 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Remix.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Remix.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Remix_L from 'illustration:./S2_fill_remix_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Replace.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Replace.tsx
index 282be1965ac..a5916f13968 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Replace.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Replace.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Replace_L from 'illustration:./S2_fill_replace_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Revert.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Revert.tsx
index 9b98f59a312..250ef9299f8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Revert.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Revert.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Revert_L from 'illustration:./S2_fill_revert_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ribbon.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ribbon.tsx
index 3846cdb1dd3..d55b774213f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ribbon.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ribbon.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Ribbon_L from 'illustration:./S2_fill_ribbon_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Rocket.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Rocket.tsx
index 225a44503ad..56b5c8c1523 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Rocket.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Rocket.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Rocket_L from 'illustration:./S2_fill_rocket_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCCW.tsx
index 626d0110f33..4dd04c2025c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCCW.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import RotateCCW_L from 'illustration:./S2_fill_rotateCCW_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCW.tsx
index 596cfbc39e8..fc085b36e3a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCW.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import RotateCW_L from 'illustration:./S2_fill_rotateCW_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ruler.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ruler.tsx
index e30ab0c3c4d..30b949e4b05 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ruler.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ruler.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Ruler_L from 'illustration:./S2_fill_ruler_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Search.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Search.tsx
index 6c1a5922c6a..ef1ba34b78f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Search.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Search.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Search_L from 'illustration:./S2_fill_search_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Segmentation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Segmentation.tsx
index 4b1fd9d268f..0f2f7f8cdee 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Segmentation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Segmentation.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Segmentation_L from 'illustration:./S2_fill_segmentation_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Server.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Server.tsx
index 11c92b886fd..e08e810e652 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Server.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Server.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Server_L from 'illustration:./S2_fill_server_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Shapes.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Shapes.tsx
index aa446264610..fe133b77e38 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Shapes.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Shapes.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Shapes_L from 'illustration:./S2_fill_shapes_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingBag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingBag.tsx
index af8944dc7fe..f5b22d089e2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingBag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingBag.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ShoppingBag_L from 'illustration:./S2_fill_shoppingBag_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingCart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingCart.tsx
index f0d6448f3ae..f484e6a2734 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingCart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingCart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ShoppingCart_L from 'illustration:./S2_fill_shoppingCart_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Sparkles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Sparkles.tsx
index 019afee6fb4..745555d5efc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Sparkles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Sparkles.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Sparkles_L from 'illustration:./S2_fill_sparkles_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/SpeedFast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/SpeedFast.tsx
index 79fcbb4b488..0c2f9c44228 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/SpeedFast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/SpeedFast.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import SpeedFast_L from 'illustration:./S2_fill_speedFast_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StampClone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StampClone.tsx
index 8c359b1595a..5e58381d09b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StampClone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StampClone.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import StampClone_L from 'illustration:./S2_fill_stampClone_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Star.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Star.tsx
index e43aa773cfd..3cfbbde1cba 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Star.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Star.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Star_L from 'illustration:./S2_fill_star_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StepForward.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StepForward.tsx
index 7f3631020ae..6aa3323fec5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StepForward.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StepForward.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import StepForward_L from 'illustration:./S2_fill_stepForward_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Switch.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Switch.tsx
index fb00486c95e..b3c6ae3b8a6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Switch.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Switch.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Switch_L from 'illustration:./S2_fill_switch_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tablet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tablet.tsx
index 8861c7044c3..12208d8aa09 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tablet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tablet.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Tablet_L from 'illustration:./S2_fill_tablet_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tag.tsx
index 8997698b990..ffdc55a7378 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tag.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Tag_L from 'illustration:./S2_fill_tag_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Targeted.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Targeted.tsx
index c9f28e96eb2..cf00ff8b60b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Targeted.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Targeted.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Targeted_L from 'illustration:./S2_fill_targeted_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Text.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Text.tsx
index 7885305855d..5b6fb3a5a10 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Text.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Text.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Text_L from 'illustration:./S2_fill_text_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThreeArrowsCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThreeArrowsCircle.tsx
index 38c906dbe7e..99f2dbaeb04 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThreeArrowsCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThreeArrowsCircle.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ThreeArrowsCircle_L from 'illustration:./S2_fill_threeArrowsCircle_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThumbsUp.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThumbsUp.tsx
index 5dcdafa2ef4..051fde396fc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThumbsUp.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThumbsUp.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ThumbsUp_L from 'illustration:./S2_fill_thumbsUp_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Transform.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Transform.tsx
index f16d7aa1b24..0b3b8bbc337 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Transform.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Transform.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Transform_L from 'illustration:./S2_fill_transform_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Translate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Translate.tsx
index d7f914ec7be..84cf63ca00c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Translate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Translate.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Translate_L from 'illustration:./S2_fill_translate_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trash.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trash.tsx
index 542b87f022b..7317bc4f279 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trash.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trash.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Trash_L from 'illustration:./S2_fill_trash_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trophy.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trophy.tsx
index 4ea3089d188..6779df02b70 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trophy.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trophy.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Trophy_L from 'illustration:./S2_fill_trophy_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Update.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Update.tsx
index 8a2749aecde..922c6b7e8bd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Update.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Update.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Update_L from 'illustration:./S2_fill_update_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Upload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Upload.tsx
index ddd68b4c74a..40f910bdffc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Upload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Upload.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Upload_L from 'illustration:./S2_fill_upload_generic2_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/User.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/User.tsx
index 9ac4a58bcdb..5e691173199 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/User.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/User.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserAvatar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserAvatar.tsx
index 067b4db7297..d880dd5e2f9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserAvatar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserAvatar.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserGroup.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserGroup.tsx
index 2723bbbdfa9..53667892720 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserGroup.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserGroup.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VectorDraw.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VectorDraw.tsx
index db2d118a60b..4fd2d6a8376 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VectorDraw.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VectorDraw.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Video.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Video.tsx
index 20a8874766d..27d6fa9435c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Video.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Video.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Volume.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Volume.tsx
index 3f6a044ce4d..a3662cdd73d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Volume.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Volume.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VolumeOne.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VolumeOne.tsx
index 8bf44a1dadc..8c52aa2a8fa 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VolumeOne.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VolumeOne.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Wallet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Wallet.tsx
index 336094e9c17..34c2bf37fbc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Wallet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Wallet.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/3D.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/3D.tsx
index 1918e9e0441..b170425af33 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/3D.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/3D.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import _3D_L from 'illustration:./S2_lin_3D_160.svg';
 import _3D_M from 'illustration:./S2_lin_3D_96.svg';
 import _3D_S from 'illustration:./S2_lin_3D_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/3Dasset.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/3Dasset.tsx
index 0d4c8dd8bd3..b5b7a1a8dc1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/3Dasset.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/3Dasset.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import _3Dasset_L from 'illustration:./S2_lin_3Dasset_160.svg';
 import _3Dasset_M from 'illustration:./S2_lin_3Dasset_96.svg';
 import _3Dasset_S from 'illustration:./S2_lin_3Dasset_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIChat.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIChat.tsx
index ca2e7b75c4d..409356f7e97 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIChat.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIChat.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AIChat_L from 'illustration:./S2_lin_AIChat_160.svg';
 import AIChat_M from 'illustration:./S2_lin_AIChat_96.svg';
 import AIChat_S from 'illustration:./S2_lin_AIChat_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerate.tsx
index 75e770ecc57..4cd4d83aa01 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerate.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AIGenerate_L from 'illustration:./S2_lin_AIGenerate_160.svg';
 import AIGenerate_M from 'illustration:./S2_lin_AIGenerate_96.svg';
 import AIGenerate_S from 'illustration:./S2_lin_AIGenerate_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerateImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerateImage.tsx
index c34cf17a982..a59f1e182fc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerateImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerateImage.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AIGenerateImage_L from 'illustration:./S2_lin_AIGenerateImage_160.svg';
 import AIGenerateImage_M from 'illustration:./S2_lin_AIGenerateImage_96.svg';
 import AIGenerateImage_S from 'illustration:./S2_lin_AIGenerateImage_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Accessibility.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Accessibility.tsx
index 361d6f4291a..7d3b926b83d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Accessibility.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Accessibility.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Accessibility_L from 'illustration:./S2_lin_accessibility_160.svg';
 import Accessibility_M from 'illustration:./S2_lin_accessibility_96.svg';
 import Accessibility_S from 'illustration:./S2_lin_accessibility_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Addproject.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Addproject.tsx
index 926ad679b24..c128c08b9fb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Addproject.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Addproject.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Addproject_L from 'illustration:./S2_lin_addproject_160.svg';
 import Addproject_M from 'illustration:./S2_lin_addproject_96.svg';
 import Addproject_S from 'illustration:./S2_lin_addproject_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AlertNotice.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AlertNotice.tsx
index e7baa97fd60..78bc6b462ad 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AlertNotice.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AlertNotice.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AlertNotice_L from 'illustration:./S2_lin_alertNotice_160.svg';
 import AlertNotice_M from 'illustration:./S2_lin_alertNotice_96.svg';
 import AlertNotice_S from 'illustration:./S2_lin_alertNotice_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Animation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Animation.tsx
index 1b7fdc405e1..d97b931ced7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Animation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Animation.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Animation_L from 'illustration:./S2_lin_animation_160.svg';
 import Animation_M from 'illustration:./S2_lin_animation_96.svg';
 import Animation_S from 'illustration:./S2_lin_animation_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Apps.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Apps.tsx
index da76f8489da..9a86454384e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Apps.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Apps.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Apps_L from 'illustration:./S2_lin_apps_160.svg';
 import Apps_M from 'illustration:./S2_lin_apps_96.svg';
 import Apps_S from 'illustration:./S2_lin_apps_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowDown.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowDown.tsx
index 8784d756ed5..a90b86f234f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowDown.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowDown.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ArrowDown_L from 'illustration:./S2_lin_arrowDown_160.svg';
 import ArrowDown_M from 'illustration:./S2_lin_arrowDown_96.svg';
 import ArrowDown_S from 'illustration:./S2_lin_arrowDown_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowLeft.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowLeft.tsx
index 23462884920..dd55339b8e8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowLeft.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowLeft.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ArrowLeft_L from 'illustration:./S2_lin_arrowLeft_160.svg';
 import ArrowLeft_M from 'illustration:./S2_lin_arrowLeft_96.svg';
 import ArrowLeft_S from 'illustration:./S2_lin_arrowLeft_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowRight.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowRight.tsx
index 7efc36a427b..57f23600182 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowRight.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowRight.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ArrowRight_L from 'illustration:./S2_lin_arrowRight_160.svg';
 import ArrowRight_M from 'illustration:./S2_lin_arrowRight_96.svg';
 import ArrowRight_S from 'illustration:./S2_lin_arrowRight_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowUp.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowUp.tsx
index b1ddee3ddb1..cd50fff130e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowUp.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowUp.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ArrowUp_L from 'illustration:./S2_lin_arrowUp_160.svg';
 import ArrowUp_M from 'illustration:./S2_lin_arrowUp_96.svg';
 import ArrowUp_S from 'illustration:./S2_lin_arrowUp_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Artboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Artboard.tsx
index ac6906827ba..2e215b95b18 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Artboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Artboard.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Artboard_L from 'illustration:./S2_lin_artboard_160.svg';
 import Artboard_M from 'illustration:./S2_lin_artboard_96.svg';
 import Artboard_S from 'illustration:./S2_lin_artboard_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Assets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Assets.tsx
index fb176e8686d..2e64bee6c4f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Assets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Assets.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Assets_L from 'illustration:./S2_lin_assets_160.svg';
 import Assets_M from 'illustration:./S2_lin_assets_96.svg';
 import Assets_S from 'illustration:./S2_lin_assets_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AudioWave.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AudioWave.tsx
index 877f57fd2f3..fab27a83987 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AudioWave.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AudioWave.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import AudioWave_L from 'illustration:./S2_lin_audioWave_160.svg';
 import AudioWave_M from 'illustration:./S2_lin_audioWave_96.svg';
 import AudioWave_S from 'illustration:./S2_lin_audioWave_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BadgeVerified.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BadgeVerified.tsx
index b83614555dc..58165065fe9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BadgeVerified.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BadgeVerified.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BadgeVerified_L from 'illustration:./S2_lin_badgeVerified_160.svg';
 import BadgeVerified_M from 'illustration:./S2_lin_badgeVerified_96.svg';
 import BadgeVerified_S from 'illustration:./S2_lin_badgeVerified_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bell.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bell.tsx
index fdcbbcf96ac..10a332edeae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bell.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bell.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Bell_L from 'illustration:./S2_lin_bell_160.svg';
 import Bell_M from 'illustration:./S2_lin_bell_96.svg';
 import Bell_S from 'illustration:./S2_lin_bell_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bolt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bolt.tsx
index 1b76b447cb4..83a5212c8ca 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bolt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bolt.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Bolt_L from 'illustration:./S2_lin_bolt_160.svg';
 import Bolt_M from 'illustration:./S2_lin_bolt_96.svg';
 import Bolt_S from 'illustration:./S2_lin_bolt_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brand.tsx
index e64209f532e..cf79e3260b1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brand.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Brand_L from 'illustration:./S2_lin_brand_160.svg';
 import Brand_M from 'illustration:./S2_lin_brand_96.svg';
 import Brand_S from 'illustration:./S2_lin_brand_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Briefcase.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Briefcase.tsx
index 06025236370..a60aeef06b8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Briefcase.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Briefcase.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Briefcase_L from 'illustration:./S2_lin_briefcase_160.svg';
 import Briefcase_M from 'illustration:./S2_lin_briefcase_96.svg';
 import Briefcase_S from 'illustration:./S2_lin_briefcase_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrightnessContrast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrightnessContrast.tsx
index 672a3fbc961..9563ee38eb8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrightnessContrast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrightnessContrast.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BrightnessContrast_L from 'illustration:./S2_lin_brightnessContrast_160.svg';
 import BrightnessContrast_M from 'illustration:./S2_lin_brightnessContrast_96.svg';
 import BrightnessContrast_S from 'illustration:./S2_lin_brightnessContrast_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Browser.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Browser.tsx
index a7b0b36a714..6dc208d8e33 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Browser.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Browser.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Browser_L from 'illustration:./S2_lin_browser_160.svg';
 import Browser_M from 'illustration:./S2_lin_browser_96.svg';
 import Browser_S from 'illustration:./S2_lin_browser_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserError.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserError.tsx
index ae6759526e8..e22fb8ee606 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserError.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserError.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BrowserError_L from 'illustration:./S2_lin_browserError_160.svg';
 import BrowserError_M from 'illustration:./S2_lin_browserError_96.svg';
 import BrowserError_S from 'illustration:./S2_lin_browserError_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserNotCompatible.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserNotCompatible.tsx
index d6fa9a3895c..dd9afdfc9b9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserNotCompatible.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserNotCompatible.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BrowserNotCompatible_L from 'illustration:./S2_lin_browserNotCompatible_160.svg';
 import BrowserNotCompatible_M from 'illustration:./S2_lin_browserNotCompatible_96.svg';
 import BrowserNotCompatible_S from 'illustration:./S2_lin_browserNotCompatible_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brush.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brush.tsx
index 50814fa79df..9832f4b1020 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brush.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brush.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Brush_L from 'illustration:./S2_lin_brush_160.svg';
 import Brush_M from 'illustration:./S2_lin_brush_96.svg';
 import Brush_S from 'illustration:./S2_lin_brush_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bug.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bug.tsx
index 3eda5d42dd0..41fae4f7b5f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bug.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bug.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Bug_L from 'illustration:./S2_lin_bug_160.svg';
 import Bug_M from 'illustration:./S2_lin_bug_96.svg';
 import Bug_S from 'illustration:./S2_lin_bug_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BuildTable.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BuildTable.tsx
index 075467fb1f3..570cea0798c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BuildTable.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BuildTable.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import BuildTable_L from 'illustration:./S2_lin_buildTable_160.svg';
 import BuildTable_M from 'illustration:./S2_lin_buildTable_96.svg';
 import BuildTable_S from 'illustration:./S2_lin_buildTable_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Buildings.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Buildings.tsx
index 757f3e69ee7..231e44e0f39 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Buildings.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Buildings.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Buildings_L from 'illustration:./S2_lin_buildings_160.svg';
 import Buildings_M from 'illustration:./S2_lin_buildings_96.svg';
 import Buildings_S from 'illustration:./S2_lin_buildings_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Calendar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Calendar.tsx
index 6bb10cbb030..ff9d1681eb8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Calendar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Calendar.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Calendar_L from 'illustration:./S2_lin_calendar_160.svg';
 import Calendar_M from 'illustration:./S2_lin_calendar_96.svg';
 import Calendar_S from 'illustration:./S2_lin_calendar_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Camera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Camera.tsx
index 05a5aab2959..4649dd944e6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Camera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Camera.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Camera_L from 'illustration:./S2_lin_camera_160.svg';
 import Camera_M from 'illustration:./S2_lin_camera_96.svg';
 import Camera_S from 'illustration:./S2_lin_camera_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CardTapPayment.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CardTapPayment.tsx
index 555bea41217..6ef9e44ae74 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CardTapPayment.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CardTapPayment.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CardTapPayment_L from 'illustration:./S2_lin_cardTapPayment_160.svg';
 import CardTapPayment_M from 'illustration:./S2_lin_cardTapPayment_96.svg';
 import CardTapPayment_S from 'illustration:./S2_lin_cardTapPayment_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Channel.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Channel.tsx
index f46119a8f67..cecaf110ad2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Channel.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Channel.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Channel_L from 'illustration:./S2_lin_channel_160.svg';
 import Channel_M from 'illustration:./S2_lin_channel_96.svg';
 import Channel_S from 'illustration:./S2_lin_channel_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ChartAreaStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ChartAreaStack.tsx
index 14962678e99..40e6649ac53 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ChartAreaStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ChartAreaStack.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ChartAreaStack_L from 'illustration:./S2_lin_chartAreaStack_160.svg';
 import ChartAreaStack_M from 'illustration:./S2_lin_chartAreaStack_96.svg';
 import ChartAreaStack_S from 'illustration:./S2_lin_chartAreaStack_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Chatbubble.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Chatbubble.tsx
index 171343fd8a7..6a6b430c1f3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Chatbubble.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Chatbubble.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Chatbubble_L from 'illustration:./S2_lin_chatbubble_160.svg';
 import Chatbubble_M from 'illustration:./S2_lin_chatbubble_96.svg';
 import Chatbubble_S from 'illustration:./S2_lin_chatbubble_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Check.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Check.tsx
index 7414e9ae7c4..49e04ce73c6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Check.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Check.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Check_L from 'illustration:./S2_lin_check_160.svg';
 import Check_M from 'illustration:./S2_lin_check_96.svg';
 import Check_S from 'illustration:./S2_lin_check_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clipboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clipboard.tsx
index 3f1a1dd677b..eb0f2a9dd71 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clipboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clipboard.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Clipboard_L from 'illustration:./S2_lin_clipboard_160.svg';
 import Clipboard_M from 'illustration:./S2_lin_clipboard_96.svg';
 import Clipboard_S from 'illustration:./S2_lin_clipboard_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clock.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clock.tsx
index 35f84540416..96318b9c05a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clock.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clock.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Clock_L from 'illustration:./S2_lin_clock_160.svg';
 import Clock_M from 'illustration:./S2_lin_clock_96.svg';
 import Clock_S from 'illustration:./S2_lin_clock_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Close.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Close.tsx
index 5964ea1c5e4..86f4b7c6965 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Close.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Close.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Close_L from 'illustration:./S2_lin_close_160.svg';
 import Close_M from 'illustration:./S2_lin_close_96.svg';
 import Close_S from 'illustration:./S2_lin_close_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cloud.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cloud.tsx
index e50f77edace..00a6e376274 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cloud.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cloud.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Cloud_L from 'illustration:./S2_lin_cloud_160.svg';
 import Cloud_M from 'illustration:./S2_lin_cloud_96.svg';
 import Cloud_S from 'illustration:./S2_lin_cloud_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateDisconnected.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateDisconnected.tsx
index c55269e93af..ec5c0103034 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateDisconnected.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateDisconnected.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CloudStateDisconnected_L from 'illustration:./S2_lin_cloudStateDisconnected_160.svg';
 import CloudStateDisconnected_M from 'illustration:./S2_lin_cloudStateDisconnected_96.svg';
 import CloudStateDisconnected_S from 'illustration:./S2_lin_cloudStateDisconnected_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateError.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateError.tsx
index 5e6e09094ca..fb764b693b9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateError.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateError.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CloudStateError_L from 'illustration:./S2_lin_cloudStateError_160.svg';
 import CloudStateError_M from 'illustration:./S2_lin_cloudStateError_96.svg';
 import CloudStateError_S from 'illustration:./S2_lin_cloudStateError_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudUpload.tsx
index 348704e3f15..82b5b73c1db 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudUpload.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CloudUpload_L from 'illustration:./S2_lin_cloudUpload_160.svg';
 import CloudUpload_M from 'illustration:./S2_lin_cloudUpload_96.svg';
 import CloudUpload_S from 'illustration:./S2_lin_cloudUpload_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CodeBrackets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CodeBrackets.tsx
index 98346c0e239..cc46a04b154 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CodeBrackets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CodeBrackets.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CodeBrackets_L from 'illustration:./S2_lin_codeBrackets_160.svg';
 import CodeBrackets_M from 'illustration:./S2_lin_codeBrackets_96.svg';
 import CodeBrackets_S from 'illustration:./S2_lin_codeBrackets_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Color.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Color.tsx
index d39a5593b17..08873192754 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Color.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Color.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Color_L from 'illustration:./S2_lin_color_160.svg';
 import Color_M from 'illustration:./S2_lin_color_96.svg';
 import Color_S from 'illustration:./S2_lin_color_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CommentText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CommentText.tsx
index 696cef8d1be..2477e99325a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CommentText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CommentText.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import CommentText_L from 'illustration:./S2_lin_commentText_160.svg';
 import CommentText_M from 'illustration:./S2_lin_commentText_96.svg';
 import CommentText_S from 'illustration:./S2_lin_commentText_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ConfettiCelebration.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ConfettiCelebration.tsx
index 956c3cea280..e55103e3468 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ConfettiCelebration.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ConfettiCelebration.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ConfettiCelebration_L from 'illustration:./S2_lin_confettiCelebration_160.svg';
 import ConfettiCelebration_M from 'illustration:./S2_lin_confettiCelebration_96.svg';
 import ConfettiCelebration_S from 'illustration:./S2_lin_confettiCelebration_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Conversationbubbles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Conversationbubbles.tsx
index 7f73eb543c1..96ca199aa2a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Conversationbubbles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Conversationbubbles.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Conversationbubbles_L from 'illustration:./S2_lin_conversationbubbles_160.svg';
 import Conversationbubbles_M from 'illustration:./S2_lin_conversationbubbles_96.svg';
 import Conversationbubbles_S from 'illustration:./S2_lin_conversationbubbles_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Crop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Crop.tsx
index 8877662b8c6..d6e4f119ebb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Crop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Crop.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Crop_L from 'illustration:./S2_lin_crop_160.svg';
 import Crop_M from 'illustration:./S2_lin_crop_96.svg';
 import Crop_S from 'illustration:./S2_lin_crop_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cursor.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cursor.tsx
index 59d887d5bee..10735f4ba98 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cursor.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cursor.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Cursor_L from 'illustration:./S2_lin_cursor_160.svg';
 import Cursor_M from 'illustration:./S2_lin_cursor_96.svg';
 import Cursor_S from 'illustration:./S2_lin_cursor_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cut.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cut.tsx
index 1864c1f35a5..5d02879ef62 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cut.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cut.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Cut_L from 'illustration:./S2_lin_cut_160.svg';
 import Cut_M from 'illustration:./S2_lin_cut_96.svg';
 import Cut_S from 'illustration:./S2_lin_cut_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Data.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Data.tsx
index b52db9790b3..7f7cf1f9dd7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Data.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Data.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Data_L from 'illustration:./S2_lin_data_160.svg';
 import Data_M from 'illustration:./S2_lin_data_96.svg';
 import Data_S from 'illustration:./S2_lin_data_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/DataAnalytics.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/DataAnalytics.tsx
index 2421a75d34e..9387e948e23 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/DataAnalytics.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/DataAnalytics.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import DataAnalytics_L from 'illustration:./S2_lin_dataAnalytics_160.svg';
 import DataAnalytics_M from 'illustration:./S2_lin_dataAnalytics_96.svg';
 import DataAnalytics_S from 'illustration:./S2_lin_dataAnalytics_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Desktop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Desktop.tsx
index f12902b4f38..3e4dd07a4b3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Desktop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Desktop.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Desktop_L from 'illustration:./S2_lin_desktop_160.svg';
 import Desktop_M from 'illustration:./S2_lin_desktop_96.svg';
 import Desktop_S from 'illustration:./S2_lin_desktop_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Diamond.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Diamond.tsx
index 819667548cc..3932c444669 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Diamond.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Diamond.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Diamond_L from 'illustration:./S2_lin_diamond_160.svg';
 import Diamond_M from 'illustration:./S2_lin_diamond_96.svg';
 import Diamond_S from 'illustration:./S2_lin_diamond_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Document.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Document.tsx
index 7d4cd34ff8a..46744e17cdb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Document.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Document.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Document_L from 'illustration:./S2_lin_document_160.svg';
 import Document_M from 'illustration:./S2_lin_document_96.svg';
 import Document_S from 'illustration:./S2_lin_document_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Download.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Download.tsx
index 4e5927a7760..6a9c500739e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Download.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Download.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Download_L from 'illustration:./S2_lin_download_160.svg';
 import Download_M from 'illustration:./S2_lin_download_96.svg';
 import Download_S from 'illustration:./S2_lin_download_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/DropToUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/DropToUpload.tsx
index f43e8000ea8..f97d5149693 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/DropToUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/DropToUpload.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import DropToUpload_L from 'illustration:./S2_lin_dropToUpload_160.svg';
 import DropToUpload_M from 'illustration:./S2_lin_dropToUpload_96.svg';
 import DropToUpload_S from 'illustration:./S2_lin_dropToUpload_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Education.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Education.tsx
index bb8b4e69b43..760dd050481 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Education.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Education.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Education_L from 'illustration:./S2_lin_education_160.svg';
 import Education_M from 'illustration:./S2_lin_education_96.svg';
 import Education_S from 'illustration:./S2_lin_education_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Effects.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Effects.tsx
index 00d47f6c6d7..43b3c25959f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Effects.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Effects.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Effects_L from 'illustration:./S2_lin_effects_160.svg';
 import Effects_M from 'illustration:./S2_lin_effects_96.svg';
 import Effects_S from 'illustration:./S2_lin_effects_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Emoji160.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Emoji160.tsx
index 07c3e33ef8b..0a4f19da181 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Emoji160.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Emoji160.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Emoji160_L from 'illustration:./S2_lin_emoji_160_160.svg';
 import Emoji160_M from 'illustration:./S2_lin_emoji_160_96.svg';
 import Emoji160_S from 'illustration:./S2_lin_emoji_160_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/EmptyStateExport.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/EmptyStateExport.tsx
index b9e24ede1ac..ea917226a8d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/EmptyStateExport.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/EmptyStateExport.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import EmptyStateExport_L from 'illustration:./S2_lin_emptyStateExport_160.svg';
 import EmptyStateExport_M from 'illustration:./S2_lin_emptyStateExport_96.svg';
 import EmptyStateExport_S from 'illustration:./S2_lin_emptyStateExport_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Error.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Error.tsx
index 369099cedee..2aeed76b190 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Error.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Error.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Error_L from 'illustration:./S2_lin_error_160.svg';
 import Error_M from 'illustration:./S2_lin_error_96.svg';
 import Error_S from 'illustration:./S2_lin_error_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Explosion.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Explosion.tsx
index fc422ba32a3..3e38d5faf4a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Explosion.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Explosion.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Explosion_L from 'illustration:./S2_lin_explosion_160.svg';
 import Explosion_M from 'illustration:./S2_lin_explosion_96.svg';
 import Explosion_S from 'illustration:./S2_lin_explosion_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ExportTo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ExportTo.tsx
index 9440da3ac41..c1aafb8df32 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ExportTo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ExportTo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ExportTo_L from 'illustration:./S2_lin_exportTo_160.svg';
 import ExportTo_M from 'illustration:./S2_lin_exportTo_96.svg';
 import ExportTo_S from 'illustration:./S2_lin_exportTo_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Exposure.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Exposure.tsx
index aec8753314c..bb6c4d24f29 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Exposure.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Exposure.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Exposure_L from 'illustration:./S2_lin_exposure_160.svg';
 import Exposure_M from 'illustration:./S2_lin_exposure_96.svg';
 import Exposure_S from 'illustration:./S2_lin_exposure_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileAlert.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileAlert.tsx
index 469a41e8c0a..48b8e765dee 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileAlert.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileAlert.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileAlert_L from 'illustration:./S2_lin_fileAlert_160.svg';
 import FileAlert_M from 'illustration:./S2_lin_fileAlert_96.svg';
 import FileAlert_S from 'illustration:./S2_lin_fileAlert_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileImage.tsx
index 5ffc1761a26..be1cb51da47 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileImage.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileImage_L from 'illustration:./S2_lin_fileImage_160.svg';
 import FileImage_M from 'illustration:./S2_lin_fileImage_96.svg';
 import FileImage_S from 'illustration:./S2_lin_fileImage_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileText.tsx
index 41226f82747..3a27e443ca9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileText.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileText_L from 'illustration:./S2_lin_fileText_160.svg';
 import FileText_M from 'illustration:./S2_lin_fileText_96.svg';
 import FileText_S from 'illustration:./S2_lin_fileText_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileVideo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileVideo.tsx
index 2631dac73c8..47a015cad28 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileVideo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileVideo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileVideo_L from 'illustration:./S2_lin_fileVideo_160.svg';
 import FileVideo_M from 'illustration:./S2_lin_fileVideo_96.svg';
 import FileVideo_S from 'illustration:./S2_lin_fileVideo_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileZip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileZip.tsx
index 4024cc9220f..08ad1e6965a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileZip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileZip.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FileZip_L from 'illustration:./S2_lin_fileZip_160.svg';
 import FileZip_M from 'illustration:./S2_lin_fileZip_96.svg';
 import FileZip_S from 'illustration:./S2_lin_fileZip_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filmstrip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filmstrip.tsx
index 5e2241b796e..2660e7eeb7e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filmstrip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filmstrip.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Filmstrip_L from 'illustration:./S2_lin_filmstrip_160.svg';
 import Filmstrip_M from 'illustration:./S2_lin_filmstrip_96.svg';
 import Filmstrip_S from 'illustration:./S2_lin_filmstrip_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filter.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filter.tsx
index 01a08bf37eb..a5332374291 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filter.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filter.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Filter_L from 'illustration:./S2_lin_filter_160.svg';
 import Filter_M from 'illustration:./S2_lin_filter_96.svg';
 import Filter_S from 'illustration:./S2_lin_filter_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filters.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filters.tsx
index dbb1edb30cb..f18fded480c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filters.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filters.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Filters_L from 'illustration:./S2_lin_filters_160.svg';
 import Filters_M from 'illustration:./S2_lin_filters_96.svg';
 import Filters_S from 'illustration:./S2_lin_filters_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Fireworks.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Fireworks.tsx
index 994d88a7385..9bfd64763db 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Fireworks.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Fireworks.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Fireworks_L from 'illustration:./S2_lin_fireworks_160.svg';
 import Fireworks_M from 'illustration:./S2_lin_fireworks_96.svg';
 import Fireworks_S from 'illustration:./S2_lin_fireworks_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Flag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Flag.tsx
index 7085780ccb5..d963971d460 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Flag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Flag.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Flag_L from 'illustration:./S2_lin_flag_160.svg';
 import Flag_M from 'illustration:./S2_lin_flag_96.svg';
 import Flag_S from 'illustration:./S2_lin_flag_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCheckmark.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCheckmark.tsx
index 9c887af0fc9..497acdbd3ac 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCheckmark.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCheckmark.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FlagCheckmark_L from 'illustration:./S2_lin_flagCheckmark_160.svg';
 import FlagCheckmark_M from 'illustration:./S2_lin_flagCheckmark_96.svg';
 import FlagCheckmark_S from 'illustration:./S2_lin_flagCheckmark_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCross.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCross.tsx
index ce6bf9d5f25..20fa82cefce 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCross.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCross.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FlagCross_L from 'illustration:./S2_lin_flagCross_160.svg';
 import FlagCross_M from 'illustration:./S2_lin_flagCross_96.svg';
 import FlagCross_S from 'illustration:./S2_lin_flagCross_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderClose.tsx
index e471f326524..0706c295e1f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderClose.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FolderClose_L from 'illustration:./S2_lin_folderClose_160.svg';
 import FolderClose_M from 'illustration:./S2_lin_folderClose_96.svg';
 import FolderClose_S from 'illustration:./S2_lin_folderClose_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderOpen.tsx
index e5dcd3107b7..b79e40764e4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderOpen.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FolderOpen_L from 'illustration:./S2_lin_folderOpen_160.svg';
 import FolderOpen_M from 'illustration:./S2_lin_folderOpen_96.svg';
 import FolderOpen_S from 'illustration:./S2_lin_folderOpen_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderShared.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderShared.tsx
index 0418ddbee5f..c523d50fa6f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderShared.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderShared.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import FolderShared_L from 'illustration:./S2_lin_folderShared_160.svg';
 import FolderShared_M from 'illustration:./S2_lin_folderShared_96.svg';
 import FolderShared_S from 'illustration:./S2_lin_folderShared_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GearSetting.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GearSetting.tsx
index e6a9d6645a5..af493e3eeeb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GearSetting.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GearSetting.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import GearSetting_L from 'illustration:./S2_lin_gearSetting_160.svg';
 import GearSetting_M from 'illustration:./S2_lin_gearSetting_96.svg';
 import GearSetting_S from 'illustration:./S2_lin_gearSetting_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Gift.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Gift.tsx
index 31974e57b66..8bae29bd8d6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Gift.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Gift.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Gift_L from 'illustration:./S2_lin_gift_160.svg';
 import Gift_M from 'illustration:./S2_lin_gift_96.svg';
 import Gift_S from 'illustration:./S2_lin_gift_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Globe.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Globe.tsx
index 4dfbdefe228..7f8447238ac 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Globe.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Globe.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Globe_L from 'illustration:./S2_lin_globe_160.svg';
 import Globe_M from 'illustration:./S2_lin_globe_96.svg';
 import Globe_S from 'illustration:./S2_lin_globe_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GlobeGrid.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GlobeGrid.tsx
index fa4a9e2ec92..ae92fb93c00 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GlobeGrid.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GlobeGrid.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import GlobeGrid_L from 'illustration:./S2_lin_globeGrid_160.svg';
 import GlobeGrid_M from 'illustration:./S2_lin_globeGrid_96.svg';
 import GlobeGrid_S from 'illustration:./S2_lin_globeGrid_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GraphBarChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GraphBarChart.tsx
index 0c7aa1679a4..b9f02907b46 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GraphBarChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GraphBarChart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import GraphBarChart_L from 'illustration:./S2_lin_graphBarChart_160.svg';
 import GraphBarChart_M from 'illustration:./S2_lin_graphBarChart_96.svg';
 import GraphBarChart_S from 'illustration:./S2_lin_graphBarChart_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Hand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Hand.tsx
index c3a66ca4db8..8134a6f4ba7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Hand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Hand.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Hand_L from 'illustration:./S2_lin_hand_160.svg';
 import Hand_M from 'illustration:./S2_lin_hand_96.svg';
 import Hand_S from 'illustration:./S2_lin_hand_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Handshake.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Handshake.tsx
index 27cc5dd62dc..9472da28daa 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Handshake.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Handshake.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Handshake_L from 'illustration:./S2_lin_handshake_160.svg';
 import Handshake_M from 'illustration:./S2_lin_handshake_96.svg';
 import Handshake_S from 'illustration:./S2_lin_handshake_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Heart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Heart.tsx
index 623c01b0cbc..6aa57b8d0bc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Heart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Heart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Heart_L from 'illustration:./S2_lin_heart_160.svg';
 import Heart_M from 'illustration:./S2_lin_heart_96.svg';
 import Heart_S from 'illustration:./S2_lin_heart_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/HelpCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/HelpCircle.tsx
index c776f6685e0..4f97a9bab17 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/HelpCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/HelpCircle.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import HelpCircle_L from 'illustration:./S2_lin_helpCircle_160.svg';
 import HelpCircle_M from 'illustration:./S2_lin_helpCircle_96.svg';
 import HelpCircle_S from 'illustration:./S2_lin_helpCircle_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Home.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Home.tsx
index 81740c5368c..26272a6a3b7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Home.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Home.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Home_L from 'illustration:./S2_lin_home_160.svg';
 import Home_M from 'illustration:./S2_lin_home_96.svg';
 import Home_S from 'illustration:./S2_lin_home_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Illustration.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Illustration.tsx
index 0e65343f6eb..f75d2ad1ec8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Illustration.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Illustration.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Illustration_L from 'illustration:./S2_lin_illustration_160.svg';
 import Illustration_M from 'illustration:./S2_lin_illustration_96.svg';
 import Illustration_S from 'illustration:./S2_lin_illustration_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Image.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Image.tsx
index 6bd0d1590bb..6233865495f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Image.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Image.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Image_L from 'illustration:./S2_lin_image_160.svg';
 import Image_M from 'illustration:./S2_lin_image_96.svg';
 import Image_S from 'illustration:./S2_lin_image_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ImageStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ImageStack.tsx
index 66051d1d9dd..d76b235fd76 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ImageStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ImageStack.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import ImageStack_L from 'illustration:./S2_lin_imageStack_160.svg';
 import ImageStack_M from 'illustration:./S2_lin_imageStack_96.svg';
 import ImageStack_S from 'illustration:./S2_lin_imageStack_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/InfiniteLooping.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/InfiniteLooping.tsx
index 8ade0f793bb..3defdcd96c1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/InfiniteLooping.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/InfiniteLooping.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import InfiniteLooping_L from 'illustration:./S2_lin_infiniteLooping_160.svg';
 import InfiniteLooping_M from 'illustration:./S2_lin_infiniteLooping_96.svg';
 import InfiniteLooping_S from 'illustration:./S2_lin_infiniteLooping_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Information.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Information.tsx
index 69e48bea5f6..8760bea9919 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Information.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Information.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Information_L from 'illustration:./S2_lin_information_160.svg';
 import Information_M from 'illustration:./S2_lin_information_96.svg';
 import Information_S from 'illustration:./S2_lin_information_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Interaction.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Interaction.tsx
index 039d586cea2..ac097d41dea 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Interaction.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Interaction.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Interaction_L from 'illustration:./S2_lin_interaction_160.svg';
 import Interaction_M from 'illustration:./S2_lin_interaction_96.svg';
 import Interaction_S from 'illustration:./S2_lin_interaction_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Laptop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Laptop.tsx
index 9e07476356e..30d73512897 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Laptop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Laptop.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Laptop_L from 'illustration:./S2_lin_laptop_160.svg';
 import Laptop_M from 'illustration:./S2_lin_laptop_96.svg';
 import Laptop_S from 'illustration:./S2_lin_laptop_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Layers.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Layers.tsx
index bf3237b2dbd..cd07ec82874 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Layers.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Layers.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Layers_L from 'illustration:./S2_lin_layers_160.svg';
 import Layers_M from 'illustration:./S2_lin_layers_96.svg';
 import Layers_S from 'illustration:./S2_lin_layers_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Libraries.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Libraries.tsx
index 4dba287421e..d8e90978103 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Libraries.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Libraries.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Libraries_L from 'illustration:./S2_lin_libraries_160.svg';
 import Libraries_M from 'illustration:./S2_lin_libraries_96.svg';
 import Libraries_S from 'illustration:./S2_lin_libraries_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lightbulb.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lightbulb.tsx
index 848c4b60556..1573914dbe3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lightbulb.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lightbulb.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Lightbulb_L from 'illustration:./S2_lin_lightbulb_160.svg';
 import Lightbulb_M from 'illustration:./S2_lin_lightbulb_96.svg';
 import Lightbulb_S from 'illustration:./S2_lin_lightbulb_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LightbulbRays.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LightbulbRays.tsx
index 4fe88c50ae6..d365ed093c1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LightbulbRays.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LightbulbRays.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import LightbulbRays_L from 'illustration:./S2_lin_lightbulbRays_160.svg';
 import LightbulbRays_M from 'illustration:./S2_lin_lightbulbRays_96.svg';
 import LightbulbRays_S from 'illustration:./S2_lin_lightbulbRays_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lighten.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lighten.tsx
index 2c029a32dd4..b1167ae8d90 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lighten.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lighten.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Lighten_L from 'illustration:./S2_lin_lighten_160.svg';
 import Lighten_M from 'illustration:./S2_lin_lighten_96.svg';
 import Lighten_S from 'illustration:./S2_lin_lighten_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Link.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Link.tsx
index 4c63a88d019..697de6ff163 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Link.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Link.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Link_L from 'illustration:./S2_lin_link_160.svg';
 import Link_M from 'illustration:./S2_lin_link_96.svg';
 import Link_S from 'illustration:./S2_lin_link_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Location.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Location.tsx
index 730b5e4876e..cfbe28803bc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Location.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Location.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Location_L from 'illustration:./S2_lin_location_160.svg';
 import Location_M from 'illustration:./S2_lin_location_96.svg';
 import Location_S from 'illustration:./S2_lin_location_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockClose.tsx
index dd2a03f976e..253b7a78700 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockClose.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import LockClose_L from 'illustration:./S2_lin_lockClose_160.svg';
 import LockClose_M from 'illustration:./S2_lin_lockClose_96.svg';
 import LockClose_S from 'illustration:./S2_lin_lockClose_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockOpen.tsx
index 782d39d36f5..dcb7c547a6d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockOpen.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import LockOpen_L from 'illustration:./S2_lin_lockOpen_160.svg';
 import LockOpen_M from 'illustration:./S2_lin_lockOpen_96.svg';
 import LockOpen_S from 'illustration:./S2_lin_lockOpen_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Logo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Logo.tsx
index 8dbbd1494f5..1ee864b54af 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Logo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Logo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Logo_L from 'illustration:./S2_lin_logo_160.svg';
 import Logo_M from 'illustration:./S2_lin_logo_96.svg';
 import Logo_S from 'illustration:./S2_lin_logo_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MagicWand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MagicWand.tsx
index 5adea725535..dd7fc7a0e75 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MagicWand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MagicWand.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MagicWand_L from 'illustration:./S2_lin_magicWand_160.svg';
 import MagicWand_M from 'illustration:./S2_lin_magicWand_96.svg';
 import MagicWand_S from 'illustration:./S2_lin_magicWand_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailClose.tsx
index 42596952034..a416542eb97 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailClose.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MailClose_L from 'illustration:./S2_lin_mailClose_160.svg';
 import MailClose_M from 'illustration:./S2_lin_mailClose_96.svg';
 import MailClose_S from 'illustration:./S2_lin_mailClose_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailOpen.tsx
index 9818cbe16ae..6da07ecaba0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailOpen.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MailOpen_L from 'illustration:./S2_lin_mailOpen_160.svg';
 import MailOpen_M from 'illustration:./S2_lin_mailOpen_96.svg';
 import MailOpen_S from 'illustration:./S2_lin_mailOpen_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Market.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Market.tsx
index a5156b1447e..3f2cb987e5a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Market.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Market.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Market_L from 'illustration:./S2_lin_market_160.svg';
 import Market_M from 'illustration:./S2_lin_market_96.svg';
 import Market_S from 'illustration:./S2_lin_market_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromote.tsx
index 900e8152f11..d6bfcffe65b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromote.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MegaphonePromote_L from 'illustration:./S2_lin_megaphonePromote_160.svg';
 import MegaphonePromote_M from 'illustration:./S2_lin_megaphonePromote_96.svg';
 import MegaphonePromote_S from 'illustration:./S2_lin_megaphonePromote_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromoteExpressive.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromoteExpressive.tsx
index d3819bf1636..4ef2d3f5d0f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromoteExpressive.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromoteExpressive.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MegaphonePromoteExpressive_L from 'illustration:./S2_lin_megaphonePromote_Expressive_160.svg';
 import MegaphonePromoteExpressive_M from 'illustration:./S2_lin_megaphonePromote_Expressive_96.svg';
 import MegaphonePromoteExpressive_S from 'illustration:./S2_lin_megaphonePromote_Expressive_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Mention.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Mention.tsx
index f83922065a3..cf8e45528ed 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Mention.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Mention.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Mention_L from 'illustration:./S2_lin_mention_160.svg';
 import Mention_M from 'illustration:./S2_lin_mention_96.svg';
 import Mention_S from 'illustration:./S2_lin_mention_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Microphone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Microphone.tsx
index 0203e66f56e..16ebfc17254 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Microphone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Microphone.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Microphone_L from 'illustration:./S2_lin_microphone_160.svg';
 import Microphone_M from 'illustration:./S2_lin_microphone_96.svg';
 import Microphone_S from 'illustration:./S2_lin_microphone_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MicrophoneOff.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MicrophoneOff.tsx
index 2f880784ce6..68ed559f37f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MicrophoneOff.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MicrophoneOff.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MicrophoneOff_L from 'illustration:./S2_lin_microphoneOff_160.svg';
 import MicrophoneOff_M from 'illustration:./S2_lin_microphoneOff_96.svg';
 import MicrophoneOff_S from 'illustration:./S2_lin_microphoneOff_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Minimize.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Minimize.tsx
index 9f1ac717a28..60d6ea39674 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Minimize.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Minimize.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Minimize_L from 'illustration:./S2_lin_minimize_160.svg';
 import Minimize_M from 'illustration:./S2_lin_minimize_96.svg';
 import Minimize_S from 'illustration:./S2_lin_minimize_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MovieCamera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MovieCamera.tsx
index fa199524194..e3988d45f9c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MovieCamera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MovieCamera.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MovieCamera_L from 'illustration:./S2_lin_movieCamera_160.svg';
 import MovieCamera_M from 'illustration:./S2_lin_movieCamera_96.svg';
 import MovieCamera_S from 'illustration:./S2_lin_movieCamera_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MusicNote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MusicNote.tsx
index a9563b0256f..2a127556550 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MusicNote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MusicNote.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import MusicNote_L from 'illustration:./S2_lin_musicNote_160.svg';
 import MusicNote_M from 'illustration:./S2_lin_musicNote_96.svg';
 import MusicNote_S from 'illustration:./S2_lin_musicNote_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoBrands.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoBrands.tsx
index deed798848f..14105ddcd74 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoBrands.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoBrands.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoBrands_L from 'illustration:./S2_lin_noBrands_160.svg';
 import NoBrands_M from 'illustration:./S2_lin_noBrands_96.svg';
 import NoBrands_S from 'illustration:./S2_lin_noBrands_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComment.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComment.tsx
index 6fe1400f6ae..6a5b080084b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComment.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComment.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoComment_L from 'illustration:./S2_lin_noComment_160.svg';
 import NoComment_M from 'illustration:./S2_lin_noComment_96.svg';
 import NoComment_S from 'illustration:./S2_lin_noComment_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComments.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComments.tsx
index a1d5346494c..e0f1091376c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComments.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComments.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoComments_L from 'illustration:./S2_lin_noComments_160.svg';
 import NoComments_M from 'illustration:./S2_lin_noComments_96.svg';
 import NoComments_S from 'illustration:./S2_lin_noComments_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoElements.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoElements.tsx
index d26361453f6..d5f6814bb11 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoElements.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoElements.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoElements_L from 'illustration:./S2_lin_noElements_160.svg';
 import NoElements_M from 'illustration:./S2_lin_noElements_96.svg';
 import NoElements_S from 'illustration:./S2_lin_noElements_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFile.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFile.tsx
index 328b914335a..6387bd40495 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFile.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFile.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoFile_L from 'illustration:./S2_lin_noFile_160.svg';
 import NoFile_M from 'illustration:./S2_lin_noFile_96.svg';
 import NoFile_S from 'illustration:./S2_lin_noFile_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFilter.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFilter.tsx
index 20b4fdc0e86..d9212d5d5b4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFilter.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFilter.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoFilter_L from 'illustration:./S2_lin_noFilter_160.svg';
 import NoFilter_M from 'illustration:./S2_lin_noFilter_96.svg';
 import NoFilter_S from 'illustration:./S2_lin_noFilter_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoImage.tsx
index 7172cb41ce0..55fcf28c6c1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoImage.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoImage_L from 'illustration:./S2_lin_noImage_160.svg';
 import NoImage_M from 'illustration:./S2_lin_noImage_96.svg';
 import NoImage_S from 'illustration:./S2_lin_noImage_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibraries.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibraries.tsx
index 7a6728e441e..d41b2e65468 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibraries.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibraries.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoLibraries_L from 'illustration:./S2_lin_noLibraries_160.svg';
 import NoLibraries_M from 'illustration:./S2_lin_noLibraries_96.svg';
 import NoLibraries_S from 'illustration:./S2_lin_noLibraries_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibrariesBrands.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibrariesBrands.tsx
index 5bfdf9f55a5..378b922f89b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibrariesBrands.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibrariesBrands.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoLibrariesBrands_L from 'illustration:./S2_lin_noLibrariesBrands_160.svg';
 import NoLibrariesBrands_M from 'illustration:./S2_lin_noLibrariesBrands_96.svg';
 import NoLibrariesBrands_S from 'illustration:./S2_lin_noLibrariesBrands_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoReviewLinks.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoReviewLinks.tsx
index d5aa01ec5cf..6779724dad0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoReviewLinks.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoReviewLinks.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoReviewLinks_L from 'illustration:./S2_lin_noReviewLinks_160.svg';
 import NoReviewLinks_M from 'illustration:./S2_lin_noReviewLinks_96.svg';
 import NoReviewLinks_S from 'illustration:./S2_lin_noReviewLinks_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSearchResults.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSearchResults.tsx
index 74533789ebc..49bee504c46 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSearchResults.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSearchResults.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoSearchResults_L from 'illustration:./S2_lin_noSearchResults_160.svg';
 import NoSearchResults_M from 'illustration:./S2_lin_noSearchResults_96.svg';
 import NoSearchResults_S from 'illustration:./S2_lin_noSearchResults_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSharedFile.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSharedFile.tsx
index 71d70284ef8..07493e7009d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSharedFile.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSharedFile.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import NoSharedFile_L from 'illustration:./S2_lin_noSharedFile_160.svg';
 import NoSharedFile_M from 'illustration:./S2_lin_noSharedFile_96.svg';
 import NoSharedFile_S from 'illustration:./S2_lin_noSharedFile_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperairplane.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperairplane.tsx
index 2588ab20311..65427ef8517 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperairplane.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperairplane.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Paperairplane_L from 'illustration:./S2_lin_paperairplane_160.svg';
 import Paperairplane_M from 'illustration:./S2_lin_paperairplane_96.svg';
 import Paperairplane_S from 'illustration:./S2_lin_paperairplane_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperclip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperclip.tsx
index fc969a2eddb..d3bd1da3cc0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperclip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperclip.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Paperclip_L from 'illustration:./S2_lin_paperclip_160.svg';
 import Paperclip_M from 'illustration:./S2_lin_paperclip_96.svg';
 import Paperclip_S from 'illustration:./S2_lin_paperclip_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pause.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pause.tsx
index 4cb41d94e84..d92aa9bad34 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pause.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pause.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Pause_L from 'illustration:./S2_lin_pause_160.svg';
 import Pause_M from 'illustration:./S2_lin_pause_96.svg';
 import Pause_S from 'illustration:./S2_lin_pause_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pencil.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pencil.tsx
index 022e01e6839..4ba8d753351 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pencil.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pencil.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Pencil_L from 'illustration:./S2_lin_pencil_160.svg';
 import Pencil_M from 'illustration:./S2_lin_pencil_96.svg';
 import Pencil_S from 'illustration:./S2_lin_pencil_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Phone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Phone.tsx
index b00a1180199..d21ad31c13b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Phone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Phone.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Phone_L from 'illustration:./S2_lin_phone_160.svg';
 import Phone_M from 'illustration:./S2_lin_phone_96.svg';
 import Phone_S from 'illustration:./S2_lin_phone_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PieChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PieChart.tsx
index 732c8b1eac6..e67688dfacf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PieChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PieChart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import PieChart_L from 'illustration:./S2_lin_pieChart_160.svg';
 import PieChart_M from 'illustration:./S2_lin_pieChart_96.svg';
 import PieChart_S from 'illustration:./S2_lin_pieChart_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PiggyBank.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PiggyBank.tsx
index d157ed27038..4d07d4003a2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PiggyBank.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PiggyBank.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import PiggyBank_L from 'illustration:./S2_lin_piggyBank_160.svg';
 import PiggyBank_M from 'illustration:./S2_lin_piggyBank_96.svg';
 import PiggyBank_S from 'illustration:./S2_lin_piggyBank_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pin.tsx
index 75442ef59b1..77e568d1f4a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pin.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Pin_L from 'illustration:./S2_lin_pin_160.svg';
 import Pin_M from 'illustration:./S2_lin_pin_96.svg';
 import Pin_S from 'illustration:./S2_lin_pin_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Play.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Play.tsx
index 03dc1cf0989..830496a0240 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Play.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Play.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Play_L from 'illustration:./S2_lin_play_160.svg';
 import Play_M from 'illustration:./S2_lin_play_96.svg';
 import Play_S from 'illustration:./S2_lin_play_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PlayTriangle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PlayTriangle.tsx
index 23e9cfb96cf..3589f3c53d0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PlayTriangle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PlayTriangle.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import PlayTriangle_L from 'illustration:./S2_lin_playTriangle_160.svg';
 import PlayTriangle_M from 'illustration:./S2_lin_playTriangle_96.svg';
 import PlayTriangle_S from 'illustration:./S2_lin_playTriangle_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Plugin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Plugin.tsx
index db7101e166e..0c66e88e866 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Plugin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Plugin.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Plugin_L from 'illustration:./S2_lin_plugin_160.svg';
 import Plugin_M from 'illustration:./S2_lin_plugin_96.svg';
 import Plugin_S from 'illustration:./S2_lin_plugin_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Prompt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Prompt.tsx
index a359fcc23f4..2ca083dc39f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Prompt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Prompt.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Prompt_L from 'illustration:./S2_lin_prompt_160.svg';
 import Prompt_M from 'illustration:./S2_lin_prompt_96.svg';
 import Prompt_S from 'illustration:./S2_lin_prompt_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Properties.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Properties.tsx
index 43d8a689b9d..b40c1781e0b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Properties.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Properties.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import Properties_L from 'illustration:./S2_lin_properties_160.svg';
 import Properties_M from 'illustration:./S2_lin_properties_96.svg';
 import Properties_S from 'illustration:./S2_lin_properties_48.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Redo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Redo.tsx
index 2bc3ebfbfab..45c0d48433a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Redo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Redo.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Redo_L from 'illustration:./S2_lin_redo_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Remix.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Remix.tsx
index e0f27cc6524..a48a4bd1e24 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Remix.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Remix.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Remix_L from 'illustration:./S2_lin_remix_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Replace.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Replace.tsx
index 9d449bd23ed..888229ab65d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Replace.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Replace.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Replace_L from 'illustration:./S2_lin_replace_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ReportAbuse.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ReportAbuse.tsx
index f0c25b575ef..51dccb3cb14 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ReportAbuse.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ReportAbuse.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ReportAbuse_L from 'illustration:./S2_lin_reportAbuse_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Revert.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Revert.tsx
index 87d3ff0f02a..09f8461fa24 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Revert.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Revert.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Revert_L from 'illustration:./S2_lin_revert_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ribbon.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ribbon.tsx
index bfb028867a3..4f3e9ae778b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ribbon.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ribbon.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Ribbon_L from 'illustration:./S2_lin_ribbon_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Rocket.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Rocket.tsx
index e4864e0ecb6..cb91566788d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Rocket.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Rocket.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Rocket_L from 'illustration:./S2_lin_rocket_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCCW.tsx
index 34fe5d7ec84..39f02450ac2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCCW.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import RotateCCW_L from 'illustration:./S2_lin_rotateCCW_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCW.tsx
index 67879e2b25e..bab8850aeeb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCW.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import RotateCW_L from 'illustration:./S2_lin_rotateCW_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ruler.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ruler.tsx
index f3cfad9dd18..867f1e2013d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ruler.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ruler.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Ruler_L from 'illustration:./S2_lin_ruler_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Search.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Search.tsx
index f714da7f9b1..ee841c05445 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Search.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Search.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Search_L from 'illustration:./S2_lin_search_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Segmentation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Segmentation.tsx
index 8b62c86e9f1..01c8e575eae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Segmentation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Segmentation.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Segmentation_L from 'illustration:./S2_lin_segmentation_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Server.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Server.tsx
index 5e07480d0d7..db0c55d16ad 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Server.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Server.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Server_L from 'illustration:./S2_lin_server_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Shapes.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Shapes.tsx
index d6ee1901253..4e0976cc4df 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Shapes.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Shapes.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Shapes_L from 'illustration:./S2_lin_shapes_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingBag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingBag.tsx
index 7244c08ecfa..74b6141f8e8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingBag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingBag.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ShoppingBag_L from 'illustration:./S2_lin_shoppingBag_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingCart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingCart.tsx
index 53663bc090e..559ada634b7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingCart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingCart.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ShoppingCart_L from 'illustration:./S2_lin_shoppingCart_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Sparkles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Sparkles.tsx
index 445861ee230..faaf684d9b5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Sparkles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Sparkles.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Sparkles_L from 'illustration:./S2_lin_sparkles_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/SpeedFast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/SpeedFast.tsx
index 9c8dece776b..e586af82d5f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/SpeedFast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/SpeedFast.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import SpeedFast_L from 'illustration:./S2_lin_speedFast_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/StampClone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/StampClone.tsx
index 7fa32375088..831946dc3ac 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/StampClone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/StampClone.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import StampClone_L from 'illustration:./S2_lin_stampClone_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Star.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Star.tsx
index b6f066b7d9a..3c4450a5bf6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Star.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Star.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Star_L from 'illustration:./S2_lin_star_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/StepForward.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/StepForward.tsx
index 52b17da22ed..ca9c72942ca 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/StepForward.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/StepForward.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import StepForward_L from 'illustration:./S2_lin_stepForward_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Stopwatch.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Stopwatch.tsx
index 866edc81fa2..dd5fcbde698 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Stopwatch.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Stopwatch.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Stopwatch_L from 'illustration:./S2_lin_stopwatch_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Switch.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Switch.tsx
index ab90a390f30..2f97fe70a89 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Switch.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Switch.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Switch_L from 'illustration:./S2_lin_switch_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tablet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tablet.tsx
index d15a27016f4..8d16c067fc2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tablet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tablet.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Tablet_L from 'illustration:./S2_lin_tablet_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tag.tsx
index 1b39987472b..9cc79ea1f31 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tag.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Tag_L from 'illustration:./S2_lin_tag_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Targeted.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Targeted.tsx
index 419d81df157..df8977453a2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Targeted.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Targeted.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Targeted_L from 'illustration:./S2_lin_targeted_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Text.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Text.tsx
index 1fa3c4aaa23..aa1f20d2076 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Text.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Text.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Text_L from 'illustration:./S2_lin_text_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThreeArrowsCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThreeArrowsCircle.tsx
index e58e8cd0e2f..c845d80a4a6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThreeArrowsCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThreeArrowsCircle.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ThreeArrowsCircle_L from 'illustration:./S2_lin_threeArrowsCircle_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsDown.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsDown.tsx
index ab9fa658246..40fc7cbd367 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsDown.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsDown.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ThumbsDown_L from 'illustration:./S2_lin_thumbsDown_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsUp.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsUp.tsx
index 5db5949ebc8..7f0e29eb56c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsUp.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsUp.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ThumbsUp_L from 'illustration:./S2_lin_thumbsUp_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Transform.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Transform.tsx
index 0cf023a5420..e9b40264d08 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Transform.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Transform.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Transform_L from 'illustration:./S2_lin_transform_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Translate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Translate.tsx
index cc19439971d..8bbecf35d93 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Translate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Translate.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Translate_L from 'illustration:./S2_lin_translate_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trash.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trash.tsx
index 66d4f9f2f2f..8e708669767 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trash.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trash.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Trash_L from 'illustration:./S2_lin_trash_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trophy.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trophy.tsx
index e62b5fca432..bfa74d39638 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trophy.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trophy.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Trophy_L from 'illustration:./S2_lin_trophy_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Update.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Update.tsx
index 9e673e378d6..4b0ce399262 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Update.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Update.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Update_L from 'illustration:./S2_lin_update_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Upload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Upload.tsx
index d1e5e9648c4..0d8e4eb10fe 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Upload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Upload.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Upload_L from 'illustration:./S2_lin_upload_160.svg';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/User.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/User.tsx
index 14213eee65f..733b2c801f6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/User.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/User.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserAvatar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserAvatar.tsx
index e2960b72236..365899d33f6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserAvatar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserAvatar.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserGroup.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserGroup.tsx
index fa5d19cd54c..33bf0d34f7d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserGroup.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserGroup.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VectorDraw.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VectorDraw.tsx
index f31f15db581..a89780e3789 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VectorDraw.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VectorDraw.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Video.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Video.tsx
index 29ba8465265..ce9fcf6d8bf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Video.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Video.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Volume.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Volume.tsx
index 0a7b53828a4..8278a248053 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Volume.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Volume.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOff.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOff.tsx
index f55b20801c9..07e99edcbfa 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOff.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOff.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOne.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOne.tsx
index da7791aa4de..d668e19d299 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOne.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOne.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Wallet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Wallet.tsx
index 4fde28f0ccd..a6d4ff600dc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Wallet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Wallet.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Warning.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Warning.tsx
index a7014e91d50..c579f73fc2a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Warning.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Warning.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+'use client';
 import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx
index e4d088defe5..e816cdbfcc6 100644
--- a/packages/@react-spectrum/s2/src/Avatar.tsx
+++ b/packages/@react-spectrum/s2/src/Avatar.tsx
@@ -76,7 +76,8 @@ export const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef
   } = props;
   const domProps = filterDOMProps(otherProps);
 
-  let remSize = size / 16 + 'rem';
+  // In the docs build, we need to be able to simulate font scaling.
+  let remSize = process.env.DOCS_ENV ? `calc(${size / 16} * var(--rem, 1rem))` : `${size / 16}rem`;
   let isLarge = size >= 64;
   return (
     <Image
diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
index 689055cfae9..033fa2fa295 100644
--- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
@@ -30,6 +30,7 @@ import ChevronIcon from '../ui-icons/Chevron';
 import {Collection, DOMRef, DOMRefValue, GlobalDOMAttributes, LinkDOMProps, Node} from '@react-types/shared';
 import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+// @ts-ignore
 import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';
 import {forwardRefType} from './types';
 import {inertValue, useLayoutEffect} from '@react-aria/utils';
@@ -281,7 +282,11 @@ const linkStyles = style<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolea
 
 const currentStyles = style<{size: string}>({
   font: controlFont(),
-  fontWeight: 'bold'
+  fontWeight: 'bold',
+  color: {
+    default: 'neutral',
+    forcedColors: 'ButtonText'
+  }
 });
 
 // TODO: support user heading size customization, for now just set it to large
diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx
index 388889cab08..7ad9aeaf49e 100644
--- a/packages/@react-spectrum/s2/src/Card.tsx
+++ b/packages/@react-spectrum/s2/src/Card.tsx
@@ -91,7 +91,7 @@ let card = style({
     isHovered: 'elevated',
     isFocusVisible: 'elevated',
     isSelected: 'elevated',
-    forcedColors: '[0 0 0 1px ButtonBorder]',
+    forcedColors: '[0 0 0 1px var(--hcm-buttonborder, ButtonBorder)]',
     variant: {
       tertiary: {
         // Render border with box-shadow to avoid affecting layout.
@@ -99,7 +99,7 @@ let card = style({
         isHovered: `[0 0 0 2px ${color('gray-200')}]`,
         isFocusVisible: `[0 0 0 2px ${color('gray-200')}]`,
         isSelected: 'none',
-        forcedColors: '[0 0 0 2px ButtonBorder]'
+        forcedColors: '[0 0 0 2px var(--hcm-buttonborder, ButtonBorder)]'
       },
       quiet: 'none'
     }
diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index be518872495..2c93b4c95d6 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -125,7 +125,11 @@ const buttonStyles = style({
   font: 'heading',
   color: {
     default: baseColor('neutral'),
-    isDisabled: 'disabled'
+    forcedColors: 'ButtonText',
+    isDisabled: {
+      default: 'disabled',
+      forcedColors: 'GrayText'
+    }
   },
   fontWeight: 'bold',
   fontSize: {
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index eccfe89dc55..38c9dfda58e 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -166,7 +166,11 @@ const fieldGroupStyles = style({
   transition: 'default',
   borderColor: {
     default: baseColor('gray-300'),
-    isInvalid: baseColor('negative'),
+    forcedColors: 'ButtonBorder',
+    isInvalid: {
+      default: baseColor('negative'),
+      forcedColors: 'Mark'
+    },
     isFocusWithin: {
       default: 'gray-900',
       isInvalid: 'negative-1000',
@@ -177,10 +181,17 @@ const fieldGroupStyles = style({
       forcedColors: 'GrayText'
     }
   },
-  backgroundColor: 'gray-25',
+  backgroundColor: {
+    default: 'gray-25',
+    forcedColors: 'Field'
+  },
   color: {
     default: baseColor('neutral'),
-    isDisabled: 'disabled'
+    forcedColors: 'ButtonText',
+    isDisabled: {
+      default: 'disabled',
+      forcedColors: 'GrayText'
+    }
   },
   cursor: {
     default: 'text',
@@ -235,7 +246,10 @@ export const Input = forwardRef(function Input(props: InputProps, ref: Forwarded
         backgroundColor: 'transparent',
         color: {
           default: 'inherit',
-          '::placeholder': 'gray-600'
+          '::placeholder': {
+            default: 'gray-600',
+            forcedColors: 'GrayText'
+          }
         },
         fontFamily: 'inherit',
         fontSize: 'inherit',
@@ -267,8 +281,14 @@ export const helpTextStyles = style({
   font: controlFont(),
   color: {
     default: 'neutral-subdued',
-    isInvalid: 'negative',
-    isDisabled: 'disabled'
+    isInvalid: {
+      default: 'negative',
+      forcedColors: 'Mark'
+    },
+    isDisabled: {
+      default: 'disabled',
+      forcedColors: 'GrayText'
+    }
   },
   '--iconPrimary': {
     type: 'fill',
@@ -328,7 +348,7 @@ export function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {
                 type: 'fill',
                 value: {
                   default: 'negative',
-                  forcedColors: 'ButtonText'
+                  forcedColors: 'Mark'
                 }
               }
             })}),
diff --git a/packages/@react-spectrum/s2/src/Form.tsx b/packages/@react-spectrum/s2/src/Form.tsx
index e426f3f59ab..3cc39c3b48a 100644
--- a/packages/@react-spectrum/s2/src/Form.tsx
+++ b/packages/@react-spectrum/s2/src/Form.tsx
@@ -74,6 +74,8 @@ export const Form = /*#__PURE__*/ forwardRef(function Form(props: FormProps, ref
     isDisabled,
     isEmphasized,
     size = 'M',
+    UNSAFE_style,
+    UNSAFE_className = '',
     ...formProps
   } = props;
   let domRef = useDOMRef(ref);
@@ -82,8 +84,8 @@ export const Form = /*#__PURE__*/ forwardRef(function Form(props: FormProps, ref
     <RACForm
       {...formProps}
       ref={domRef}
-      style={props.UNSAFE_style}
-      className={(props.UNSAFE_className || '') + style({
+      style={UNSAFE_style}
+      className={UNSAFE_className + style({
         display: 'grid',
         gridTemplateColumns: {
           labelPosition: {
diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index b2e52299d2d..fa3093e9e6b 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -157,11 +157,18 @@ export let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> &
   backgroundColor: { // TODO: revisit color when I have access to dev mode again
     default: {
       default: 'transparent',
-      isFocused: baseColor('gray-100').isFocusVisible
+      isFocused: {
+        default: baseColor('gray-100').isFocusVisible,
+        forcedColors: 'Highlight'
+      }
     }
   },
   color: {
     default: baseColor('neutral'),
+    forcedColors: {
+      default: 'ButtonText',
+      isFocused: 'HighlightText'
+    },
     isDisabled: {
       default: 'disabled',
       forcedColors: 'GrayText'
@@ -191,10 +198,11 @@ export let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> &
     default: 'default',
     isLink: 'pointer'
   },
-  transition: 'default'
+  transition: 'default',
+  forcedColorAdjust: 'none'
 }, getAllowedOverrides());
 
-export let checkmark = style({
+export let checkmark = style<{isSelected: boolean, isFocused: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({
   visibility: {
     default: 'hidden',
     isSelected: 'visible'
@@ -205,7 +213,10 @@ export let checkmark = style({
     type: 'fill',
     value: {
       default: 'currentColor',
-      forcedColors: 'Highlight'
+      forcedColors: {
+        default: 'Highlight',
+        isFocused: 'HighlightText'
+      }
     }
   },
   marginEnd: 'text-to-control',
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index ef196684b2a..8a9a189d2a3 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -29,7 +29,7 @@ import {createFocusableRef} from '@react-spectrum/utils';
 import Dash from '../ui-icons/Dash';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';
-import {FormContext} from './Form';
+import {FormContext, useFormProps} from './Form';
 import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {pressScale} from './pressScale';
 import {TextFieldRef} from '@react-types/textfield';
@@ -141,6 +141,7 @@ const stepperContainerStyles = style({
  */
 export const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);
+  props = useFormProps(props);
   let {
     label,
     contextualHelp,
diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx
index dd0fb1bfec9..9616cf812b8 100644
--- a/packages/@react-spectrum/s2/src/Popover.tsx
+++ b/packages/@react-spectrum/s2/src/Popover.tsx
@@ -64,7 +64,10 @@ let popover = style({
   ...colorScheme(),
   '--s2-container-bg': {
     type: 'backgroundColor',
-    value: 'layer-2'
+    value: {
+      default: 'layer-2',
+      forcedColors: 'Background'
+    }
   },
   backgroundColor: '--s2-container-bg',
   borderRadius: 'lg',
diff --git a/packages/@react-spectrum/s2/src/Provider.tsx b/packages/@react-spectrum/s2/src/Provider.tsx
index bfbae3cc936..704519dc913 100644
--- a/packages/@react-spectrum/s2/src/Provider.tsx
+++ b/packages/@react-spectrum/s2/src/Provider.tsx
@@ -61,9 +61,7 @@ export function Provider(props: ProviderProps): JSX.Element {
   let result = <ProviderInner {...props} />;
   let parentColorScheme = useContext(ColorSchemeContext);
   let colorScheme = props.colorScheme || parentColorScheme;
-  if (colorScheme !== parentColorScheme) {
-    result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;
-  }
+  result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;
 
   if (props.locale) {
     result = <I18nProvider locale={props.locale}>{result}</I18nProvider>;
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
index 180d34385b3..8b8c140e759 100644
--- a/packages/@react-spectrum/s2/src/Slider.tsx
+++ b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -78,6 +78,7 @@ const slider = style({
   },
   color: {
     default: 'neutral-subdued',
+    forcedColors: 'ButtonText',
     isDisabled: 'disabled'
   },
   columnGap: {
@@ -250,10 +251,14 @@ export let thumb = style<SliderThumbRenderProps & {size: 'S' | 'M' | 'L' | 'XL',
     isDragging: 'gray-900',
     isDisabled: 'disabled',
     forcedColors: {
+      default: 'ButtonBorder',
       isDisabled: 'GrayText'
     }
   },
-  backgroundColor: 'gray-25'
+  backgroundColor: {
+    default: 'gray-25',
+    forcedColors: 'ButtonFace'
+  }
 });
 
 const trackStyling = {
@@ -272,11 +277,13 @@ const trackStyling = {
   }
 } as const;
 
-export let upperTrack = style<{isDisabled?: boolean, trackStyle: 'thin' | 'thick'}>({
+export let upperTrack = style<{isDisabled?: boolean, isStaticColor?: boolean, trackStyle: 'thin' | 'thick'}>({
   ...trackStyling,
   position: 'absolute',
   backgroundColor: {
     default: 'gray-300',
+    isStaticColor: 'transparent-overlay-300',
+    forcedColors: 'ButtonFace',
     isDisabled: 'disabled'
   },
   translateY: '-50%',
@@ -410,6 +417,7 @@ export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProp
   let domRef = useFocusableRef(ref, inputRef);
   let {direction} = useLocale();
   let cssDirection = direction === 'rtl' ? 'right' : 'left';
+  let isStaticColor = props['PRIVATE_staticColor'];
 
   return (
     <SliderBase
@@ -427,7 +435,7 @@ export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProp
 
           return (
             <>
-              <div className={upperTrack({isDisabled, trackStyle})} />
+              <div className={upperTrack({isDisabled, isStaticColor, trackStyle})} />
               <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />
               <SliderThumb  className={thumbContainer} index={0} name={props.name} form={props.form} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>
                 {(renderProps) => (
diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
index 57117f69b7b..f194a23533d 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -57,6 +57,7 @@ const wrapper = style({
   transition: 'colors',
   color: {
     default: baseColor('neutral'),
+    forcedColors: 'ButtonText',
     isDisabled: {
       default: 'disabled',
       forcedColors: 'GrayText'
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 9742b57ce83..b82705b2ae2 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -197,7 +197,10 @@ function TextAreaInput() {
         backgroundColor: 'transparent',
         color: {
           default: 'inherit',
-          '::placeholder': 'gray-600'
+          '::placeholder': {
+            default: 'gray-600',
+            forcedColors: 'GrayText'
+          }
         },
         fontFamily: 'inherit',
         fontSize: 'inherit',
diff --git a/packages/@react-spectrum/s2/src/Toast.module.css b/packages/@react-spectrum/s2/src/Toast.module.css
index f5f8ffb550d..07e7d5fd236 100644
--- a/packages/@react-spectrum/s2/src/Toast.module.css
+++ b/packages/@react-spectrum/s2/src/Toast.module.css
@@ -16,7 +16,28 @@ html:active-view-transition-type(toast-add, toast-remove, toast-expand, toast-co
   }
 
   &::view-transition-group(toast-background) {
-    z-index: -1;
+    z-index: 0;
+    will-change: transform;
+  }
+
+  &::view-transition-group(.toast),
+  &::view-transition-group(toast-list-expanded),
+  &::view-transition-group(toast-list-collapsed) {
+    z-index: 1;
+    will-change: transform;
+  }
+
+  &::view-transition-group(toast-controls) {
+    z-index: 2;
+    will-change: transform;
+  }
+
+  &::view-transition-group(toast-content),
+  &::view-transition-group(toast-expand),
+  &::view-transition-group(toast-action),
+  &::view-transition-group(toast-close) {
+    z-index: 3;
+    will-change: transform;
   }
 
   &::view-transition-group(*) {
@@ -28,7 +49,7 @@ html.toast-add,
 html.toast-remove,
 html:active-view-transition-type(toast-add, toast-remove) {
   /* The new toast should slide in and out. With reduce motion enabled, it fades by default. */
-  @media (prefers-reduced-motion: no-preference) {
+  &:not(.reduceMotion) {
     &::view-transition-new(.toast):only-child {
       animation-name: slide-in;
     }
@@ -78,7 +99,7 @@ html:active-view-transition-type(toast-collapse) {
 html.toast-expand,
 html.toast-collapse,
 html:active-view-transition-type(toast-expand, toast-collapse) {
-  @media (prefers-reduced-motion: no-preference) {
+  &:not(.reduceMotion) {
     /* When expanding/collapsing, animate the components of the main toast individually. */
     .toast-content {
       view-transition-name: toast-content;
@@ -122,7 +143,7 @@ html:active-view-transition-type(toast-expand, toast-collapse) {
     }
   }
 
-  @media (prefers-reduced-motion) {
+  &.reduceMotion {
     /* Do not animate individual toasts in reduced motion. The whole list cross-fades instead. */
     .toast {
       view-transition-name: none !important;
diff --git a/packages/@react-spectrum/s2/src/Toast.tsx b/packages/@react-spectrum/s2/src/Toast.tsx
index d2c96163fce..ad54fe3dc63 100644
--- a/packages/@react-spectrum/s2/src/Toast.tsx
+++ b/packages/@react-spectrum/s2/src/Toast.tsx
@@ -19,7 +19,7 @@ import Chevron from '../s2wf-icons/S2_Icon_ChevronDown_20_N.svg';
 import {CloseButton} from './CloseButton';
 import {createContext, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {DOMProps} from '@react-types/shared';
-import {filterDOMProps, useEvent} from '@react-aria/utils';
+import {filterDOMProps, isWebKit, useEvent} from '@react-aria/utils';
 import {flushSync} from 'react-dom';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {FocusScope, useModalOverlay} from 'react-aria';
@@ -64,15 +64,20 @@ export interface SpectrumToastValue extends DOMProps {
   shouldCloseOnAction?: boolean
 }
 
+let globalReduceMotion = false;
 function startViewTransition(fn: () => void, type: string) {
   if ('startViewTransition' in document) {
     // Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element.
     document.documentElement.classList.add(toastCss[type]);
+    if (globalReduceMotion) {
+      document.documentElement.classList.add(toastCss.reduceMotion);
+    }
+
     let viewTransition = document.startViewTransition(() => flushSync(fn));
 
     viewTransition.ready.catch(() => {});
     viewTransition.finished.then(() => {
-      document.documentElement.classList.remove(toastCss[type]);
+      document.documentElement.classList.remove(toastCss[type], toastCss.reduceMotion);
     });
   } else {
     fn();
@@ -179,7 +184,7 @@ const toastRegion = style({
     }
   },
   boxSizing: 'border-box',
-  maxHeight: 'screen',
+  maxHeight: 'full',
   borderRadius: 'lg'
 });
 
@@ -265,7 +270,8 @@ const toastStyle = style({
   boxShadow: {
     default: 'elevated',
     isExpanded: 'none'
-  }
+  },
+  willChange: 'transform'
 });
 
 const toastBody = style({
@@ -379,6 +385,16 @@ export function ToastContainer(props: ToastContainerProps): ReactNode {
     }
   } : undefined);
 
+  let prefersReducedMotion = useMediaQuery('(prefers-reduced-motion)');
+  let reduceMotion = props['PRIVATE_forceReducedMotion'] ?? prefersReducedMotion;
+  useEffect(() => {
+    let oldGlobalReduceMotion = globalReduceMotion;
+    globalReduceMotion = reduceMotion;
+    return () => {
+      globalReduceMotion = oldGlobalReduceMotion;
+    };
+  }, [reduceMotion]);
+
   return (
     <ToastRegion
       {...props}
@@ -398,7 +414,10 @@ export function ToastContainer(props: ToastContainerProps): ReactNode {
               className={toastCss['toast-background'] + style({position: 'fixed', inset: 0, backgroundColor: 'transparent-black-500'})}
               onClick={collapse} />
           )}
-          <SpectrumToastList placement={placement} align={align} />
+          <SpectrumToastList
+            placement={placement}
+            align={align}
+            reduceMotion={reduceMotion} />
           <div className={toastCss['toast-controls'] + controls({isExpanded})}>
             <ActionButton
               size="S"
@@ -420,7 +439,7 @@ export function ToastContainer(props: ToastContainerProps): ReactNode {
   );
 }
 
-function SpectrumToastList({placement, align}) {
+function SpectrumToastList({placement, align, reduceMotion}) {
   let {isExpanded, toggleExpanded} = useContext(ToastContainerContext)!;
 
   // Attach click handler to ref since ToastList doesn't pass through onClick/onPress.
@@ -432,8 +451,6 @@ function SpectrumToastList({placement, align}) {
     }
   });
 
-  let reduceMotion = useMediaQuery('(prefers-reduced-motion)');
-
   return (
     <ToastList<SpectrumToastValue>
       ref={toastListRef}
@@ -500,7 +517,8 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
           viewTransitionName: toast.key + (props.reduceMotion ? '-' + index : ''),
           viewTransitionClass: [toastCss.toast, toastCss['background-toast']].map(c => CSS.escape(c)).join(' ')
         }}
-        className={toastCss.toast + toastStyle({variant: toast.content.variant || 'info', index, isExpanded})} />
+        className={toastCss.toast + toastStyle({variant: toast.content.variant || 'info', index, isExpanded})}
+        ref={fixSafariTransform} />
     );
   }
 
@@ -569,3 +587,14 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
     </Toast>
   );
 }
+
+function fixSafariTransform(el: HTMLDivElement | null) {
+  // Safari has a bug where the toasts display in the wrong position (CSS transform is not applied correctly).
+  // Work around this by removing it, forcing a reflow, and re-applying.
+  if (el && isWebKit()) {
+    let translate = el.style.translate;
+    el.style.translate = '';
+    el.offsetHeight;
+    el.style.translate = translate;
+  }
+}
diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index 3b4320444d3..e539806b8b9 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -155,7 +155,8 @@ const treeRow = style({
   font: 'ui',
   color: {
     default: baseColor('neutral-subdued'),
-    isSelected: baseColor('neutral')
+    isSelected: baseColor('neutral'),
+    forcedColors: 'ButtonText'
   },
   outlineStyle: 'none',
   cursor: {
diff --git a/packages/@react-spectrum/s2/style/index.ts b/packages/@react-spectrum/s2/style/index.ts
index 41e4be388d7..7a847469bd7 100644
--- a/packages/@react-spectrum/s2/style/index.ts
+++ b/packages/@react-spectrum/s2/style/index.ts
@@ -32,7 +32,10 @@ export const focusRing = () => ({
     default: 'none',
     isFocusVisible: 'solid'
   },
-  outlineColor: 'focus-ring',
+  outlineColor: {
+    default: 'focus-ring',
+    forcedColors: 'Highlight'
+  },
   outlineWidth: 2,
   outlineOffset: 2
 } as const);
diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index c1da1a04974..d10e6cd127e 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -23,9 +23,24 @@ function pxToRem(px: string | number) {
   if (typeof px === 'string') {
     px = parseFloat(px);
   }
+
+  // In the docs, we need to be able to simulate font size adjustment.
+  if (process.env.DOCS_ENV) {
+    return `calc(${px / 16} * var(--rem, 1rem))`;
+  }
+
   return px / 16 + 'rem';
 }
 
+function hcmColor(color: string) {
+  // In the docs, HCM colors can be simulated.
+  if (process.env.DOCS_ENV) {
+    return `var(--hcm-${color.toLowerCase()}, ${color})`;
+  }
+
+  return color;
+}
+
 const baseColors = {
   transparent: 'transparent',
   black: 'black',
@@ -62,16 +77,17 @@ const baseColors = {
   ...generateOverlayColorScale(),
 
   // High contrast mode.
-  Background: 'Background',
-  ButtonBorder: 'ButtonBorder',
-  ButtonFace: 'ButtonFace',
-  ButtonText: 'ButtonText',
-  Field: 'Field',
-  Highlight: 'Highlight',
-  HighlightText: 'HighlightText',
-  GrayText: 'GrayText',
-  Mark: 'Mark',
-  LinkText: 'LinkText'
+  // In the docs these can be simulated via variables.
+  Background: hcmColor('Background'),
+  ButtonBorder: hcmColor('ButtonBorder'),
+  ButtonFace: hcmColor('ButtonFace'),
+  ButtonText: hcmColor('ButtonText'),
+  Field: hcmColor('Field'),
+  Highlight: hcmColor('Highlight'),
+  HighlightText: hcmColor('HighlightText'),
+  GrayText: hcmColor('GrayText'),
+  Mark: hcmColor('Mark'),
+  LinkText: hcmColor('LinkText')
 };
 
 // Resolves a color to its most basic form, following all aliases.
@@ -761,7 +777,7 @@ export const style = createTheme({
       if (typeof value === 'number') {
         return {
           '--fs': `pow(1.125, ${value})`,
-          fontSize: `round(${fontSizeCalc} / 16 * 1rem, 1px)`
+          fontSize: `round(${fontSizeCalc} / 16 * ${process.env.DOCS_ENV ? 'var(--rem, 1rem)' : '1rem'}, 1px)`
         } as CSSProperties;
       }
 
@@ -922,6 +938,8 @@ export const style = createTheme({
     float: ['inline-start', 'inline-end', 'right', 'left', 'none'] as const,
     clear: ['inline-start', 'inline-end', 'left', 'right', 'both', 'none'] as const,
     contain: ['none', 'strict', 'content', 'size', 'inline-size', 'layout', 'style', 'paint'] as const,
+    containerType: ['normal', 'size', 'inline-size', 'scroll-state'] as const,
+    containerName: new ArbitraryProperty<string>('containerName'),
     boxSizing: ['border-box', 'content-box'] as const,
     tableLayout: ['auto', 'fixed'] as const,
     captionSide: ['top', 'bottom'] as const,
@@ -1022,7 +1040,8 @@ export const style = createTheme({
     }
   },
   conditions: {
-    forcedColors: '@media (forced-colors: active)',
+    // In the docs we need to be able to simulate HCM.
+    forcedColors: process.env.DOCS_ENV ? ['@media (forced-colors: active)', ':is([data-hcm], [data-hcm] *)'] : '@media (forced-colors: active)',
     // This detects touch primary devices as best as we can.
     // Ideally we'd use (pointer: course) but browser/device support is inconsistent.
     // Samsung Android devices claim to be mice at the hardware/OS level: (any-pointer: fine), (any-hover: hover), (hover: hover), and nothing for pointer.
@@ -1032,10 +1051,11 @@ export const style = createTheme({
     // Windows tablet matches the same as iPhone. No difference when a mouse is connected.
     // Windows touch laptop matches same as macOS: (any-pointer: fine), (pointer: fine), (any-hover: hover), (hover: hover).
     touch: '@media not ((hover: hover) and (pointer: fine))',
-    sm: `@media (min-width: ${pxToRem(640)})`,
-    md: `@media (min-width: ${pxToRem(768)})`,
-    lg: `@media (min-width: ${pxToRem(1024)})`,
-    xl: `@media (min-width: ${pxToRem(1280)})`,
-    '2xl': `@media (min-width: ${pxToRem(1536)})`
+    xs: `@media (min-width: ${(480 / 16)}rem)`,
+    sm: `@media (min-width: ${(640 / 16)}rem)`,
+    md: `@media (min-width: ${(768 / 16)}rem)`,
+    lg: `@media (min-width: ${(1024 / 16)}rem)`,
+    xl: `@media (min-width: ${(1280 / 16)}rem)`,
+    '2xl': `@media (min-width: ${(1536 / 16)}rem)`
   }
 });
diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index d41d6aaeee6..0f43859218f 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -476,19 +476,24 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     if (condition in theme.conditions || /^[@:]/.test(condition)) {
       // Conditions starting with : are CSS pseudo classes. Nest them inside the parent rule.
       let prelude = theme.conditions[condition] || condition;
-      if (prelude.startsWith(':')) {
-        for (let rule of rules) {
-          rule.addPseudo(prelude);
+      let preludes = Array.isArray(prelude) ? prelude : [prelude];
+      return preludes.map(prelude => {
+        if (prelude.startsWith(':')) {
+          let rulesWithPseudo = rules.map(rule => {
+            rule = rule.copy();
+            rule.addPseudo(prelude);
+            return rule;
+          });
+
+          return new GroupRule(rulesWithPseudo, generateName(priority, true));
         }
 
-        return [new GroupRule(rules, generateName(priority, true))];
-      }
-
-      // Otherwise, wrap the rule in the condition (e.g. @media).
-      // Top level layer is based on the priority of the rule, not the condition.
-      // Also group in a sub-layer based on the condition so that lightningcss can more effectively deduplicate rules.
-      let layer = `${generateName(priority, true)}.${propertyInfo.conditions[theme.conditions[condition] || condition] || generateArbitraryValueSelector(condition, true)}`;
-      return [new AtRule(rules, prelude, layer)];
+        // Otherwise, wrap the rule in the condition (e.g. @media).
+        // Top level layer is based on the priority of the rule, not the condition.
+        // Also group in a sub-layer based on the condition so that lightningcss can more effectively deduplicate rules.
+        let layer = `${generateName(priority, true)}.${propertyInfo.conditions[prelude] || generateArbitraryValueSelector(condition, true)}`;
+        return new AtRule(rules, prelude, layer);
+      });
     }
 
     hasConditions = true;
@@ -537,7 +542,11 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
           let className = classNamePrefix(key, cssProperty);
           if (conditions.size > 0) {
             for (let condition of conditions) {
-              className += propertyInfo.conditions[theme.conditions[condition] || condition] || generateArbitraryValueSelector(condition);
+              let prelude = theme.conditions[condition] || condition;
+              let preludes = Array.isArray(prelude) ? prelude : [prelude];
+              for (let prelude of preludes) {
+                className += propertyInfo.conditions[prelude] || generateArbitraryValueSelector(condition);
+              }
             }
           }
 
@@ -632,7 +641,8 @@ interface Rule {
   addPseudo(prelude: string): void,
   getStaticClassName(): string,
   toCSS(rulesByLayer: Map<string, string[]>, preludes?: string[], layer?: string): void,
-  toJS(allowedOverridesSet: Set<string>, indent?: string): string
+  toJS(allowedOverridesSet: Set<string>, indent?: string): string,
+  copy(): Rule
 }
 
 /** A CSS style rule. */
@@ -649,6 +659,12 @@ class StyleRule implements Rule {
     this.value = value;
   }
 
+  copy(): Rule {
+    let rule = new StyleRule(this.className, this.property, this.value);
+    rule.pseudos = this.pseudos;
+    return rule;
+  }
+
   addPseudo(prelude: string) {
     this.pseudos += prelude;
   }
@@ -696,11 +712,15 @@ class GroupRule implements Rule {
   rules: Rule[];
   layer: string | null;
 
-  constructor(rules: Rule[], layer?: string) {
+  constructor(rules: Rule[], layer?: string | null) {
     this.rules = rules;
     this.layer = layer ?? null;
   }
 
+  copy(): Rule {
+    return new GroupRule(this.rules.map(rule => rule.copy()), this.layer);
+  }
+
   addPseudo(prelude: string) {
     for (let rule of this.rules) {
       rule.addPseudo(prelude);
@@ -740,11 +760,15 @@ class GroupRule implements Rule {
 class AtRule extends GroupRule {
   prelude: string;
 
-  constructor(rules: Rule[], prelude: string, layer: string) {
+  constructor(rules: Rule[], prelude: string, layer: string | null) {
     super(rules, layer);
     this.prelude = prelude;
   }
 
+  copy(): Rule {
+    return new AtRule(this.rules.map(rule => rule.copy()), this.prelude, this.layer);
+  }
+
   toCSS(rulesByLayer: Map<string, string[]>, preludes: string[] = [], layer?: string): void {
     preludes.push(this.prelude);
     super.toCSS(rulesByLayer, preludes, layer);
@@ -761,6 +785,10 @@ class ConditionalRule extends GroupRule {
     this.condition = condition;
   }
 
+  copy(): Rule {
+    return new ConditionalRule(this.rules.map(rule => rule.copy()), this.condition);
+  }
+
   getStaticClassName(): string {
     throw new Error('Conditional rules cannot be compiled to a static class name. This is a bug.');
   }
diff --git a/packages/@react-spectrum/s2/style/types.ts b/packages/@react-spectrum/s2/style/types.ts
index fc711969d44..01fac79e9eb 100644
--- a/packages/@react-spectrum/s2/style/types.ts
+++ b/packages/@react-spectrum/s2/style/types.ts
@@ -38,7 +38,7 @@ export interface Theme {
     [name: string]: PropertyValueMap | Property<any> | string[]
   },
   conditions: {
-    [name: string]: string
+    [name: string]: string | string[]
   },
   shorthands: {
     [name: string]: string[] | ShorthandProperty<any>
diff --git a/packages/dev/parcel-transformer-s2-icon/IconTransformer.js b/packages/dev/parcel-transformer-s2-icon/IconTransformer.js
index 6eb319b2dc1..5082edffd5a 100644
--- a/packages/dev/parcel-transformer-s2-icon/IconTransformer.js
+++ b/packages/dev/parcel-transformer-s2-icon/IconTransformer.js
@@ -60,6 +60,8 @@ module.exports = new Transformer({
         },
         replaceAttrValues: {
           'var(--iconPrimary, #222)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`,
+          'var(--iconPrimary, #222222)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`,
+          'var(--iconPrimary, #292929)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`,
           'var(--spectrum-global-color-gray-800, #292929)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`
         },
         typescript: true,
diff --git a/packages/dev/s2-docs/.parcelrc-s2-docs b/packages/dev/s2-docs/.parcelrc-s2-docs
index 3eaac5aa769..26820460399 100644
--- a/packages/dev/s2-docs/.parcelrc-s2-docs
+++ b/packages/dev/s2-docs/.parcelrc-s2-docs
@@ -8,7 +8,8 @@
     "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"],
     "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"],
     "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
-    "url:*.svg": ["@parcel/transformer-raw"],
+    "url:*.svg": ["@parcel/transformer-svg"],
+    "data-url:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"],
     "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
     "starters/tailwind/**/*.css": ["@parcel/transformer-postcss", "..."],
diff --git a/packages/dev/s2-docs/assets/favicon.ico b/packages/dev/s2-docs/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..8f9fd41df6f5480b825eba71a5b01fba4c8e6594
GIT binary patch
literal 15086
zcmeHOX^0#}6n>LQ95vak>dnSz)XWNr2dG2@6^%^r_~8NGf})rN1r-f=U_4@WKupvh
zqN0L|h!+OM1N<ZLU^HUzAfTc`)MR3=>DQahXd;fuWZGBV(>>kO-PKh+v+>VXsD0Hn
z^}g>__4Qu$3qTI?uwVg@9Dz0S0nPw`k&*T>2iQb?oTT{u)~NuiXuydyhE!lNRnhO1
zd9IlJJGlb=TLF6tF!O?gR{4%%yzQG0)wTiboP))&0vzpwQVsK*So=9H*5v=p$6<K2
zrf$Z$np?nIGoQTOV7Ok(24-H>fv~5N?p7`REa!{ist#wMWtgXGa&M<~m=-{w2QaSC
z#LzznM(yMfr+2`t=QX)kc&fgfv2zwM{6`Z<XAa-{T*1aHoI#v_s`Hxv!gO<X5W;VB
z>veS;&HJ6<a-S#IVAd^qoMdBC8LXYDhowA+7Vw=Tv9uh&)8ZVeofV7Yb#nYh3s3Dn
z{@jBPNsbFNxi*CK;|{oaqc$eDJ_cE3cugD?80L$bT#I9ILY==B2-8%?HLS-&>Z%9B
z)&Oz*rOd-|9OmpeTnS!0r`4_t@%*s>=-sbd4D&V(4jT-7OqpV6*Rh1XUm4%9u2;tP
z26Eh>jL-1^u-b8+s*>dRt_FVm{h350o+0Yzm(H>EK@wDAKN~wwizDgX8b`qK6)kLL
zUKj_H+Q;z+4W6e{@x%aQoDt^V8n_$D*O{V(-91R}9;?Ib+VpOS$T7!d8n%n)!?Fm5
zYKQBa)HV2)rb2W4Q3G#}bG}kRB?CA<rOs!5EkUAd2N$Yik#EBAIVqmXkApamI1ecE
zGVAn2SY7|nsGX9CrSpS<A1T{!m@mXa4{V#M>7RGv!&pF#PQ$uX*?x|DU})E11f5%V
zYhci|6O0cdXqp}L{Nnh#GQVNo9wFf7Ps;inqw!$`P_u)X_p0-gt-->rMe4eA-x~N(
zP`xj0zMGQ`dzI}NGSBvT8NQ{g$0hNh516sR@g;RTtk)ctfgQu7)6mdMjt?`M?W+kN
zN8RsgfU_rH-lw5sLt1?38<VlY@e5^p+<RuD@_6A>Pjq2;t%f~&G{y>FXYoXvPrjho
ztJ|h&m#{6ZW{cypOqg3M73@i~H~hO!e3-@Npw5ii5oEu{GbMHH_2a{!Jz3h!e6xS&
zAVYkZ#pa-nct53I)8T6*X?)iBFlbMfHpg%KFb5GI=CaWDtiy3hAMC%gXFD<jXztZT
zub<xI!_2m~6~%KeYM0`5--r0HXZy$JlKst0bLdxm*y|j`{+RYTFhA{;wr~34`?0?L
zSN4s+XCQk1vD*1s-=BpaHCZNC;D25L+bQ%0PmpB*R;9Olg=8h)kyU_Vxd0H5C2?E_
zC;{up2Ea<7jEx42wt}(=qfHtK^v97cDA5oA8stb@NSo|}V%?R@m1QzV^p^{+tQ4ww
zaa<`>99hj*3gWn$FS|15%6hKMM1P%bRUyf+Vo)~Q$0SRl-;*tXQE}`^(T=U<oZIh7
zGRGMw7FOuQOOdBFLUj>UKTnHtxh6~33Jh4sJKx}hztKzO*27)MB6nk%6jN|R&%RpQ
zCo<m%@f)fBM<*`s#n<xQuLfQm;%E4%^xeyFwLd=H)-=D5<`T@CarP3nOZc0S@0Q$p
zUou|K-~BxzHE${=uFT}CwBzsY+%G3*KoXnB#)af-$oHc6(szR8k;<)mXze?3n)_Xa
z@<I~$8U7L)?_UJeFz}8<J%QIf&!Dc?HmoP47#x%1GB@`?@?EaI_v&#)q<si+%W@>r
z<0_8NNbGm_P9wbS4#T=mqARZ9XOmR@{z05i<C4#xbH4r2;YM1%qw2SCj%y|J_$~JO
z8L&=}+pQ6o@Y-b(e)@()K6!WH=95w#Zfe98&Ud9viFgLS9j15QA(%Lx;~%tUdT{}h
z?$7UsVQY?WLt1W=fe-p)RU52s(0r2f34-5}IDRRadm}NgFU=N?FDK(VIjeb?Id&3_
zk=!r%Y8p-A?`e5xhII*X%bpiD433Gk{_I7%w$>-azdL!2C}*$NlKxDSy_;|9m7eaK
zX*9nq-z7T!Rj)>Hvn*NT`1vR0BxkW@*gA^%_i5Nb`(6oop;`Eaj)7~``N@~-cQNo>
zWq#qyO+-=2sb%<c?EA4F_Au+_)HM)3+(eaQwjM_Q=W1z8C49KaqPzm`{()_mp_D7b
zT&fFm6<C-TwF>tas>Md3UaT|kUxSIBYOz_Ul$!ZUsg<vcw({lCR<1lsQ9x&_LTp!v
zDz+;`trpx`XSOYByNG=Xu`Mw|)!(Pk^HfMvp>SL(&7~GGlXu@b|7Rwcdri9O@A-Wo
zaxz3L#4(&3;Q77Wd0)mquQ`6`%pwv82K-iTUfy;8z1P_rZs*~0d?!4{yrQ!@cAkFQ
z?ElVir}KXE2F$`E>9^o>KI%6b_<*l3VzOX9mGJX|abKL@C)OzZ|3TKe^bwyo*>4Ny
z$+p1V!?`HL%_V*p$J0V%otUxfTSuDT#PF*C#yGWudD-cHk73>r(C@w`6#Nz^)~v-~
zsQVopABpJe_zg41j*i?@VlQU`ig>V;@1nZIt?SkSh`Mz>z!us`616V&hp9G-o!TtX
I6;8VU0XF!+T>t<8

literal 0
HcmV?d00001

diff --git a/packages/dev/s2-docs/pages/s2/home/Collapsing.tsx b/packages/dev/s2-docs/pages/s2/home/Collapsing.tsx
new file mode 100644
index 00000000000..c3553187103
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/Collapsing.tsx
@@ -0,0 +1,23 @@
+'use client';
+import { Tag, TagGroup } from "@react-spectrum/s2";
+import { Resizable } from "./DarkMode";
+import { useRef } from "react";
+import { style } from "@react-spectrum/s2/style" with {type: 'macro'};
+
+let items: any[] = [];
+for (let i = 0; i < 100; i++) {
+  items.push({id: i, name: 'Item ' + i});
+}
+
+export function Collapsing() {
+  let containerRef = useRef(null);
+  return (
+    <div ref={containerRef} className={style({position: 'relative'})}>
+      <Resizable containerRef={containerRef}>
+        <TagGroup aria-label="Collapsible tags" items={items} maxRows={2}>
+          {item => <Tag>{item.name}</Tag>}
+        </TagGroup>
+      </Resizable>
+    </div>
+  )
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/Colors.tsx b/packages/dev/s2-docs/pages/s2/home/Colors.tsx
new file mode 100644
index 00000000000..d1c04afae2c
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/Colors.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import {Fragment, useState} from "react";
+import {ListBox, ListBoxItem} from 'react-aria-components';
+import {style} from "@react-spectrum/s2/style" with {type: 'macro'};
+
+export function Colors({scales}: {scales: [string, string][][]}) {
+  let [current, setCurrent] = useState<string>('red-400');
+
+  let swatches = scales.map((scale, i) => {
+    return (
+      <Fragment key={i}>
+        {scale.map(([name, className]) => (
+          <ListBoxItem
+            key={String(name)}
+            className={String(className)}
+            aria-label={name as string}
+            onHoverStart={() => setCurrent(name)}
+            onFocus={() => setCurrent(name)}
+            onAction={() => setCurrent(name)} />
+        ))}
+      </Fragment>
+    )
+  });
+
+  return (
+    <>
+      <pre className={style({font: 'code-sm', marginTop: 0})}>
+        {current && <code style={{fontFamily: 'inherit', WebkitTextSizeAdjust: 'none'}}>
+          <span className={styles.function}>style</span>
+          {'({'}
+          <span className={styles.property}>color</span>
+          {': '}
+          <span className={styles.string}>{`'${current}'`}</span>
+          {'})'}
+        </code>}
+        {!current && <br />}
+      </pre>
+      <ListBox
+        aria-label="Colors"
+        layout="grid"
+        className={style({
+          display: 'grid',
+          gridTemplateColumns: 'repeat(16, minmax(16px, 24px))',
+          gap: 4
+        })}>
+        {swatches}
+      </ListBox>
+    </>
+  );
+}
+
+const styles = {
+  string: style({color: 'green-1000'}),
+  number: style({color: 'pink-1000'}),
+  property: style({color: 'indigo-1000'}),
+  function: style({color: 'red-1000'}),
+  variable: style({color: 'fuchsia-1000'})
+};
diff --git a/packages/dev/s2-docs/pages/s2/home/DarkMode.tsx b/packages/dev/s2-docs/pages/s2/home/DarkMode.tsx
new file mode 100644
index 00000000000..a3aecd1b0f9
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/DarkMode.tsx
@@ -0,0 +1,144 @@
+'use client';
+
+import { Provider } from "@react-spectrum/s2";
+import { focusRing, style } from "@react-spectrum/s2/style" with {type: 'macro'};
+import { useRef, useState } from "react";
+import { mergeProps, useFocusRing, useMove } from "react-aria";
+// @ts-ignore
+import Nubbin from '../../../../../@react-spectrum/s2/ui-icons/S2_MoveHorizontalTableWidget.svg';
+import { AppFrame, ExampleApp } from "./ExampleApp";
+
+export function DarkMode() {
+  let containerRef = useRef(null);
+  return (
+    <div
+      className={style({
+        position: 'relative',
+        borderRadius: 'lg',
+        boxShadow: 'elevated',
+        containerType: 'size',
+        height: 350,
+        margin: {
+          default: -16,
+          sm: 0
+        },
+        marginTop: 0,
+        borderTopStartRadius: {
+            default: 'none',
+            sm: 'lg'
+        },
+        '--app-frame-radius-top': {
+          type: 'borderTopStartRadius',
+          value: {
+            default: 'none',
+            sm: 'lg'
+          }
+        },
+        '--app-frame-shadow': {
+          type: 'boxShadow',
+          value: 'none'
+        }
+      })}
+      ref={containerRef}>
+      <Resizable containerRef={containerRef} isClipped>
+        <Provider colorScheme="light" styles={style({width: '100cqw', height: '100cqh'})}>
+          <AppFrame inert />
+        </Provider>
+      </Resizable>
+      <Provider colorScheme="dark" styles={style({position: 'absolute', inset: 0})}>
+        <AppFrame inert />
+      </Provider>
+    </div>
+  );
+}
+
+export function Resizable({children, containerRef, isClipped, minWidth = 0}: any) {
+  let [percent, setPercent] = useState(50);
+  let ref = useRef<HTMLDivElement | null>(null);
+  let pos = useRef(0);
+  let {focusProps, isFocusVisible} = useFocusRing();
+  let {moveProps} = useMove({
+    onMoveStart() {
+      pos.current = ref.current!.getBoundingClientRect().width;
+    },
+    onMove(e) {
+      let newPos = pos.current + (e.pointerType === 'keyboard' ? (e.deltaX || -e.deltaY) * 20 : e.deltaX);
+      let constrainedPos = Math.max(minWidth, newPos);
+      let percent = Math.max(0, Math.min(100, constrainedPos / containerRef.current!.getBoundingClientRect().width * 100));
+      setPercent(percent);
+      pos.current = newPos;
+    }
+  });
+
+  return (
+    <>
+      <div
+        ref={ref}
+        style={{
+          height: '100%',
+          minWidth: minWidth,
+          width: percent + '%',
+          overflow: isClipped ? 'clip' : undefined,
+          position: 'relative',
+          zIndex: isClipped ? 2 : undefined
+        }}>
+        {children}
+      </div>
+      <div
+        {...mergeProps(focusProps, moveProps)}
+        role="separator"
+        tabIndex={0}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={percent}
+        className={style({
+          position: 'absolute',
+          top: -12,
+          bottom: -12,
+          paddingX: 12,
+          marginX: -12,
+          cursor: 'col-resize',
+          outlineStyle: 'none',
+          touchAction: 'none'
+        })}
+        style={{
+          left: `max(${minWidth}px, ${percent}%)`,
+          zIndex: isClipped ? 4 : undefined,
+        }}>
+        <div
+          className={style({
+            width: 4,
+            height: 'full',
+            backgroundColor: {
+              default: 'pink-700',
+              forcedColors: 'Highlight'
+            },
+            borderRadius: '[4px]'
+          })} />
+        <div
+          className={style({
+            ...focusRing(),
+            borderRadius: 'full',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            translateY: '-50%',
+            translateX: '-50%',
+            fill: {
+              default: 'pink-700',
+              forcedColors: 'Highlight'
+            },
+            '--iconPrimary': {
+              type: 'fill',
+              value: {
+                default: 'white',
+                forcedColors: 'HighlightText'
+              }
+            }
+          })({isFocusVisible})}>
+          <Nubbin className={style({display: 'block', size: 24})} />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/ExampleApp.tsx b/packages/dev/s2-docs/pages/s2/home/ExampleApp.tsx
new file mode 100644
index 00000000000..a0e1e04687e
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/ExampleApp.tsx
@@ -0,0 +1,385 @@
+'use client';
+import HelpCircle from '@react-spectrum/s2/icons/HelpCircle';
+import Apps from '@react-spectrum/s2/icons/AppsAll';
+import Search from '@react-spectrum/s2/icons/Search';
+import { AdobeLogo } from '../../../src/icons/AdobeLogo';
+import { style } from "@react-spectrum/s2/style" with { type: 'macro' };
+import { Card, CardPreview, Image, Content, Text, ActionButton, SearchField, ActionButtonGroup, Provider } from '@react-spectrum/s2';
+import { useLocale } from 'react-aria';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { ExampleApp2, FilterContext } from './ExampleApp2';
+import { flushSync } from 'react-dom';
+// @ts-ignore
+import { Photos } from './app/Photos';
+import { Sidebar } from './app/Sidebar';
+import { AccountMenu } from './app/AccountMenu';
+import { HomeArrows, HomePage } from './app/Home';
+import { Arrow, Arrows } from './app/Arrows';
+import { Notifications } from './app/Notifications';
+import { Ideas, IdeasArrows } from './app/Ideas';
+
+const XS = `@container (min-width: ${480 / 16}rem)`;
+const SM = `@container (min-width: ${(640 / 16)}rem)`;
+const MD = `@container (min-width: ${(768 / 16)}rem)`;
+const LG = `@container (width > ${(1024 / 16)}rem)`;
+
+export function ExampleApp({showArrows}: {showArrows?: boolean} = {}) {
+  let [page, setPage] = useState<'photos' | 'home' | 'ideas'>('photos');
+  let [[detail, img] = [], setDetail] = useState<[any, HTMLImageElement] | []>([]);
+
+  return (
+    <ColorSchemeProvider>
+      <div data-container className={style({containerType: 'inline-size', height: 'full', position: 'relative'})}>
+        <AppFrame page={page} onPageChange={setPage} hidden={!!detail}>
+          {page === 'photos' && <Photos onAction={setDetail} />}
+          {page === 'home' && <HomePage />}
+          {page === 'ideas' && <Ideas />}
+        </AppFrame>
+        {!detail && page === 'home' && showArrows && <HomeArrows />}
+        {!detail && page === 'photos' && showArrows &&
+          <Arrows>
+            <Arrow textX={75} x1={120} x2={160} y={130} href="Button">Button</Arrow>
+            <Arrow textX={38} x1={120} x2={160} y={618} href="ActionButton">ActionButton</Arrow>
+            <Arrow textX={632} y={24} points="662,34 662,64" marker="markerEnd" href="SearchField">SearchField</Arrow>
+            <Arrow textX={1040} y={24} points="1064,34 1064,64" marker="markerEnd" href="Popover">Popover</Arrow>
+            <Arrow textX={1206} x1={1198} x2={1158} y={82} marker="markerEnd" href="Menu">Menu</Arrow>
+            <Arrow textX={1206} x1={1198} x2={1142} y={150} marker="markerEnd" href="SegmentedControl">SegmentedControl</Arrow>
+            <Arrow textX={1206} x1={1198} x2={1142} y={350} marker="markerEnd" href="CardView">CardView</Arrow>
+          </Arrows>
+        }
+        {!detail && page === 'ideas' && showArrows && <IdeasArrows />}
+        {detail && img &&
+          <Detail detail={detail} img={img} setDetail={setDetail} showArrows={showArrows} />
+        }
+      </div>
+    </ColorSchemeProvider>
+  );
+}
+
+function Detail({detail, img, setDetail, showArrows}: any) {
+  let [panel, setPanel] = useState('properties');
+  let [filters, setFilters] = useState({
+    brightness: 0,
+    contrast: 0,
+    saturation: 0
+  });
+
+  return (
+    <FilterContext value={{...filters, onChange: setFilters}}>
+      <ExampleApp2
+        panel={panel}
+        onPanelChange={setPanel}
+        onBack={() => {
+          if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            setDetail([]);
+            return;
+          }
+
+          document.startViewTransition(async () => {
+            flushSync(() => setDetail([]));
+            img.style.viewTransitionName = 'photo';
+          }).ready.then(() => {
+            img.style.viewTransitionName = '';
+          });
+        }}>
+        <div
+          className={style({
+            size: 'full',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'clip'
+          })}
+          style={{
+            containerType: 'size'
+          } as any}>
+          <Image
+            src={detail.urls.regular}
+            width={detail.width}
+            height={detail.height}
+            alt={detail.description || detail.alt_description}
+            UNSAFE_style={{
+              viewTransitionName: 'photo',
+              '--scale': `min(100cqw / ${detail.width}, 100cqh / ${detail.height})`,
+              width: `calc(${detail.width} * var(--scale))`,
+              height: `calc(${detail.height} * var(--scale))`,
+              filter: `${filters.brightness ? `brightness(${filters.brightness + 100}%)` : ''} ${filters.contrast ? `contrast(${filters.contrast + 100}%)` : ''} ${filters.saturation ? `saturate(${filters.saturation + 100}%)` : ''}`
+            } as any} />
+        </div>
+      </ExampleApp2>
+      {showArrows && 
+        <Arrows>
+          <Arrow textX={35} x1={120} x2={160} y={82} href="ActionButton">ActionButton</Arrow>
+          <Arrow textX={0} x1={120} x2={160} y={178} href="ToggleButtonGroup">ToggleButtonGroup</Arrow>
+          <Arrow textX={212} y={24} points="250,34 250,64" href="Breadcrumbs">Breadcrumbs</Arrow>
+          <Arrow textX={1040} y={24} points="1064,34 1064,64" marker="markerEnd" href="Popover">Popover</Arrow>
+          <Arrow textX={1206} x1={1198} x2={1158} y={82} href="Menu">Menu</Arrow>
+          {panel === 'layers' && <>
+            <Arrow textX={1206} x1={1198} x2={1050} y={168} href="TreeView">TreeView</Arrow>
+          </>}
+          {panel === 'properties' && <>
+            <Arrow textX={1206} x1={1198} x2={1100} y={168} href="Slider">Slider</Arrow>
+            <Arrow textX={1206} points="900,290 900,280 1198,280" marker="markerStart" y={280} href="ComboBox">ComboBox</Arrow>
+            <Arrow textX={1206} x1={1198} x2={1100} y={304} href="NumberField">NumberField</Arrow>
+            <Arrow textX={1206} x1={1198} x2={890} y={365} href="Checkbox">Checkbox</Arrow>
+          </>}
+          {panel === 'comments' && <>
+            <Arrow textX={1206} x1={1198} x2={1092} y={208} href="TextArea">TextArea</Arrow>
+            <Arrow textX={1206} x1={1198} x2={1092} y={248} href="Button">Button</Arrow>
+            <Arrow textX={1206} points="842,370 842,360 1198,360" marker="markerStart" y={360} href="Avatar">Avatar</Arrow>
+          </>}
+          {panel === 'assets' && <>
+            <Arrow textX={1206} x1={1198} x2={1050} y={320} href="Card">Card</Arrow>
+          </>}
+        </Arrows>
+      }
+    </FilterContext>
+  );
+}
+
+const DEFAULT_COLOR_SCHEME = {
+  colorScheme: null,
+  setColorScheme() {}
+};
+
+export const ColorSchemeContext = createContext<{colorScheme: 'light' | 'dark' | null, setColorScheme: (s: 'light' | 'dark' | null) => void}>(DEFAULT_COLOR_SCHEME);
+
+export function ColorSchemeProvider({children}: any) {
+  let [colorScheme, setColorScheme] = useState<'light' | 'dark' | null>(null);
+
+  useEffect(() => {
+    let m = matchMedia('(prefers-color-scheme: dark)');
+    let onChange = () => setColorScheme(null);
+    m.addEventListener('change', onChange);
+    return () => m.removeEventListener('change', onChange);
+  }, []);
+
+  let ctx = useContext(ColorSchemeContext);
+  if (ctx !== DEFAULT_COLOR_SCHEME) {
+    return children;
+  }
+
+  return (
+    <ColorSchemeContext value={{colorScheme, setColorScheme}}>
+      <Provider colorScheme={colorScheme || undefined} styles={style({display: 'contents'})}>
+        {children}
+      </Provider>
+    </ColorSchemeContext>
+  );
+}
+
+export function AppFrame({children, inert, hidden, page, onPageChange}: any) {
+  let {direction} = useLocale();
+
+  return (
+    <ColorSchemeProvider>
+      <div
+        inert={inert || hidden}
+        style={hidden ? {visibility: 'hidden', position: 'absolute'} : undefined}
+        className={style({
+          display: 'grid',
+          gridTemplateAreas: {
+            default: [
+              'toolbar',
+              'content'
+            ],
+            [SM]: [
+              'toolbar toolbar',
+              'sidebar content'
+            ]
+          },
+          gridTemplateRows: ['auto', '1fr'],
+          gridTemplateColumns: {
+            default: ['minmax(0, 1fr)'],
+            [SM]: ['auto', 'minmax(0, 1fr)']
+          },
+          height: 'full',
+          '--radius': {
+            type: 'borderTopStartRadius',
+            value: 'lg'
+          },
+          borderRadius: '--radius',
+          borderTopRadius: 'var(--app-frame-radius-top, var(--radius))',
+          overflow: 'clip',
+          boxSizing: 'border-box',
+          '--shadow': {
+            type: 'boxShadow',
+            value: 'elevated'
+          },
+          boxShadow: 'var(--app-frame-shadow, var(--shadow))',
+          backgroundColor: 'layer-1',
+          isolation: 'isolate'
+        })}>
+        <div
+          className={style({
+            gridArea: 'toolbar',
+            display: 'flex',
+            padding: 16,
+            paddingStart: 20,
+            boxSizing: 'border-box',
+            gap: 20,
+            alignItems: 'center',
+            width: 'full'
+          })}>
+          {/* <ActionButton isQuiet aria-label="Menu">
+            <MenuHamburger />
+          </ActionButton> */}
+          <AdobeLogo size={24} className={style({flexShrink: 0})} />
+          <span
+            className={style({
+              font: 'title',
+              display: {
+                default: 'none',
+                [SM]: 'inline'
+              }
+            })}>
+              {direction === 'rtl' ? 'تطبيقي' : 'My App'}
+          </span>
+          <div
+            className={style({
+              flexGrow: 1,
+              display: {
+                default: 'none',
+                [MD]: 'block'
+              }
+            })}>
+            <SearchField
+              aria-label={direction === 'rtl' ? 'البحث عن الصور' : 'Search photos'}
+              placeholder={direction === 'rtl' ? 'البحث عن الصور' : 'Search photos'}
+              styles={style({
+                maxWidth: 472,
+                minWidth: 272,
+                marginX: 'auto'
+              })} />
+          </div>
+          <div
+            className={style({
+              flexGrow: 1,
+              display: {
+                default: 'block',
+                [MD]: 'none'
+              }
+            })} />
+          <ActionButtonGroup>
+            <div
+              className={style({
+                display: {
+                  default: 'contents',
+                  [MD]: 'none'
+                }
+              })}>
+              <ActionButton isQuiet aria-label="Search">
+                <Search />
+              </ActionButton>
+            </div>
+            <div
+              className={style({
+                display: {
+                  default: 'none',
+                  [XS]: 'contents'
+                }
+              })}>
+              <ActionButton isQuiet aria-label="Help">
+                <HelpCircle />
+              </ActionButton>
+              <Notifications />
+              <ActionButton isQuiet aria-label="Apps">
+                <Apps />
+              </ActionButton>
+            </div>
+            <AccountMenu />
+          </ActionButtonGroup>
+        </div>
+        <Sidebar page={page} onPageChange={onPageChange} />
+        <div
+          data-content
+          className={style({
+            gridArea: 'content',
+            backgroundColor: 'base',
+            boxShadow: 'elevated',
+            borderRadius: {
+              default: 'none',
+              [SM]: 'xl'
+            },
+            borderBottomRadius: 'none',
+            marginEnd: {
+              default: 0,
+              [SM]: 16
+            },
+            padding: 20,
+            paddingBottom: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+            boxSizing: 'border-box',
+            overflow: 'auto'
+          })}>
+          {children || <DefaultContent />}
+        </div>
+      </div>
+    </ColorSchemeProvider>
+  );
+}
+
+const text = style({
+  color: 'transparent',
+  boxDecorationBreak: 'clone',
+  borderRadius: 'sm',
+  backgroundColor: 'gray-100'
+});
+
+function DefaultContent() {
+  let {direction} = useLocale();
+  return (
+    <>
+      <div className={style({font: 'heading', marginBottom: 8})}>{direction === 'rtl' ? 'مؤخرًا' : 'Recents'}</div>
+      <div
+        className={style({
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',
+          gridTemplateRows: 'min-content',
+          justifyContent: 'space-between',
+          gap: 16,
+          marginTop: 16
+        })}>
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+      </div>
+    </>
+  );
+}
+
+export function SkeletonCard() {
+  return (
+    <Card size="S" styles={style({width: 'full'})}>
+      <CardPreview>
+        <div
+          className={style({
+            width: 'full',
+            aspectRatio: '2/1',
+            backgroundColor: 'gray-100'
+          })} />
+      </CardPreview>
+      <Content>
+        <Text slot="title"><span className={text} inert>Placeholder title</span></Text>
+        <Text slot="description" UNSAFE_style={{WebkitTextFillColor: 'transparent'}}><span className={text} inert>This is placeholder content approximating the length of the real content to avoid layout shifting when the real content appears.</span></Text>
+      </Content>
+    </Card>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/ExampleApp2.tsx b/packages/dev/s2-docs/pages/s2/home/ExampleApp2.tsx
new file mode 100644
index 00000000000..3b4e653832a
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/ExampleApp2.tsx
@@ -0,0 +1,630 @@
+'use client';
+import Select from '@react-spectrum/s2/icons/Select';
+import ChevronLeft from '@react-spectrum/s2/icons/ChevronLeft';
+import Brush from '@react-spectrum/s2/icons/Brush';
+import Edit from '@react-spectrum/s2/icons/Edit';
+import Shapes from '@react-spectrum/s2/icons/Shapes';
+import HelpCircle from '@react-spectrum/s2/icons/HelpCircle';
+import Bell from '@react-spectrum/s2/icons/Bell';
+import LayersIcon from '@react-spectrum/s2/icons/Layers';
+import PropertiesIcon from '@react-spectrum/s2/icons/Properties';
+import CommentIcon from '@react-spectrum/s2/icons/Comment';
+import Asset from '@react-spectrum/s2/icons/Asset';
+import Apps from '@react-spectrum/s2/icons/AppsAll';
+import TextBold from '@react-spectrum/s2/icons/TextBold';
+import TextItalic from '@react-spectrum/s2/icons/TextItalic';
+import TextUnderline from '@react-spectrum/s2/icons/TextUnderline';
+import TextStrikeThrough from '@react-spectrum/s2/icons/TextStrikeThrough';
+import TextSubscript from '@react-spectrum/s2/icons/TextSubscript';
+import TextSuperscript from '@react-spectrum/s2/icons/TextSuperscript';
+import TextAlignLeft from '@react-spectrum/s2/icons/TextAlignLeft';
+import TextAlignCenter from '@react-spectrum/s2/icons/TextAlignCenter';
+import TextAlignRight from '@react-spectrum/s2/icons/TextAlignRight';
+import TextAlignJustify from '@react-spectrum/s2/icons/TextAlignJustify';
+import {size, style} from "@react-spectrum/s2/style" with {type: 'macro'};
+import {Card, CardPreview, Content, Text, ActionButton, Avatar, ToggleButton, Breadcrumbs, Breadcrumb, TextField, ToggleButtonGroup, Slider, Checkbox, TextArea, TreeView, TreeViewItem, TreeViewItemContent, ActionButtonGroup, Button, Form, ComboBoxItem, ComboBox, NumberField, Picker, PickerItem, Accordion, Disclosure, DisclosureHeader, DisclosureTitle, DisclosurePanel, Divider} from '@react-spectrum/s2';
+import {Key} from 'react-aria';
+import {createContext, useContext, useRef, useState} from 'react';
+import {ColorSchemeProvider} from './ExampleApp';
+import { useResizeObserver } from '@react-aria/utils';
+import { flushSync } from 'react-dom';
+import { Comment } from './Typography';
+import { HCMContext } from './HCM';
+import { AccountMenu } from './app/AccountMenu';
+import { Notifications } from './app/Notifications';
+
+export const FilterContext = createContext({
+  brightness: 52,
+  contrast: -47,
+  saturation: 28,
+  onChange: (v: any) => {}
+});
+
+const SM_BREAK = 640 / 16;
+const SM = `@container (width >= ${SM_BREAK}rem)`;
+
+export function ExampleApp2({onBack, children, showPanel, panel, onPanelChange}: any) {
+  let [selectedPanel, setSelectedPanel] = useState<Key | null>('properties');
+  let [transitioning, setTransitioning] = useState<Key | null>(null);
+  let displayPanel = panel || selectedPanel || transitioning;
+  let [isLarge, setLarge] = useState(true);
+
+  let setPanel = (panel: Key | null) => {
+    onPanelChange?.(panel);
+    setSelectedPanel(panel);
+  };
+
+  let ref = useRef<HTMLDivElement | null>(null);
+  useResizeObserver({
+    ref,
+    onResize() {
+      let width = ref.current!.getBoundingClientRect().width;
+      let rem = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+      let breakpoint = width / rem;
+      flushSync(() => {
+        let matches = breakpoint >= SM_BREAK;
+        setLarge(matches);
+        if (!showPanel && selectedPanel && isLarge && !matches) {
+          setPanel(null);
+        }
+      });
+    },
+  });
+
+  return (
+    <ColorSchemeProvider>
+      <div
+        ref={ref}
+        className={style({
+          display: 'grid',
+          gridTemplateAreas: {
+            default: [
+              'toolbar toolbar',
+              'content content',
+              'assets assets',
+              'panels panels'
+            ],
+            [SM]: [
+              'toolbar toolbar toolbar toolbar',
+              'sidebar content assets panels'
+            ]
+          },
+          gridTemplateRows: {
+            default: ['max-content', '1fr', 'auto', 'auto'],
+            [SM]: ['max-content', '1fr']
+          },
+          gridTemplateColumns: {
+            default: ['minmax(0, 1fr)', 'minmax(0, 1fr)'],
+            [SM]: ['auto', '1fr', 'auto', 'auto']
+          },
+          height: 'full',
+          '--radius': {
+            type: 'borderTopStartRadius',
+            value: 'lg'
+          },
+          borderRadius: '--radius',
+          borderTopRadius: 'var(--app-frame-radius-top, var(--radius))',
+          overflow: 'clip',
+          boxSizing: 'border-box',
+          boxShadow: 'elevated',
+          position: 'relative',
+          isolation: 'isolate'
+        })}>
+        <div
+          className={style({
+            gridArea: 'toolbar',
+            backgroundColor: {
+              default: 'layer-1',
+              forcedColors: 'Background'
+            },
+            display: 'flex',
+            gap: 16,
+            alignItems: 'center',
+            width: 'full',
+            height: 'full',
+            padding: 16,
+            boxSizing: 'border-box',
+            borderWidth: 0,
+            borderBottomWidth: 2,
+            borderColor: {
+              default: 'gray-200',
+              forcedColors: 'ButtonBorder'
+            },
+            borderStyle: 'solid',
+            maxWidth: 'full',
+            overflowX: 'auto'
+          })}>
+          <ActionButton isQuiet aria-label="Back" onPress={onBack}>
+            <ChevronLeft />
+          </ActionButton>
+          <div className={style({flexGrow: 1, overflow: 'auto'})}>
+            <Breadcrumbs onAction={onBack}>
+              <Breadcrumb>Your files</Breadcrumb>
+              <Breadcrumb>July final draft</Breadcrumb>
+            </Breadcrumbs>
+          </div>
+          <ActionButtonGroup>
+            <div
+              className={style({
+                display: {
+                  default: 'none',
+                  [SM]: 'contents'
+                }
+              })}>
+              <ActionButton isQuiet aria-label="Help">
+                <HelpCircle />
+              </ActionButton>
+              <Notifications />
+              <ActionButton isQuiet aria-label="Apps">
+                <Apps />
+              </ActionButton>
+            </div>
+            <AccountMenu />
+          </ActionButtonGroup>
+        </div>
+        <div
+          className={style({
+            gridArea: 'sidebar',
+            display: {
+              default: 'none',
+              [SM]: 'flex'
+            },
+            flexDirection: 'column',
+            gap: 8,
+            backgroundColor: {
+              default: 'layer-1',
+              forcedColors: 'Background'
+            },
+            padding: 16,
+            boxSizing: 'border-box',
+            borderWidth: 0,
+            borderTopWidth: {
+              default: 2,
+              [SM]: 0
+            },
+            borderEndWidth: {
+              default: 0,
+              [SM]: 2
+            },
+            borderColor: {
+              default: 'gray-200',
+              forcedColors: 'ButtonBorder'
+            },
+            borderStyle: 'solid',
+            overflow: 'auto'
+          })}>
+          <ToggleButtonGroup
+            aria-label="Tools"
+            selectionMode="single"
+            defaultSelectedKeys={['select']}
+            isQuiet
+            isEmphasized
+            orientation={isLarge ? 'vertical' : 'horizontal'}>
+            <ToggleButton id="select" aria-label="Select">
+              <Select />
+            </ToggleButton>
+            <ToggleButton id="brush" aria-label="Brush">
+              <Brush />
+            </ToggleButton>
+            <ToggleButton id="pencil" aria-label="Pencil">
+              <Edit />
+            </ToggleButton>
+            <ToggleButton id="shapes" aria-label="Shapes">
+              <Shapes />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+        <div
+          className={style({
+            gridArea: 'content',
+            backgroundColor: {
+              default: 'pasteboard',
+              forcedColors: 'Background'
+            },
+            contain: 'size'
+          })}>
+          {children}
+        </div>
+        <div
+          className={style({
+            gridArea: 'assets',
+            width: {
+              default: 'full',
+              [SM]: {
+                default: 300,
+                isCollapsed: 0
+              }
+            },
+            height: {
+              default: {
+                default: 200,
+                isCollapsed: 0
+              },
+              [SM]: 'auto'
+            },
+            transition: {
+              isTransitioning: 'all',
+              '@media (prefers-reduced-motion: reduce)': 'none'
+            },
+            transitionDuration: {
+              isTransitioning: 300
+            },
+            backgroundColor: {
+              default: 'layer-1',
+              forcedColors: 'Background'
+            },
+            '--s2-container-bg': {
+              type: 'backgroundColor',
+              value: {
+                default: 'layer-1',
+                forcedColors: 'Background'
+              }
+            },
+            position: {
+              default: 'absolute',
+              [SM]: 'static'
+            },
+            bottom: 0,
+            insetEnd: 0,
+            contain: 'size'
+          })({isCollapsed: !selectedPanel, isTransitioning: !!transitioning})}
+          onTransitionEnd={() => {
+            setTransitioning(null);
+          }}>
+          {displayPanel && 
+            <div
+              className={style({
+                width: {
+                  default: 'full',
+                  [SM]: 300
+                },
+                height: 'full',
+                overflow: 'auto',
+                boxSizing: 'border-box',
+                borderWidth: 0,
+                borderStartWidth: {
+                  default: 0,
+                  [SM]: 2
+                },
+                borderTopWidth: {
+                  default: 2,
+                  [SM]: 0
+                },
+                borderColor: {
+                  default: 'gray-200',
+                  forcedColors: 'ButtonBorder'
+                },
+                borderStyle: 'solid'
+              })}>
+              {displayPanel === 'layers' && <Layers />}
+              {displayPanel === 'properties' && <Properties />}
+              {displayPanel === 'comments' && <Comments />}
+              {displayPanel === 'assets' && <Assets />}
+            </div>
+          }
+        </div>
+        <div
+          className={style({
+            gridArea: 'panels',
+            zIndex: 1,
+            backgroundColor: {
+              default: 'layer-1',
+              forcedColors: 'Background'
+            },
+            padding: 16,
+            boxSizing: 'border-box',
+            borderWidth: 0,
+            borderStartWidth: {
+              default: 0,
+              [SM]: 2
+            },
+            borderTopWidth: {
+              default: 2,
+              [SM]: 0
+            },
+            borderColor: {
+              default: 'gray-200',
+              forcedColors: 'ButtonBorder'
+            },
+            borderStyle: 'solid',
+            overflow: 'auto'
+          })}>
+          <ToggleButtonGroup
+            aria-label="Panels"
+            orientation={isLarge ? 'vertical' : 'horizontal'}
+            styles={style({marginX: 'auto', width: 'fit'})}
+            isQuiet
+            selectedKeys={selectedPanel ? [selectedPanel] : []}
+            onSelectionChange={keys => {
+              let key = [...keys][0];
+              setPanel(key as string);
+              if (key == null || displayPanel == null) {
+                setTransitioning(key || displayPanel);
+              }
+            }}>
+            <ToggleButton id="layers" aria-label="Layers">
+              <LayersIcon />
+            </ToggleButton>
+            <ToggleButton id="properties" aria-label="Properties">
+              <PropertiesIcon />
+            </ToggleButton>
+            <ToggleButton id="comments" aria-label="Comments">
+              <CommentIcon />
+            </ToggleButton>
+            <ToggleButton id="assets" aria-label="Assets">
+              <Asset />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+      </div>
+    </ColorSchemeProvider>
+  );
+}
+
+const text = style({
+  color: 'transparent',
+  boxDecorationBreak: 'clone',
+  borderRadius: 'sm',
+  backgroundColor: 'gray-100'
+});
+
+function SkeletonCard() {
+  return (
+    <Card size="XS" styles={style({width: 'full'})}>
+      <CardPreview>
+        <div
+          className={style({
+            width: 'full',
+            aspectRatio: '2/1',
+            backgroundColor: 'gray-100'
+          })} />
+      </CardPreview>
+      <Content>
+        <Text slot="title"><span className={text}>Placeholder title</span></Text>
+        <Text slot="description" UNSAFE_style={{WebkitTextFillColor: 'transparent'}}><span className={text}>Testing</span></Text>
+      </Content>
+    </Card>
+  );
+}
+
+function Layers() {
+  return (
+    <TreeView aria-label="Layers" styles={style({height: 'full'})} defaultExpandedKeys={['g1', 'g2']}>
+      <Layer name="Group 1" id="g1">
+        <Layer name="Layer 1" />
+        <Layer name="Layer 2" />
+        <Layer name="Layer 3" />
+      </Layer>
+      <Layer name="Group 2" id="g2">
+        <Layer name="Layer 1" />
+        <Layer name="Layer 2" />
+        <Layer name="Layer 3" />
+      </Layer>
+    </TreeView>
+  )
+}
+
+function Layer({id, name, children}: any) {
+  return (
+    <TreeViewItem id={id} textValue={name}>
+      <TreeViewItemContent>{name}</TreeViewItemContent>
+      {children}
+    </TreeViewItem>
+  );
+}
+
+function Properties() {
+  let {brightness, contrast, saturation, onChange} = useContext(FilterContext);
+  let isHCM = 'style' in useContext(HCMContext);
+  return (
+    <div role="group" aria-label="Properties" className={style({display: 'flex', flexDirection: 'column', gap: 8, padding: 8})}>
+      <Accordion density="compact" isQuiet allowsMultipleExpanded defaultExpandedKeys={['filters', 'text']}>
+        <Disclosure id="filters">
+          <DisclosureTitle>Filters</DisclosureTitle>
+          <DisclosurePanel>
+            <Form labelPosition="side" size="S" UNSAFE_style={{gap: 8}}>
+              <Slider label="Brightness" minValue={-100} maxValue={100} fillOffset={0} formatOptions={{signDisplay: 'exceptZero'}} defaultValue={brightness} onChange={brightness => onChange({brightness, contrast, saturation})} />
+              <Slider label="Contrast" minValue={-100} maxValue={100} fillOffset={0} formatOptions={{signDisplay: 'exceptZero'}} defaultValue={contrast} onChange={contrast => onChange({brightness, contrast, saturation})} />
+              <Slider label="Saturation" minValue={-100} maxValue={100} fillOffset={0} formatOptions={{signDisplay: 'exceptZero'}} defaultValue={saturation} onChange={saturation => onChange({brightness, contrast, saturation})} />
+            </Form>
+          </DisclosurePanel>
+        </Disclosure>
+        <Disclosure id="text">
+          <DisclosureTitle>Text</DisclosureTitle>
+          <DisclosurePanel>
+            <Form size="S" UNSAFE_style={{gap: 8}}>
+              <div className={style({display: 'flex', gap: 8, alignItems: 'center', gridColumnStart: 'span 2'})}>
+              <ComboBox aria-label="Font family" defaultSelectedKey={2} styles={style({ flexGrow: 2 })}>
+                <ComboBoxItem>Open Sans</ComboBoxItem>
+                <ComboBoxItem id={2}>Adobe Clean</ComboBoxItem>
+                <ComboBoxItem>Helvetica</ComboBoxItem>
+                <ComboBoxItem>Times New Roman</ComboBoxItem>
+                <ComboBoxItem>Comic Sans</ComboBoxItem>
+              </ComboBox>
+              <NumberField aria-label="Font size" defaultValue={14} styles={style({ flexGrow: 1 })} />
+              </div>
+              <div
+                className={style({
+                  display: 'flex',
+                  gap: 4,
+                  justifyContent: {
+                    default: 'start',
+                    [SM]: 'space-between'
+                  },
+                  alignItems: 'center',
+                  gridColumnStart: 'span 2'
+                })}>
+                <ToggleButtonGroup
+                  aria-label="Font style"
+                  density="compact"
+                  size="S"
+                  selectionMode="multiple"
+                  defaultSelectedKeys={['bold']}>
+                  <ToggleButton id="bold" aria-label="Bold">
+                    <TextBold />
+                  </ToggleButton>
+                  <ToggleButton id="italic" aria-label="Italic">
+                    <TextItalic />
+                  </ToggleButton>
+                  <ToggleButton id="underline" aria-label="Underline">
+                    <TextUnderline />
+                  </ToggleButton>
+                  <ToggleButton id="strike" aria-label="Strikethrough">
+                    <TextStrikeThrough />
+                  </ToggleButton>
+                </ToggleButtonGroup>
+                <ToggleButtonGroup
+                  aria-label="Font style"
+                  density="compact"
+                  size="S"
+                  selectionMode="single">
+                  <ToggleButton id="sub" aria-label="Subscript">
+                    <TextSubscript />
+                  </ToggleButton>
+                  <ToggleButton id="super" aria-label="Superscript">
+                    <TextSuperscript />
+                  </ToggleButton>
+                </ToggleButtonGroup>
+                <ToggleButtonGroup
+                  aria-label="Text align"
+                  density="compact"
+                  size="S"
+                  selectionMode="single"
+                  defaultSelectedKeys={['left']}
+                  disallowEmptySelection>
+                  <ToggleButton id="left" aria-label="Left">
+                    <TextAlignLeft />
+                  </ToggleButton>
+                  <ToggleButton id="center" aria-label="Center">
+                    <TextAlignCenter />
+                  </ToggleButton>
+                  <ToggleButton id="right" aria-label="Right">
+                    <TextAlignRight />
+                  </ToggleButton>
+                  <ToggleButton id="justify" aria-label="Justify">
+                    <TextAlignJustify />
+                  </ToggleButton>
+                </ToggleButtonGroup>
+              </div>
+              <Checkbox defaultSelected isDisabled={isHCM}>Wrap</Checkbox>
+            </Form>
+          </DisclosurePanel>
+        </Disclosure>
+      </Accordion>
+    </div>
+  );
+}
+
+function Comments() {
+  let [comments, setComments] = useState([
+    {
+      author: 'Nikolas Gibbons',
+      avatar: 'https://www.untitledui.com/images/avatars/nikolas-gibbons',
+      date: '2 hours ago',
+      body: 'Thanks for the feedback!'
+    },
+    {
+      author: 'Adriana Sullivan',
+      avatar: 'https://www.untitledui.com/images/avatars/adriana-sullivan',
+      date: 'July 14',
+      body: 'Transitions are smooth! Could we speed them up just a bit?'
+    },
+    {
+      author: 'Frank Whitaker',
+      avatar: 'https://www.untitledui.com/images/avatars/frank-whitaker?',
+      date: 'July 13',
+      body: 'Love the direction. Could we simplify the header a bit more?'
+    }
+  ]);
+
+  return (
+    <div role="group" aria-label="Comments" className={style({display: 'flex', flexDirection: 'column', gap: 16, padding: 16, height: 'full', boxSizing: 'border-box', contain: 'size'})}>
+      <h3 className={style({font: 'title-lg', color: {default: 'title', forcedColors: 'ButtonText'}, marginY: 0})}>Comments</h3>
+      <form
+        className={style({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+          alignItems: 'end'
+        })}
+        onKeyDown={e => {
+          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+            e.currentTarget.requestSubmit();
+          }
+        }}
+        action={formData => {
+          setComments([
+            {
+              author: 'You',
+              avatar: 'https://i.imgur.com/xIe7Wlb.png',
+              date: 'Just now',
+              body: formData.get('comment')! as string
+            },
+            ...comments
+          ]);
+        }}>
+        <TextArea
+          aria-label="Add a comment"
+          placeholder="Add a comment"
+          name="comment"
+          isRequired
+          styles={style({width: 'full'})} />
+        <Button type="submit" size="S" variant="accent">Post</Button>
+      </form>
+      <div
+        className={style({
+          display: 'flex',
+          flexDirection: 'column',
+          rowGap: 20,
+          marginX: -16,
+          marginBottom: -16,
+          padding: 16,
+          overflow: 'auto',
+          flexGrow: 1,
+          minHeight: 0
+        })}>
+        {comments.map((comment, i) => (
+          <Comment key={i} {...comment} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function Assets() {
+  return (
+    <div role="group" aria-label="Assets" className={style({padding: 16, boxSizing: 'border-box', height: 'full', display: 'flex', flexDirection: 'column'})}>
+      <div className={style({font: 'title-lg'})}>Assets</div>
+      <div
+        className={style({
+          display: 'grid',
+          gridTemplateColumns: `repeat(auto-fit, minmax(${size(96)}, 1fr))`,
+          gridAutoRows: 'max-content',
+          justifyContent: 'space-between',
+          gap: 12,
+          margin: -16,
+          marginTop: 0,
+          padding: 16,
+          flexGrow: 1,
+          minHeight: 0,
+          overflow: 'auto'
+        })}>
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/HCM.tsx b/packages/dev/s2-docs/pages/s2/home/HCM.tsx
new file mode 100644
index 00000000000..2b9373e08af
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/HCM.tsx
@@ -0,0 +1,56 @@
+'use client';
+import { style } from "@react-spectrum/s2/style" with {type: 'macro'};
+import { ExampleApp2 } from './ExampleApp2';
+import { createContext } from "react";
+
+const hcm = {
+  '--hcm-highlight': 'rgb(26, 235, 255)',
+  '--hcm-highlighttext': 'black',
+  '--hcm-buttonface': 'black',
+  '--hcm-buttontext': 'white',
+  '--hcm-buttonborder': 'white',
+  '--hcm-graytext': 'rgb(63, 242, 63)',
+  '--hcm-field': 'black',
+  '--hcm-background': 'black',
+  '--hcm-linktext': 'yellow',
+  '--hcm-mark': 'yellow'
+};
+
+export const HCMContext = createContext<object>({});
+
+export function HCM() {
+  return (
+    <div
+      data-hcm
+      style={hcm as any}
+      className={style({
+        boxSizing: 'border-box',
+        height: 350,
+        margin: {
+          default: -16,
+          sm: 0
+        },
+        marginTop: 16,
+        marginStart: {
+          default: -16,
+          sm: -96
+        },
+        display: 'flex',
+        justifyContent: 'end',
+        '--app-frame-radius-top': {
+          type: 'borderTopStartRadius',
+          value: {
+            default: 'none',
+            sm: 'lg'
+          }
+        },
+        forcedColorAdjust: 'none'
+      })}>
+      <div className={style({flexShrink: 0, width: {default: '100%', sm: '200%'}, containerType: 'inline-size'})}>
+        <HCMContext value={{'data-hcm': true, style: hcm}}>
+          <ExampleApp2 showPanel />
+        </HCMContext>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/Home.tsx b/packages/dev/s2-docs/pages/s2/home/Home.tsx
new file mode 100644
index 00000000000..cc4a61fcc19
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/Home.tsx
@@ -0,0 +1,585 @@
+import { size, style } from "@react-spectrum/s2/style" with {type: 'macro'};
+import { getColorScale } from "../../../src/color.macro" with {type: 'macro'};
+import { Code } from "../../../src/Code";
+import { Pre } from "../../../src/CodePlatter";
+import { ObjectStyles } from "./ObjectStyles";
+import { DarkMode } from "./DarkMode";
+import { AppFrame, ExampleApp } from "./ExampleApp";
+import { Divider, Link, LinkButton, Provider, Tab, TabList, TabPanel, Tabs } from "@react-spectrum/s2";
+import { Mobile } from "./Mobile";
+import { Rems } from "./Rems";
+// import { PressAnimation } from "./Press";
+import { HCM } from "./HCM";
+import Lightbulb from '@react-spectrum/s2/illustrations/gradient/generic2/Lightbulb';
+import Phone from '@react-spectrum/s2/illustrations/gradient/generic2/Phone';
+import Translate from '@react-spectrum/s2/illustrations/gradient/generic2/Translate';
+import Animation from '@react-spectrum/s2/illustrations/gradient/generic2/Animation';
+import Accessibility from '@react-spectrum/s2/illustrations/gradient/generic2/Accessibility';
+import TextIcon from '@react-spectrum/s2/illustrations/gradient/generic2/Text';
+import Interaction from '@react-spectrum/s2/illustrations/gradient/generic2/Interaction';
+// import Ruler from '@react-spectrum/s2/illustrations/gradient/generic2/Ruler';
+import Shapes from '@react-spectrum/s2/illustrations/gradient/generic2/Shapes';
+import Color from '@react-spectrum/s2/illustrations/gradient/generic2/Color';
+import CodeBrackets from '@react-spectrum/s2/illustrations/gradient/generic2/CodeBrackets';
+// import Cursor from '@react-spectrum/s2/illustrations/gradient/generic2/Cursor';
+import IllustrationIcon from '@react-spectrum/s2/illustrations/gradient/generic2/Illustration';
+import Sparkles from '@react-spectrum/s2/illustrations/gradient/generic2/Sparkles';
+import Server from '@react-spectrum/s2/illustrations/gradient/generic2/Server';
+import SpeedFast from '@react-spectrum/s2/illustrations/gradient/generic2/SpeedFast';
+import VectorDraw from '@react-spectrum/s2/illustrations/gradient/generic2/VectorDraw';
+import Layers from '@react-spectrum/s2/illustrations/gradient/generic2/Layers';
+import { Icons, Illustrations } from "./Icons";
+import { Typography } from "./Typography";
+import { States } from "./States";
+import { useId } from "react";
+import { Responsive } from "./Responsive";
+import { mergeStyles } from "../../../../../@react-spectrum/s2/style/runtime";
+import { ReduceMotion } from "./ReduceMotion";
+import { Colors } from "./Colors";
+import '../../../src/footer.css';
+// @ts-ignore
+import bg from 'data-url:./bg.svg';
+// import { SubmenuAnimation } from "./SubmenuAnimation";
+import { keyframes } from "../../../../../@react-spectrum/s2/style/style-macro" with {type: 'macro'};
+import { getBaseUrl } from "../../../src/pageUtils";
+
+const container = style({
+  backgroundColor: 'layer-2/80',
+  boxShadow: 'elevated',
+  borderRadius: 'xl',
+  padding: {
+    default: 16,
+    sm: 32
+  },
+  position: 'relative',
+  overflow: 'clip',
+  display: 'flex',
+  flexDirection: 'column'
+});
+
+// Animated heading sliding in from the top.
+const swapWrapper = style({
+  display: 'inline-block',
+  position: 'relative',
+  height: '[1em]',
+  overflow: 'hidden',
+  verticalAlign: 'baseline',
+  whiteSpace: 'nowrap',
+  lineHeight: '[1em]',
+  marginEnd: 12
+});
+
+const swapItem = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0
+});
+
+// Track that scrolls vertically through all the items.
+const slideTrack = keyframes(`
+  0% {
+    transform: translateY(0%);
+  }
+  15% {
+    transform: translateY(0%);
+  }
+  16% {
+    transform: translateY(-16.666%);
+  }
+  31% {
+    transform: translateY(-16.666%);
+  }
+  32% {
+    transform: translateY(-33.333%);
+  }
+  47% {
+    transform: translateY(-33.333%);
+  }
+  48% {
+    transform: translateY(-50%);
+  }
+  63% {
+    transform: translateY(-50%);
+  }
+  64% {
+    transform: translateY(-66.666%);
+  }
+  79% {
+    transform: translateY(-66.666%);
+  }
+  80% {
+    transform: translateY(-83.333%);
+  }
+  95% {
+    transform: translateY(-83.333%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+`);
+
+const swapTrack = style({
+  animation: slideTrack,
+  animationDuration: 15000,
+  animationTimingFunction: 'linear',
+  animationIterationCount: 'infinite',
+  display: 'flex',
+  flexDirection: 'column',
+  whiteSpace: 'nowrap'
+});
+
+// for measuring longest word
+const swapSizer = style({
+  opacity: 0,
+  whiteSpace: 'nowrap'
+});
+
+
+const swapRow = style({
+  display: 'block',
+  height: '[1em]',
+  lineHeight: '[1em]'
+});
+
+const slidePolish = keyframes(`
+  0%, 45% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(100%);
+  }
+  50.01%, 95% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+`);
+
+const slideSpeed = keyframes(`
+  0%, 45% {
+    transform: translateY(-100%);
+  }
+  50% {
+    transform: translateY(0%);
+  }
+  95% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+`);
+
+const swapPolish = style({
+  animation: slidePolish,
+  animationDuration: 5000,
+  animationTimingFunction: 'in-out',
+  animationIterationCount: 'infinite'
+});
+
+const swapSpeed = style({
+  animation: slideSpeed,
+  animationDuration: 5000,
+  animationTimingFunction: 'in-out',
+  animationIterationCount: 'infinite'
+});
+
+export function Home() {
+  let headingId = useId();
+  return (
+    <body
+      className={style({
+        margin: 0
+      })}
+      style={{
+        backgroundImage: `url(${bg}), linear-gradient(0deg,#7154fa,#eb1000)`,
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100%'
+      }}>
+      <nav
+        className={style({
+          marginX: 'auto',
+          paddingY: 16,
+          paddingX: {default: 16, sm: 40},
+          maxWidth: 1600,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between'
+        })}>
+        <Link href="." staticColor="white">
+          <span className={style({font: 'title', color: 'white', display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none'})}>
+            <svg viewBox="0 0 30 26" fill="white" aria-label="Adobe" height="22">
+              <polygon points="19,0 30,0 30,26" />
+              <polygon points="11.1,0 0,0 0,26" />
+              <polygon points="15,9.6 22.1,26 17.5,26 15.4,20.8 10.2,20.8" />
+            </svg>
+            <span>React Spectrum</span>
+          </span>
+        </Link>
+        <div className={style({display: 'flex', alignItems: 'center', columnGap: 16})}>
+          <div className={style({display: {default: 'none', sm: 'contents'}})}>
+            <Link staticColor="white" isQuiet isStandalone href={getBaseUrl('react-aria') + '/blog/'}>Blog</Link>
+            <Link staticColor="white" isQuiet isStandalone href="../releases/">Releases</Link>
+            <Link staticColor="white" isQuiet isStandalone href={getBaseUrl('react-aria') + '/'}>React Aria</Link>
+            <Link staticColor="white" isQuiet isStandalone href={getBaseUrl('react-aria') + '/internationalized/date/'}>Internationalized</Link>
+          </div>
+          <Link staticColor="white" isQuiet isStandalone href="https://github.com/adobe/react-spectrum" target="_blank" aria-label="GitHub">
+            <svg aria-hidden="true" viewBox="0 0 16 16" height="22" fill="currentColor">
+              <path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+            </svg>
+          </Link>
+          <Link staticColor="white" isQuiet isStandalone href="https://npmjs.com/@react-spectrum/s2" target="_blank" aria-label="NPM">
+            <svg viewBox="0 0 27.23 27.23" aria-hidden="true" height="22" fill="currentColor">
+              <rect width="27.23" height="27.23" rx="2" mask="url(#npm-mask)" />
+              <mask id="npm-mask">
+                <rect width="27.23" height="27.23" rx="2" fill="white" />
+                <polygon fill="black" points="5.8 21.75 13.66 21.75 13.67 9.98 17.59 9.98 17.58 21.76 21.51 21.76 21.52 6.06 5.82 6.04 5.8 21.75" />
+              </mask>
+            </svg>
+          </Link>
+        </div>
+      </nav>
+      <header aria-labelledby={headingId} className={style({marginX: 'auto', paddingX: {default: 16, sm: 40}, paddingY: 96, maxWidth: 1024})}>
+        <h1 id={headingId} className={style({font: 'heading-3xl', marginY: 0, color: 'white'})}>
+          <span className={swapWrapper} >Build apps </span>
+          <span className={swapWrapper}>
+            <span className={swapTrack}>
+              <span className={swapRow}>with polish</span>
+              <span className={swapRow}>with speed</span>
+              <span className={swapRow}>with ease</span>
+              <span className={swapRow}>with accessibility</span>
+              <span className={swapRow}>with consistency</span>
+              <span className={swapRow}>with React Spectrum</span>
+            </span>
+            <span className={swapSizer} aria-hidden>with React Spectrum</span>
+          </span>
+        </h1>
+        <p className={style({font: 'body-3xl', marginY: 0, color: 'white'})}>React Spectrum gives you the power to build high quality, accessible UI with the cohesive look and feel of Adobe. </p>
+        <div className={style({display: 'flex', gap: 16, flexDirection: {default: 'column', sm: 'row'}, marginTop: 32, marginBottom: 56})}>
+          <LinkButton size="XL" staticColor="white" href="getting-started">Get started</LinkButton>
+          <LinkButton size="XL" staticColor="white" variant="secondary" href="react-spectrum">Explore components</LinkButton>
+        </div>
+        <section aria-label="Example app" className={style({height: 'calc(100svh - 24px)', maxHeight: size(600)})}>
+          <ExampleApp showArrows />
+        </section>
+      </header>
+      <main className={style({marginX: 'auto', paddingX: {default: 16, sm: 40}, maxWidth: 1600})}>
+        <Section
+          title="Build Once. Adapt Everywhere."
+          description="React Spectrum makes interfaces more accessible, flexible, and easier to maintain, while giving users a seamless experience no matter where they are.">
+          <Feature
+            title="Dark mode"
+            description="Deliver effortless dark and light mode support with no extra styling needed."
+            illustration={<Lightbulb />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 4'}})}>
+            <DarkMode />
+          </Feature>
+          <Feature
+            title="Touch friendly"
+            description="Components automatically scale and adapt for touch or pointer input, ensuring a smooth experience on any device."
+            illustration={<Interaction />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 2'}})}>
+            <Mobile />
+          </Feature>
+          <Feature
+            title="Global ready by default"
+            description="Automatically mirrors component layouts, and formats text for different languages, currencies, dates, and locales."
+            illustration={<Translate />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3'}})}>
+            <Provider
+              locale="ar-AE"
+              styles={style({
+                height: 300,
+                containerType: 'inline-size',
+                margin: {
+                  default: -16,
+                  sm: 0
+                },
+                marginTop: 0,
+                '--app-frame-radius-top': {
+                  type: 'borderTopStartRadius',
+                  value: {
+                    default: 'none',
+                    sm: 'lg'
+                  }
+                }
+              })}>
+              <AppFrame />
+            </Provider>
+          </Feature>
+          <Feature
+            title="Reduce motion options"
+            description="Component animations and transitions automatically adjust for users who prefer less motion, keeping your UI comfortable and inclusive."
+            illustration={<Animation />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3'}})}>
+            <ReduceMotion />
+          </Feature>
+          {/* <Feature
+            title="Space aware"
+            description="TagGroup with collapsing"
+            illustration={<Ruler />}
+            style={{gridColumn: 'span 6'}}>
+            <Collapsing />
+          </Feature> */}
+          <Feature
+            title="High contrast mode"
+            description="Support for high contrast mode included, ensuring a clear and readable experience based on preference."
+            illustration={<Accessibility />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 2'}})}>
+            <HCM />
+          </Feature>
+          <Feature
+            title="Adaptive font sizes"
+            description="Fonts scale automatically according to user preferences and screen size, fully compatible with rem-based typography, allowing your text to scale naturally."
+            illustration={<TextIcon />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 4'}})}>
+            <Rems />
+          </Feature>
+        </Section>
+        {/* We will add this section back after we have a few more things (e.g. dnd) */}
+        {/* <Section title="Motion that makes sense"
+          description="Every interaction — from button presses to drag-and-drop — is polished, fast, and consistent across platforms. ">
+          <Feature
+            title="Press scaling"
+            description="Components respond instantly to user input, with smooth animations and transitions that feel natural and without extra code."
+            illustration={<Interaction />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 2'}})}>
+            <PressAnimation />
+          </Feature>
+          <Feature
+            title="Submenus"
+            description="Description"
+            illustration={<Cursor />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 4'}})}>
+            <SubmenuAnimation />
+          </Feature>
+        </Section> */}
+        <Section title="Everything you need to build beautiful apps" description="Bring your interface to life with expressive icons, Spectrum colors, and rich illustrations. Every detail works together to make your product look polished and on-brand.">
+          <Feature
+            title="Icons"
+            description="Spectrum icon support for your product. Use the icon search to simplify finding the right icon the right experience."
+            illustration={<VectorDraw />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3'}})}>
+            <Icons />
+          </Feature>
+          <Feature
+            title="Illustrations"
+            description="Rich illustrations that help bring your interface to life. Use the illustration search to find the right illustration for your product."
+            illustration={<IllustrationIcon />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3'}})}>
+            <Illustrations />
+          </Feature>
+        </Section>
+        <Section
+          title={<>Rapidly style custom components with Style Macros</>}
+          description={<>Easily use Spectrum tokens like colors, spacing, and typography in your own custom components with style macros. Styles are <strong>colocated</strong> with your component code, allowing you to <strong>develop more efficiently</strong> and <strong>refactor with confidence</strong> – no more CSS conflicts or specificity issues. Style macros generate atomic CSS at build time, so you get tiny bundle sizes and fast runtime performance.</>}>
+          <Feature
+            title="Colors"
+            description="Access the full range of Spectrum color tokens when you need them."
+            illustration={<Color />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 2'}})}>
+            <ColorScales />
+          </Feature>
+          <Feature
+            title="Typography"
+            description="Use the predefined type styles to draw attention and create consistent hierarchy."
+            illustration={<TextIcon />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 2'}})}>
+            <Typography />
+          </Feature>
+          <Feature
+            title="Object styles"
+            description="Follow Spectrum's foundational design principles using object style tokens."
+            illustration={<Shapes />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 2'}})}>
+            <ObjectStyles />
+          </Feature>
+          <Feature
+            title="States and variants"
+            description="Define the states needed for your custom components, all in one place using Spectrum tokens."
+            illustration={<Layers />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3'}})}>
+            <States />
+          </Feature>
+          <Feature
+            title="Reusable utilities"
+            description="Macros are functions that can be used to create reusable style utilities for your own components."
+            illustration={<CodeBrackets />}
+            styles={style({gridColumnStart: {default: 'span 6', xl: 'span 3'}})}>
+            <div className={style({display: 'flex', flexDirection: 'column', gap: 16, flexGrow: 1, justifyContent: 'space-between'})}>
+            <div
+              className={style({
+                backgroundColor: 'layer-2',
+                boxShadow: 'elevated',
+                padding: {
+                  default: 16,
+                  sm: 24
+                },
+                borderRadius: {
+                  default: 'none',
+                  sm: 'lg'
+                },
+                overflow: 'auto',
+                marginX: {
+                  default: -16,
+                  sm: 0
+                }
+              })}>
+              <h4 className={style({font: 'title', marginTop: 0})}>Button.tsx</h4>
+              <Pre><Code lang="tsx">{`import {style, focusRing} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {hstack} from './style-utils' with {type: 'macro'};
+            
+const buttonStyle = style({
+  ...focusRing(),
+  ...hstack(4)
+});`}</Code></Pre>
+            </div>
+            <div
+              className={style({
+                backgroundColor: 'layer-2',
+                boxShadow: 'elevated',
+                padding: {
+                  default: 16,
+                  sm: 24
+                },
+                borderRadius: {
+                  default: 'none',
+                  sm: 'lg'
+                },
+                overflow: 'auto',
+                margin: {
+                  default: -16,
+                  sm: 0
+                },
+                marginTop: 0
+              })}>
+              <h4 className={style({font: 'title', marginTop: 0})}>style-utils.ts</h4>
+              <Pre><Code lang="tsx">{`export function hstack(gap: number) {
+  return {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap
+  };
+}`}</Code></Pre>
+            </div>
+            </div>
+          </Feature>
+          <Feature
+            title="Responsive design"
+            description="Adaptive UI built on Spectrum's responsive layout definitions.... *needs work"
+            illustration={<Phone />}
+            style={{gridColumn: 'span 6'}}>
+            <Responsive />
+          </Feature>
+        </Section>
+        <Section
+          title="Built for modern development and the modern web"
+          description="With AI-ready documentation, server side and runtime performance optimizations, React Spectrum helps you build modern, scalable apps without compromise.">
+          <Feature
+            title="AI-ready"
+            description="Comprehensive markdown docs, llms.txt, and an agent-friendly MCP server."
+            illustration={<Sparkles />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 2'}})}>
+              
+          </Feature>
+          <Feature
+            title="SSR"
+            description="Server-side rendering and React Server Components support, maximizing Core Web Vitals with zero layout thrashing."
+            illustration={<Server />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 2'}})}>
+              
+          </Feature>
+          <Feature
+            title="Small bundle"
+            description="Aggressive tree-shaking and atomic CSS resulting in reduced bundle sizes and faster runtime performance."
+            illustration={<SpeedFast />}
+            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 2'}})}>
+              
+          </Feature>
+        </Section>
+      </main>
+      <footer
+        className={style({
+          maxWidth: 1600,
+          marginX: 'auto',
+          marginTop: 32,
+          paddingY: 12
+        })}>
+        <Divider size="S" staticColor="white" />
+        <ul
+          className={style({
+            display: 'flex',
+            justifyContent: 'end',
+            flexWrap: 'wrap',
+            padding: 0,
+            margin: 0,
+            marginTop: 16,
+            font: 'body-2xs',
+            listStyleType: 'none',
+            color: 'white'
+          })}>
+          <li>Copyright © {new Date().getFullYear()} Adobe. All rights reserved.</li>
+          <li><Link isQuiet staticColor="white" href="//www.adobe.com/privacy.html" target="_blank">Privacy</Link></li>
+          <li><Link isQuiet staticColor="white" href="//www.adobe.com/legal/terms.html" target="_blank">Terms of Use</Link></li>
+          <li><Link isQuiet staticColor="white" href="//www.adobe.com/privacy/cookies.html" target="_blank">Cookies</Link></li>
+          <li><Link isQuiet staticColor="white" href="//www.adobe.com/privacy/ca-rights.html" target="_blank">Do not sell my personal information</Link></li>
+        </ul>
+      </footer>
+    </body>
+  );
+}
+
+function Section({title, description, children}: any) {
+  let headingId = useId();
+  return (
+    <section aria-labelledby={headingId} className={style({paddingY: 64})}>
+      <h2 id={headingId} className={style({font: 'heading-2xl', color: 'white'})}>{title}</h2>
+      <p className={style({font: 'body-2xl', color: 'white', maxWidth: '80%', marginBottom: 64})}>{description}</p>
+      <div className={style({display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16})}>
+        {children}
+      </div>
+    </section>
+  );
+}
+
+function Feature({title, description, illustration, children, style: styleProp, styles = ''}: any) {
+  let headingId = useId();
+  return (
+    <section aria-labelledby={headingId} className={mergeStyles(container, styles)} style={styleProp}>
+      <div className={style({display: 'flex', flexDirection: {default: 'column', sm: 'row'}, gap: 12, alignItems: 'start', marginBottom: 12})}>
+        <div style={{marginTop: -12, marginInlineStart: -12}}>
+          {illustration}
+        </div>
+        <div>
+          <h3 id={headingId} className={style({font: 'heading', marginY: 0})}>{title}</h3>
+          <p className={style({font: 'body-lg', marginY: 0})}>{description}</p>
+        </div>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function ColorScales() {
+  const size = 'auto';
+  let red = getColorScale('red', size);
+  let orange = getColorScale('orange', size);
+  let yellow = getColorScale('yellow', size);
+  let celery = getColorScale('celery', size);
+  let green = getColorScale('green', size);
+  let seafoam = getColorScale('seafoam', size);
+  let turquoise = getColorScale('turquoise', size);
+  let cyan = getColorScale('cyan', size);
+  let blue = getColorScale('blue', size);
+  let indigo = getColorScale('indigo', size);
+  let purple = getColorScale('purple', size);
+  let fuchsia = getColorScale('fuchsia', size);
+  let magenta = getColorScale('magenta', size);
+  let pink = getColorScale('pink', size);
+
+  let scales = [red, orange, yellow, celery, green, seafoam, turquoise, cyan, blue, indigo, purple, fuchsia, magenta, pink];
+  return <Colors scales={scales} />
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/Icons.tsx b/packages/dev/s2-docs/pages/s2/home/Icons.tsx
new file mode 100644
index 00000000000..d9b02c81c31
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/Icons.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import { useState } from 'react';
+// @ts-ignore
+import icons from '/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_[A-F]*.svg';
+import { style } from '@react-spectrum/s2/style' with {type: 'macro'};
+// @ts-ignore
+import illustrations from '/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/[A-G]*.tsx';
+import { IllustrationContext } from '@react-spectrum/s2';
+
+export function Icons() {
+  return <IconGrid icons={icons} size={32} />;
+}
+
+export function Illustrations() {
+  return (
+    <IllustrationContext.Provider value={{size: 'S'}}>
+      <IconGrid icons={illustrations} size={48} intensity={0.2} />
+    </IllustrationContext.Provider>
+  );
+}
+
+function IconGrid({icons, size, radius = 4 * size, intensity = 0.5}: any) {
+  let [width, setWidth] = useState(0);
+  let [pos, setPos] = useState<{x: number, y: number} | null>(null);
+  let [transition, setTransition] = useState(true);
+
+  return (
+    <div
+      className={style({
+        display: 'grid',
+        marginTop: 32,
+        justifyContent: 'space-between'
+      })}
+      style={{
+        gridTemplateColumns: `repeat(auto-fit, calc(${size}px * var(--s2-scale, 1)))`,
+        gridAutoRows: `calc(${size}px * var(--s2-scale, 1))`,
+        // Display 6 rows of 32px icons
+        maxHeight: `calc(${Math.floor(32 * 6 / size) * size}px * var(--s2-scale, 1))`,
+        overflow: 'clip'
+      }}
+      onPointerEnter={e => {
+        if (e.pointerType === 'mouse') {
+          setWidth(e.currentTarget.getBoundingClientRect().width);
+          setTransition(true);
+          setTimeout(() => {
+            setTransition(false);
+          }, 250);
+        }
+      }}
+      onPointerMove={e => {
+        if (e.pointerType === 'mouse') {
+          let rect = e.currentTarget.getBoundingClientRect();
+          setPos({
+            x: e.clientX - rect.x,
+            y: e.clientY - rect.y
+          })
+        }
+      }}
+      onPointerLeave={(e) => {
+        setPos(null);
+        if (e.pointerType === 'mouse') {
+          setTransition(true);
+        }
+      }}>
+      {Object.values(icons).map((icon: any, i) => {
+        let scale = 1;
+        let opacity = 1;
+        if (pos) {
+          let cols = Math.floor(width / size);
+          let row = Math.floor(i / cols);
+          let col = i % cols;
+          let gap = (width - (cols * size)) / (cols - 1);
+          let colWidth = size + gap;
+          let cx = col * colWidth + size / 2;
+          let cy = row * size + size / 2;
+          let dx = pos.x - cx;
+          let dy = pos.y - cy;
+          let dist = Math.sqrt(dx * dx + dy * dy);
+
+          let falloff = Math.max(0, 1 - dist / radius);
+          scale = 1 + falloff * intensity;
+          opacity = Math.max(0.6, 1 - (dist / 400) * intensity);
+        }
+        return (
+          <div
+            key={i}
+            className={style({
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            })}
+            style={{
+              scale,
+              opacity,
+              transition: transition ? 'scale 150ms, opacity 250ms' : undefined
+            }}>
+            {<icon.default size="S" />}            
+          </div>
+        );
+      })}
+    </div>
+  )
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/Mobile.tsx b/packages/dev/s2-docs/pages/s2/home/Mobile.tsx
new file mode 100644
index 00000000000..0af680bea89
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/Mobile.tsx
@@ -0,0 +1,311 @@
+'use client';
+
+import { lightDark, style } from '@react-spectrum/s2/style' with {type: 'macro'};
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { useDateFormatter } from 'react-aria';
+// @ts-ignore
+import iphone from 'url:@react-spectrum/docs/pages/assets/iphone-frame.webp';
+// @ts-ignore
+import iphoneMask from 'url:@react-spectrum/docs/pages/assets/iphone-mask.webp';
+import {WifiIcon} from 'lucide-react';
+import { Avatar, Button, Form, TextField } from '@react-spectrum/s2';
+import MenuHamburger from '@react-spectrum/s2/icons/MenuHamburger';
+import Search from '@react-spectrum/s2/icons/Search';
+import More from '@react-spectrum/s2/icons/More';
+import {AdobeLogo} from '../../../src/icons/AdobeLogo';
+import {animate, useIntersectionObserver} from '@react-spectrum/docs/pages/react-aria/home/utils';
+import {TextFieldRef} from '@react-types/textfield';
+import {FocusableRefValue} from '@react-types/shared';
+
+const translate = (x: number, y: number) => `translate(${x}px, ${y}px)`;
+
+export function Mobile() {
+  let containerRef = useRef<HTMLDivElement | null>(null);
+  let toolbarRef = useRef<HTMLDivElement | null>(null);
+  let fingerRef = useRef<HTMLDivElement | null>(null);
+  let textFieldRef = useRef<TextFieldRef | null>(null);
+  let buttonRef = useRef<FocusableRefValue<HTMLButtonElement> | null>(null);
+  let [value, setValue] = useState('');
+  let [isAnimating, setAnimating] = useState(false);
+
+  useIntersectionObserver(toolbarRef, useCallback(() => {
+    if (matchMedia('(prefers-reduced-motion)').matches) {
+      return;
+    }
+
+    let cancel =  animate([
+      {
+        time: 500,
+        perform() {
+          setAnimating(true);
+        }
+      },
+      {
+        time: 1000,
+        perform() {
+          let node = textFieldRef.current!.getInputElement()!.parentElement!;
+          fingerRef.current!.animate({
+            transform: translate(node.offsetLeft + 40, node.offsetTop + node.offsetHeight / 2 - fingerRef.current!.offsetHeight / 2)
+          }, {duration: 1000, fill: 'forwards', easing: 'ease-in-out'});
+        }
+      },
+      {
+        time: 250,
+        perform() {
+          fingerRef.current!.animate({
+            opacity: [
+              0.5,
+              0.8,
+              0.5,
+              0
+            ]
+          }, {duration: 800, fill: 'forwards', easing: 'ease-in-out'});
+        }
+      },
+      {
+        time: 800 + 80 * 'user@example.com'.length + 200,
+        async perform() {
+          let node = textFieldRef.current!.getInputElement()!;
+          fakeFocus(node, 'focus');
+
+
+          await new Promise(res => setTimeout(res, 800));
+          setValue('');
+          for (let c of 'user@example.com') {
+            setValue(value => value + c);
+            await new Promise(res => setTimeout(res, 80));
+          }
+        }
+      },
+      {
+        time: 250,
+        perform() {
+          fingerRef.current!.animate({
+            opacity: [
+              0,
+              0.5
+            ]
+          }, {duration: 500, fill: 'forwards', easing: 'ease-in-out'});
+        }
+      },
+      {
+        time: 1200,
+        perform() {
+          let node = buttonRef.current!.UNSAFE_getDOMNode()!;
+          fingerRef.current!.animate({
+            transform: translate(node.offsetLeft + node.offsetWidth / 2 - fingerRef.current!.offsetWidth / 2, node.offsetTop + node.offsetHeight / 2 - fingerRef.current!.offsetHeight / 2)
+          }, {duration: 1000, fill: 'forwards', easing: 'ease-in-out'});
+        }
+      },
+      {
+        time: 300,
+        perform() {
+          let node = textFieldRef.current!.getInputElement()!;
+          fakeFocus(node, 'blur');
+
+          fingerRef.current!.animate({
+            opacity: [
+              0.5,
+              0.8,
+              0.5
+            ]
+          }, {duration: 550, fill: 'forwards', easing: 'ease-in-out'});
+
+          pointer(buttonRef, 'pointerdown');
+        }
+      },
+      {
+        time: 500,
+        perform() {
+          pointer(buttonRef, 'pointerup');
+        }
+      },
+      {
+        time: 500,
+        perform() {
+          let node = buttonRef.current!.UNSAFE_getDOMNode()!;
+          fingerRef.current!.animate({
+            transform: translate(node.offsetLeft, 300)
+          }, {duration: 1000, fill: 'forwards', easing: 'ease-in-out'});
+        }
+      },
+      {
+        time: 0,
+        perform() {
+          setAnimating(false);
+        }
+      }
+    ]);
+
+    return () => {
+      cancel();
+      setValue('');
+      setAnimating(false);
+      fingerRef.current!.getAnimations().forEach(a => a.cancel());
+    };
+  }, []));
+
+  return (
+    <div
+      inert={isAnimating || undefined}
+      className={style({
+        size: 'full',
+        maxWidth: 464,
+        minHeight: 340,
+        marginX: 'auto',
+        marginBottom: -40,
+        backgroundSize: 'cover',
+        contain: 'size'
+      })}
+      style={{
+        backgroundImage: `url(${iphone.split('?')[0]})`
+      }}>
+      <div
+        className={style({
+          size: 'full',
+          boxSizing: 'border-box',
+          display: 'flex',
+          flexDirection: 'column',
+          backgroundColor: 'layer-1'
+        })}
+        style={{
+          maskImage: `url(${iphoneMask.split('?')[0]}), linear-gradient(#fff 0 0)`,
+          maskSize: '100%',
+          maskComposite: 'exclude',
+          padding: '8%',
+          paddingBottom: 0
+        }}>
+        <div
+          className={style({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+            paddingX: 28,
+            paddingY: 16,
+            boxSizing: 'border-box',
+            font: 'ui',
+            fontWeight: 'medium'
+          })}>
+          <Clock />
+          <span className={style({flexGrow: 1})} />
+          <WifiIcon className={style({size: 16})} />
+          <svg viewBox="0 0 28 24" className={style({height: 24, stroke: 'gray-600'})} fill="none" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+            <rect width="20" height="10" x="2" y="7" rx="3" ry="3" />
+            <rect width="13" height="7" x="3.5" y="8.5" rx="2" ry="2" fill="currentColor" stroke="none" />
+            <line x1="25" x2="25" y1="11" y2="13" strokeWidth="2" />
+          </svg>
+        </div>
+        <div className={style({flexGrow: 1})} style={{'--s2-scale': '1.25', '--s2-font-size-base': '17'} as any}>
+          <div
+            className={style({
+              display: 'flex',
+              flexDirection: 'column',
+              height: 'full'
+            })}>
+              <div
+                ref={toolbarRef}
+                className={style({
+                  gridArea: 'toolbar',
+                  display: 'flex',
+                  gap: 16,
+                  alignItems: 'center',
+                  width: 'full',
+                  paddingY: 12,
+                  paddingX: 12,
+                  boxSizing: 'border-box'
+                })}>
+                <MenuHamburger />
+                <AdobeLogo size={24} />
+                <div className={style({flexGrow: 1})} />
+                <Search />
+                <More />
+                <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
+              </div>
+              <div
+                ref={containerRef}
+                className={style({
+                  gridArea: 'content',
+                  backgroundColor: 'base',
+                  flexGrow: 1,
+                  minHeight: 0,
+                  width: 'full',
+                  overflow: 'clip',
+                  paddingX: 12,
+                  paddingTop: 12,
+                  boxSizing: 'border-box',
+                  position: 'relative'
+                })}>
+                <div className={style({font: 'title', marginBottom: 16})}>Subscribe to our newsletter</div>
+                <Form labelPosition="side">
+                  <TextField label="Email" placeholder="Enter your email" ref={textFieldRef} value={value} onChange={setValue} />
+                  <Button variant="accent" ref={buttonRef} styles={style({gridColumnStart: 'field', justifySelf: 'end'})}>Subscribe</Button>
+                </Form>
+                <Finger ref={fingerRef} />
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Clock() {
+  let formatter = useDateFormatter({
+    timeStyle: 'short'
+  });
+
+  let [time, setTime] = useState(() => new Date(2025, 0, 1));
+
+  useEffect(() => {
+    setTime(new Date());
+  }, []);
+
+  useEffect(() => {    
+    let nextMinute = Math.floor((Date.now() + 60000) / 60000) * 60000;
+    let timeout = setTimeout(() => {
+      setTime(new Date());
+    }, nextMinute - Date.now());
+
+    return () => clearTimeout(timeout);
+  });
+
+  return (
+    <span>{formatter.format(time)}</span>
+  );
+}
+
+function Finger({ref}: any) {
+  return (
+    <div
+      ref={ref}
+      style={{transform: translate(0, 300)}}
+      className={style({
+        zIndex: 10,
+        pointerEvents: 'none',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: 40,
+        height: 40,
+        borderRadius: 'full',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: lightDark('black/80', 'white/80'),
+        backgroundColor: lightDark('black/80', 'white/80'),
+        opacity: 0.5
+      })} />
+  );
+}
+
+function pointer(ref: RefObject<FocusableRefValue<HTMLElement> | null>, type: string) {
+  ref.current?.UNSAFE_getDOMNode()!.dispatchEvent(new PointerEvent(type, {pointerType: 'mouse', pointerId: 1, bubbles: true, detail: 1}));
+}
+
+function fakeFocus(node: HTMLElement, type: 'focus' | 'blur') {
+  Object.defineProperty(document, 'activeElement', {value: node, configurable: true});
+  let relatedTarget = type === 'focus' ? document.activeElement : null;
+  node.dispatchEvent(new FocusEvent(type, {relatedTarget}));
+  node.dispatchEvent(new FocusEvent(type === 'blur' ? 'focusout' : 'focusin', {bubbles: true, relatedTarget}));
+  // @ts-ignore
+  delete document.activeElement;
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/ObjectStyles.tsx b/packages/dev/s2-docs/pages/s2/home/ObjectStyles.tsx
new file mode 100644
index 00000000000..db1f67132f6
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/ObjectStyles.tsx
@@ -0,0 +1,160 @@
+'use client';
+import { Form, Radio, RadioGroup, ToggleButton, ToggleButtonGroup } from "@react-spectrum/s2";
+import { style } from "@react-spectrum/s2/style" with {type: 'macro'};
+import { useState } from "react";
+
+export function ObjectStyles() {
+  let [background, setBackground] = useState('elevated');
+  let [rounding, setRounding] = useState('default');
+  let [shadow, setShadow] = useState('elevated');
+  let [border, setBorder] = useState<string | null>(null);
+
+  return (
+    <>
+      <div
+        className={style({
+          display: 'grid',
+          gridTemplateColumns: {
+            default: ['1fr'],
+            sm: ['max-content', 'auto']
+          },
+          columnGap: 8,
+          rowGap: {
+            default: 8,
+            sm: 16
+          },
+          alignItems: 'center',
+          justifyContent: 'center'
+        })}>
+        <span className={style({font: 'ui', color: 'neutral-subdued', justifySelf: {sm: 'end'}})}>Background</span>
+        <ToggleButtonGroup
+          aria-label="Background"
+          staticColor="auto"
+          density="compact"
+          selectionMode="single"
+          selectedKeys={background ? [background] : []}
+          onSelectionChange={keys => setBackground([...keys][0] as string)}>
+          {/* <ToggleButton id="transparent">transparent</ToggleButton> */}
+          <ToggleButton id="base">base</ToggleButton>
+          <ToggleButton id="layer-1">layer-1</ToggleButton>
+          <ToggleButton id="layer-2">layer-2</ToggleButton>
+          <ToggleButton id="elevated">elevated</ToggleButton>
+        </ToggleButtonGroup>
+        <span className={style({font: 'ui', color: 'neutral-subdued', justifySelf: {sm: 'end'}})}>Border Radius</span>
+        <ToggleButtonGroup
+          aria-label="Border Radius"
+          staticColor="auto"
+          density="compact"
+          selectionMode="single"
+          selectedKeys={rounding ? [rounding] : []}
+          onSelectionChange={keys => setRounding([...keys][0] as string)}>
+          {/* <ToggleButton id="none">none</ToggleButton> */}
+          <ToggleButton id="sm">sm</ToggleButton>
+          <ToggleButton id="default">default</ToggleButton>
+          <ToggleButton id="lg">lg</ToggleButton>
+          <ToggleButton id="xl">xl</ToggleButton>
+          <ToggleButton id="full">full</ToggleButton>
+        </ToggleButtonGroup>
+        <span className={style({font: 'ui', color: 'neutral-subdued', justifySelf: {sm: 'end'}})}>Box Shadow</span>
+        <ToggleButtonGroup
+          aria-labe="Box Shadow"
+          staticColor="auto"
+          density="compact"
+          selectionMode="single"
+          selectedKeys={shadow ? [shadow] : []}
+          onSelectionChange={keys => setShadow([...keys][0] as string)}>
+          {/* <ToggleButton id="none">none</ToggleButton> */}
+          <ToggleButton id="emphasized">emphasized</ToggleButton>
+          <ToggleButton id="elevated">elevated</ToggleButton>
+        </ToggleButtonGroup>
+        <span className={style({font: 'ui', color: 'neutral-subdued', justifySelf: {sm: 'end'}})}>Border Width</span>
+        <ToggleButtonGroup
+          aria-label="Border Width"
+          staticColor="auto"
+          density="compact"
+          selectionMode="single"
+          selectedKeys={border ? [border] : []}
+          onSelectionChange={keys => setBorder([...keys][0] as string)}>
+          {/* <ToggleButton id="0">0</ToggleButton> */}
+          <ToggleButton id="1">1</ToggleButton>
+          <ToggleButton id="2">2</ToggleButton>
+          <ToggleButton id="4">4</ToggleButton>
+        </ToggleButtonGroup>
+      </div>
+      <div
+        className={style({
+          backgroundColor: {
+            background: {
+              transparent: 'transparent',
+              base: 'base',
+              'layer-1': 'layer-1',
+              'layer-2': 'layer-2',
+              elevated: 'elevated'
+            }
+          },
+          width: 'fit',
+          maxWidth: 'full',
+          overflow: 'auto',
+          marginX: 'auto',
+          marginTop: 40,
+          boxSizing: 'border-box',
+          borderRadius: {
+            default: 'none',
+            rounding: {
+              sm: 'sm',
+              default: 'default',
+              lg: 'lg',
+              xl: 'xl',
+              full: 'full'
+            }
+          },
+          boxShadow: {
+            default: 'none',
+            shadow: {
+              elevated: 'elevated',
+              emphasized: 'emphasized'
+            }
+          },
+          borderStyle: 'solid',
+          borderColor: 'gray-1000',
+          borderWidth: {
+            default: 0,
+            border: {
+              1: 1,
+              2: 2,
+              4: 4
+            }
+          },
+          paddingY: 16,
+          paddingX: {
+            default: 24,
+            rounding: {
+              full: 48
+            }
+          }
+        })({background, rounding, shadow, border})}>
+        <pre className={style({font: 'code-sm', marginY: 0})}>
+          <code style={{fontFamily: 'inherit', WebkitTextSizeAdjust: 'none'}}>
+            <span className={styles.function}>style</span>{background || rounding || shadow || border ? '({\n  ' : '({})'}
+            {background && <><span className={styles.property}>backgroundColor</span>: <span className={styles.string}>'{background}'</span>{rounding || shadow || border ? ',\n  ' : null}</>}
+            {rounding && <><span className={styles.property}>borderRadius</span>: <span className={styles.string}>'{rounding}'</span>{shadow || border ? ',\n  ' : null}</>}
+            {shadow && <><span className={styles.property}>boxShadow</span>: <span className={styles.string}>'{shadow}'</span>{border ? ',\n  ' : null}</>}
+            {border && <>
+              <span className={styles.property}>borderWidth</span>: <span className={styles.number}>{border}</span>{',\n  '}
+              <span className={styles.property}>borderStyle</span>: <span className={styles.string}>'solid'</span>{',\n  '}
+              <span className={styles.property}>borderColor</span>: <span className={styles.string}>'gray-1000'</span>
+            </>}
+            {background || rounding || shadow || border ? '\n})' : null}
+          </code>
+        </pre>
+      </div>
+    </>
+  );
+}
+
+const styles = {
+  string: style({color: 'green-1000'}),
+  number: style({color: 'pink-1000'}),
+  property: style({color: 'indigo-1000'}),
+  function: style({color: 'red-1000'})
+};
diff --git a/packages/dev/s2-docs/pages/s2/home/Press.tsx b/packages/dev/s2-docs/pages/s2/home/Press.tsx
new file mode 100644
index 00000000000..01cd6615a4c
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/Press.tsx
@@ -0,0 +1,143 @@
+'use client';
+import {animate, useIntersectionObserver} from '@react-spectrum/docs/pages/react-aria/home/utils';
+import {ReactNode, RefObject, useCallback, useRef, useState} from 'react';
+import {Button, Checkbox} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {FocusableRefValue} from '@react-types/shared';
+
+const pos = (x: number) => `calc(${x / 16}rem * var(--s2-scale, 1))`;
+const translate = (x: number, y: number) => `translate(${pos(x)}, ${pos(y)})`;
+
+export function PressAnimation(): ReactNode {
+  let ref = useRef(null);
+  let mouseRef = useRef<SVGSVGElement>(null);
+  let checkboxRef = useRef<FocusableRefValue<HTMLLabelElement>>(null);
+  let buttonRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);
+  let [isChecked, setChecked] = useState(false);
+
+  useIntersectionObserver(ref, useCallback(() => {
+    let cancel =  animate([
+      {
+        time: 500,
+        perform() {}
+      },
+      {
+        time: 700,
+        perform() {
+          mouseRef.current!.animate({
+            transform: [
+              translate(-50, 150),
+              translate(10, 10)
+            ]
+          }, {duration: 1000, fill: 'forwards', easing: 'ease-in-out'});
+        }
+      },
+      {
+        time: 500,
+        perform() {
+          pointer(checkboxRef, 'pointerover');
+        }
+      },
+      {
+        time: 300,
+        perform() {
+          pointer(checkboxRef, 'pointerdown');
+        }
+      },
+      {
+        time: 500,
+        perform() {
+          pointer(checkboxRef, 'pointerup');
+        }
+      },
+      {
+        time: 450,
+        perform() {
+          mouseRef.current!.animate({
+            transform: [
+              translate(10, 10),
+              translate(200, 10)
+            ]
+          }, {duration: 1000, fill: 'forwards', easing: 'ease-in-out'});
+        }
+      },
+      {
+        time: 200,
+        perform() {
+          pointer(checkboxRef, 'pointerout');
+        }
+      },
+      {
+        time: 500,
+        perform() {
+          pointer(buttonRef, 'pointerover');
+        }
+      },
+      {
+        time: 300,
+        perform() {
+          pointer(buttonRef, 'pointerdown');
+        }
+      },
+      {
+        time: 500,
+        perform() {
+          pointer(buttonRef, 'pointerup');
+        }
+      },
+      {
+        time: 200,
+        perform() {
+          mouseRef.current!.animate({
+            transform: [
+              translate(200, 10),
+              translate(250, 150)
+            ]
+          }, {duration: 1000, fill: 'forwards', easing: 'ease-in-out'});
+        }
+      },
+      {
+        time: 100,
+        perform() {
+          buttonRef.current?.UNSAFE_getDOMNode()!.dispatchEvent(new PointerEvent('pointerout', {pointerType: 'mouse', pointerId: 1, bubbles: true, detail: 1}));
+        }
+      },
+    ]);
+
+    return () => {
+      cancel();
+      setChecked(false);
+      mouseRef.current!.getAnimations().forEach(a => a.cancel());
+    };
+  }, []));
+
+  return (
+    <div ref={ref} className={style({display: 'flex', columnGap: 32, alignItems: 'center', marginX: 'auto', marginTop: 20, width: 'fit'})}>
+      <svg
+        ref={mouseRef}
+        viewBox="0 0 12 19"
+        width={12}
+        height={19}
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          zIndex: 10,
+          filter: 'drop-shadow(0 1px 1px #aaa)',
+          transform: 'translate(-50px, 150px)'
+        }}>
+        <g transform="matrix(1, 0, 0, 1, -150, -63.406998)">
+          <path d="M150 79.422V63.407l11.591 11.619h-6.781l-.411.124Z" fill="#fff" fillRule="evenodd" />
+          <path d="m159.084 80.1-3.6 1.535-4.684-11.093 3.686-1.553Z" fill="#fff" fillRule="evenodd" />
+          <path d="m157.751 79.416-1.844.774-3.1-7.374 1.841-.775Z" fillRule="evenodd" />
+          <path d="M151 65.814V77l2.969-2.866.431-.134h4.768Z" fillRule="evenodd" />
+        </g>
+      </svg>
+      <Checkbox ref={checkboxRef} size="XL" isSelected={isChecked} onChange={setChecked}>Accept terms</Checkbox>
+      <Button ref={buttonRef} variant="accent" size="XL">Submit</Button>
+    </div>
+  );
+}
+
+function pointer(ref: RefObject<FocusableRefValue<HTMLElement> | null>, type: string) {
+  ref.current?.UNSAFE_getDOMNode()!.dispatchEvent(new PointerEvent(type, {pointerType: 'mouse', pointerId: 1, bubbles: true, detail: 1}));
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/ReduceMotion.tsx b/packages/dev/s2-docs/pages/s2/home/ReduceMotion.tsx
new file mode 100644
index 00000000000..23538db7d25
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/ReduceMotion.tsx
@@ -0,0 +1,71 @@
+'use client';
+import {useEffect, useRef, useState} from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {UNSAFE_PortalProvider} from 'react-aria';
+import {ToastContainer, Button, ToastQueue, Switch} from '@react-spectrum/s2';
+
+export function ReduceMotion() {
+  let ref = useRef(null);
+  let [reduceMotion, setReduceMotion] = useState(false);
+
+  useEffect(() => {
+    if (matchMedia('(prefers-reduced-motion)').matches) {
+      setReduceMotion(true);
+    }
+  }, []);
+
+  return (
+    <UNSAFE_PortalProvider getContainer={() => ref.current}>
+      <ToastContainer
+        // @ts-ignore
+        PRIVATE_forceReducedMotion={reduceMotion} />
+      <div
+        ref={ref}
+        className={style({
+          transform: 'translate(0)',
+          height: 300,
+          overflow: 'clip',
+          backgroundColor: 'layer-2',
+          boxShadow: 'elevated',
+          borderRadius: {
+            default: 'none',
+            sm: 'lg'
+          },
+          padding: 32,
+          display: 'flex',
+          flexDirection: {
+            default: 'column',
+            sm: 'row'
+          },
+          alignItems: {
+            default: 'center',
+            sm: 'baseline'
+          },
+          justifyContent: {
+            default: 'start',
+            sm: 'center'
+          },
+          gap: 16,
+          boxSizing: 'border-box',
+          margin: {
+            default: -16,
+            sm: 0
+          },
+          marginTop: 0
+        })}>
+        <Button
+          size="L"
+          onPress={() => ToastQueue.positive('Toast complete!')}
+          variant="secondary">
+          Show toast
+        </Button>
+        <Switch
+          size="XL"
+          isSelected={reduceMotion}
+          onChange={setReduceMotion}>
+          Reduce motion
+        </Switch>
+      </div>
+    </UNSAFE_PortalProvider>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/Rems.tsx b/packages/dev/s2-docs/pages/s2/home/Rems.tsx
new file mode 100644
index 00000000000..d8275a02d99
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/Rems.tsx
@@ -0,0 +1,47 @@
+'use client';
+import { style } from "@react-spectrum/s2/style" with {type: 'macro'};
+import { ExampleApp2 } from "./ExampleApp2";
+import { Slider } from "@react-spectrum/s2";
+import { useState } from "react";
+
+export function Rems() {
+  let [value, setValue] = useState(16);
+  return (
+    <>
+      <Slider
+        label="Font size"
+        minValue={8}
+        maxValue={40}
+        value={value}
+        onChange={setValue}
+        labelPosition="side"
+        size="L"
+        // @ts-ignore
+        PRIVATE_staticColor
+        styles={style({
+          maxWidth: 400
+        })} />
+      <div
+        className={style({
+          boxSizing: 'border-box',
+          height: 350,
+          margin: {
+            default: -16,
+            sm: 0
+          },
+          marginTop: 16,
+          containerType: 'inline-size',
+          '--app-frame-radius-top': {
+            type: 'borderTopStartRadius',
+            value: {
+              default: 'none',
+              sm: 'lg'
+            }
+          }
+        })}
+        style={{'--rem': value + 'px'} as any}>
+        <ExampleApp2 showPanel />
+      </div>
+    </>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/Responsive.tsx b/packages/dev/s2-docs/pages/s2/home/Responsive.tsx
new file mode 100644
index 00000000000..eee687734fc
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/Responsive.tsx
@@ -0,0 +1,125 @@
+'use client';
+
+import { useRef } from "react";
+import { Resizable } from "./DarkMode";
+import { style } from "@react-spectrum/s2/style" with {type: 'macro'};
+import { ExampleApp } from "./ExampleApp";
+
+export function Responsive() {
+  let containerRef = useRef(null);
+  return (
+    <div
+      className={style({
+        margin: {
+          default: -16,
+          sm: 0
+        },
+        marginTop: 0,
+        '--app-frame-radius-top': {
+          type: 'borderTopStartRadius',
+          value: {
+            default: 'none',
+            sm: 'lg'
+          }
+        }
+      })}>
+      <div
+        className={style({
+          position: 'relative',
+          height: 32,
+          width: '150%',
+          boxSizing: 'border-box',
+          borderWidth: 1,
+          borderColor: 'cinnamon-500',
+          borderStyle: 'solid',
+          marginBottom: 16,
+          backgroundColor: 'cinnamon-300',
+          borderRadius: 'default',
+          overflow: 'clip',
+          display: {
+            default: 'none',
+            sm: 'block'
+          }
+        })}>
+        <MiniTicks />
+        <Tick name="default" pos={0} />
+        <Tick name="xs" pos={480} />
+        <Tick name="sm" pos={640} />
+        <Tick name="md" pos={768} />
+        <Tick name="lg" pos={1024} />
+        <Tick name="xl" pos={1280} />
+      </div>
+      <div
+        ref={containerRef}
+        className={style({
+          position: 'relative',
+          height: 500,
+          display: {
+            default: 'none',
+            sm: 'block'
+          }}
+        )}>
+        <Resizable minWidth={330} containerRef={containerRef}>
+          <ExampleApp />
+        </Resizable>
+      </div>
+      <div
+        className={style({
+          position: 'relative',
+          height: 500,
+          display: {
+            default: 'block',
+            sm: 'none'
+          }}
+        )}>
+        <ExampleApp />
+      </div>
+    </div>
+  );
+}
+
+function Tick({name, pos}: {name: string, pos: number}) {
+  return (
+    <div
+      style={{insetInlineStart: (pos - 1) / 16 + 'rem'}}
+      className={style({
+        position: 'absolute',
+        borderWidth: 0,
+        borderStartWidth: 1,
+        borderColor: 'cinnamon-700',
+        borderStyle: 'solid',
+        paddingStart: 8,
+        font: 'code-sm',
+        color: 'cinnamon-1400',
+        height: 'full',
+        display: 'flex',
+        alignItems: 'center'
+      })}>
+      {name}
+    </div>
+  );
+}
+
+function MiniTicks() {
+  let ticks = [];
+  for (let i = 0; i < 1536; i += 16) {
+    ticks.push(
+      <div
+        key={i}
+        style={{
+          insetInlineStart: (i - 1) / 16 + 'rem',
+          height: i % 64 === 0 ? 6 : 4
+        }}
+        className={style({
+          position: 'absolute',
+          borderWidth: 0,
+          borderStartWidth: 1,
+          borderColor: 'cinnamon-700',
+          borderStyle: 'solid',
+          bottom: 0
+        })} />
+    );
+  }
+
+  return ticks;
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/States.tsx b/packages/dev/s2-docs/pages/s2/home/States.tsx
new file mode 100644
index 00000000000..851ba39c9cf
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/States.tsx
@@ -0,0 +1,195 @@
+'use client';
+import { Checkbox, Divider, Picker, PickerItem, pressScale } from "@react-spectrum/s2";
+import { focusRing, style } from "@react-spectrum/s2/style" with {type: 'macro'};
+import { useRef, useState } from "react";
+import { useFocusVisible } from "react-aria";
+import { Button, ToggleButton } from "react-aria-components";
+
+export function States() {
+  let ref = useRef(null);
+  let [isPressed, setPressed] = useState(false);
+  let [isHovered, setHovered] = useState(false);
+  let [variant, setVariant] = useState<'accent' | 'negative'>('accent');
+  let [isDisabled, setDisabled] = useState(false);
+  return (
+    <div
+      className={style({
+        display: 'grid',
+        gridTemplateAreas: {
+          default: [
+            'props',
+            'preview',
+            'divider',
+            'code'
+          ],
+          xl: [
+            'props divider code',
+            'preview divider code'
+          ]
+        },
+        gridTemplateColumns: {
+          default: ['1fr'],
+          xl: ['minmax(max-content, 1fr)', 'min-content', 'minmax(0, max-content)']
+        },
+        gridTemplateRows: {
+          xl: ['auto', '1fr']
+        },
+        columnGap: {
+          default: 0,
+          xl: 24
+        },
+        rowGap: {
+          default: 24,
+          xl: 0
+        },
+        alignItems: 'center',
+        backgroundColor: 'layer-2',
+        borderRadius: {
+          default: 'none',
+          sm: 'lg'
+        },
+        boxShadow: 'emphasized',
+        padding: 24,
+        margin: {
+          default: -16,
+          sm: 0
+        },
+        marginTop: 0
+      })}>
+      <div
+        className={style({
+          gridArea: 'props',
+          display: 'flex',
+          alignItems: 'center',
+          columnGap: 16
+        })}>
+        <Picker
+          label="Variant"
+          labelPosition="side"
+          value={variant}
+          onChange={key => setVariant(key as any)}
+          styles={style({width: 150})}>
+          <PickerItem id="accent">accent</PickerItem>
+          <PickerItem id="negative">negative</PickerItem>
+        </Picker>
+        <Checkbox isSelected={isDisabled} onChange={setDisabled}>Disabled</Checkbox>
+      </div>
+      <div
+        className={style({
+          gridArea: 'preview',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        })}>
+        <Button
+          ref={ref}
+          onPressChange={setPressed}
+          onHoverChange={setHovered}
+          isDisabled={isDisabled}
+          className={renderProps => style({
+            ...focusRing(),
+            font: 'ui-xl',
+            fontWeight: 'medium',
+            userSelect: 'none',
+            height: 48,
+            paddingX: 'pill',
+            borderStyle: 'none',
+            borderRadius: 'pill',
+            transition: 'default',
+            disableTapHighlight: true,
+            backgroundColor: {
+              variant: {
+                accent: {
+                  default: 'accent-900',
+                  isHovered: 'accent-1000',
+                  isPressed: 'accent-1100'
+                },
+                negative: {
+                  default: 'negative-900',
+                  isHovered: 'negative-1000',
+                  isPressed: 'negative-1100'
+                }
+              },
+              isDisabled: 'gray-100'
+            },
+            color: {
+              default: 'gray-25',
+              isDisabled: 'disabled'
+            }
+          })({...renderProps, variant})}>
+          Action
+        </Button>
+      </div>
+      <Divider orientation="vertical" styles={style({gridArea: 'divider'})} />
+      <pre
+        className={style({
+          font: 'code-sm',
+          marginY: 0,
+          gridArea: 'code',
+          overflow: 'auto',
+          margin: {
+            default: -16,
+            sm: 0
+          },
+          marginTop: 0
+        })}>
+        <code style={{fontFamily: 'inherit', WebkitTextSizeAdjust: 'none'}}>
+          {'<'}<span className={styles.function}>Button</span>{'\n  '}
+          <span className={styles.property}>className</span>{'={'}<span className={styles.variable}>states</span>{' => '}<span className={styles.function}>style</span>{'({\n    '}
+          <span className={styles.property}>backgroundColor</span>{': {\n      '}
+          <span className={styles.property}>default</span>{': {\n        '}
+          <span className={styles.property}>variant</span>{': {\n          '}
+          <span className={highlight({isHighlighted: variant === 'accent' && !isDisabled})}>
+            <span className={styles.property}>accent</span>
+          </span>{': {\n            '}
+          <span className={highlight({isHighlighted: variant === 'accent' && !isHovered && !isPressed && !isDisabled})}>
+            <span className={styles.property}>default</span>: <span className={styles.string}>'accent-900'</span>{',\n            '}
+          </span>
+          <span className={highlight({isHighlighted: variant === 'accent' && isHovered && !isPressed && !isDisabled})}>
+            <span className={styles.property}>isHovered</span>: <span className={styles.string}>'accent-1000'</span>{',\n            '}
+          </span>
+          <span className={highlight({isHighlighted: variant === 'accent' && isPressed && !isDisabled})}>
+            <span className={styles.property}>isPressed</span>: <span className={styles.string}>'accent-1100'</span>{'\n          '}
+          </span>
+          {'},\n          '}
+          <span className={highlight({isHighlighted: variant === 'negative' && !isDisabled})}>
+            <span className={styles.property}>negative</span>
+          </span>{': {\n            '}
+          <span className={highlight({isHighlighted: variant === 'negative' && !isHovered && !isPressed && !isDisabled})}>
+            <span className={styles.property}>default</span>: <span className={styles.string}>'negative-900'</span>{',\n            '}
+          </span>
+          <span className={highlight({isHighlighted: variant === 'negative' && isHovered && !isPressed && !isDisabled})}>
+            <span className={styles.property}>isHovered</span>: <span className={styles.string}>'negative-1000'</span>{',\n            '}
+          </span>
+          <span className={highlight({isHighlighted: variant === 'negative' && isPressed && !isDisabled})}>
+            <span className={styles.property}>isPressed</span>: <span className={styles.string}>'negative-1100'</span>{'\n          '}
+          </span>
+          {'}\n        '}
+          {'},\n        '}
+          <span className={highlight({isHighlighted: isDisabled})}>
+            <span className={styles.property}>isDisabled</span>: <span className={styles.string}>'gray-100'</span>{'\n      '}
+          </span>
+          {'}\n    '}
+          {'}\n  '}
+          {'})({...'}<span className={styles.variable}>states</span>, <span className={styles.variable}>variant</span>{'})}>\n'}
+          {'  Action\n'}
+          {'</'}<span className={styles.function}>Button</span>{'>'}
+        </code>
+      </pre>
+    </div>
+  )
+}
+
+const styles = {
+  string: style({color: 'green-1000'}),
+  number: style({color: 'pink-1000'}),
+  property: style({color: 'indigo-1000'}),
+  function: style({color: 'red-1000'}),
+  variable: style({color: 'fuchsia-1000'})
+};
+
+const highlight = style({
+  fontWeight: {
+    isHighlighted: 'bold'
+  }
+});
diff --git a/packages/dev/s2-docs/pages/s2/home/SubmenuAnimation.tsx b/packages/dev/s2-docs/pages/s2/home/SubmenuAnimation.tsx
new file mode 100644
index 00000000000..7883ba55876
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/SubmenuAnimation.tsx
@@ -0,0 +1,399 @@
+/*
+ * 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.
+ */
+'use client';
+
+import {animate} from '@react-spectrum/docs/pages/react-aria/home/utils';
+import React, {JSX, useEffect, useRef, useState} from 'react';
+import {useResizeObserver} from '@react-aria/utils';
+import {lightDark, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import { ActionButton, ActionMenu, Menu, MenuItem, SubmenuTrigger } from '@react-spectrum/s2';
+import More from '@react-spectrum/s2/icons/More';
+
+const popover = style({
+  '--s2-container-bg': {
+    type: 'backgroundColor',
+    value: {
+      default: 'layer-2',
+      forcedColors: 'Background'
+    }
+  },
+  backgroundColor: '--s2-container-bg',
+  borderRadius: 'lg',
+  boxShadow: 'elevated',
+  outlineStyle: 'solid',
+  outlineWidth: 1,
+  outlineColor: {
+    default: lightDark('transparent-white-25', 'gray-200'),
+    forcedColors: 'ButtonBorder'
+  },
+  padding: 8,
+  width: 'fit'
+});
+
+export function SubmenuAnimation(): JSX.Element {
+  let ref = useRef<HTMLDivElement>(null);
+  let [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+  let [hovered, setHovered] = useState('Option 1');
+  let isAnimating = useRef(false);
+  let mouseRef = useRef<SVGSVGElement>(null);
+  let [mouseWidth, setMouseWidth] = useState(12);
+  let option1Ref = useRef<SVGTextElement>(null);
+  let option2Ref = useRef<SVGTextElement>(null);
+  let submenuOptionRef = useRef<SVGTextElement>(null);
+
+  let updateWidth = () => {
+    if (ref.current) {
+      setMouseWidth(Math.min(12, (window.innerWidth / 768) * 12));
+    }
+  };
+
+  useResizeObserver({ref: ref, onResize: updateWidth});
+
+  useEffect(() => {
+    let startAnimation = () => {
+      let cancel = animate([
+        {
+          time: 500,
+          perform() {
+            setTimeout(() => {
+              setHovered('Option 1');
+            }, 500);
+          }
+        },
+        {
+          time: 700,
+          perform() {
+            let option1Rect = option1Ref.current!.getBoundingClientRect();
+            let option2Rect = option2Ref.current!.getBoundingClientRect();
+            let x = option1Rect.left + option1Rect.width / 2 - ref.current!.getBoundingClientRect().left;
+            let y = option1Rect.top + option1Rect.height / 2 - ref.current!.getBoundingClientRect().top;
+            let y_target = option2Rect.top + option2Rect.height / 2 - ref.current!.getBoundingClientRect().top;
+            mouseRef.current!.animate({
+              transform: [
+                `translate(${x}px, ${y}px)`,
+                `translate(${x}px, ${y_target}px)`
+              ]
+            }, {duration: 1000, fill: 'forwards', easing: 'ease-in-out'});
+            setTimeout(() => {
+              setHovered('Option 2');
+              setIsSubmenuOpen(true);
+            }, 350);
+          }
+        },
+        {
+          time: 700,
+          perform() {}
+        },
+        {
+          time: 700,
+          perform() {
+            let option1Rect = option1Ref.current!.getBoundingClientRect();
+            let option2Rect = option2Ref.current!.getBoundingClientRect();
+            let submenuOptionRect = submenuOptionRef.current!.getBoundingClientRect();
+            let x = option1Rect.left + option1Rect.width / 2 - ref.current!.getBoundingClientRect().left;
+            let y = option2Rect.top + option2Rect.height / 2 - ref.current!.getBoundingClientRect().top;
+            let x_target = submenuOptionRect.left + submenuOptionRect.width / 2 - ref.current!.getBoundingClientRect().left;
+            let y_target = submenuOptionRect.top + submenuOptionRect.height / 2 - ref.current!.getBoundingClientRect().top;
+            mouseRef.current!.animate({
+              transform: [
+                `translate(${x}px, ${y}px)`,
+                `translate(${x_target}px, ${y_target}px)`
+              ]
+            }, {duration: 1000, fill: 'forwards', easing: 'ease-in-out'});
+            setTimeout(() => {
+              setHovered('Option 3');
+              setIsSubmenuOpen(false);
+            }, 350);
+          }
+        },
+        {
+          time: 700,
+          perform() {}
+        }
+      ]);
+
+      return () => {
+        cancel();
+        setIsSubmenuOpen(false);
+        setHovered('Option 1');
+        mouseRef.current!.getAnimations().forEach(a => a.cancel());
+        isAnimating.current = false;
+      };
+    };
+
+    startAnimation();
+
+    // let interval = setInterval(startAnimation, 4000);
+    // return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div
+      role="group"
+      aria-label="Example">
+      <div ref={ref} role="img" aria-label="Animation showing a submenu closing when the cursor leaves the trigger item to go to the submenu">
+        <svg
+          ref={mouseRef}
+          viewBox="0 0 12 19"
+          width={mouseWidth}
+          height={19}
+          aria-hidden="true"
+          style={{position: 'absolute', filter: 'drop-shadow(0 1px 1px #aaa)', transform: 'translate(-1000px, -1000px)'}}>
+          <g transform="matrix(1, 0, 0, 1, -150, -63.406998)">
+            <path d="M150 79.422V63.407l11.591 11.619h-6.781l-.411.124Z" fill="#fff" fillRule="evenodd" />
+            <path d="m159.084 80.1-3.6 1.535-4.684-11.093 3.686-1.553Z" fill="#fff" fillRule="evenodd" />
+            <path d="m157.751 79.416-1.844.774-3.1-7.374 1.841-.775Z" fillRule="evenodd" />
+            <path d="M151 65.814V77l2.969-2.866.431-.134h4.768Z" fillRule="evenodd" />
+          </g>
+        </svg>
+
+        <div className={style({position: 'relative', paddingBottom: 64})}>
+          <ActionMenu>
+            <MenuItem>Edit</MenuItem>
+            <MenuItem>Delete</MenuItem>
+            <SubmenuTrigger>
+              <MenuItem>Share</MenuItem>
+              <Menu>
+                <MenuItem>Email</MenuItem>
+                <MenuItem>SMS</MenuItem>
+                <MenuItem>Copy Link</MenuItem>
+              </Menu>
+            </SubmenuTrigger>
+          </ActionMenu>
+        </div>
+
+      {/* <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={761}
+        height={321}
+        style={{
+          maxHeight: 321,
+          background: 'var(--spectrum-global-color-gray-100)',
+          width: '100%'
+        }}
+        viewBox="0 0 770 321">
+        <defs>
+          <filter
+            id="b"
+            width={226}
+            height={156}
+            x={271}
+            y={57}
+            filterUnits="userSpaceOnUse">
+            <feOffset dy={1} />
+            <feGaussianBlur result="blur" stdDeviation={2} />
+            <feFlood floodOpacity={0.149} />
+            <feComposite in2="blur" operator="in" />
+            <feComposite in="SourceGraphic" />
+          </filter>
+          <filter
+            id="c"
+            width={226}
+            height={206}
+            x={477}
+            y={105}
+            filterUnits="userSpaceOnUse">
+            <feOffset dy={1} />
+            <feGaussianBlur result="blur-2" stdDeviation={2} />
+            <feFlood floodOpacity={0.149} />
+            <feComposite in2="blur-2" operator="in" />
+            <feComposite in="SourceGraphic" />
+          </filter>
+          <clipPath id="a">
+            <path d="M0 0h761v321H0z" />
+          </clipPath>
+        </defs>
+        <g clipPath="url(#a)" data-name="Menu trigger anatomy \u2013 2">
+          <g filter="url(#b)">
+            <g
+              fill="var(--anatomy-gray-50)"
+              stroke="var(--anatomy-gray-400)"
+              strokeWidth={1.5}
+              data-name="rectangle-12"
+              transform="translate(277 62)">
+              <rect width={214} height={144} stroke="none" rx={6} />
+              <rect
+                width={212.5}
+                height={142.5}
+                x={0.75}
+                y={0.75}
+                fill="none"
+                rx={5.25} />
+            </g>
+          </g>
+          <g data-name="Action button">
+            <g fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-400)" transform="translate(277 22)">
+              <rect width={124} height={32} stroke="none" rx={4} />
+              <rect width={123} height={31} x={0.5} y={0.5} fill="none" rx={3.5} />
+            </g>
+            <g fill="var(--anatomy-gray-800)" transform="translate(277 22)">
+              <circle
+                cx={1.7}
+                cy={1.7}
+                r={1.7}
+                data-name="Ellipse 387"
+                transform="translate(17.2 14.4)" />
+              <circle
+                cx={1.7}
+                cy={1.7}
+                r={1.7}
+                data-name="Ellipse 388"
+                transform="translate(23.05 14.4)" />
+              <circle
+                cx={1.7}
+                cy={1.7}
+                r={1.7}
+                data-name="Ellipse 389"
+                transform="translate(11.35 14.4)" />
+            </g>
+            <text
+              fill="var(--anatomy-gray-800)"
+              className={style({font: 'body-sm'})}
+              transform="translate(313 42)">
+              <tspan x={0} y={0}>
+                {'More Actions'}
+              </tspan>
+            </text>
+          </g>
+          <text
+            fill="var(--anatomy-gray-800)"
+            className={style({font: 'body-xl'})}
+            data-name="Option 3"
+            transform="translate(296 190)">
+            <tspan x={0} y={0}>
+              {'Option 3'}
+            </tspan>
+          </text>
+          <text
+            ref={option2Ref}
+            fill="var(--anatomy-gray-800)"
+            data-name="Option 2"
+            className={style({font: 'body-xl'})}
+            transform="translate(296 142)">
+            <tspan x={0} y={0}>
+              {'Option 2'}
+            </tspan>
+          </text>
+          <text
+            ref={option1Ref}
+            fill="var(--anatomy-gray-800)"
+            data-name="Option 1"
+            className={style({font: 'body-xl'})}
+            transform="translate(296 94)">
+            <tspan x={0} y={0}>
+              {'Option 1'}
+            </tspan>
+          </text>
+          {hovered === 'Option 1' && (
+            <g
+              fill="var(--anatomy-gray-600)"
+              stroke="rgba(0,0,0,0)"
+              data-name="Hovered Option 1"
+              opacity={0.081}>
+              <path
+                stroke="none"
+                d="M284 62h200a6 6 0 0 1 6 6v42H278V68a6 6 0 0 1 6-6Z" />
+              <path
+                fill="none"
+                d="M284 62.5h200a5.5 5.5 0 0 1 5.5 5.5v41.5h-211V68a5.5 5.5 0 0 1 5.5-5.5Z" />
+            </g>
+          )}
+          {hovered === 'Option 2' && (
+            <g fill="var(--anatomy-gray-600)" data-name="Hovered Option 2" opacity={0.079}>
+              <path d="M278 110h212v48H278Z" />
+              <path
+                fill="rgba(0,0,0,0)"
+                d="M279 111v46h210v-46H279m-1-1h212v48H278v-48Z" />
+            </g>
+          )}
+          {hovered === 'Option 3' && (
+            <g
+              fill="var(--anatomy-gray-600)"
+              stroke="rgba(0,0,0,0)"
+              data-name="Hovered Option 3"
+              opacity={0.081}>
+              <path
+                stroke="none"
+                d="M484 206H284a6 6 0 0 1-6-6v-42h212v42a6 6 0 0 1-6 6Z" />
+              <path
+                fill="none"
+                d="M484 205.5H284a5.5 5.5 0 0 1-5.5-5.5v-41.5h211V200a5.5 5.5 0 0 1-5.5 5.5Z" />
+            </g>
+          )}
+          {isSubmenuOpen && (
+            <>
+              <g filter="url(#c)">
+                <g
+                  fill="var(--anatomy-gray-50)"
+                  stroke="var(--anatomy-gray-400)"
+                  strokeWidth={1.5}
+                  data-name="Submenu"
+                  transform="translate(483 110)">
+                  <rect width={214} height={194} stroke="none" rx={6} />
+                  <rect
+                    width={212.5}
+                    height={192.5}
+                    x={0.75}
+                    y={0.75}
+                    fill="none"
+                    rx={5.25} />
+                </g>
+              </g>
+              <text
+                ref={submenuOptionRef}
+                fill="var(--anatomy-gray-800)"
+                data-name="Submenu Option 3"
+                className={style({font: 'body-xl'})}
+                transform="translate(502 238)">
+                <tspan x={0} y={0}>
+                  {'Submenu Option 3'}
+                </tspan>
+              </text>
+              <text
+                fill="var(--anatomy-gray-800)"
+                data-name="Submenu Option 4"
+                className={style({font: 'body-xl'})}
+                transform="translate(502 286)">
+                <tspan x={0} y={0}>
+                  {'Submenu Option 4'}
+                </tspan>
+              </text>
+              <text
+                fill="var(--anatomy-gray-800)"
+                data-name="Submenu Option 2"
+                className={style({font: 'body-xl'})}
+                transform="translate(501 190)">
+                <tspan x={0} y={0}>
+                  {'Submenu Option 2'}
+                </tspan>
+              </text>
+              <text
+                fill="var(--anatomy-gray-800)"
+                data-name="Submenu Option 1"
+                className={style({font: 'body-xl'})}
+                transform="translate(502 142)">
+                <tspan x={0} y={0}>
+                  {'Submenu Option 1'}
+                </tspan>
+              </text>
+            </>
+          )}
+          <path
+            fill="var(--anatomy-gray-800)"
+            d="M469.587 140.449a1.026 1.026 0 0 1-.947-.6.922.922 0 0 1 .228-1.047l4.09-3.8-4.09-3.8a.923.923 0 0 1-.01-1.364 1.07 1.07 0 0 1 1.448-.008l4.832 4.485a.924.924 0 0 1 0 1.371l-4.832 4.485a1.054 1.054 0 0 1-.719.278Z"
+            data-name="Option 2 arrow" />
+        </g>
+      </svg> */}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/Typography.tsx b/packages/dev/s2-docs/pages/s2/home/Typography.tsx
new file mode 100644
index 00000000000..089dff835f4
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/Typography.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import { Avatar, TextArea } from "@react-spectrum/s2";
+import { style } from "@react-spectrum/s2/style" with {type: 'macro'};
+
+export function Typography() {
+  return (
+    <div className={style({display: 'flex', columnGap: 16})}>
+      <div
+        className={style({
+          backgroundColor: 'base',
+          padding: 16,
+          boxSizing: 'border-box',
+          borderRadius: 'lg',
+          width: 'full'
+        })}>
+        <div className={style({display: 'flex', alignItems: 'center', columnGap: 8, marginBottom: 20})}>
+          <h3 className={style({font: 'title-lg', marginY: 0})}>Comments</h3>
+          <Arrow />
+          <Style>title-lg</Style>
+        </div>
+        <div className={style({display: 'flex', flexDirection: 'column', gap: 20})}>
+          <Comment
+            author={<>Nikolas Gibbons<Arrow /><Style>title-sm</Style></>}
+            avatar="https://www.untitledui.com/images/avatars/nikolas-gibbons"
+            date={<>2 hours ago<Arrow /><Style>detail-sm</Style></>}
+            body={<>Thanks for the feedback!<Arrow /><Style>body</Style></>}
+            showArrow />
+          <Comment
+            author="Adriana Sullivan"
+            avatar="https://www.untitledui.com/images/avatars/adriana-sullivan"
+            date="July 14"
+            body="Transitions are smooth! Could we speed them up just a bit?" />
+          <Comment
+            author="Frank Whitaker"
+            avatar="https://www.untitledui.com/images/avatars/frank-whitaker?"
+            date="July 13"
+            body="Love the direction. Could we simplify the header a bit more?" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  string: style({color: 'green-1000'}),
+  number: style({color: 'pink-1000'}),
+  property: style({color: 'indigo-1000'}),
+  function: style({color: 'red-1000'}),
+  variable: style({color: 'fuchsia-1000'})
+};
+
+function Style({children}: {children: string}) {
+  return (
+    <pre className={style({font: 'code-xs', marginY: 0, marginTop: 2})}>
+      <span className={style({display: {default: 'none', sm: 'inline'}})}>
+        <span className={styles.function}>style</span>
+        {'({'}
+        <span className={styles.property}>font</span>
+        {': '}
+      </span>
+      <span className={styles.string}>'{children}'</span>
+      <span className={style({display: {default: 'none', sm: 'inline'}})}>
+        {'})'}
+      </span>
+    </pre>
+  );
+}
+
+export function Comment({author, avatar, date, body}: any) {
+  return (
+    <div
+      className={style({
+        display: 'grid',
+        gridTemplateAreas: [
+          'avatar name',
+          'avatar date',
+          '. .',
+          'body body'
+        ],
+        gridTemplateColumns: ['auto', '1fr'],
+        gridTemplateRows: ['auto', 'auto', 8, 'auto'],
+        columnGap: 8,
+        alignItems: 'center'
+      })}>
+      <Avatar styles={style({gridArea: 'avatar'})} src={avatar} size={32} />
+      <span className={style({gridArea: 'name', font: 'title-sm', color: {default: 'title', forcedColors: 'ButtonText'}, display: 'flex', alignItems: 'center', columnGap: 8})}>
+        {author}
+      </span>
+      <span className={style({gridArea: 'date', font: 'detail-sm', color: {default: 'detail', forcedColors: 'ButtonText'}, display: 'flex', alignItems: 'center', columnGap: 8})}>
+        {date}
+      </span>
+      <span className={style({gridArea: 'body', font: 'body', color: {default: 'body', forcedColors: 'ButtonText'}, display: 'flex', alignItems: 'center', columnGap: 8})}>
+        {body}
+      </span>
+    </div>
+  )
+}
+
+function Arrow() {
+  return (
+    <svg
+      height={5}
+      className={style({
+        flexGrow: 1,
+        flexShrink: 0,
+        minWidth: 0,
+        contain: 'size'
+      })}>
+      <circle r={2.5} cx={2.5} cy={2.5} className={style({fill: 'gray-500'})} />
+      <line x1={2.5} y1={2.5} x2="100%" y2={2.5} className={style({stroke: 'gray-500'})} strokeWidth={1.2} strokeLinecap="round" />
+    </svg>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/app/AccountMenu.tsx b/packages/dev/s2-docs/pages/s2/home/app/AccountMenu.tsx
new file mode 100644
index 00000000000..6acab019fe6
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/app/AccountMenu.tsx
@@ -0,0 +1,78 @@
+'use client';
+import Settings from '@react-spectrum/s2/icons/Settings';
+import Org from '@react-spectrum/s2/icons/Buildings';
+import { style } from "@react-spectrum/s2/style" with { type: 'macro' };
+import { Text, ActionButton, Avatar, MenuTrigger, Popover, Switch, Divider, Menu, MenuSection, SubmenuTrigger, MenuItem } from '@react-spectrum/s2';
+import { useLocale } from 'react-aria';
+import { useContext } from 'react';
+import { useMediaQuery } from '@react-spectrum/utils';
+import { PopoverContext } from 'react-aria-components';
+import { HCMContext } from '../HCM';
+import { ColorSchemeContext } from '../ExampleApp';
+
+export function AccountMenu() {
+  let {locale} = useLocale();
+  let {colorScheme, setColorScheme} = useContext(ColorSchemeContext);
+  let prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+  let isDark = colorScheme == null ? prefersDark : colorScheme === 'dark';
+  return (
+    <MenuTrigger>
+      <ActionButton isQuiet aria-label="Account">
+        <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
+      </ActionButton>
+      <PopoverContextProvider>
+        <Popover hideArrow placement="bottom end">
+          <div className={style({paddingTop: 4, display: 'flex', flexDirection: 'column', gap: 12})}>
+            <div className={style({display: 'flex', gap: 12, alignItems: 'center', marginX: 12})}>
+              <Avatar src="https://i.imgur.com/xIe7Wlb.png" size={56} />
+              <div>
+                <div className={style({font: 'title', color: {default: 'title', forcedColors: 'ButtonText'}})}>Devon Govett</div>
+                <div className={style({font: 'ui', color: {default: 'body', forcedColors: 'ButtonText'}})}>user@example.com</div>
+                <Switch isSelected={isDark} onChange={isSelected => setColorScheme(isSelected ? 'dark' : 'light')} styles={style({marginTop: 4})}>
+                  {locale === 'ar-AE' ? 'المظهر الداكن' : 'Dark theme'}
+                </Switch>
+              </div>
+            </div>
+            <Divider styles={style({marginX: 12})} />
+            <Menu aria-label="Account">
+              <MenuSection>
+                <SubmenuTrigger>
+                  <MenuItem>
+                    <Org />
+                    <Text slot="label">{locale === 'ar-AE' ? 'منظمة' : 'Organization'}</Text>
+                    <Text slot="value">Adobe</Text>
+                  </MenuItem>
+                  <PopoverContextProvider>
+                    <Menu selectionMode="single" selectedKeys={['adobe']}>
+                      <MenuItem id="adobe">Adobe</MenuItem>
+                      <MenuItem id="nike">Nike</MenuItem>
+                      <MenuItem id="apple">Apple</MenuItem>
+                    </Menu>
+                  </PopoverContextProvider>
+                </SubmenuTrigger>
+                <MenuItem>
+                  <Settings />
+                  <Text slot="label">{locale === 'ar-AE' ? 'إعدادات' : 'Settings'}</Text>
+                </MenuItem>
+              </MenuSection>
+              <MenuSection>
+                <MenuItem>{locale === 'ar-AE' ? 'الإشعارات القانونية' : 'Legal notices'}</MenuItem>
+                <MenuItem>{locale === 'ar-AE' ? 'تسجيل الخروج' : 'Sign out'}</MenuItem>
+              </MenuSection>
+            </Menu>
+          </div>
+        </Popover>
+      </PopoverContextProvider>
+    </MenuTrigger>
+  );
+}
+
+export function PopoverContextProvider({children}: any) {
+  let value = useContext(PopoverContext) as any;
+  let hcm = useContext(HCMContext) as any;
+  return (
+    <PopoverContext value={{...value, ...hcm, style: {...value?.style, ...hcm?.style}}}>
+      {children}
+    </PopoverContext>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/app/Arrows.tsx b/packages/dev/s2-docs/pages/s2/home/app/Arrows.tsx
new file mode 100644
index 00000000000..b22f52f6b43
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/app/Arrows.tsx
@@ -0,0 +1,70 @@
+import { Link } from '@react-spectrum/s2';
+import { style } from '@react-spectrum/s2/style' with {type: 'macro'};
+import { ReactNode } from 'react';
+
+export function Arrows({children}: {children: ReactNode}): ReactNode {
+  return (
+    <svg
+      viewBox="0 0 1324 700"
+      style={{position: 'absolute', insetInline: -150, insetBlock: -50, width: 'calc(100% + 300px)', height: 'calc(100% + 100px)', pointerEvents: 'none'}}
+      className={style({
+        display: {
+          default: 'none',
+          '@media (width >= 1400px)': 'block'
+        }
+      })}>
+      <defs>
+        <marker
+          id="arrow"
+          viewBox="0 0 6 6"
+          refX={3}
+          refY={3}
+          markerWidth={6}
+          markerHeight={6}
+          orient="auto-start-reverse"
+          fill="light-dark(black,white)">
+          <circle r={3} cx={3} cy={3} />
+        </marker>
+        <mask id="app-mask" maskUnits="userSpaceOnUse">
+          <rect width="100%" height="100%" fill="white" />
+          <rect x={150} y={50} width={1024} height={600} fill="black" />
+        </mask> 
+        <mask id="app-mask2" maskUnits="userSpaceOnUse">
+          <rect width="100%" height="100%" fill="black" />
+          <rect x={150} y={50} width={1024} height={600} fill="white" />
+        </mask> 
+      </defs>
+      {children}
+    </svg>
+  );
+}
+
+interface ArrowProps {
+  href: string,
+  children: ReactNode,
+  textX: number,
+  x1?: number,
+  x2?: number,
+  points?: string,
+  y: number,
+  marker?: 'markerStart' | 'markerEnd' | 'none'
+}
+
+export function Arrow({href, children, textX, x1, x2, points, y, marker = 'markerEnd'}: ArrowProps): ReactNode {
+  let markerProps = marker === 'none' ? {} : {...{[marker]: 'url(#arrow)'}};
+  return (
+    <>
+      {points
+        ? <polyline points={points} {...markerProps} stroke="white" fill="none" mask="url(#app-mask)" />
+        : <line x1={x1} y1={y} x2={x2} y2={y} {...markerProps} stroke="white" mask="url(#app-mask)" />
+      }
+      {points
+        ? <polyline points={points} {...markerProps} stroke="light-dark(black,white)" fill="none" mask="url(#app-mask2)" />
+        : <line x1={x1} y1={y} x2={x2} y2={y} {...markerProps} stroke="light-dark(black,white)" mask="url(#app-mask2)" />
+      }
+      <Link href={href} target="_blank" isQuiet isStandalone staticColor="white" UNSAFE_style={{pointerEvents: 'auto'}}>
+        <text x={textX} y={y + 3} fill="currentColor" textDecoration="inherit">{children}</text>
+      </Link>
+    </>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/app/Home.tsx b/packages/dev/s2-docs/pages/s2/home/app/Home.tsx
new file mode 100644
index 00000000000..c165dc44e33
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/app/Home.tsx
@@ -0,0 +1,138 @@
+'use client';
+import { style } from "@react-spectrum/s2/style" with { type: 'macro' };
+import { Card, CardPreview, Content, Text, Button, DropZone, IllustratedMessage, Heading, ButtonGroup } from '@react-spectrum/s2';
+import DropToUpload from '@react-spectrum/s2/illustrations/gradient/generic2/DropToUpload';
+import AIGenerateImage from '@react-spectrum/s2/illustrations/gradient/generic2/AIGenerateImage';
+import MagicWand from '@react-spectrum/s2/illustrations/gradient/generic2/MagicWand';
+import Properties from '@react-spectrum/s2/illustrations/gradient/generic2/Properties';
+// @ts-ignore
+import Banner from './banner.svg';
+import {PhotoCard} from './Photos';
+import { Arrow, Arrows } from "./Arrows";
+import { useEffect, useState } from "react";
+
+export function HomePage() {
+  return (
+    <div className={style({ display: 'flex', flexDirection: 'column', size: 'full', paddingBottom: 32 })}>
+      <div className={style({ paddingX: 32, paddingY: 40, flexShrink: 0, marginBottom: 32, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'center', borderRadius: 'lg', overflow: 'clip' })} style={{ position: 'relative', isolation: 'isolate' }}>
+        <Banner style={{position: 'absolute', zIndex: -1, top: 0, left: 0, width: '100%', height: '100%'}} preserveAspectRatio="none" />
+        <h2 className={style({ marginTop: 0, font: 'heading', color: 'gray-1000' })}>Find faster with semantic search</h2>
+        <p className={style({ font: 'body', color: 'gray-1000', marginTop: 0, marginBottom: 32 })}>Quickly find visuals, words, sounds, and more in your media.</p>
+        <Button staticColor="auto">Watch tutorial</Button>
+      </div>
+      <h3 className={style({ font: 'title-lg' })}>Get started</h3>
+      <div className={style({display: 'flex', gap: 16, padding: 16, margin: -16, flexShrink: 0, height: 'min', overflowX: 'auto'})}>
+        <DropZone styles={style({flexGrow: 2, flexShrink: 0})}>
+          <IllustratedMessage orientation="horizontal" size="S">
+            <DropToUpload />
+            <Heading>
+              Drag and drop your file
+            </Heading>
+            <Content>
+              Or, select a file from your computer
+            </Content>
+            <ButtonGroup>
+              <Button fillStyle="outline">Add photos</Button>
+            </ButtonGroup>
+          </IllustratedMessage>
+        </DropZone>
+        <Card href="#" styles={style({minWidth: 'max'})}>
+          <CardPreview>
+            <div
+              className={style({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              })}>
+              <AIGenerateImage />
+            </div>
+          </CardPreview>
+          <Content>
+            <Text slot="title">Generate an image</Text>
+            <Text slot="description">Create an image from text</Text>
+          </Content>
+        </Card>
+        <Card href="#" styles={style({minWidth: 'max'})}>
+          <CardPreview>
+            <div
+              className={style({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              })}>
+              <MagicWand />
+            </div>
+          </CardPreview>
+          <Content>
+            <Text slot="title">Apply a preset</Text>
+            <Text slot="description">Enhance an existing image</Text>
+          </Content>
+        </Card>
+        <Card href="#" styles={style({minWidth: 'max'})}>
+          <CardPreview>
+            <div
+              className={style({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              })}>
+              <Properties />
+            </div>
+          </CardPreview>
+          <Content>
+            <Text slot="title">Adjust colors</Text>
+            <Text slot="description">Manually edit an image</Text>
+          </Content>
+        </Card>
+      </div>
+      <h3 className={style({ font: 'title-lg', marginTop: 40 })}>Recents</h3>
+      <div className={style({display: 'flex', gap: 16, padding: 16, margin: -16, flexShrink: 0, height: 'min', overflowX: 'auto'})}>
+        <PhotoCard
+          styles={style({minWidth: 200})}
+          item={{
+            urls: {regular: 'https://images.unsplash.com/photo-1763641683842-3b4f09950d67?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2Mzc1NDk4OXw&ixlib=rb-4.1.0&q=80&w=1080'},
+          }} />
+        <PhotoCard
+          styles={style({minWidth: 200})}
+          item={{
+            urls: {regular: 'https://images.unsplash.com/photo-1762532985216-6561bb733c56?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2Mzc1NDk4OXw&ixlib=rb-4.1.0&q=80&w=1080'},
+          }} />
+        <PhotoCard
+          styles={style({minWidth: 200})}
+          item={{
+            urls: {regular: 'https://images.unsplash.com/photo-1762385653060-52aa4ec2937d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2Mzc2MTUxOHw&ixlib=rb-4.1.0&q=80&w=1080'},
+          }} />
+        <PhotoCard
+          styles={style({minWidth: 200})}
+          item={{
+            urls: {regular: 'https://images.unsplash.com/photo-1762030085994-79285eee5bc9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2Mzc2MTUzMHw&ixlib=rb-4.1.0&q=80&w=1080'},
+          }} />
+        
+      </div>
+    </div>
+  );
+}
+
+export function HomeArrows() {
+  let [isScrolled, setScrolled] = useState(false);
+  useEffect(() => {
+    let content = document.querySelector('[data-content]') as HTMLElement;
+    if (content) {
+      content.onscroll = () => {
+        setScrolled(content.scrollTop > 0);
+      };
+    }
+  }, []);
+
+  return (
+    <Arrows>
+      <Arrow textX={75} x1={120} x2={160} y={130} href="Button">Button</Arrow>
+      <Arrow textX={38} x1={120} x2={160} y={618} href="ActionButton">ActionButton</Arrow>
+      {!isScrolled && <Arrow textX={56} x1={120} x2={250} y={520} href="DropZone">DropZone</Arrow>}
+      <Arrow textX={632} y={24} points="662,34 662,64" marker="markerEnd" href="SearchField">SearchField</Arrow>
+      <Arrow textX={1040} y={24} points="1064,34 1064,64" marker="markerEnd" href="Popover">Popover</Arrow>
+      <Arrow textX={1206} x1={1198} x2={1158} y={82} marker="markerEnd" href="Menu">Menu</Arrow>
+      {!isScrolled && <Arrow textX={1206} x1={1198} x2={1120} y={520} href="Card">Card</Arrow>}
+    </Arrows>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/app/Ideas.tsx b/packages/dev/s2-docs/pages/s2/home/app/Ideas.tsx
new file mode 100644
index 00000000000..17e7a030cac
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/app/Ideas.tsx
@@ -0,0 +1,102 @@
+import {
+  Card, CardView,
+  CardViewProps,
+  Collection,
+  CollectionCardPreview,
+  Content, Image, SkeletonCollection,
+  Text
+} from '@react-spectrum/s2';
+import Folder from '@react-spectrum/s2/icons/Folder';
+import { style } from '@react-spectrum/s2/style' with { type: 'macro' };
+import { useLocale } from 'react-aria';
+import { useAsyncList } from 'react-stately';
+import { Arrow, Arrows } from './Arrows';
+
+export function Ideas() {
+  let {locale} = useLocale();
+  let list = useAsyncList<Topic, number | null>({
+    async load({signal, cursor}) {
+      let page = cursor || 1;
+      let res = await fetch(
+        `https://api.unsplash.com/topics?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
+        {signal}
+      );
+      let items = (await res.json()).filter((topic: Topic) => !!topic.preview_photos);
+      return {items, cursor: items.length ? page + 1 : null};
+    }
+  });
+
+  return (
+    <>
+      <div className={style({font: 'heading'})}>{locale === 'ar-AE' ? 'أفكار' : 'Ideas'}</div>
+      <CardView
+        aria-label="Ideas"
+        loadingState={list.loadingState}
+        onLoadMore={list.loadMore}
+        styles={style({flexGrow: 1, minHeight: 0, maxHeight: 500, marginX: -12})}>
+        <Collection items={list.items}>
+          {topic => <TopicCard topic={topic} />}
+        </Collection>
+        {(list.loadingState === 'loading' || list.loadingState === 'loadingMore') && (
+          <SkeletonCollection>
+            {() => (
+              <TopicCard
+                topic={{
+                  id: Math.random().toString(36),
+                  title: 'Topic title',
+                  total_photos: 80,
+                  links: {html: ''},
+                  preview_photos: [
+                    {id: 'a', urls: {small: ''}},
+                    {id: 'b', urls: {small: ''}},
+                    {id: 'c', urls: {small: ''}},
+                    {id: 'd', urls: {small: ''}}
+                  ]
+                }} />
+            )}
+          </SkeletonCollection>
+        )}
+      </CardView>
+    </>
+  );
+}
+
+interface Topic {
+  id: string,
+  title: string,
+  total_photos: number,
+  links: {html: string},
+  preview_photos: {id: string, urls: {small: string}}[]
+}
+
+function TopicCard({topic}: {topic: Topic}) {
+  return (
+    <Card href={topic.links.html} target="_blank" textValue={topic.title}>
+      <CollectionCardPreview>
+        {topic.preview_photos.slice(0, 4).map(photo => (
+          <Image key={photo.id} alt="" src={photo.urls.small} />
+        ))}
+      </CollectionCardPreview>
+      <Content>
+        <Text slot="title">{topic.title}</Text>
+        <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
+          <Folder />
+          <Text slot="description">{topic.total_photos.toLocaleString()} photos</Text>
+        </div>
+      </Content>
+    </Card>
+  );
+}
+
+export function IdeasArrows() {
+  return (
+    <Arrows>
+      <Arrow textX={75} x1={120} x2={160} y={130} href="Button">Button</Arrow>
+      <Arrow textX={38} x1={120} x2={160} y={618} href="ActionButton">ActionButton</Arrow>
+      <Arrow textX={632} y={24} points="662,34 662,64" marker="markerEnd" href="SearchField">SearchField</Arrow>
+      <Arrow textX={1040} y={24} points="1064,34 1064,64" marker="markerEnd" href="Popover">Popover</Arrow>
+      <Arrow textX={1206} x1={1198} x2={1158} y={82} marker="markerEnd" href="Menu">Menu</Arrow>
+      <Arrow textX={1206} x1={1198} x2={1142} y={350} marker="markerEnd" href="Card.html#collection">CollectionCard</Arrow>
+    </Arrows>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/app/Notifications.tsx b/packages/dev/s2-docs/pages/s2/home/app/Notifications.tsx
new file mode 100644
index 00000000000..6ebfa69d7e5
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/app/Notifications.tsx
@@ -0,0 +1,81 @@
+import {ActionButton, DialogTrigger, NotificationBadge, Popover} from '@react-spectrum/s2';
+import Bell from '@react-spectrum/s2/icons/Bell';
+import {Comment} from '../Typography';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import { PopoverContextProvider } from './AccountMenu';
+import { useLocale } from 'react-aria';
+
+const COMMENTS = [
+  {
+    author: 'Nikolas Gibbons',
+    avatar: 'https://www.untitledui.com/images/avatars/nikolas-gibbons',
+    date: '2 hours ago',
+    body: 'Thanks for the feedback!'
+  },
+  {
+    author: 'Adriana Sullivan',
+    avatar: 'https://www.untitledui.com/images/avatars/adriana-sullivan',
+    date: 'July 14',
+    body: 'Transitions are smooth! Could we speed them up just a bit?'
+  },
+  {
+    author: 'Frank Whitaker',
+    avatar: 'https://www.untitledui.com/images/avatars/frank-whitaker?',
+    date: 'July 13',
+    body: 'Love the direction. Could we simplify the header a bit more?'
+  }
+];
+
+const ARABIC_COMMENTS = [
+  {
+    author: 'يوسف العتيبي',
+    avatar: 'https://www.untitledui.com/images/avatars/nikolas-gibbons',
+    date: 'منذ ساعتين',
+    body: 'شكرا على تعليقاتك!'
+  },
+  {
+    author: 'ليلى السالم',
+    avatar: 'https://www.untitledui.com/images/avatars/adriana-sullivan',
+    date: '14 يوليو',
+    body: 'الانتقالات سلسة! هل يمكننا تسريعها قليلاً؟'
+  },
+  {
+    author: 'خالد بن رشيد',
+    avatar: 'https://www.untitledui.com/images/avatars/frank-whitaker?',
+    date: '13 يوليو',
+    body: 'أعجبني الاتجاه. هل يُمكننا تبسيط العنوان أكثر؟'
+  }
+];
+
+export function Notifications() {
+  let {locale} = useLocale();
+  let comments = locale === 'ar-AE' ? ARABIC_COMMENTS : COMMENTS;
+  return (
+    <DialogTrigger>
+      <ActionButton isQuiet aria-label="3 notifications">
+        <Bell />
+        <NotificationBadge value={3} />
+      </ActionButton>
+      <PopoverContextProvider>
+        <Popover styles={style({maxWidth: 300})}>
+          <div
+            className={style({
+              display: 'flex',
+              flexDirection: 'column',
+              rowGap: 20,
+              overflow: 'auto',
+              flexGrow: 1,
+              minHeight: 0
+            })}>
+            <h3 className={style({font: 'title-lg', color: {default: 'title', forcedColors: 'ButtonText'}, marginY: 0})}>
+              {locale === 'ar-AE' ? 'إشعارات' : 'Notifications'}
+            </h3>
+            {comments.map((comment, i) => (
+              <Comment key={i} {...comment} />
+            ))}
+          </div>
+        </Popover>
+      </PopoverContextProvider>
+    </DialogTrigger>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/app/Photos.tsx b/packages/dev/s2-docs/pages/s2/home/app/Photos.tsx
new file mode 100644
index 00000000000..c57a318f945
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/app/Photos.tsx
@@ -0,0 +1,107 @@
+'use client';
+import ViewGridFluid from '@react-spectrum/s2/icons/ViewGridFluid';
+import ViewGrid from '@react-spectrum/s2/icons/ViewGrid';
+import { style } from "@react-spectrum/s2/style" with { type: 'macro' };
+import { Card, CardPreview, CardView, Collection, SkeletonCollection, Image, Text, ActionButton, ActionBar, SegmentedControl, SegmentedControlItem } from '@react-spectrum/s2';
+import { useLocale } from 'react-aria';
+import { useAsyncList } from 'react-stately';
+import { useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+
+export function Photos(props: any) {
+  let [layout, setLayout] = useState<'waterfall' | 'grid'>('waterfall');
+  let {direction} = useLocale();
+  let list = useAsyncList<any, number | null>({
+    async load({signal, cursor, items}) {
+      let page = cursor || 1;
+      let res = await fetch(
+        `https://api.unsplash.com/topics/nature/photos?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
+        {signal}
+      );
+      let nextItems = await res.json();
+      // Filter duplicates which might be returned by the API.
+      let existingKeys = new Set(items.map(i => i.id));
+      nextItems = nextItems.filter((i: any) => !existingKeys.has(i.id) && (i.description || i.alt_description));
+      return {items: nextItems, cursor: nextItems.length ? page + 1 : null};
+    }
+  });
+
+  return (
+    <>
+      <div className={style({display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8})}>
+        <div className={style({font: 'heading'})}>{direction === 'rtl' ? 'الصور' : 'Photos'}</div>
+        <SegmentedControl selectedKey={layout} onSelectionChange={setLayout as any}>
+          <SegmentedControlItem id="waterfall" aria-label="Waterfall"><ViewGridFluid /></SegmentedControlItem>
+          <SegmentedControlItem id="grid" aria-label="Grid"><ViewGrid /></SegmentedControlItem>
+        </SegmentedControl>
+      </div>
+      <CardView
+        aria-label="Nature photos"
+        size="S"
+        layout={layout}
+        // selectionMode="multiple"
+        // selectionStyle={list.selectedKeys === 'all' || list.selectedKeys.size > 0 ? 'checkbox' : 'highlight'}
+        selectedKeys={list.selectedKeys}
+        onSelectionChange={list.setSelectedKeys}
+        variant="quiet"
+        loadingState={list.loadingState}
+        onLoadMore={list.loadMore}
+        styles={style({flexGrow: 1, minHeight: 0, maxHeight: 500, marginX: -12})}>
+        <Collection items={list.items} dependencies={[layout]}>
+          {item => <PhotoCard item={item} layout={layout} onAction={props.onAction} />}
+        </Collection>
+        {(list.loadingState === 'loading' || list.loadingState === 'loadingMore') && (
+          <SkeletonCollection>
+            {() => (
+              <PhotoCard
+                item={{
+                  id: Math.random(),
+                  user: {name: 'Placeholder name', profile_image: {small: ''}},
+                  urls: {regular: ''},
+                  description: 'This is a fake description. Kinda long so it wraps to a new line.',
+                  alt_description: '',
+                  width: 400,
+                  height: 200 + Math.max(0, Math.round(Math.random() * 400))
+                }}
+                layout={layout} />
+            )}
+          </SkeletonCollection>
+        )}
+      </CardView>
+    </>
+  );
+}
+
+export function PhotoCard({item, layout, onAction, styles}: any) {
+  let imgRef = useRef<HTMLImageElement | null>(null);
+  return (
+    <Card
+      id={item.id}
+      styles={styles}
+      textValue={item.description || item.alt_description}
+      onAction={onAction && (() => {
+        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+          onAction([item, imgRef.current]);
+          return;
+        }
+
+        imgRef.current!.style.viewTransitionName = 'photo';
+        document.startViewTransition(() => {
+          imgRef.current!.style.viewTransitionName = '';
+          flushSync(() => onAction([item, imgRef.current]));
+        })
+      })}>
+      <CardPreview>
+        <Image
+          ref={imgRef}
+          data-photo-id={item.id}
+          src={item.urls.regular}
+          width={item.width}
+          height={item.height}
+          UNSAFE_style={{
+            aspectRatio: layout === 'waterfall' ? `${item.width} / ${item.height}` : undefined
+          }} />
+      </CardPreview>
+    </Card>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/app/Sidebar.tsx b/packages/dev/s2-docs/pages/s2/home/app/Sidebar.tsx
new file mode 100644
index 00000000000..7db3283821c
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/app/Sidebar.tsx
@@ -0,0 +1,211 @@
+'use client';
+import Add from '@react-spectrum/s2/icons/Add';
+import Home from '@react-spectrum/s2/icons/Home';
+import ImageIcon from '@react-spectrum/s2/icons/Image';
+import Lightbulb from '@react-spectrum/s2/icons/Lightbulb';
+import { focusRing, size, style } from "@react-spectrum/s2/style" with { type: 'macro' };
+import { ActionButton, Button, pressScale, createIcon } from '@react-spectrum/s2';
+import { useRef, useState } from 'react';
+import { ToggleButtonGroup as RACToggleButtonGroup, ToggleButton as RACToggleButton, useLocale } from 'react-aria-components';
+
+const XS = `@container (min-width: ${480 / 16}rem)`;
+const SM = `@container (min-width: ${(640 / 16)}rem)`;
+const MD = `@container (min-width: ${(768 / 16)}rem)`;
+const LG = `@container (width > ${(1024 / 16)}rem)`;
+
+const textStyle = style({
+  opacity: {
+    default: 0,
+    [LG]: 1,
+    state: {
+      expanded: 1,
+      collapsed: 0
+    }
+  },
+  transition: 'default',
+  transitionDuration: 300
+});
+
+export function Sidebar({page, onPageChange}: any) {
+  let [state, setState] = useState<null | 'expanded' | 'collapsed'>(null);
+  let {locale} = useLocale();
+  return (
+    <div
+      className={style({
+        gridArea: 'sidebar',
+        display: {
+          default: 'none',
+          [SM]: 'flex'
+        },
+        flexDirection: 'column',
+        gap: 8,
+        paddingX: 16,
+        paddingBottom: 16,
+        width: {
+          default: 32,
+          [LG]: 100,
+          state: {
+            expanded: 100,
+            collapsed: 32
+          }
+        },
+        overflow: 'clip',
+        transition: '[width]',
+        transitionDuration: 300
+      })({state})}>
+      {/* This button is actually kinda custom to support the expand/collapsed state... */}
+      <Button
+        variant="accent"
+        styles={style({marginBottom: 8, width: {default: 32, [LG]: 80, state: {expanded: 80, collapsed: 32}}})({state})}
+        UNSAFE_style={{alignItems: 'center', justifyContent: 'start', overflow: 'clip', transition: 'all 300ms'}}>
+        <span className={style({marginStart: size(6)})}>
+          <Add />
+        </span>
+        <span className={textStyle({state})}>{locale === 'ar-AE' ? 'يخلق' : 'Create'}</span>
+      </Button>
+      <SideNav
+        aria-label="Navigation"
+        isQuiet
+        orientation="vertical"
+        selectedKeys={[page || 'photos']}
+        onSelectionChange={(keys: any) => onPageChange?.([...keys][0])}
+        disallowEmptySelection>
+        <SideNavItem id="home">
+          <Home />
+          <span className={textStyle({state})}>{locale === 'ar-AE' ? 'بيت' : 'Home'}</span>
+        </SideNavItem>
+        <SideNavItem id="photos">
+          <ImageIcon />
+          <span className={textStyle({state})}>{locale === 'ar-AE' ? 'الصور' : 'Photos'}</span>
+        </SideNavItem>
+        <SideNavItem id="ideas">
+          <Lightbulb />
+          <span className={textStyle({state})}>{locale === 'ar-AE' ? 'أفكار' : 'Ideas'}</span>
+        </SideNavItem>
+      </SideNav>
+      <div className={style({flexGrow: 1})} />
+      <PanelToggleButton state={state} setState={setState} />
+    </div>
+  )
+}
+
+function PanelToggleButton({state, setState}: any) {
+  let [isHovered, setHovered] = useState(false);
+  return (
+    <ActionButton
+      isQuiet
+      aria-label="Toggle sidebar"
+      styles={style({alignSelf: 'start'})}
+      // @ts-ignore - should we expose this?
+      onHoverChange={setHovered}
+      onPress={(e) => {
+        if (state == null) {
+          let container = e.target.closest('[data-container]') as HTMLElement;
+          setState(container?.offsetWidth > 1024 ? 'collapsed' : 'expanded')
+        } else {
+          setState(state === 'expanded' ? 'collapsed' : 'expanded');
+        }
+        setHovered(false);
+      }}>
+      {/* @ts-ignore */}
+      <PanelIcon state={state} isHovered={isHovered} />
+    </ActionButton>
+  );
+}
+
+const PanelIcon = createIcon(props => {
+  let {state, isHovered, ...otherProps} = props as any;
+  return (
+    <svg viewBox="0 0 20 20" fill="var(--iconPrimary)" {...otherProps}>
+      <path d="M15.75 18H4.25C3.00977 18 2 16.9907 2 15.75V4.25C2 3.00928 3.00977 2 4.25 2H15.75C16.9902 2 18 3.00928 18 4.25V15.75C18 16.9907 16.9902 18 15.75 18ZM4.25 3.5C3.83691 3.5 3.5 3.83643 3.5 4.25V15.75C3.5 16.1636 3.83691 16.5 4.25 16.5H15.75C16.1631 16.5 16.5 16.1636 16.5 15.75V4.25C16.5 3.83643 16.1631 3.5 15.75 3.5H4.25Z" fill="var(--iconPrimary)" />
+      <rect
+        x={5}
+        y={5}
+        rx={0.5}
+        height={10}
+        className={style({
+          transition: '[width]',
+          transitionDuration: 300,
+          width: {
+            default: '[1.5px]',
+            [LG]: '[5px]',
+            state: {
+              expanded: '[5px]',
+              collapsed: '[1.5px]'
+            },
+            isHovered: {
+              default: '[5px]',
+              [LG]: '[1.5px]',
+              state: {
+                expanded: '[1.5px]',
+                collapsed: '[5px]'
+              }
+            }
+          }
+        })({state, isHovered})} />
+    </svg>
+  );
+});
+
+// Fake sidenav component until we have a real one
+function SideNav(props: any) {
+  return (
+    <RACToggleButtonGroup
+      {...props}
+      className={style({
+        marginStart: -4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+        boxSizing: 'border-box',
+        width: 'full'
+      })} />
+  );
+}
+
+function SideNavItem(props: any) {
+  let ref = useRef(null)
+  return (
+    <RACToggleButton
+      {...props}
+      ref={ref}
+      style={pressScale(ref)}
+      className={style({
+        ...focusRing(),
+        backgroundColor: 'transparent',
+        borderStyle: 'none',
+        width: 'full',
+        minHeight: 32,
+        boxSizing: 'border-box',
+        padding: 0,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        font: 'ui',
+        fontWeight: {
+          default: 'normal',
+          isSelected: 'bold'
+        },
+        textDecoration: 'none',
+        borderRadius: 'default',
+        transition: 'default'
+      })}>
+      {(renderProps) => (<>
+        <span
+          className={style({
+            flexShrink: 0,
+            width: 2,
+            height: '[1lh]',
+            borderRadius: 'full',
+            transition: 'default',
+            backgroundColor: {
+              default: 'transparent',
+              isHovered: 'gray-400',
+              isSelected: 'gray-800'
+            }
+          })(renderProps)} />
+        {props.children}
+      </>)}
+    </RACToggleButton>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/app/banner.svg b/packages/dev/s2-docs/pages/s2/home/app/banner.svg
new file mode 100644
index 00000000000..8b6f29c95a3
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/app/banner.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="322" viewBox="0 0 1280 322" fill="none">
+  <g>
+    <rect width="1280" height="322" fill="url(#paint0_radial_1196_84849)" />
+    <mask id="mask0_1196_84849" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="819" y="-427"
+      width="810" height="814">
+      <ellipse cx="1224.11" cy="-20.2924" rx="404.81" ry="406.707"
+        transform="rotate(-180 1224.11 -20.2924)" fill="url(#paint1_radial_1196_84849)" />
+    </mask>
+    <g mask="url(#mask0_1196_84849)">
+      <ellipse cx="1224.11" cy="-20.2924" rx="404.81" ry="406.707"
+        transform="rotate(-180 1224.11 -20.2924)" fill="#EB1000" />
+    </g>
+  </g>
+  <defs>
+    <radialGradient id="paint0_radial_1196_84849" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(119.5 102) rotate(10.7344) scale(1181.17 1181.17)">
+      <stop offset="0.250534" stop-color="light-dark(#FFD5E3, #5D0022)" />
+      <stop offset="0.745" stop-color="light-dark(#F02D6E, #E02665)" />
+      <stop offset="0.895" stop-color="light-dark(#30A7FE, #03638C)" />
+    </radialGradient>
+    <radialGradient id="paint1_radial_1196_84849" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(1224.11 -20.2924) rotate(90) scale(406.707 404.81)">
+      <stop offset="0.166667" />
+      <stop offset="1" stop-opacity="0" />
+    </radialGradient>
+  </defs>
+</svg>
diff --git a/packages/dev/s2-docs/pages/s2/home/bg.svg b/packages/dev/s2-docs/pages/s2/home/bg.svg
new file mode 100644
index 00000000000..6dd23e2ef6f
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/bg.svg
@@ -0,0 +1,35 @@
+<svg width="1440" height="2634" viewBox="0 0 1440 2634" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask id="mask0_995_6194" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1440" height="2634">
+    <rect width="1440" height="2634" fill="#D9D9D9" />
+  </mask>
+  <g mask="url(#mask0_995_6194)">
+    <path
+      d="M-262.366 -9.37306C-904.469 204.545 -1251.75 897.981 -1038.04 1539.46C-824.331 2180.94 -130.557 2527.55 511.546 2313.63C1153.65 2099.71 1500.93 1406.28 1287.22 764.796C1073.51 123.317 379.737 -223.291 -262.366 -9.37306Z"
+      fill="url(#paint0_linear_995_6194)" />
+    <path
+      d="M1271.98 1733.48C1362.9 1789.86 1478.1 1790.21 1569.36 1734.37L2482.11 1175.89C2571.51 1121.19 2571.66 992.083 2482.38 937.178L1575.66 379.486C1484.54 323.449 1369.34 323.515 1278.3 379.686L373.441 937.9C284.643 992.687 284.481 1121.07 373.171 1176.07L1271.98 1733.48Z"
+      fill="url(#paint1_linear_995_6194)" />
+    <path
+      d="M2074.68 -648.119C2270.1 -898.227 2574.44 -1059 2916.3 -1059C3505.98 -1059 3984 -580.676 3984 9.37512C3984 599.426 3505.98 1077.75 2916.3 1077.75C2574.49 1077.75 2270.19 917.027 2074.77 666.984C1841.76 376.011 1668.75 375.719 1489.31 516.679C1377.98 606.155 1236.56 659.69 1082.65 659.69C723.724 659.69 432.75 368.532 432.75 9.37512C432.75 -349.782 723.724 -640.94 1082.65 -640.94C1236.63 -640.94 1378.1 -587.357 1489.46 -497.81C1668.82 -356.985 1841.78 -357.339 2074.68 -648.119Z"
+      fill="url(#paint2_linear_995_6194)" />
+  </g>
+  <path d="M0 0L1440 0L1440 948L0 948L0 0Z" fill="url(#paint3_linear_995_6194)" />
+  <defs>
+    <linearGradient id="paint0_linear_995_6194" x1="-262.237" y1="-9.54162" x2="509.529" y2="2314.41" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#6338EE" />
+      <stop offset="1" stop-color="#6338EE" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint1_linear_995_6194" x1="1897.5" y1="606.008" x2="940.498" y2="1536.01" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFA921" />
+      <stop offset="1" stop-color="#FFA921" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint2_linear_995_6194" x1="3851.49" y1="609.784" x2="494.848" y2="-362.361" gradientUnits="userSpaceOnUse">
+      <stop offset="0.440314" stop-color="#EB1000" />
+      <stop offset="0.858445" stop-color="#EB1000" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint3_linear_995_6194" x1="363" y1="7.41877e-07" x2="358.449" y2="948.029" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#6338EE" stop-opacity="0.75" />
+      <stop offset="1" stop-color="#6338EE" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/packages/dev/s2-docs/pages/s2/index.mdx b/packages/dev/s2-docs/pages/s2/index.mdx
index 48eaebc62a6..75ca6b33427 100644
--- a/packages/dev/s2-docs/pages/s2/index.mdx
+++ b/packages/dev/s2-docs/pages/s2/index.mdx
@@ -1,91 +1,50 @@
-import {Layout} from '../../src/Layout';
-export default Layout;
-
-import {Card, CardPreview, Content, Text} from '@react-spectrum/s2';
-import {ComponentCardView} from '../../src/ComponentCardView';
+import '../../src/client';
+import '@react-spectrum/s2/page.css';
+import {Home} from './home/Home';
+import rspFavicon from 'url:../../assets/favicon.ico';
 
 export const section = 'Overview';
 export const title = 'Home';
-export const description = 'A React implementation of Spectrum, Adobe\'s design system.';
+export const description = 'Build high quality, accessible UI with the cohesive look and feel of Adobe.';
 export const omitFromNav = true;
 export const hideFromSearch = true;
 
-# React Spectrum
-
-<PageDescription>A React implementation of Spectrum, Adobe's design system.</PageDescription>
-
-[Getting started](getting-started) • [GitHub](https://github.com/adobe/react-spectrum)
-
-<ComponentCardView items={[
-  {id: 'Getting Started', name: 'Getting Started', href: 'getting-started', description: 'Get started with React Spectrum S2.'},
-  {id: 'Styling', name: 'Styling', href: 'styling', description: 'Learn how to style React Spectrum components.'},
-  {id: 'Migrating', name: 'Migrating', href: 'migrating', description: 'Learn how to migrate from React Spectrum v3 to S2.'},
-  {id: 'Accordion', name: 'Accordion', href: 'Accordion', description: 'An accordion is a grouping of related disclosures.'},
-  {id: 'ActionBar', name: 'ActionBar', href: 'ActionBar', description: 'Used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.'},
-  {id: 'ActionButton', name: 'ActionButton', href: 'ActionButton', description: 'An action button allows a user to perform an action.'},
-  {id: 'ActionButtonGroup', name: 'ActionButtonGroup', href: 'ActionButtonGroup', description: 'A grouping of related ActionButtons.'},
-  {id: 'ActionMenu', name: 'ActionMenu', href: 'ActionMenu', description: 'Combines an ActionButton with a Menu for simple "more actions" use cases.'},
-  {id: 'Avatar', name: 'Avatar', href: 'Avatar', description: 'A thumbnail representation of an entity, such as a user or an organization.'},
-  {id: 'AvatarGroup', name: 'AvatarGroup', href: 'AvatarGroup', description: 'A grouping of avatars that are related to each other.'},
-  {id: 'Badge', name: 'Badge', href: 'Badge', description: 'A badge displays color-categorized metadata for an object.'},
-  {id: 'Breadcrumbs', name: 'Breadcrumbs', href: 'Breadcrumbs', description: 'Breadcrumbs display a hierarchy of links to the current page or resource.'},
-  {id: 'Button', name: 'Button', href: 'Button', description: 'A button allows a user to perform an action or to navigate to another page.'},
-  {id: 'ButtonGroup', name: 'ButtonGroup', href: 'ButtonGroup', description: 'A button group is a grouping of buttons whose actions are related to each other.'},
-  {id: 'Calendar', name: 'Calendar', href: 'Calendar', description: 'A calendar allows a user to select a single date from a date grid.'},
-  {id: 'Card', name: 'Card', href: 'Card', description: 'Summarizes an object that a user can select or navigate to.'},
-  {id: 'CardView', name: 'CardView', href: 'CardView', description: 'Displays a group of related objects, with support for selection and bulk actions.'},
-  {id: 'Checkbox', name: 'Checkbox', href: 'Checkbox', description: 'A checkbox allows a user to select an individual option.'},
-  {id: 'CheckboxGroup', name: 'CheckboxGroup', href: 'CheckboxGroup', description: 'A checkbox group allows a user to select one or more items in a list of options.'},
-  {id: 'ColorArea', name: 'ColorArea', href: 'ColorArea', description: 'A color area allows users to adjust two channels of a color value.'},
-  {id: 'ColorField', name: 'ColorField', href: 'ColorField', description: 'A color field allows users to edit a hex color or individual color channel value.'},
-  {id: 'ColorSlider', name: 'ColorSlider', href: 'ColorSlider', description: 'A color slider allows users to adjust an individual channel of a color value.'},
-  {id: 'ColorSwatch', name: 'ColorSwatch', href: 'ColorSwatch', description: 'A color swatch displays a preview of a selected color.'},
-  {id: 'ColorSwatchPicker', name: 'ColorSwatchPicker', href: 'ColorSwatchPicker', description: 'A color swatch picker displays a list of color swatches and allows a user to select one of them.'},
-  {id: 'ColorWheel', name: 'ColorWheel', href: 'ColorWheel', description: 'A color wheel allows users to adjust the hue of a color value on a circular track.'},
-  {id: 'ComboBox', name: 'ComboBox', href: 'ComboBox', description: 'A combobox combines a text input with a listbox, and allows a user to filter a list of options.'},
-  {id: 'ContextualHelp', name: 'ContextualHelp', href: 'ContextualHelp', description: 'Contextual help shows extra information about an adjacent component.'},
-  {id: 'DateField', name: 'DateField', href: 'DateField', description: 'A date field allows a user to enter and edit date values using a keyboard.'},
-  {id: 'DatePicker', name: 'DatePicker', href: 'DatePicker', description: 'A date picker combines a DateField and a Calendar popover.'},
-  {id: 'DateRangePicker', name: 'DateRangePicker', href: 'DateRangePicker', description: 'A date range picker combines two DateFields and a RangeCalendar popover.'},
-  {id: 'Dialog', name: 'Dialog', href: 'Dialog', description: 'A dialog is an overlay shown above other content in an application.'},
-  {id: 'Disclosure', name: 'Disclosure', href: 'Disclosure', description: 'A disclosure is a collapsible section of content.'},
-  {id: 'Divider', name: 'Divider', href: 'Divider', description: 'Brings clarity to a layout by grouping and dividing content in close proximity.'},
-  {id: 'DropZone', name: 'DropZone', href: 'DropZone', description: 'A drop zone is an area into which one or multiple objects can be dragged and dropped.'},
-  {id: 'Form', name: 'Form', href: 'Form', description: 'A form provides layout and alignment for a grouping of fields.'},
-  {id: 'Icons', name: 'Icons', href: 'icons', description: 'A collection of workflow icons that can be imported from @react-spectrum/s2/icons.'},
-  {id: 'IllustratedMessage', name: 'IllustratedMessage', href: 'IllustratedMessage', description: 'Displays an illustration and a message, usually for an empty state or an error page.'},
-  {id: 'Illustrations', name: 'Illustrations', href: 'illustrations', description: 'A collection of illustrations that can be imported from @react-spectrum/s2/illustrations.'},
-  {id: 'Image', name: 'Image', href: 'Image', description: 'An image with support for skeleton loading and custom error states.'},
-  {id: 'InlineAlert', name: 'InlineAlert', href: 'InlineAlert', description: 'Displays a non-modal message associated with objects in a view.'},
-  {id: 'Link', name: 'Link', href: 'Link', description: 'A link allows a user to navigate to another page.'},
-  {id: 'LinkButton', name: 'LinkButton', href: 'LinkButton', description: 'Combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.'},
-  {id: 'Menu', name: 'Menu', href: 'Menu', description: 'A menu displays a list of actions or options that a user can choose.'},
-  {id: 'Meter', name: 'Meter', href: 'Meter', description: 'A meter represents a quantity within a known range, or a fractional value.'},
-  {id: 'NumberField', name: 'NumberField', href: 'NumberField', description: 'A number field allows a user to enter, increment, or decrement a numeric value.'},
-  {id: 'Picker', name: 'Picker', href: 'Picker', description: 'A picker displays a collapsible list of options, and allows a user to select one of them.'},
-  {id: 'Popover', name: 'Popover', href: 'Popover', description: 'A popover displays interactive content in context with a trigger element.'},
-  {id: 'ProgressBar', name: 'ProgressBar', href: 'ProgressBar', description: 'A progress bar shows progress of an operation over time with a linear representation.'},
-  {id: 'ProgressCircle', name: 'ProgressCircle', href: 'ProgressCircle', description: 'A progress circle shows progress of an operation over time with a circular representation.'},
-  {id: 'RadioGroup', name: 'RadioGroup', href: 'RadioGroup', description: 'A radio group allows a user to select a single item from a list of options.'},
-  {id: 'RangeCalendar', name: 'RangeCalendar', href: 'RangeCalendar', description: 'A range calendar allows a user to select a contiguous range of dates.'},
-  {id: 'RangeSlider', name: 'RangeSlider', href: 'RangeSlider', description: 'A range slider allows a user to select a range of values within a larger range.'},
-  {id: 'SearchField', name: 'SearchField', href: 'SearchField', description: 'A search field allows a user to enter and clear a search query.'},
-  {id: 'SegmentedControl', name: 'SegmentedControl', href: 'SegmentedControl', description: 'A mutually exclusive group of buttons used for view switching.'},
-  {id: 'SelectBoxGroup', name: 'SelectBoxGroup', href: 'SelectBoxGroup', description: 'Allows users to select one or more options from a list.'},
-  {id: 'Skeleton', name: 'Skeleton', href: 'Skeleton', description: 'Wraps around content to render it as a placeholder.'},
-  {id: 'Slider', name: 'Slider', href: 'Slider', description: 'A slider allows a user to select a numeric value within a range.'},
-  {id: 'StatusLight', name: 'StatusLight', href: 'StatusLight', description: 'A status light displays the status or category of an entity.'},
-  {id: 'Switch', name: 'Switch', href: 'Switch', description: 'A switch allows a user to turn a setting on or off.'},
-  {id: 'TableView', name: 'TableView', href: 'TableView', description: 'A table view displays data in rows and columns, with row selection and sorting.'},
-  {id: 'Tabs', name: 'Tabs', href: 'Tabs', description: 'Tabs organize content into multiple sections, and allow a user to view one at a time.'},
-  {id: 'TagGroup', name: 'TagGroup', href: 'TagGroup', description: 'A tag group displays a list of items, with support for keyboard navigation and removal.'},
-  {id: 'TextArea', name: 'TextArea', href: 'TextArea', description: 'A text area allows a user to enter a multi-line text value with a keyboard.'},
-  {id: 'TextField', name: 'TextField', href: 'TextField', description: 'A text field allows a user to enter a plain text value with a keyboard.'},
-  {id: 'TimeField', name: 'TimeField', href: 'TimeField', description: 'A time field allows a user to enter and edit time values using a keyboard.'},
-  {id: 'Toast', name: 'Toast', href: 'Toast', description: 'A toast displays a temporary notification of an action, error, or other event.'},
-  {id: 'ToggleButton', name: 'ToggleButton', href: 'ToggleButton', description: 'A toggle button allows a user to toggle between two states.'},
-  {id: 'ToggleButtonGroup', name: 'ToggleButtonGroup', href: 'ToggleButtonGroup', description: 'A toggle button group allows a user to toggle multiple options, with single or multiple selection.'},
-  {id: 'Tooltip', name: 'Tooltip', href: 'Tooltip', description: 'A tooltip displays a description of an element on hover or focus.'},
-  {id: 'TreeView', name: 'TreeView', href: 'TreeView', description: 'A tree view displays hierarchical data with selection and collapsing.'},
-  {id: 'Release Notes', name: 'Release Notes', href: 'releases/', description: 'Release notes for React Spectrum.'}
-]}/>
+<html lang="en">
+  <head>
+    <meta charSet="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href={rspFavicon} />
+    <title>React Spectrum</title>
+    <meta rel="preload" as="font" href="https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" crossOrigin="" />
+    <meta name="description" content={description} />
+    <meta name="keywords" content="accessibility,components,react,headless,style-free" />
+    <meta name="twitter:card" content="summary_large_image" />
+    {/* <meta name="twitter:image" content={ogImage} /> */}
+    <meta property="og:title" content="React Spectrum" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={props.currentPage.url} />
+    {/* <meta property="og:image" content={ogImage} /> */}
+    <meta property="og:description" content={description} />
+    <meta property="og:locale" content="en_US" />
+    <link rel="canonical" href={props.currentPage.url} />
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{__html: JSON.stringify(
+        {
+          '@context': 'http://schema.org',
+          '@type': 'Article',
+          author: 'Adobe Inc',
+          headline: 'React Spectrum',
+          description,
+          // image: ogImage,
+          publisher: {
+            '@type': 'Organization',
+            url: 'https://www.adobe.com',
+            name: 'Adobe',
+            logo: rspFavicon
+          }
+        }
+      )}} />
+  </head>
+  <Home />
+</html>
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 7e8563ef5d1..b31cc5d36d7 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -8,6 +8,8 @@ import '../src/client';
 import internationalizedFavicon from 'url:../assets/internationalized.ico';
 // @ts-ignore
 import reactAriaFavicon from 'url:../assets/react-aria.ico';
+// @ts-ignore
+import rspFavicon from 'url:../assets/favicon.ico';
 import './anatomy.css';
 import './footer.css';
 import {ClassAPI} from './ClassAPI';
@@ -103,7 +105,7 @@ const getFaviconUrl = (currentPage: Page): string => {
     case 'internationalized':
       return internationalizedFavicon;
     default:
-      return 'https://www.adobe.com/favicon.ico';
+      return rspFavicon;
   }
 };
 
diff --git a/packages/dev/s2-docs/src/color.macro.ts b/packages/dev/s2-docs/src/color.macro.ts
index 6f32cf60f64..214b87a2bfd 100644
--- a/packages/dev/s2-docs/src/color.macro.ts
+++ b/packages/dev/s2-docs/src/color.macro.ts
@@ -2,11 +2,11 @@ import {colorScale} from '../../../@react-spectrum/s2/style/tokens';
 import type {MacroContext} from '@parcel/macros';
 import {style} from '@react-spectrum/s2/style';
 
-export function getColorScale(this: MacroContext | void, name: string) {
-  return Object.keys(colorScale(name)).map((k) => [k, colorSwatch.call(this, k)]);
+export function getColorScale(this: MacroContext | void, name: string, size: any = 20): [string, string][] {
+  return Object.keys(colorScale(name)).map((k) => [k, colorSwatch.call(this, k, 'backgroundColor', size)]);
 }
 
-export function colorSwatch(this: MacroContext | void, color: string, type = 'backgroundColor') {
+export function colorSwatch(this: MacroContext | void, color: string, type = 'backgroundColor', size: any = 20): string {
   // @ts-ignore
-  return style.call(this, {'--v': {type, value: color}, backgroundColor: '--v', size: 20, borderRadius: 'sm', borderWidth: 1, borderColor: 'gray-1000/15', borderStyle: 'solid'});
+  return style.call(this, {'--v': {type, value: color}, backgroundColor: '--v', width: size, aspectRatio: 'square', borderRadius: 'sm', borderWidth: 1, borderColor: 'gray-1000/15', borderStyle: 'solid'});
 }
diff --git a/packages/dev/s2-docs/src/footer.css b/packages/dev/s2-docs/src/footer.css
index f279bcafd6b..c71a2e136ba 100644
--- a/packages/dev/s2-docs/src/footer.css
+++ b/packages/dev/s2-docs/src/footer.css
@@ -4,5 +4,5 @@ footer li:after {
 }
 
 footer li:last-child:after {
-  content: '';
+  content: unset;
 }
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 3afc7c67825..721db33ce6f 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
+import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocus, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -30,7 +30,7 @@ import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPers
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
 import {filterDOMProps, inertValue, LoadMoreSentinelProps, useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
+import {FocusEvents, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
 import {HeaderContext} from './Header';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts';
@@ -336,7 +336,7 @@ export const ListBoxSection = /*#__PURE__*/ createBranchComponent(SectionNode, L
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
-export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, FocusEvents<HTMLDivElement>, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
    * @default 'react-aria-ListBoxItem'
@@ -379,6 +379,8 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
     onHoverEnd: item.props.onHoverEnd
   });
 
+  let {focusProps} = useFocus(props);
+
   let draggableItem: DraggableItemResult | null = null;
   if (dragState && dragAndDropHooks) {
     draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasAction: states.hasAction}, dragState);
@@ -426,7 +428,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
 
   return (
     <ElementType
-      {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, draggableItem?.dragProps, droppableItem?.dropProps)}
+      {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, focusProps, draggableItem?.dragProps, droppableItem?.dropProps)}
       ref={ref}
       data-allows-dragging={!!dragState || undefined}
       data-selected={states.isSelected || undefined}
diff --git a/scripts/generateS2IconIndex.js b/scripts/generateS2IconIndex.js
index 392ce5b3786..41c7f5919e2 100644
--- a/scripts/generateS2IconIndex.js
+++ b/scripts/generateS2IconIndex.js
@@ -88,7 +88,7 @@ import {IconProps, IllustrationContext} from '${relative}';`;
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+${dir.includes('spectrum-illustrations') ? "'use client';" : ''}
 `;
 
     let imports = [typeImport];
diff --git a/yarn.lock b/yarn.lock
index 9ec7b6d341c..8aeed2a09f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4701,7 +4701,7 @@ __metadata:
 
 "@parcel/packager-react-static@patch:@parcel/packager-react-static@npm%3A2.16.1#~/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch":
   version: 2.16.1
-  resolution: "@parcel/packager-react-static@patch:@parcel/packager-react-static@npm%3A2.16.1#~/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch::version=2.16.1&hash=a4b1bc"
+  resolution: "@parcel/packager-react-static@patch:@parcel/packager-react-static@npm%3A2.16.1#~/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch::version=2.16.1&hash=8e9116"
   dependencies:
     "@parcel/node-resolver-core": "npm:3.7.1"
     "@parcel/plugin": "npm:2.16.1"
@@ -4710,7 +4710,7 @@ __metadata:
     "@parcel/utils": "npm:2.16.1"
     nullthrows: "npm:^1.1.1"
     rsc-html-stream: "npm:^0.0.6"
-  checksum: 10c0/5b79e522f42cb20a9a4db36edb19ecd6ebc75b21dbce4eaee199b5ba3b2b84ebe929b7a49e70a4f6e6bc0ed2ef0f409fa91435fa8bc278c3ca6a206c18e56d3f
+  checksum: 10c0/cc49c27a7db23b02a1b605b67dba4c7a8bb2ad53c48d609513b606f5a55f306ddefe31d1dd224f335e2449d57c695f487e538e7355cdbf0bc03428412c8622e5
   languageName: node
   linkType: hard
 

From baf0a43f9976df0e64222fe3e025e0c5553854b8 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Wed, 10 Dec 2025 09:18:34 +1100
Subject: [PATCH 07/10] fix: numberfield spinning indefinitely (#9305)

---
 .../spinbutton/src/useSpinButton.ts           | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/@react-aria/spinbutton/src/useSpinButton.ts b/packages/@react-aria/spinbutton/src/useSpinButton.ts
index de772fa5106..ded3f65984c 100644
--- a/packages/@react-aria/spinbutton/src/useSpinButton.ts
+++ b/packages/@react-aria/spinbutton/src/useSpinButton.ts
@@ -57,15 +57,17 @@ export function useSpinButton(
   } = props;
   const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/spinbutton');
 
-  let prevTouchPosition = useRef<{x: number, y: number} | null>(null);
   let isSpinning = useRef(false);
-  const clearAsync = () => {
+  const clearAsync = useCallback(() => {
     clearTimeout(_async.current);
     isSpinning.current = false;
-  };
+  }, []);
+  const clearAsyncEvent = useEffectEvent(() => {
+    clearAsync();
+  });
 
   useEffect(() => {
-    return () => clearAsync();
+    return () => clearAsyncEvent();
   }, []);
 
   let onKeyDown = (e) => {
@@ -140,21 +142,13 @@ export function useSpinButton(
   }, [ariaTextValue]);
 
   // For touch users, if they move their finger like they're scrolling, we don't want to trigger a spin.
-  let onTouchMove = useCallback((e) => {
-    if (!prevTouchPosition.current) {
-      prevTouchPosition.current = {x: e.touches[0].clientX, y: e.touches[0].clientY};
-    }
-    let touchPosition = {x: e.touches[0].clientX, y: e.touches[0].clientY};
-    // Arbitrary distance that worked in testing, even with slight movements or a slow-ish start to scrolling.
-    if (Math.abs(touchPosition.x - prevTouchPosition.current.x) > 1 || Math.abs(touchPosition.y - prevTouchPosition.current.y) > 1) {
-      clearAsync();
-    }
-    prevTouchPosition.current = touchPosition;
-  }, []);
+  let onPointerCancel = useCallback(() => {
+    clearAsync();
+  }, [clearAsync]);
 
   const onIncrementPressStart = useEffectEvent(
     (initialStepDelay: number) => {
-      clearAsync();
+      clearAsyncEvent();
       isSpinning.current = true;
       onIncrement?.();
       // Start spinning after initial delay
@@ -171,7 +165,7 @@ export function useSpinButton(
 
   const onDecrementPressStart = useEffectEvent(
     (initialStepDelay: number) => {
-      clearAsync();
+      clearAsyncEvent();
       isSpinning.current = true;
       onDecrement?.();
       // Start spinning after initial delay
@@ -239,7 +233,7 @@ export function useSpinButton(
             clearAsync();
           }
 
-          addGlobalListener(window, 'touchmove', onTouchMove, {capture: true});
+          addGlobalListener(window, 'pointercancel', onPointerCancel, {capture: true});
           isUp.current = false;
           // For touch users, don't trigger a decrement on press start, we'll wait for the press end to trigger it if
           // the control isn't spinning.
@@ -253,7 +247,6 @@ export function useSpinButton(
         if (e.pointerType === 'touch') {
           isUp.current = true;
         }
-        prevTouchPosition.current = null;
         clearAsync();
         removeAllGlobalListeners();
         setIsIncrementPressed(null);
@@ -263,6 +256,8 @@ export function useSpinButton(
           if (!isSpinning.current && isUp.current) {
             onIncrement?.();
           }
+        } else {
+          clearAsync();
         }
         isUp.current = false;
         setIsIncrementPressed(null);
@@ -279,7 +274,7 @@ export function useSpinButton(
             clearAsync();
           }
 
-          addGlobalListener(window, 'touchmove', onTouchMove, {capture: true});
+          addGlobalListener(window, 'pointercancel', onPointerCancel, {capture: true});
           isUp.current = false;
           // For touch users, don't trigger a decrement on press start, we'll wait for the press end to trigger it if
           // the control isn't spinning.
@@ -292,7 +287,6 @@ export function useSpinButton(
         if (e.pointerType === 'touch') {
           isUp.current = true;
         }
-        prevTouchPosition.current = null;
         clearAsync();
         removeAllGlobalListeners();
         setIsDecrementPressed(null);
@@ -302,6 +296,8 @@ export function useSpinButton(
           if (!isSpinning.current && isUp.current) {
             onDecrement?.();
           }
+        } else {
+          clearAsync();
         }
         isUp.current = false;
         setIsDecrementPressed(null);

From 87a5af382d57f012fa1a44aae1909be294f9a065 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Wed, 10 Dec 2025 09:18:39 +1100
Subject: [PATCH 08/10] chore: add tests to S2 from testing session (#9307)

---
 .../@react-spectrum/s2/src/ActionButton.tsx   |  4 +-
 .../s2/test/ActionButtonGroup.test.tsx        | 65 +++++++++++++++++++
 .../s2/test/ToggleButtonGroup.test.tsx        | 33 ++++++++++
 .../test/SearchField.test.js                  | 19 ++++++
 .../react-aria-components/test/Select.test.js | 26 +++++++-
 .../test/ToggleButtonGroup.test.js            |  6 +-
 6 files changed, 149 insertions(+), 4 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/test/ActionButtonGroup.test.tsx
 create mode 100644 packages/@react-spectrum/s2/test/ToggleButtonGroup.test.tsx

diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index be70cb4396f..4ed24b9e0d9 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -291,7 +291,8 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
     orientation = 'horizontal',
     staticColor = props.staticColor,
     isQuiet = props.isQuiet,
-    size = props.size || 'M'
+    size = props.size || 'M',
+    isDisabled
   } = ctx || {};
 
   let {isProgressVisible} = usePendingState(isPending);
@@ -299,6 +300,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
   return (
     <RACButton
       {...props}
+      isDisabled={props.isDisabled ?? isDisabled}
       ref={domRef}
       style={pressScale(domRef, props.UNSAFE_style)}
       className={renderProps => (props.UNSAFE_className || '') + btnStyles({
diff --git a/packages/@react-spectrum/s2/test/ActionButtonGroup.test.tsx b/packages/@react-spectrum/s2/test/ActionButtonGroup.test.tsx
new file mode 100644
index 00000000000..9565351a525
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/ActionButtonGroup.test.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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 {ActionButton, ActionButtonGroup, Text} from '../src';
+import {render} from '@react-spectrum/test-utils-internal';
+
+describe('ActionButtonGroup', () => {
+
+  it('can disable all buttons from the group', async () => {
+    let {getAllByRole} = render(
+      <ActionButtonGroup isDisabled>
+        <ActionButton><Text slot="label">Bold</Text></ActionButton>
+        <ActionButton><Text slot="label">Italic</Text></ActionButton>
+        <ActionButton><Text slot="label">Underline</Text></ActionButton>
+      </ActionButtonGroup>
+    );
+
+
+    let buttons = getAllByRole('button');
+    expect(buttons[0]).toBeDisabled();
+    expect(buttons[1]).toBeDisabled();
+    expect(buttons[2]).toBeDisabled();
+  });
+
+  it('can set disable individually', async () => {
+    let {getAllByRole} = render(
+      <ActionButtonGroup>
+        <ActionButton isDisabled><Text slot="label">Bold</Text></ActionButton>
+        <ActionButton><Text slot="label">Italic</Text></ActionButton>
+        <ActionButton><Text slot="label">Underline</Text></ActionButton>
+      </ActionButtonGroup>
+    );
+
+
+    let buttons = getAllByRole('button');
+    expect(buttons[0]).toBeDisabled();
+    expect(buttons[1]).not.toBeDisabled();
+    expect(buttons[2]).not.toBeDisabled();
+  });
+
+  it('can override the group disable', async () => {
+    let {getAllByRole} = render(
+      <ActionButtonGroup isDisabled>
+        <ActionButton isDisabled={false}><Text slot="label">Bold</Text></ActionButton>
+        <ActionButton><Text slot="label">Italic</Text></ActionButton>
+        <ActionButton><Text slot="label">Underline</Text></ActionButton>
+      </ActionButtonGroup>
+    );
+
+
+    let buttons = getAllByRole('button');
+    expect(buttons[0]).not.toBeDisabled();
+    expect(buttons[1]).toBeDisabled();
+    expect(buttons[2]).toBeDisabled();
+  });
+});
diff --git a/packages/@react-spectrum/s2/test/ToggleButtonGroup.test.tsx b/packages/@react-spectrum/s2/test/ToggleButtonGroup.test.tsx
new file mode 100644
index 00000000000..c0d87ca68b1
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/ToggleButtonGroup.test.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 {render} from '@react-spectrum/test-utils-internal';
+import {Text, ToggleButton, ToggleButtonGroup} from '../src';
+
+describe('ToggleButtonGroup', () => {
+
+  it('can disable all buttons from the group', async () => {
+    let {getAllByRole} = render(
+      <ToggleButtonGroup isDisabled>
+        <ToggleButton id={1}><Text slot="label">Bold</Text></ToggleButton>
+        <ToggleButton id={2}><Text slot="label">Italic</Text></ToggleButton>
+        <ToggleButton id={3}><Text slot="label">Underline</Text></ToggleButton>
+      </ToggleButtonGroup>
+    );
+
+
+    let buttons = getAllByRole('radio');
+    expect(buttons[0]).toBeDisabled();
+    expect(buttons[1]).toBeDisabled();
+    expect(buttons[2]).toBeDisabled();
+  });
+});
diff --git a/packages/react-aria-components/test/SearchField.test.js b/packages/react-aria-components/test/SearchField.test.js
index 736273c8220..e319e5cd93c 100644
--- a/packages/react-aria-components/test/SearchField.test.js
+++ b/packages/react-aria-components/test/SearchField.test.js
@@ -118,6 +118,9 @@ describe('SearchField', () => {
     expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
     expect(document.activeElement).toBe(input);
 
+    expect(input.parentElement).toHaveAttribute('data-invalid');
+    expect(input.parentElement).toHaveAttribute('data-required');
+
     await user.keyboard('Devon');
 
     expect(input).toHaveAttribute('aria-describedby');
@@ -127,6 +130,22 @@ describe('SearchField', () => {
     expect(input).not.toHaveAttribute('aria-describedby');
   });
 
+  it('supports readonly', async () => {
+    let {getByRole} = render(
+      <form data-testid="form">
+        <SearchField isReadOnly>
+          <Label>Test</Label>
+          <Input />
+          <FieldError />
+        </SearchField>
+      </form>
+    );
+
+    let input = getByRole('searchbox');
+
+    expect(input.parentElement).toHaveAttribute('data-readonly');
+  });
+
   it('should support form prop', () => {
     let {getByRole} = render(
       <TestSearchField form="test" />
diff --git a/packages/react-aria-components/test/Select.test.js b/packages/react-aria-components/test/Select.test.js
index 4328ecfc904..25ce2caa762 100644
--- a/packages/react-aria-components/test/Select.test.js
+++ b/packages/react-aria-components/test/Select.test.js
@@ -162,6 +162,30 @@ describe('Select', () => {
     expect(trigger).toHaveTextContent('Select an animal');
   });
 
+  it('should support empty state', async () => {
+    let {getByTestId, getByRole} = render(
+      <Select data-testid="select" allowsEmptyCollection>
+        <Label>Favorite Animal</Label>
+        <Button>
+          <SelectValue />
+        </Button>
+        <Popover>
+          <ListBox aria-label="Test" renderEmptyState={() => 'No results'}>
+            {[]}
+          </ListBox>
+        </Popover>
+      </Select>
+    );
+    let selectTester = testUtilUser.createTester('Select', {root: getByTestId('select')});
+    await selectTester.open();
+
+    let listbox = getByRole('listbox');
+    expect(listbox).toHaveAttribute('data-empty', 'true');
+
+    let option = getByRole('option');
+    expect(option).toHaveTextContent('No results');
+  });
+
   it('should support render props', async () => {
     let {getByTestId} = render(
       <Select data-testid="select">
@@ -644,7 +668,7 @@ describe('Select', () => {
 
     let wrapper = getByTestId('select');
     let selectTester = testUtilUser.createTester('Select', {root: wrapper});
-    
+
     let trigger = selectTester.trigger;
     expect(trigger).toHaveTextContent('Dog and Kangaroo');
 
diff --git a/packages/react-aria-components/test/ToggleButtonGroup.test.js b/packages/react-aria-components/test/ToggleButtonGroup.test.js
index 0b9c4157871..32c1a3a9cfa 100644
--- a/packages/react-aria-components/test/ToggleButtonGroup.test.js
+++ b/packages/react-aria-components/test/ToggleButtonGroup.test.js
@@ -142,7 +142,8 @@ describe('ToggleButtonGroup', () => {
   });
 
   it('should support horizontal keyboard navigation', async () => {
-    let {getAllByRole} = renderGroup();
+    let {getAllByRole, getByRole} = renderGroup();
+    expect(getByRole('radiogroup')).toHaveAttribute('aria-orientation', 'horizontal');
     let radios = getAllByRole('radio');
     await user.tab();
     expect(document.activeElement).toBe(radios[0]);
@@ -155,7 +156,8 @@ describe('ToggleButtonGroup', () => {
   });
 
   it('should support vertical keyboard navigation', async () => {
-    let {getAllByRole} = renderGroup({orientation: 'vertical'});
+    let {getAllByRole, getByRole} = renderGroup({orientation: 'vertical'});
+    expect(getByRole('radiogroup')).toHaveAttribute('aria-orientation', 'vertical');
     let radios = getAllByRole('radio');
     await user.tab();
     expect(document.activeElement).toBe(radios[0]);

From 47570f4d8fd6a0df7badd24c84b69a090247b484 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Wed, 10 Dec 2025 09:21:16 +1100
Subject: [PATCH 09/10] chore: better codesandbox error (#9273)

* chore: better codesandbox error

* remove console logs

* Move to a dialog with more explanation

* review feedback
---
 packages/dev/s2-docs/src/CodePlatter.tsx | 40 +++++++++++++++++++++---
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx
index b82d72414bc..715a4432c80 100644
--- a/packages/dev/s2-docs/src/CodePlatter.tsx
+++ b/packages/dev/s2-docs/src/CodePlatter.tsx
@@ -72,6 +72,7 @@ export function ShareUrlProvider(props: ProviderProps<string | null>) {
 export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
   let codeRef = useRef<HTMLDivElement | null>(null);
   let [showShadcn, setShowShadcn] = useState(false);
+  let [showCodeSandbox, setShowCodeSandbox] = useState(false);
   let getText = () => codeRef.current!.querySelector('pre')!.textContent!;
   let {library} = useContext(CodePlatterContext);
   if (!type) {
@@ -126,7 +127,7 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
                   <Text slot="label">Copy link</Text>
                 </MenuItem>
               }
-              {files && 
+              {files &&
                 <MenuItem
                   onAction={() => {
                     let filesToDownload = getCodeSandboxFiles(getExampleFiles(codeRef, files, urls, entry), deps, type, entry);
@@ -157,16 +158,16 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
                   <Text>Install with shadcn</Text>
                 </MenuItem>
               }
-              {files && 
+              {files &&
                 <MenuItem
                   onAction={() => {
-                    createCodeSandbox(getExampleFiles(codeRef, files, urls, entry), deps, type, entry);
+                    setShowCodeSandbox(true);
                   }}>
                   <Polygon4 />
                   <Text slot="label">Open in CodeSandbox</Text>
                 </MenuItem>
               }
-              {files && type !== 's2' && 
+              {files && type !== 's2' &&
                 <MenuItem
                   onAction={() => {
                     createStackBlitz(getExampleFiles(codeRef, files, urls, entry), deps, type, entry);
@@ -191,6 +192,11 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
       <div ref={codeRef}>
         {children}
       </div>
+      <DialogContainer onDismiss={() => setShowCodeSandbox(false)}>
+        {showCodeSandbox &&
+          <CodeSandboxDialog getExampleFiles={getExampleFiles} codeRef={codeRef} files={files} urls={urls} entry={entry} deps={deps} type={type} />
+        }
+      </DialogContainer>
       <DialogContainer onDismiss={() => setShowShadcn(false)}>
         {showShadcn &&
           <ShadcnDialog registryUrl={registryUrl} />
@@ -313,6 +319,32 @@ function ShadcnDialog({registryUrl}) {
   );
 }
 
+function CodeSandboxDialog({getExampleFiles, codeRef, files, urls, entry, deps, type}) {
+  return (
+    <Dialog size="L">
+      {({close}) => (<>
+        <Heading slot="title">Create a CodeSandbox</Heading>
+        <Content>
+          <p>This will create an editable sandbox with this example in a new tab.</p>
+          <p><strong>Troubleshooting:</strong> If the sandbox fails to open or isn't created, try logging in to CodeSandbox first. If you're already logged in, try signing out and back in.</p>
+        </Content>
+
+        <ButtonGroup>
+          <Button variant="secondary" slot="close">Cancel</Button>
+          <Button
+            variant="accent"
+            onPress={() => {
+              createCodeSandbox(getExampleFiles(codeRef, files, urls, entry), deps, type, entry);
+              close();
+            }}>
+            Open in CodeSandbox
+          </Button>
+        </ButtonGroup>
+      </>)}
+    </Dialog>
+  );
+}
+
 const pulseAnimation = keyframes(`
   0% {
     outline-width: 0px;

From 88aa9e0b05c86f2aeba94c927e5438111cce4d38 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 9 Dec 2025 14:28:45 -0800
Subject: [PATCH 10/10] chore: bump spectrum tokens (#9293)

---
 packages/@react-spectrum/s2/package.json             |  2 +-
 packages/dev/parcel-transformer-s2-icon/package.json |  2 +-
 yarn.lock                                            | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json
index 4d996a0c34c..30c3ec6099e 100644
--- a/packages/@react-spectrum/s2/package.json
+++ b/packages/@react-spectrum/s2/package.json
@@ -140,7 +140,7 @@
     "postpack": "git checkout -- package.json"
   },
   "devDependencies": {
-    "@adobe/spectrum-tokens": "^13.15.1",
+    "@adobe/spectrum-tokens": "^14.0.0",
     "@react-aria/test-utils": "^1.0.0-alpha.8",
     "@storybook/jest": "^0.2.3",
     "@testing-library/dom": "^10.1.0",
diff --git a/packages/dev/parcel-transformer-s2-icon/package.json b/packages/dev/parcel-transformer-s2-icon/package.json
index ffaf341a911..5a9f81970a9 100644
--- a/packages/dev/parcel-transformer-s2-icon/package.json
+++ b/packages/dev/parcel-transformer-s2-icon/package.json
@@ -6,7 +6,7 @@
     "parcel": "^2.0.0"
   },
   "dependencies": {
-    "@adobe/spectrum-tokens": "^13.15.1",
+    "@adobe/spectrum-tokens": "^14.0.0",
     "@parcel/plugin": "^2.0.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
diff --git a/yarn.lock b/yarn.lock
index 8aeed2a09f1..3fa05af714f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -177,10 +177,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@adobe/spectrum-tokens@npm:^13.15.1":
-  version: 13.15.1
-  resolution: "@adobe/spectrum-tokens@npm:13.15.1"
-  checksum: 10c0/745543f734fc9a4a69f3eb93b05370e6591dd034f0ac79b85b9a9089ae0cbd7a166633bb562f25eab4cc377e6136648de7e052e600ed8a03f6e306c6dc1e19ed
+"@adobe/spectrum-tokens@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "@adobe/spectrum-tokens@npm:14.0.0"
+  checksum: 10c0/b94015d75786babf53144225fccfe3d989eb66e2ab5686e5e2feba73c49f83533e2ea0a7c4e9b0d47e5622d89bcad1b32cf39b61c2a6e3ae4690a20b79672b4c
   languageName: node
   linkType: hard
 
@@ -7381,7 +7381,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@react-spectrum/parcel-transformer-s2-icon@workspace:packages/dev/parcel-transformer-s2-icon"
   dependencies:
-    "@adobe/spectrum-tokens": "npm:^13.15.1"
+    "@adobe/spectrum-tokens": "npm:^14.0.0"
     "@parcel/plugin": "npm:^2.0.0"
     "@svgr/core": "npm:^8.1.0"
     "@svgr/plugin-jsx": "npm:^8.1.0"
@@ -7551,7 +7551,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@react-spectrum/s2@workspace:packages/@react-spectrum/s2"
   dependencies:
-    "@adobe/spectrum-tokens": "npm:^13.15.1"
+    "@adobe/spectrum-tokens": "npm:^14.0.0"
     "@internationalized/date": "npm:^3.10.0"
     "@internationalized/number": "npm:^3.6.5"
     "@parcel/macros": "npm:^2.16.1"