From c347b0b4b935c45639d8db6baf11d73a10b78878 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Fri, 8 May 2026 11:42:21 -0700 Subject: [PATCH 1/3] chore: Automate Chromatic and TSDiffer runs (#10005) * adding initial automated api diff process * tentative github action job * chromatic workflow and update token naming * maybe use github model since I dont have a anthropic token and update readme * lower permisisons * fix missing repo name in prompt * update readme * error messaging and simplification * try a dry run * trigger workflow test * tested differ, change channel for chromatic testing * whoops messed up the formatting * finished testing, confirmed behavior * actually need to test no diff detected case * fix fail due to diff having been already commited and dont push stder into diff file * empty commit, this should return nothing * handle case where new release happens runs and check last diff repo commit rather than just last week the latter is to handle the case where we run this flow multiple times a day or in the same week and there arent any new changes. Previously it would still use the current weeks diff results rather than reporting that there are no changes * add clarity for various diff cases running diff right after new release when there are new changes, running diff between releases, where there are no changes between last run, and when there are no changes from the released code * still got a diff message... try something else * invalid yarn option ugh * empty commit after new baseline, this should return nothing * done with testing * update readme and prompt * Apply suggestions from code review Co-authored-by: Daniel Lu * make it clear to AI model that it comparing a diff of diffs hopefully this make it so it can reason that a new api change to a component/prop that didnt have changes last week isnt actually a brand new component --- .github/workflows/weekly-api-diff.yml | 160 +++++++++++++++++++++++++ .github/workflows/weekly-chromatic.yml | 112 +++++++++++++++++ package.json | 2 +- scripts/weekly-api-diff/README.md | 78 ++++++++++++ scripts/weekly-api-diff/launchd.plist | 34 ++++++ scripts/weekly-api-diff/prompt.md | 154 ++++++++++++++++++++++++ 6 files changed, 539 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/weekly-api-diff.yml create mode 100644 .github/workflows/weekly-chromatic.yml create mode 100644 scripts/weekly-api-diff/README.md create mode 100644 scripts/weekly-api-diff/launchd.plist create mode 100644 scripts/weekly-api-diff/prompt.md diff --git a/.github/workflows/weekly-api-diff.yml b/.github/workflows/weekly-api-diff.yml new file mode 100644 index 00000000000..e3c71fdf2d0 --- /dev/null +++ b/.github/workflows/weekly-api-diff.yml @@ -0,0 +1,160 @@ +name: Weekly API Diff + +on: + schedule: + - cron: '0 17 * * 1' # Monday 9am PST / 10am PDT (GH Actions cron is UTC) + workflow_dispatch: # manual trigger for testing + +jobs: + weekly-api-diff: + runs-on: ubuntu-latest + env: + SNAPSHOTS_REPO: LFDanLu/react-spectrum-api-snapshots + + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 # required for build:api-published to find the last Publish commit + + - uses: actions/setup-node@v4 + with: + node-version: '24' + cache: 'yarn' + + - run: yarn --immutable + + # Build current main API (~2 min, always fresh) + - name: Build current API snapshot + run: yarn build:api-branch + + # Build release baseline using the last Publish commit (~2 min, always fresh) + - name: Build release baseline + run: yarn build:api-published + + - name: Generate diff + run: yarn compare:apis --isCI > /tmp/diff-current.txt || true + + # Check out snapshots repo so we can read the previous diff and commit the new one + - uses: actions/checkout@v4 + with: + repository: ${{ env.SNAPSHOTS_REPO }} + path: snapshots + token: ${{ secrets.SNAPSHOTS_REPO_TOKEN }} + + # Compute week-to-week delta and commit new diff + - name: Save diff and compute delta + run: | + TODAY=$(date +%Y-%m-%d) + echo "TODAY=$TODAY" >> $GITHUB_ENV + + CURRENT_PUBLISH=$(git log --grep='^Publish$' --oneline -1 | awk '{print $1}') + PREV_PUBLISH=$(cat snapshots/last-publish-hash.txt 2>/dev/null || echo "") + + if [ -n "$PREV_PUBLISH" ] && [ "$CURRENT_PUBLISH" != "$PREV_PUBLISH" ]; then + # New release landed so skip comparing to last week, commit fresh as new baseline + echo "NEW_RELEASE=true" >> $GITHUB_ENV + else + # Compare against the last diff in the snapshots repo + PREV=$(ls snapshots/diffs/*.txt 2>/dev/null | sort -r | head -1) + if [ -n "$PREV" ]; then + diff "$PREV" /tmp/diff-current.txt > /tmp/weekly-delta.txt || true + else + echo "(first run — no previous diff to compare against)" > /tmp/weekly-delta.txt + fi + fi + + # Commit a diff if there is a new release (fresh baseline), or diff changed from last week + # Skip if no difference from last diff (aka no change from last week/last run), or if the diff against the release code is empty + NEW_RELEASE="${NEW_RELEASE:-false}" + if [ -s /tmp/diff-current.txt ] && ([ "$NEW_RELEASE" = "true" ] || [ -s /tmp/weekly-delta.txt ]); then + cp /tmp/diff-current.txt snapshots/diffs/$TODAY.txt + cd snapshots + git config user.email "github-actions@github.com" + git config user.name "GitHub Actions" + git add diffs/$TODAY.txt + echo "$CURRENT_PUBLISH" > last-publish-hash.txt + git add last-publish-hash.txt + git diff --cached --quiet || (git commit -m "weekly api diff $TODAY" && git push) + fi + + # Summarize with GitHub Models (free via GITHUB_TOKEN) and post to Slack + - name: Summarize and post to Slack + env: + SLACK_TSDIFF_CHROMATIC_BOT_TOKEN: ${{ secrets.SLACK_TSDIFF_CHROMATIC_BOT_TOKEN }} + SLACK_CHANNEL_ID: ${{ secrets.SLACK_CHANNEL_ID }} + GITHUB_TOKEN: ${{ github.token }} + run: | + python3 << 'PYEOF' + import glob, json, os, urllib.request + + required = ['SLACK_TSDIFF_CHROMATIC_BOT_TOKEN', 'SLACK_CHANNEL_ID', 'GITHUB_TOKEN', 'TODAY', 'SNAPSHOTS_REPO', 'GITHUB_WORKSPACE'] + missing = [k for k in required if not os.environ.get(k)] + if missing: + raise SystemExit(f"Missing required environment variables: {', '.join(missing)}") + + today = os.environ['TODAY'] + channel = os.environ['SLACK_CHANNEL_ID'] + snapshots_repo = os.environ['SNAPSHOTS_REPO'] + slack_token = os.environ['SLACK_TSDIFF_CHROMATIC_BOT_TOKEN'] + github_token = os.environ['GITHUB_TOKEN'] + workspace = os.environ['GITHUB_WORKSPACE'] + diff_url = f"https://github.com/{snapshots_repo}/blob/main/diffs/{today}.txt" + + vs_release_size = os.path.getsize('/tmp/diff-current.txt') + vs_last_week_size = os.path.getsize('/tmp/weekly-delta.txt') if os.path.exists('/tmp/weekly-delta.txt') else 0 + + prev_files = sorted(glob.glob(f"{workspace}/snapshots/diffs/*.txt"), reverse=True) + prev_date = os.path.basename(prev_files[0]).replace('.txt', '') if prev_files else None + prev_url = f"https://github.com/{snapshots_repo}/blob/main/diffs/{prev_date}.txt" if prev_date else None + + new_release = os.environ.get('NEW_RELEASE') == 'true' + + if vs_release_size == 0: + message = f"📊 Weekly API Diff — {today}\n\nNo API changes detected vs last release — all pending changes have been included in a release." + elif vs_last_week_size == 0 and not new_release: + prev_ref = f"last diff ({prev_date}): {prev_url}" if prev_date else "last diff" + message = f"📊 Weekly API Diff — {today}\n\nNo new API changes since {prev_ref}." + elif new_release: + message = f"📊 Weekly API Diff — {today}\n\nNew release since last diff — resetting baseline. Full diff vs release: {diff_url}\n\nReact ✅ if changes look expected, or 🚨 if something looks wrong." + else: + delta = open('/tmp/weekly-delta.txt').read()[:4000] + + # Extract classification rules from prompt.md (single source of truth) + prompt_md = open(f"{workspace}/scripts/weekly-api-diff/prompt.md").read() + rules_start = prompt_md.find("Apply these grouping and classification rules") + rules_end = prompt_md.find("\n## Step 9", rules_start) + rules = prompt_md[rules_start:rules_end].strip() if rules_start != -1 else "" + + payload = { + "model": "gpt-4o-mini", + "max_tokens": 600, + "messages": [{ + "role": "user", + "content": f"Summarize this week-to-week react-spectrum API diff in under 200 words using bullet points.\n\n{rules}\n\nDelta (changes from last week):\n{delta}" + }] + } + + req = urllib.request.Request( + 'https://models.inference.ai.azure.com/chat/completions', + data=json.dumps(payload).encode(), + headers={ + 'Authorization': f'Bearer {github_token}', + 'Content-Type': 'application/json' + } + ) + summary = json.loads(urllib.request.urlopen(req).read())['choices'][0]['message']['content'] + message = f"📊 Weekly API Diff — {today}\n\n{summary}\n\nFull diff vs release: {diff_url}\n\nReact ✅ if changes look expected, or 🚨 if something looks wrong." + + req = urllib.request.Request( + 'https://slack.com/api/chat.postMessage', + data=json.dumps({"channel": channel, "text": message}).encode(), + headers={ + 'Authorization': f'Bearer {slack_token}', + 'Content-Type': 'application/json' + } + ) + resp = json.loads(urllib.request.urlopen(req).read()) + print("Slack response:", resp.get('ok'), resp.get('error', '')) + if not resp.get('ok'): + raise SystemExit(f"Slack error: {resp.get('error')}") + PYEOF diff --git a/.github/workflows/weekly-chromatic.yml b/.github/workflows/weekly-chromatic.yml new file mode 100644 index 00000000000..2f4e702eff4 --- /dev/null +++ b/.github/workflows/weekly-chromatic.yml @@ -0,0 +1,112 @@ +name: Weekly Chromatic + +on: + schedule: + - cron: '0 17 * * 1' # Monday 9am PST / 10am PDT (GH Actions cron is UTC) + workflow_dispatch: # manual trigger for testing + +jobs: + chromatic: + runs-on: ubuntu-latest + outputs: + build_url: ${{ steps.chromatic.outputs.buildUrl }} + code: ${{ steps.chromatic.outputs.code }} + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 # chromatic needs full history for baseline comparison + - uses: actions/setup-node@v4 + with: + node-version: '24' + cache: 'yarn' + - run: yarn --immutable + - name: Run Chromatic + id: chromatic + uses: chromaui/action@latest + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + buildScriptName: build:chromatic + exitZeroOnChanges: true + env: + NODE_ENV: production + CHROMATIC: '1' + + chromatic-fc: + runs-on: ubuntu-latest + outputs: + build_url: ${{ steps.chromatic.outputs.buildUrl }} + code: ${{ steps.chromatic.outputs.code }} + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 # chromatic needs full history for baseline comparison + - uses: actions/setup-node@v4 + with: + node-version: '24' + cache: 'yarn' + - run: yarn --immutable + - name: Run Chromatic FC + id: chromatic + uses: chromaui/action@latest + with: + projectToken: ${{ secrets.CHROMATIC_FC_PROJECT_TOKEN }} + buildScriptName: build:chromatic-fc + exitZeroOnChanges: true + env: + NODE_ENV: production + CHROMATIC: '1' + + notify: + runs-on: ubuntu-latest + needs: [chromatic, chromatic-fc] + if: always() + env: + SLACK_TSDIFF_CHROMATIC_BOT_TOKEN: ${{ secrets.SLACK_TSDIFF_CHROMATIC_BOT_TOKEN }} + SLACK_CHANNEL_ID: ${{ secrets.SLACK_CHANNEL_ID }} + CHROMATIC_URL: ${{ needs.chromatic.outputs.build_url }} + CHROMATIC_CODE: ${{ needs.chromatic.outputs.code }} + CHROMATIC_FC_URL: ${{ needs.chromatic-fc.outputs.build_url }} + CHROMATIC_FC_CODE: ${{ needs.chromatic-fc.outputs.code }} + steps: + - name: Post to Slack + run: | + python3 << 'PYEOF' + import json, os, urllib.request + from datetime import date + + required = ['SLACK_TSDIFF_CHROMATIC_BOT_TOKEN', 'SLACK_CHANNEL_ID'] + missing = [k for k in required if not os.environ.get(k)] + if missing: + raise SystemExit(f"Missing required environment variables: {', '.join(missing)}") + + today = date.today().isoformat() + channel = os.environ['SLACK_CHANNEL_ID'] + slack_token = os.environ['SLACK_TSDIFF_CHROMATIC_BOT_TOKEN'] + + def fmt(code, url): + if not url: + return "❌ failed" + if code == 'BUILD_PASSED': + return f"✅ | {url}" + return f"⚠️ changes pending review | {url}" + + message = "\n".join([ + f"📸 Weekly Chromatic — {today}", + "", + f"Chromatic: {fmt(os.environ['CHROMATIC_CODE'], os.environ['CHROMATIC_URL'])}", + f"Forced Colors: {fmt(os.environ['CHROMATIC_FC_CODE'], os.environ['CHROMATIC_FC_URL'])}", + ]) + + req = urllib.request.Request( + 'https://slack.com/api/chat.postMessage', + data=json.dumps({"channel": channel, "text": message}).encode(), + headers={ + 'Authorization': f'Bearer {slack_token}', + 'Content-Type': 'application/json' + } + ) + resp = json.loads(urllib.request.urlopen(req).read()) + print("Slack response:", resp.get('ok'), resp.get('error', '')) + if not resp.get('ok'): + raise SystemExit(f"Slack error: {resp.get('error')}") + PYEOF diff --git a/package.json b/package.json index cfecacf8d29..d0cb8816d4a 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "release": "lerna publish from-package --yes", "version:nightly": "yarn workspaces foreach --all --no-private -t version -d 3.0.0-nightly-$(git rev-parse --short HEAD)-$(date +'%y%m%d') && yarn apply-nightly --all", "publish:nightly": "yarn workspaces foreach --all --no-private -t npm publish --tag nightly --access public", - "build:api-published": "node scripts/buildPublishedAPI.js", + "build:api-published": "node scripts/buildBranchAPI.js --githash=$(git log --grep='^Publish$' --oneline -1 | awk '{print $1}') --output=base-api", "build:api-branch": "node scripts/buildBranchAPI.js", "compare:apis": "node scripts/compareAPIs.js", "check-apis": "yarn build:api-branch --githash=\"origin/main\" --output=\"base-api\" && yarn build:api-branch && yarn compare:apis", diff --git a/scripts/weekly-api-diff/README.md b/scripts/weekly-api-diff/README.md new file mode 100644 index 00000000000..725f7880995 --- /dev/null +++ b/scripts/weekly-api-diff/README.md @@ -0,0 +1,78 @@ +# Weekly API Diff Automation + +Runs weekly via GitHub Actions. Compares the current `main` API surface against the last release baseline and posts a summary to Slack. + +A local fallback via macOS launchd is also available (see below). + +## File Inventory + +| File | Location | Purpose | +|------|----------|---------| +| GitHub Actions workflow | `.github/workflows/weekly-api-diff.yml` | Primary automation — runs on GH infra every Monday 9am PT | +| Prompt (source of truth) | `scripts/weekly-api-diff/prompt.md` | Claude instructions for local launchd fallback — edit this, then sync to `~/weekly-tsdiffer.md` | +| Prompt (live) | `~/weekly-tsdiffer.md` | What launchd actually reads each run | +| launchd plist (reference) | `scripts/weekly-api-diff/launchd.plist` | Reference copy for local fallback — install instructions in comments | +| launchd plist (live) | `~/Library/LaunchAgents/com..weekly-tsdiffer.plist` | What macOS scheduler reads | +| Secrets (local) | `~/.secrets` | Contains `SLACK_TSDIFF_CHROMATIC_BOT_TOKEN` (chmod 600, never commit) | +| Snapshots repo | `~/dev/react-spectrum-api-snapshots` | Stores weekly diff text files (local fallback only) | +| Snapshots repo (GitHub) | https://github.com/LFDanLu/react-spectrum-api-snapshots | Public record of weekly diffs | +| Run log | `/tmp/weekly-tsdiffer.log` | stdout/stderr from each local run | +| Error log | `/tmp/weekly-tsdiffer-error.log` | Step-level errors from the Claude prompt | + +## How It Works (GitHub Actions) + +1. GH Actions fires every Monday at 9am PT (`cron: '0 17 * * 1'`) +2. Builds current `main` API snapshot via `yarn build:api-branch` +3. Builds release baseline via `yarn build:api-published` (auto-detects last Publish commit) +4. Generates diff via `yarn compare:apis --isCI` +5. Detects if a new release landed since the last committed diff (via `last-publish-hash.txt` in snapshots repo) +6. Computes week-to-week delta by comparing against the most recent committed diff +7. Commits new diff + updated hash to snapshots repo (skipped if nothing changed or diff is empty) +8. Summarizes via GitHub Models and posts one of four Slack messages: + - No pending API changes vs release (release consumed everything) + - New release since last diff: links to full diff as fresh baseline + - No new changes since last diff: links to previous diff + - Normal: LLM summary of week-to-week delta + +## How It Works (Local Fallback) + +1. macOS launchd fires every Monday at 9am (catches up on wake if laptop was asleep) +2. Invokes `claude -p "$(cat ~/weekly-tsdiffer.md)"` with bash/read permissions +3. Claude follows the same logic as the GH Actions workflow (see `prompt.md` for full steps) + +## GitHub Actions Secrets Required + +| Secret | Notes | +|--------|-------| +| `SLACK_TSDIFF_CHROMATIC_BOT_TOKEN` | Slack bot token | +| `SLACK_CHANNEL_ID` | Slack channel to post to | +| `SNAPSHOTS_REPO_TOKEN` | GitHub PAT with Contents: read+write on `react-spectrum-api-snapshots` | + +## Updating the Prompt (Local Fallback) + +1. Edit `scripts/weekly-api-diff/prompt.md` +2. Commit to the repo +3. Sync to the live location: `cp scripts/weekly-api-diff/prompt.md ~/weekly-tsdiffer.md` + +## Local Fallback Setup (fresh machine) + +```bash +# 1. Copy prompt to home dir +cp scripts/weekly-api-diff/prompt.md ~/weekly-tsdiffer.md + +# 2. Install launchd plist (substitutes your macOS username into the Label) +sed "s//$USER/g" scripts/weekly-api-diff/launchd.plist > ~/Library/LaunchAgents/com.$USER.weekly-tsdiffer.plist +launchctl bootout gui/$(id -u)/com.$USER.weekly-tsdiffer 2>/dev/null || true +launchctl bootstrap gui/$(id -u) ~/Library/LaunchAgents/com.$USER.weekly-tsdiffer.plist + +# 3. Add Slack bot token to ~/.secrets (chmod 600) +echo 'export SLACK_TSDIFF_CHROMATIC_BOT_TOKEN=xoxb-...' >> ~/.secrets +chmod 600 ~/.secrets + +# 4. Clone snapshots repo +git clone https://github.com/LFDanLu/react-spectrum-api-snapshots ~/dev/react-spectrum-api-snapshots + +# 5. Build the release baseline (one-time, ~20 min) +cd ~/dev/react-spectrum +yarn build:api-published +``` diff --git a/scripts/weekly-api-diff/launchd.plist b/scripts/weekly-api-diff/launchd.plist new file mode 100644 index 00000000000..fd01827a891 --- /dev/null +++ b/scripts/weekly-api-diff/launchd.plist @@ -0,0 +1,34 @@ + + + + + + Label + com..weekly-tsdiffer + ProgramArguments + + /bin/zsh + -c + source $HOME/.nvm/nvm.sh && source $HOME/.secrets && claude -p "$(cat $HOME/weekly-tsdiffer.md)" --allowedTools "Bash,Read" --dangerously-skip-permissions + + StartCalendarInterval + + Weekday1 + Hour9 + Minute0 + + StandardOutPath + /tmp/weekly-tsdiffer.log + StandardErrorPath + /tmp/weekly-tsdiffer.log + + diff --git a/scripts/weekly-api-diff/prompt.md b/scripts/weekly-api-diff/prompt.md new file mode 100644 index 00000000000..af1a1cfbaeb --- /dev/null +++ b/scripts/weekly-api-diff/prompt.md @@ -0,0 +1,154 @@ +# Weekly React Spectrum API Diff + +You are running the weekly react-spectrum API diff workflow. Follow ALL steps below in order. Do not stop early. If any step fails, log the error to /tmp/weekly-tsdiffer-error.log and continue to the next step where possible. + +## Configuration +- react-spectrum repo: $HOME/dev/react-spectrum +- snapshots repo: $HOME/dev/react-spectrum-api-snapshots +- Slack channel: SLACK_CHANNEL_ID +- Slack token env var: SLACK_TSDIFF_CHROMATIC_BOT_TOKEN (already in environment) +- Snapshots GitHub URL: https://github.com/LFDanLu/react-spectrum-api-snapshots + +## Step 1: Get today's date + +```bash +date +%Y-%m-%d +``` + +Save the output as TODAY (e.g. 2026-05-05). + +## Step 2: Pull latest main + +```bash +cd $HOME/dev/react-spectrum +git checkout main +git pull origin main +``` + +## Step 3: Build current API snapshot + +```bash +cd $HOME/dev/react-spectrum +yarn build:api-branch +``` + +This takes 10-30 minutes. Wait for it to complete. Output goes to $HOME/dev/react-spectrum/dist/branch-api/. + +## Step 4: Build release baseline (if not already built) + +Check if $HOME/dev/react-spectrum/dist/base-api/ exists and contains files: + +```bash +ls $HOME/dev/react-spectrum/dist/base-api/ 2>/dev/null | head -5 +``` + +- If it lists files: skip to Step 5 (baseline already built) +- If empty or missing: build it now: + +```bash +cd $HOME/dev/react-spectrum +yarn build:api-published +``` + +This also takes 10-30 minutes. + +## Step 5: Generate the diff text + +```bash +cd $HOME/dev/react-spectrum +yarn compare:apis --isCI | tee /tmp/diff-current.txt +``` + +Note: only capture stdout (no 2>&1), stderr from yarn should not end up in the diff file. + +## Step 6: Detect new release and compute week-to-week delta + +Get the current last Publish commit hash: + +```bash +cd $HOME/dev/react-spectrum +git log --grep='^Publish$' --oneline -1 | awk '{print $1}' +``` + +Save this as CURRENT_PUBLISH. Then read the previously recorded hash: + +```bash +cat $HOME/dev/react-spectrum-api-snapshots/last-publish-hash.txt 2>/dev/null +``` + +Save this as PREV_PUBLISH. + +- If PREV_PUBLISH is non-empty and CURRENT_PUBLISH != PREV_PUBLISH: set NEW_RELEASE=true. Skip delta computation and go directly to Step 7. +- Otherwise: find the most recent previous diff file (sort alphabetically, not by mtime): + +```bash +ls $HOME/dev/react-spectrum-api-snapshots/diffs/*.txt 2>/dev/null | sort -r | head -1 +``` + +If a previous file exists: run `diff /tmp/diff-current.txt` and save the output as WEEKLY_DELTA. +If no previous file exists (first run): set WEEKLY_DELTA to "(first run, no previous diff to compare against)". + +## Step 7: Commit and push + +Determine whether to commit: +- If /tmp/diff-current.txt is empty (0 bytes): skip commit entirely +- If NEW_RELEASE=true and /tmp/diff-current.txt is non-empty: commit (fresh baseline after release) +- If WEEKLY_DELTA is non-empty and /tmp/diff-current.txt is non-empty: commit (new changes this week) +- Otherwise (WEEKLY_DELTA is empty): skip commit (same as last week) + +If committing: + +```bash +cd $HOME/dev/react-spectrum-api-snapshots +git checkout main +git pull origin main +cp /tmp/diff-current.txt diffs/$TODAY.txt +echo "$CURRENT_PUBLISH" > last-publish-hash.txt +git add diffs/$TODAY.txt last-publish-hash.txt +git commit -m "weekly api diff $TODAY" +git push +``` + +## Step 8: Summarize + +Choose the appropriate message based on the following cases: + +**Case 1 diff-current.txt is empty (no pending API changes vs release):** +Go to Step 9 with message: "No API changes detected vs last release, all pending changes have been included in a release." + +**Case 2 NEW_RELEASE=true (release landed since last diff):** +Go to Step 9 with message noting a new release landed, linking to the full diff. + +**Case 3 WEEKLY_DELTA is empty (same diff as last week):** +Go to Step 9 with message: "No new API changes since last diff (PREV_DATE): PREV_URL" + +**Case 4 Normal (has changes vs last week):** +Read WEEKLY_DELTA and produce a concise summary: +- Lines added to the diff (new API changes not there last week) +- Lines removed from the diff (API changes that were reverted or released) +- Affected package names + +Apply these grouping and classification rules when writing the summary: +- The delta is a diff-of-diffs. A `+` prefix on an entire component section means that component wasn't in last week's diff but appears now — this does NOT mean the component is new. It means the component now has API changes vs the release baseline that weren't there last week (e.g. a prop was added or removed). Only call a component "new" if the diff itself contains a line like `+ ComponentName` indicating a new export. +- If multiple components in the same family (e.g. Checkbox, Radio, Switch) all gain the same new prop (e.g. `description`, `errorMessage`), call it out as a single feature rather than listing each component separately +- If new wrapper components appear (e.g. CheckboxField, RadioField) alongside new props on their inner components, group them together and describe the feature they enable (e.g. "help text support") rather than just listing them as new exports +- Always call out new props added to existing components explicitly, don't bury them under new export counts +- If a prop signature changes (e.g. a callback gains a new argument), flag it as a potential breaking change for consumers who implement that signature +- Group Calendar-family changes together (Calendar, RangeCalendar, CalendarState, DateRangePicker) since they tend to change together + +## Step 9: Post to Slack + +Post the appropriate message from Step 8: + +```bash +curl -s -X POST https://slack.com/api/chat.postMessage \ + -H "Authorization: Bearer $SLACK_TSDIFF_CHROMATIC_BOT_TOKEN" \ + -H "Content-Type: application/json" \ + -d "{\"channel\": \"SLACK_CHANNEL_ID\", \"text\": \"📊 Weekly API Diff — $TODAY\n\n\"}" +``` + +Verify the response contains "ok": true. + +## Done + +The workflow is complete. From 8028fd51334eb03074286574350d26b31ba91e86 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 8 May 2026 11:36:17 -1000 Subject: [PATCH 2/3] chore: Format with oxfmt (#10030) * chore: Format with oxfmt * Don't format codemod fixtures * Forgot to commit vscode settings --- .../custom-addons/chromatic/index.js | 83 +- .chromatic-fc/layout.js | 7 +- .chromatic-fc/main.mjs | 9 +- .chromatic-fc/manager.js | 2 +- .chromatic-fc/preview-head.html | 344 +- .chromatic-fc/preview.js | 10 +- .chromatic/custom-addons/chromatic/index.js | 121 +- .chromatic/layout.js | 7 +- .chromatic/main.mjs | 11 +- .chromatic/manager.js | 2 +- .chromatic/preview-head.html | 343 +- .chromatic/preview.js | 10 +- .circleci/api-comment.js | 20 +- .circleci/comment.js | 16 +- .circleci/config.yml | 28 +- .github/ISSUE_TEMPLATE/Bug_Report.yml | 8 +- .github/ISSUE_TEMPLATE/Documentation.yml | 2 +- .github/ISSUE_TEMPLATE/Feature_Request.yml | 10 +- .github/ISSUE_TEMPLATE/Feedback.yml | 8 +- .github/actions/branch/index.js | 2 +- .github/actions/permissions/index.js | 4 +- .github/labeler.yml | 333 +- .github/workflows-old/publish.yaml | 48 +- .github/workflows-old/test.yaml | 60 +- .github/workflows/labeler.yml | 10 +- .github/workflows/lint-pr-titles.yaml | 22 +- .github/workflows/weekly-api-diff.yml | 6 +- .github/workflows/weekly-chromatic.yml | 8 +- .github/workflows/weekly-excel-sheet.yaml | 2 +- .gitignore | 1 - .oxfmtrc.json | 13 + .storybook-s2/custom-addons/provider/index.js | 8 +- .../custom-addons/provider/preset.ts | 6 +- .../custom-addons/provider/register.tsx | 23 +- .storybook-s2/docs/Colors.jsx | 33 +- .storybook-s2/docs/Icons.jsx | 113 +- .storybook-s2/docs/Illustrations.jsx | 154 +- .storybook-s2/docs/Intro.jsx | 509 +- .storybook-s2/docs/MDXLayout.jsx | 12 +- .storybook-s2/docs/Migrating.jsx | 1836 +++++-- .storybook-s2/docs/Release Notes.mdx | 324 +- .storybook-s2/docs/Release030Intro.jsx | 14 +- .storybook-s2/docs/StyleMacro.jsx | 496 +- .storybook-s2/docs/color.macro.ts | 12 +- .storybook-s2/docs/highlight.js | 4 +- .storybook-s2/docs/typography.js | 85 +- .storybook-s2/global.css | 6 +- .storybook-s2/main.ts | 16 +- .storybook-s2/manager-head.html | 2 +- .storybook-s2/preview.tsx | 74 +- .../custom-addons/descriptions/manager.js | 4 +- .storybook/custom-addons/provider/index.js | 20 +- .storybook/custom-addons/provider/manager.js | 65 +- .storybook/custom-addons/scrolling/index.js | 30 +- .storybook/custom-addons/scrolling/manager.js | 21 +- .storybook/custom-addons/strictmode/index.js | 16 +- .../custom-addons/strictmode/manager.js | 19 +- .storybook/main.mjs | 6 +- .storybook/manager.js | 2 +- .storybook/preview-head.html | 32 +- .storybook/preview.js | 12 +- .storybook/test-runner.js | 15 +- .vscode/extensions.json | 3 + .vscode/settings.json | 5 + .yarn/plugins/plugin-nightly-prep.js | 265 +- .yarnrc.yml | 10 +- __mocks__/svg.js | 10 +- babel-esm.config.json | 7 +- babel.config.json | 7 +- bin/imports.js | 12 +- bin/pure-render.js | 13 +- bin/useLayoutEffectRule.js | 16 +- eslint.config.mjs | 923 ++-- examples/next-app-csp/app/layout.tsx | 33 +- examples/next-app-csp/app/page.tsx | 6 +- examples/next-app-csp/middleware.tsx | 40 +- examples/next-app-csp/next.config.js | 16 +- examples/next-app-csp/package.json | 12 +- examples/next-app/app/layout.tsx | 14 +- examples/next-app/app/page.tsx | 6 +- examples/next-app/next.config.js | 16 +- examples/next-app/package.json | 16 +- examples/rac-spectrum-tailwind/package.json | 4 +- examples/rac-spectrum-tailwind/src/App.js | 165 +- .../src/ThemeSwitcher.js | 22 +- .../src/components/GenInputField.tsx | 19 +- .../src/components/NavigationBox.tsx | 16 +- .../src/components/PlanSwitcher.tsx | 16 +- .../src/components/SelectBoxGroup.tsx | 22 +- .../src/components/SentimentRatingGroup.tsx | 21 +- .../src/components/StarRatingGroup.tsx | 58 +- examples/rac-spectrum-tailwind/src/index.html | 20 +- examples/rac-spectrum-tailwind/src/index.js | 5 +- .../src/spectrum-preset.js | 890 ++-- examples/rac-spectrum-tailwind/src/style.css | 2 +- .../rac-spectrum-tailwind/tailwind.config.js | 14 +- examples/rac-spectrum-tailwind/tsconfig.json | 10 +- examples/remix/app/entry.server.tsx | 28 +- examples/remix/app/root.tsx | 4 +- examples/remix/app/routes/_index.tsx | 13 +- examples/remix/app/routes/foo.tsx | 2 +- examples/remix/package.json | 24 +- examples/remix/vite.config.ts | 12 +- examples/rsp-cra-18/package.json | 30 +- examples/rsp-cra-18/src/App.css | 10 +- examples/rsp-cra-18/src/App.tsx | 60 +- .../rsp-cra-18/src/AutocompleteExample.tsx | 37 +- examples/rsp-cra-18/src/BodyContent.tsx | 112 +- examples/rsp-cra-18/src/Completed.tsx | 62 +- examples/rsp-cra-18/src/Journal.tsx | 10 +- examples/rsp-cra-18/src/JournalEntries.tsx | 34 +- examples/rsp-cra-18/src/JournalList.tsx | 77 +- examples/rsp-cra-18/src/Lighting.tsx | 16 +- examples/rsp-cra-18/src/ToDo.tsx | 8 +- examples/rsp-cra-18/src/ToDoItems.tsx | 55 +- examples/rsp-cra-18/src/TodoList.tsx | 75 +- examples/rsp-cra-18/src/index.css | 9 +- examples/rsp-cra-18/src/index.tsx | 12 +- .../src/sections/ButtonExamples.tsx | 17 +- .../src/sections/CollectionExamples.tsx | 250 +- .../rsp-cra-18/src/sections/ColorExamples.tsx | 2 +- .../src/sections/ContentExamples.tsx | 26 +- .../src/sections/DateTimeExamples.tsx | 19 +- .../src/sections/DragAndDropExamples.tsx | 34 +- .../rsp-cra-18/src/sections/FormExamples.tsx | 27 +- .../src/sections/NavigationExamples.tsx | 35 +- .../src/sections/OverlayExamples.tsx | 74 +- .../src/sections/PickerExamples.tsx | 2 +- .../src/sections/StatusExamples.tsx | 22 +- examples/rsp-cra-18/tsconfig.json | 11 +- examples/rsp-cra-18/typings.d.ts | 2 +- .../components/ReorderableListView.tsx | 45 +- .../rsp-next-ts-17/components/Section.tsx | 6 +- examples/rsp-next-ts-17/next.config.js | 12 +- examples/rsp-next-ts-17/package.json | 4 +- examples/rsp-next-ts-17/pages/_app.tsx | 41 +- examples/rsp-next-ts-17/pages/api/hello.ts | 13 +- examples/rsp-next-ts-17/pages/index.tsx | 129 +- examples/rsp-next-ts-17/styles/globals.css | 14 +- .../components/AutocompleteExample.tsx | 37 +- .../components/ReorderableListView.tsx | 45 +- examples/rsp-next-ts/components/Section.tsx | 6 +- examples/rsp-next-ts/jest.config.js | 2 +- examples/rsp-next-ts/next.config.mjs | 14 +- examples/rsp-next-ts/package.json | 4 +- examples/rsp-next-ts/pages/_app.tsx | 49 +- examples/rsp-next-ts/pages/_document.tsx | 4 +- examples/rsp-next-ts/pages/api/hello.ts | 13 +- examples/rsp-next-ts/pages/index.tsx | 134 +- examples/rsp-next-ts/styles/globals.css | 14 +- examples/rsp-next-ts/test/index.test.js | 6 +- examples/rsp-next-ts/typings.d.ts | 2 +- examples/rsp-webpack-4/package.json | 14 +- .../rsp-webpack-4/scripts/prepareForProd.mjs | 1 - examples/rsp-webpack-4/src/App.css | 10 +- examples/rsp-webpack-4/src/App.js | 67 +- examples/rsp-webpack-4/src/BodyContent.js | 109 +- examples/rsp-webpack-4/src/Completed.js | 60 +- examples/rsp-webpack-4/src/JournalEntries.js | 32 +- examples/rsp-webpack-4/src/JournalList.js | 57 +- examples/rsp-webpack-4/src/Lighting.js | 14 +- examples/rsp-webpack-4/src/ToDoItems.js | 49 +- examples/rsp-webpack-4/src/TodoList.js | 57 +- examples/rsp-webpack-4/src/index.css | 9 +- examples/rsp-webpack-4/src/index.js | 12 +- examples/rsp-webpack-4/webpack.config.js | 25 +- examples/s2-esbuild-starter-app/build.mjs | 16 +- examples/s2-esbuild-starter-app/index.html | 22 +- examples/s2-esbuild-starter-app/index.jsx | 4 +- examples/s2-esbuild-starter-app/package.json | 4 +- examples/s2-esbuild-starter-app/settings.mjs | 2 +- examples/s2-esbuild-starter-app/src/app.tsx | 12 +- examples/s2-esbuild-starter-app/tsconfig.json | 16 +- examples/s2-next-macros/next.config.mjs | 7 +- examples/s2-next-macros/postcss.config.js | 2 +- examples/s2-next-macros/src/app/Lazy.js | 171 +- .../src/app/components/CardViewExample.jsx | 120 +- .../app/components/CollectionCardsExample.jsx | 29 +- .../src/app/components/Section.jsx | 28 +- examples/s2-next-macros/src/app/layout.tsx | 14 +- examples/s2-next-macros/src/app/page.tsx | 89 +- examples/s2-next-macros/src/app/provider.tsx | 16 +- examples/s2-next-macros/tsconfig.json | 21 +- examples/s2-parcel-example/package.json | 14 +- examples/s2-parcel-example/src/App.js | 77 +- examples/s2-parcel-example/src/Lazy.js | 169 +- .../src/components/CardViewExample.jsx | 118 +- .../src/components/CollectionCardsExample.jsx | 29 +- .../src/components/Section.jsx | 28 +- examples/s2-parcel-example/src/index.html | 18 +- examples/s2-parcel-example/src/index.js | 6 +- examples/s2-rollup-starter-app/package.json | 28 +- .../s2-rollup-starter-app/rollup.config.js | 2 +- examples/s2-rollup-starter-app/src/App.jsx | 11 +- examples/s2-rollup-starter-app/src/main.js | 4 +- examples/s2-vite-project/.eslintrc.cjs | 13 +- examples/s2-vite-project/package.json | 2 +- examples/s2-vite-project/src/App.tsx | 87 +- examples/s2-vite-project/src/Lazy.tsx | 169 +- .../src/components/CardViewExample.jsx | 118 +- .../src/components/CollectionCardsExample.jsx | 29 +- .../src/components/Section.jsx | 28 +- examples/s2-vite-project/src/main.tsx | 10 +- examples/s2-vite-project/src/vite-env.d.ts | 6 +- examples/s2-vite-project/tsconfig.json | 2 +- examples/s2-vite-project/vite.config.ts | 11 +- examples/s2-webpack-5-example/package.json | 4 +- examples/s2-webpack-5-example/src/App.js | 77 +- examples/s2-webpack-5-example/src/Lazy.js | 169 +- .../src/components/CardViewExample.js | 120 +- .../src/components/CollectionCardsExample.js | 31 +- .../src/components/Section.js | 28 +- examples/s2-webpack-5-example/src/index.html | 2 +- examples/s2-webpack-5-example/src/index.js | 4 +- .../s2-webpack-5-example/webpack.config.js | 44 +- .../package.json | 4 +- .../src/App.tsx | 88 +- .../src/Lazy.tsx | 169 +- .../src/components/CardViewExample.tsx | 141 +- .../src/components/CollectionCardsExample.tsx | 23 +- .../src/components/Section.tsx | 26 +- .../src/index.html | 2 +- .../src/index.tsx | 4 +- .../tsconfig.json | 2 +- .../webpack.config.js | 48 +- jest.config.js | 25 +- jest.ssr.config.js | 16 +- lerna.json | 5 +- lib/css.d.ts | 4 +- lib/jestResolver.js | 18 +- lib/postcss-custom-properties-mapping.js | 4 +- lib/postcss-hover-class.js | 10 +- lib/postcss-hover-media.js | 2 +- lib/postcss-notnested.js | 13 +- lib/svg.d.ts | 2 +- lib/vars.js | 13 +- lib/varsToTypeScript.js | 11 +- lib/viewTransitions.d.ts | 2 +- lib/yarn-plugin-rsp-duplicates.js | 13 +- package.json | 102 +- .../accordion/Accordion.stories.tsx | 2 +- .../actionbar/ActionBar.stories.tsx | 1 - .../actiongroup/ActionGroup.stories.tsx | 8 +- .../SearchAutocomplete.stories.tsx | 2 +- .../chromatic-fc/avatar/Avatar.stories.tsx | 1 - .../chromatic-fc/badge/Badge.stories.tsx | 11 +- .../chromatic-fc/button/Button.stories.tsx | 4 +- .../button/ToggleButton.stories.tsx | 11 +- .../calendar/Calendar.stories.tsx | 8 +- .../calendar/CalendarCell.stories.tsx | 2 +- .../chromatic-fc/card/Card.stories.tsx | 5 +- .../chromatic-fc/card/QuietCard.stories.tsx | 6 +- .../checkbox/Checkbox.stories.tsx | 2 - .../chromatic-fc/tree/TreeView.stories.tsx | 21 +- .../chromatic/accordion/Accordion.stories.tsx | 78 +- .../accordion/Disclosure.stories.tsx | 30 +- .../chromatic/actionbar/ActionBar.stories.tsx | 4 +- .../actiongroup/ActionGroup.stories.tsx | 178 +- .../SearchAutocomplete.stories.tsx | 60 +- .../SearchAutocompleteRTL.stories.tsx | 17 +- .../chromatic/badge/Badge.stories.tsx | 57 +- .../breadcrumbs/Breadcrumbs.stories.tsx | 2 +- .../chromatic/button/ActionButton.stories.tsx | 12 +- .../chromatic/button/Button.stories.tsx | 68 +- .../chromatic/button/LogicButton.stories.tsx | 4 +- .../chromatic/button/ToggleButton.stories.tsx | 13 +- .../buttongroup/ButtonGroup.stories.tsx | 3 +- .../chromatic/calendar/Calendar.stories.tsx | 30 +- .../calendar/CalendarCell.stories.tsx | 51 +- .../calendar/RangeCalendar.stories.tsx | 42 +- .../chromatic/card/Card.stories.tsx | 674 ++- .../chromatic/card/CardView.stories.tsx | 21 +- .../chromatic/card/HorizontalCard.stories.tsx | 2 +- .../chromatic/checkbox/Checkbox.stories.tsx | 14 +- .../checkbox/CheckboxGroup.stories.tsx | 28 +- .../chromatic/color/ColorArea.stories.tsx | 58 +- .../chromatic/color/ColorField.stories.tsx | 57 +- .../chromatic/color/ColorSlider.stories.tsx | 63 +- .../chromatic/combobox/ComboBox.stories.tsx | 61 +- .../combobox/ComboBoxRTL.stories.tsx | 17 +- .../datepicker/DateField.stories.tsx | 252 +- .../datepicker/DatePicker.stories.tsx | 278 +- .../datepicker/DateRangePicker.stories.tsx | 269 +- .../datepicker/TimeField.stories.tsx | 151 +- .../chromatic/dialog/AlertDialog.stories.tsx | 176 +- .../chromatic/dialog/Dialog.stories.tsx | 404 +- .../dialog/DialogExpress.stories.tsx | 83 +- .../dialog/DialogLanguages.stories.tsx | 16 +- .../chromatic/dialog/intlMessages.json | 7 +- .../chromatic/dropzone/DropZone.stories.tsx | 8 +- .../chromatic/form/Form.stories.tsx | 34 +- .../chromatic/form/FormLanguages.stories.tsx | 42 +- .../chromatic/form/FormLongLabel.stories.tsx | 52 +- .../IllustratedMessage.stories.tsx | 10 +- .../inlinealert/InlineAlert.stories.tsx | 7 +- .../chromatic/label/HelpText.stories.tsx | 24 +- .../chromatic/label/Label.stories.tsx | 14 +- .../labeledvalue/LabeledValue.stories.tsx | 58 +- .../chromatic/layout/Flex.stories.tsx | 2 +- .../chromatic/layout/Grid.stories.tsx | 2 +- .../chromatic/layout/styles.css | 16 +- .../chromatic/link/Link.stories.tsx | 8 +- .../chromatic/list/ListView.stories.tsx | 33 +- .../chromatic/list/ListViewRTL.stories.tsx | 14 +- .../chromatic/listbox/ListBox.stories.tsx | 75 +- .../chromatic/listbox/intlMessages.json | 2 +- .../chromatic/menu/MenuTrigger.stories.tsx | 158 +- .../menu/MenuTriggerExpress.stories.tsx | 16 +- .../menu/MenuTriggerLanguages.stories.tsx | 8 +- .../chromatic/menu/MenuTriggerRTL.stories.tsx | 16 +- .../chromatic/menu/Submenu.stories.tsx | 131 +- .../chromatic/menu/Submenu.storiesRTL.tsx | 21 +- .../chromatic/menu/intlMessages.json | 2 +- .../numberfield/NumberField.stories.tsx | 120 +- .../picker/Picker.Languages.stories.tsx | 17 +- .../chromatic/picker/Picker.stories.tsx | 33 +- .../progress/ProgressBar.stories.tsx | 6 +- .../progress/ProgressCircle.stories.tsx | 6 +- .../chromatic/provider/Provider.stories.tsx | 72 +- .../chromatic/radio/Radio.stories.tsx | 5 +- .../searchfield/SearchField.stories.tsx | 11 +- .../chromatic/slider/RangeSlider.stories.tsx | 5 +- .../chromatic/slider/Slider.stories.tsx | 5 +- .../statuslight/StatusLight.stories.tsx | 25 +- .../chromatic/steplist/StepList.stories.tsx | 37 +- .../chromatic/switch/Switch.stories.tsx | 3 +- .../chromatic/table/TableView.stories.tsx | 132 +- .../chromatic/table/TableViewRTL.stories.tsx | 7 +- .../chromatic/table/TreeGridTable.stories.tsx | 188 +- .../table/TreeGridTableRTL.stories.tsx | 7 +- .../chromatic/tabs/Tabs.stories.tsx | 112 +- .../chromatic/tag/TagGroup.stories.tsx | 22 +- .../chromatic/textfield/TextArea.stories.tsx | 116 +- .../textfield/TextAreaLanguages.stories.tsx | 6 +- .../chromatic/textfield/Textfield.stories.tsx | 113 +- .../textfield/TextfieldLanguages.stories.tsx | 6 +- .../chromatic/toast/Toast.stories.tsx | 13 +- .../chromatic/tooltip/Tooltip.stories.tsx | 12 +- .../tooltip/TooltipTrigger.stories.tsx | 46 +- .../chromatic/tree/TreeView.stories.tsx | 59 +- .../chromatic/view/View.stories.tsx | 27 +- .../chromatic/well/Well.stories.tsx | 2 +- .../react-spectrum/docs/labeledvalue/types.ts | 11 +- .../react-spectrum/exports/Accordion.ts | 7 +- .../react-spectrum/exports/ProgressCircle.ts | 6 +- .../@adobe/react-spectrum/exports/Provider.ts | 10 +- .../react-spectrum/exports/TableView.ts | 7 +- .../@adobe/react-spectrum/exports/Tabs.ts | 6 +- .../@adobe/react-spectrum/exports/Toast.ts | 6 +- .../@adobe/react-spectrum/exports/TreeView.ts | 6 +- .../@adobe/react-spectrum/exports/index.ts | 66 +- .../autocomplete/SearchAutocomplete.ts | 5 +- .../exports/private/card/types.ts | 6 +- .../exports/private/icon/Illustration.ts | 6 +- .../private/progress/ProgressBarBase.ts | 5 +- .../private/utils/BreakpointProvider.ts | 6 +- .../exports/private/utils/classNames.ts | 6 +- .../exports/private/utils/styleProps.ts | 12 +- .../exports/private/utils/useDOMRef.ts | 9 +- .../react-spectrum/exports/useAsyncList.ts | 8 +- .../react-spectrum/exports/useDragAndDrop.ts | 32 +- .../react-spectrum/intl/actionbar/en-US.json | 2 +- .../react-spectrum/intl/combobox/en-US.json | 1 - .../react-spectrum/intl/menu/en-US.json | 6 +- .../src/accordion/Accordion.tsx | 156 +- .../src/actionbar/ActionBar.tsx | 36 +- .../src/actionbar/ActionBarContainer.tsx | 10 +- .../src/actionbar/actionbar.css | 16 +- .../src/actiongroup/ActionGroup.tsx | 313 +- .../autocomplete/MobileSearchAutocomplete.tsx | 361 +- .../src/autocomplete/SearchAutocomplete.tsx | 257 +- .../react-spectrum/src/avatar/Avatar.tsx | 37 +- .../@adobe/react-spectrum/src/badge/Badge.tsx | 32 +- .../src/breadcrumbs/BreadcrumbItem.tsx | 48 +- .../src/breadcrumbs/Breadcrumbs.tsx | 63 +- .../src/button/ActionButton.tsx | 65 +- .../react-spectrum/src/button/Button.tsx | 92 +- .../react-spectrum/src/button/ClearButton.tsx | 50 +- .../react-spectrum/src/button/FieldButton.tsx | 45 +- .../react-spectrum/src/button/LogicButton.tsx | 42 +- .../src/button/ToggleButton.tsx | 72 +- .../src/buttongroup/ButtonGroup.tsx | 57 +- .../react-spectrum/src/calendar/Calendar.tsx | 24 +- .../src/calendar/CalendarBase.tsx | 87 +- .../src/calendar/CalendarCell.tsx | 54 +- .../src/calendar/CalendarMonth.tsx | 59 +- .../src/calendar/RangeCalendar.tsx | 25 +- .../react-spectrum/src/card/BaseLayout.tsx | 80 +- .../@adobe/react-spectrum/src/card/Card.tsx | 11 +- .../react-spectrum/src/card/CardBase.tsx | 128 +- .../react-spectrum/src/card/CardView.tsx | 155 +- .../src/card/CardViewContext.tsx | 10 +- .../react-spectrum/src/card/GalleryLayout.tsx | 38 +- .../react-spectrum/src/card/GridLayout.tsx | 63 +- .../src/card/WaterfallLayout.tsx | 66 +- .../@adobe/react-spectrum/src/card/types.ts | 56 +- .../react-spectrum/src/checkbox/Checkbox.tsx | 98 +- .../src/checkbox/CheckboxGroup.tsx | 50 +- .../react-spectrum/src/color/ColorArea.tsx | 51 +- .../react-spectrum/src/color/ColorEditor.tsx | 42 +- .../react-spectrum/src/color/ColorField.tsx | 67 +- .../react-spectrum/src/color/ColorPicker.tsx | 29 +- .../react-spectrum/src/color/ColorSlider.tsx | 66 +- .../react-spectrum/src/color/ColorSwatch.tsx | 88 +- .../src/color/ColorSwatchPicker.tsx | 120 +- .../react-spectrum/src/color/ColorThumb.tsx | 91 +- .../react-spectrum/src/color/ColorWheel.tsx | 57 +- .../react-spectrum/src/combobox/ComboBox.tsx | 216 +- .../src/combobox/MobileComboBox.tsx | 348 +- .../src/contextualhelp/ContextualHelp.tsx | 27 +- .../src/datepicker/DateField.tsx | 78 +- .../src/datepicker/DatePicker.tsx | 121 +- .../src/datepicker/DatePickerField.tsx | 28 +- .../src/datepicker/DatePickerSegment.tsx | 22 +- .../src/datepicker/DateRangePicker.tsx | 133 +- .../react-spectrum/src/datepicker/Input.tsx | 62 +- .../src/datepicker/TimeField.tsx | 72 +- .../react-spectrum/src/datepicker/styles.css | 35 +- .../react-spectrum/src/datepicker/utils.tsx | 40 +- .../react-spectrum/src/dialog/AlertDialog.tsx | 55 +- .../react-spectrum/src/dialog/Dialog.tsx | 65 +- .../src/dialog/DialogContainer.tsx | 22 +- .../src/dialog/DialogTrigger.tsx | 91 +- .../react-spectrum/src/dialog/context.ts | 6 +- .../src/dialog/useDialogContainer.ts | 4 +- .../react-spectrum/src/divider/Divider.tsx | 37 +- .../react-spectrum/src/dnd/useDragAndDrop.ts | 97 +- .../react-spectrum/src/dropzone/DropZone.tsx | 61 +- .../@adobe/react-spectrum/src/form/Form.tsx | 61 +- .../@adobe/react-spectrum/src/icon/Icon.tsx | 25 +- .../react-spectrum/src/icon/Illustration.tsx | 8 +- .../@adobe/react-spectrum/src/icon/UIIcon.tsx | 18 +- .../illustratedmessage/IllustratedMessage.tsx | 22 +- .../@adobe/react-spectrum/src/image/Image.tsx | 94 +- .../src/inlinealert/InlineAlert.tsx | 22 +- .../@adobe/react-spectrum/src/label/Field.tsx | 105 +- .../react-spectrum/src/label/HelpText.tsx | 32 +- .../@adobe/react-spectrum/src/label/Label.tsx | 56 +- .../src/labeledvalue/LabeledValue.tsx | 159 +- .../@adobe/react-spectrum/src/layout/Flex.tsx | 20 +- .../@adobe/react-spectrum/src/layout/Grid.tsx | 12 +- .../@adobe/react-spectrum/src/link/Link.tsx | 24 +- .../react-spectrum/src/list/DragPreview.tsx | 49 +- .../src/list/InsertionIndicator.tsx | 19 +- .../react-spectrum/src/list/ListView.tsx | 257 +- .../react-spectrum/src/list/ListViewItem.tsx | 230 +- .../react-spectrum/src/list/ListViewLayout.ts | 25 +- .../src/list/RootDropIndicator.tsx | 14 +- .../@adobe/react-spectrum/src/list/styles.css | 112 +- .../react-spectrum/src/listbox/ListBox.tsx | 14 +- .../src/listbox/ListBoxBase.tsx | 191 +- .../src/listbox/ListBoxContext.ts | 8 +- .../src/listbox/ListBoxLayout.ts | 22 +- .../src/listbox/ListBoxOption.tsx | 60 +- .../src/listbox/ListBoxSection.tsx | 57 +- .../react-spectrum/src/menu/ActionMenu.tsx | 42 +- .../src/menu/ContextualHelpTrigger.tsx | 77 +- .../@adobe/react-spectrum/src/menu/Menu.tsx | 141 +- .../react-spectrum/src/menu/MenuItem.tsx | 108 +- .../react-spectrum/src/menu/MenuSection.tsx | 59 +- .../react-spectrum/src/menu/MenuTrigger.tsx | 29 +- .../src/menu/SubmenuTrigger.tsx | 61 +- .../@adobe/react-spectrum/src/menu/context.ts | 69 +- .../src/menu/useCloseOnScroll.ts | 16 +- .../@adobe/react-spectrum/src/meter/Meter.tsx | 32 +- .../src/numberfield/NumberField.tsx | 152 +- .../src/numberfield/StepButton.tsx | 81 +- .../react-spectrum/src/overlays/Modal.tsx | 32 +- .../src/overlays/OpenTransition.tsx | 12 +- .../react-spectrum/src/overlays/Overlay.tsx | 42 +- .../react-spectrum/src/overlays/Popover.tsx | 236 +- .../react-spectrum/src/overlays/Tray.tsx | 56 +- .../react-spectrum/src/overlays/Underlay.tsx | 11 +- .../react-spectrum/src/picker/Picker.tsx | 148 +- .../src/progress/ProgressBar.tsx | 26 +- .../src/progress/ProgressBarBase.tsx | 69 +- .../src/progress/ProgressCircle.tsx | 65 +- .../react-spectrum/src/provider/Provider.tsx | 76 +- .../react-spectrum/src/provider/types.ts | 62 +- .../@adobe/react-spectrum/src/radio/Radio.tsx | 68 +- .../react-spectrum/src/radio/RadioGroup.tsx | 37 +- .../react-spectrum/src/radio/context.ts | 8 +- .../src/searchfield/SearchField.tsx | 66 +- .../react-spectrum/src/slider/RangeSlider.tsx | 33 +- .../react-spectrum/src/slider/Slider.tsx | 65 +- .../react-spectrum/src/slider/SliderBase.tsx | 89 +- .../react-spectrum/src/slider/SliderThumb.tsx | 44 +- .../src/statuslight/StatusLight.tsx | 41 +- .../react-spectrum/src/steplist/StepList.tsx | 22 +- .../src/steplist/StepListItem.tsx | 76 +- .../react-spectrum/src/switch/Switch.tsx | 45 +- .../react-spectrum/src/table/DragPreview.tsx | 62 +- .../src/table/InsertionIndicator.tsx | 20 +- .../react-spectrum/src/table/Nubbin.tsx | 24 +- .../react-spectrum/src/table/Resizer.tsx | 34 +- .../src/table/RootDropIndicator.tsx | 15 +- .../react-spectrum/src/table/TableView.tsx | 69 +- .../src/table/TableViewBase.tsx | 1289 ++--- .../src/table/TableViewLayout.ts | 24 +- .../src/table/TableViewWithoutExpanding.tsx | 18 +- .../src/table/TreeGridTableView.tsx | 23 +- .../@adobe/react-spectrum/src/table/table.css | 24 +- .../@adobe/react-spectrum/src/table/types.ts | 7 +- .../@adobe/react-spectrum/src/tabs/Tabs.tsx | 241 +- .../@adobe/react-spectrum/src/tag/Tag.tsx | 45 +- .../react-spectrum/src/tag/TagGroup.tsx | 145 +- .../react-spectrum/src/text/Heading.tsx | 17 +- .../react-spectrum/src/text/Keyboard.tsx | 9 +- .../@adobe/react-spectrum/src/text/Text.tsx | 9 +- .../react-spectrum/src/textfield/TextArea.tsx | 55 +- .../src/textfield/TextField.tsx | 45 +- .../src/textfield/TextFieldBase.tsx | 116 +- .../@adobe/react-spectrum/src/toast/Toast.tsx | 66 +- .../src/toast/ToastContainer.tsx | 36 +- .../react-spectrum/src/toast/Toaster.tsx | 19 +- .../src/toast/toastContainer.css | 12 +- .../react-spectrum/src/tooltip/Tooltip.tsx | 32 +- .../src/tooltip/TooltipTrigger.tsx | 29 +- .../react-spectrum/src/tooltip/context.ts | 10 +- .../react-spectrum/src/tree/TreeView.tsx | 186 +- .../src/utils/BreakpointProvider.tsx | 38 +- .../@adobe/react-spectrum/src/utils/Slots.tsx | 46 +- .../react-spectrum/src/utils/classNames.ts | 9 +- .../src/utils/getWrappedElement.tsx | 4 +- .../react-spectrum/src/utils/styleProps.ts | 79 +- .../react-spectrum/src/utils/useDOMRef.ts | 35 +- .../react-spectrum/src/utils/useMediaQuery.ts | 6 +- .../react-spectrum/src/view/Content.tsx | 11 +- .../@adobe/react-spectrum/src/view/Footer.tsx | 11 +- .../@adobe/react-spectrum/src/view/Header.tsx | 11 +- .../@adobe/react-spectrum/src/view/View.tsx | 24 +- .../@adobe/react-spectrum/src/well/Well.tsx | 27 +- .../stories/accordion/Accordion.stories.tsx | 61 +- .../stories/accordion/Disclosure.stories.tsx | 26 +- .../stories/actionbar/ActionBar.stories.tsx | 6 +- .../stories/actionbar/Example.tsx | 36 +- .../actiongroup/ActionGroup.stories.tsx | 67 +- .../stories/actiongroup/Toolbar.stories.tsx | 84 +- .../stories/actiongroup/toolbar.css | 19 +- .../SearchAutocomplete.stories.tsx | 38 +- .../stories/badge/Badge.stories.tsx | 33 +- .../breadcrumbs/Breadcrumbs.stories.tsx | 30 +- .../stories/button/ActionButton.stories.tsx | 36 +- .../stories/button/Button.stories.tsx | 128 +- .../stories/button/LogicButton.stories.tsx | 12 +- .../stories/button/ToggleButton.stories.tsx | 16 +- .../buttongroup/ButtonGroup.stories.tsx | 41 +- .../stories/calendar/Calendar.stories.tsx | 132 +- .../calendar/RangeCalendar.stories.tsx | 99 +- .../calendar/RangeCalendarCell.stories.tsx | 52 +- .../stories/card/Card.stories.tsx | 325 +- .../stories/card/GalleryCardView.stories.tsx | 37 +- .../stories/card/GridCardView.stories.tsx | 293 +- .../stories/card/HorizontalCard.stories.tsx | 100 +- .../stories/card/QuietCard.stories.tsx | 413 +- .../card/WaterfallCardView.stories.tsx | 20 +- .../react-spectrum/stories/card/utils.ts | 2 +- .../stories/checkbox/Checkbox.stories.tsx | 41 +- .../checkbox/CheckboxGroup.stories.tsx | 45 +- .../stories/color/ColorArea.stories.tsx | 33 +- .../stories/color/ColorField.stories.tsx | 35 +- .../stories/color/ColorPicker.stories.tsx | 9 +- .../stories/color/ColorSlider.stories.tsx | 19 +- .../stories/color/ColorSwatch.stories.tsx | 8 +- .../color/ColorSwatchPicker.stories.tsx | 10 +- .../stories/color/ColorThumb.stories.tsx | 2 +- .../stories/color/ColorWheel.stories.tsx | 12 +- .../stories/combobox/ComboBox.stories.tsx | 265 +- .../contextualhelp/ContextualHelp.stories.tsx | 47 +- .../stories/datepicker/DateField.stories.tsx | 125 +- .../stories/datepicker/DatePicker.stories.tsx | 145 +- .../datepicker/DateRangePicker.stories.tsx | 217 +- .../DateRangePickerStyling.stories.tsx | 72 +- .../stories/datepicker/TimeField.stories.tsx | 66 +- .../datepicker/TimeFieldStyling.stories.tsx | 36 +- .../stories/dialog/AlertDialog.stories.tsx | 237 +- .../stories/dialog/Dialog.stories.tsx | 330 +- .../dialog/DialogContainer.stories.tsx | 8 +- .../dialog/DialogContainerExamples.tsx | 59 +- .../stories/dialog/DialogTrigger.stories.tsx | 341 +- .../stories/divider/Divider.stories.tsx | 8 +- .../stories/dropzone/DropZone.stories.tsx | 127 +- .../stories/dropzone/FileTrigger.stories.tsx | 8 +- .../stories/form/Form.stories.tsx | 364 +- .../react-spectrum/stories/form/data.ts | 14 +- .../IllustratedMessage.stories.tsx | 6 +- .../stories/image/Image.stories.tsx | 22 +- .../inlinealert/InlineAlert.stories.tsx | 14 +- .../stories/label/HelpText.stories.tsx | 48 +- .../stories/label/Label.stories.tsx | 14 +- .../labeledvalue/LabeledValue.stories.tsx | 33 +- .../stories/layout/Flex.stories.tsx | 2 +- .../stories/layout/Grid.stories.tsx | 4 +- .../react-spectrum/stories/layout/styles.css | 16 +- .../stories/link/Link.stories.tsx | 26 +- .../stories/list/ListView.stories.tsx | 256 +- .../stories/list/ListViewActions.stories.tsx | 137 +- .../stories/list/ListViewDnD.stories.tsx | 106 +- .../stories/list/ListViewDnDExamples.tsx | 118 +- .../stories/list/ListViewDnDUtil.stories.tsx | 80 +- .../stories/list/ListViewDnDUtilExamples.tsx | 412 +- .../list/ListViewSelection.stories.tsx | 91 +- .../stories/listbox/ListBox.stories.tsx | 702 +-- .../stories/menu/ActionMenu.stories.tsx | 86 +- .../stories/menu/MenuTrigger.stories.tsx | 391 +- .../stories/menu/Submenu.stories.tsx | 685 ++- .../stories/meter/Meter.stories.tsx | 23 +- .../numberfield/NumberField.stories.tsx | 90 +- .../stories/picker/Picker.stories.tsx | 102 +- .../stories/progress/ProgressBar.stories.tsx | 72 +- .../progress/ProgressCircle.stories.tsx | 26 +- .../stories/provider/Provider.stories.tsx | 10 +- .../stories/radio/Radio.stories.tsx | 94 +- .../searchfield/SearchField.stories.tsx | 37 +- .../stories/slider/RangeSlider.stories.tsx | 34 +- .../stories/slider/Slider.stories.tsx | 42 +- .../statuslight/StatusLight.stories.tsx | 16 +- .../stories/steplist/StepList.stories.tsx | 102 +- .../stories/switch/Switch.stories.tsx | 40 +- .../stories/table/CRUDExample.tsx | 125 +- .../stories/table/ControllingResize.tsx | 74 +- .../stories/table/HidingColumns.tsx | 92 +- .../table/HidingColumnsAllowsResizing.tsx | 89 +- .../stories/table/Performance.tsx | 29 +- .../stories/table/Table.stories.tsx | 1090 +++-- .../stories/table/TableDnD.stories.tsx | 88 +- .../stories/table/TableDnDExamples.tsx | 366 +- .../stories/table/TableDnDUtil.stories.tsx | 92 +- .../stories/table/TableDnDUtilExamples.tsx | 558 ++- .../stories/table/TreeGridTable.stories.tsx | 188 +- .../stories/tabs/Tabs.stories.tsx | 171 +- .../stories/tag/TagGroup.stories.tsx | 88 +- .../stories/textfield/TextArea.stories.tsx | 111 +- .../stories/textfield/Textfield.stories.tsx | 101 +- .../stories/toast/Toast.stories.tsx | 112 +- .../stories/tooltip/Tooltip.stories.tsx | 12 +- .../tooltip/TooltipTrigger.stories.tsx | 93 +- .../stories/tree/TreeView.stories.tsx | 164 +- .../stories/view/View.stories.tsx | 8 +- .../test/accordion/Accordion.ssr.test.js | 7 +- .../test/accordion/Accordion.test.js | 19 +- .../test/actionbar/ActionBar.test.js | 121 +- .../test/actiongroup/ActionGroup.ssr.test.js | 7 +- .../test/actiongroup/ActionGroup.test.js | 197 +- .../test/actiongroup/Toolbar.test.tsx | 6 +- .../autocomplete/SearchAutocomplete.test.js | 677 ++- .../react-spectrum/test/avatar/Avatar.test.js | 19 +- .../test/badge/Badge.ssr.test.js | 7 +- .../react-spectrum/test/badge/Badge.test.js | 42 +- .../test/breadcrumbs/BreadcrumbItem.test.js | 12 +- .../test/breadcrumbs/Breadcrumbs.ssr.test.js | 7 +- .../test/breadcrumbs/Breadcrumbs.test.js | 37 +- .../test/button/ActionButton.test.js | 14 +- .../test/button/Button.ssr.test.js | 14 +- .../react-spectrum/test/button/Button.test.js | 95 +- .../test/button/ClearButton.test.js | 18 +- .../test/button/ToggleButton.test.js | 18 +- .../test/buttongroup/ButtonGroup.ssr.test.js | 7 +- .../test/buttongroup/ButtonGroup.test.js | 94 +- .../test/calendar/Calendar.ssr.test.js | 14 +- .../test/calendar/Calendar.test.js | 303 +- .../test/calendar/CalendarBase.test.js | 1279 +++-- .../test/calendar/RangeCalendar.test.js | 794 ++- .../react-spectrum/test/card/CardView.test.js | 423 +- .../test/checkbox/Checkbox.ssr.test.js | 7 +- .../test/checkbox/Checkbox.test.js | 44 +- .../test/checkbox/CheckboxGroup.test.js | 273 +- .../test/color/ColorArea.test.tsx | 419 +- .../test/color/ColorField.test.js | 216 +- .../test/color/ColorPicker.test.js | 25 +- .../test/color/ColorSlider.test.tsx | 294 +- .../test/color/ColorWheel.test.tsx | 235 +- .../test/combobox/ComboBox.test.js | 1034 ++-- .../test/datepicker/DateField.test.js | 262 +- .../test/datepicker/DatePicker.ssr.test.js | 28 +- .../test/datepicker/DatePicker.test.js | 1456 +++++- .../test/datepicker/DatePickerBase.test.js | 408 +- .../test/datepicker/DateRangePicker.test.js | 761 ++- .../test/datepicker/TimeField.test.js | 249 +- .../test/dialog/AlertDialog.test.js | 59 +- .../test/dialog/Dialog.ssr.test.js | 7 +- .../react-spectrum/test/dialog/Dialog.test.js | 22 +- .../test/dialog/DialogContainer.test.js | 121 +- .../test/dialog/DialogTrigger.test.js | 160 +- .../test/divider/Divider.ssr.test.js | 7 +- .../test/dropzone/DropZone.test.js | 12 +- .../react-spectrum/test/form/Form.ssr.test.js | 7 +- .../react-spectrum/test/form/Form.test.js | 12 +- .../react-spectrum/test/icon/Icon.test.js | 36 +- .../test/icon/Illustration.test.js | 36 +- .../react-spectrum/test/icon/UIIcon.test.js | 30 +- .../IllustratedMessage.ssr.test.js | 8 +- .../IllustratedMessage.test.js | 25 +- .../react-spectrum/test/image/Image.test.js | 17 +- .../test/inlinealert/InlineAlert.test.js | 32 +- .../react-spectrum/test/label/Field.test.js | 37 +- .../test/labeledvalue/LabeledValue.test.js | 116 +- .../test/layout/Flex.ssr.test.js | 7 +- .../test/layout/Grid.ssr.test.js | 7 +- .../react-spectrum/test/layout/Grid.test.js | 4 +- .../react-spectrum/test/link/Link.ssr.test.js | 7 +- .../react-spectrum/test/link/Link.test.js | 32 +- .../test/list/ListView.ssr.test.js | 7 +- .../react-spectrum/test/list/ListView.test.js | 492 +- .../test/list/ListViewDnd.test.js | 1201 +++-- .../test/listbox/ListBox.ssr.test.js | 7 +- .../test/listbox/ListBox.test.js | 349 +- .../test/menu/ActionMenu.test.js | 81 +- .../react-spectrum/test/menu/Menu.ssr.test.js | 7 +- .../react-spectrum/test/menu/Menu.test.js | 427 +- .../test/menu/MenuTrigger.ssr.test.js | 7 +- .../test/menu/MenuTrigger.test.js | 789 +-- .../test/menu/SubMenuTrigger.test.tsx | 525 +- .../test/meter/Meter.ssr.test.js | 7 +- .../test/numberfield/NumberField.ssr.test.js | 7 +- .../test/numberfield/NumberField.test.js | 2107 +++++--- .../test/overlays/Modal.test.js | 2 +- .../test/overlays/Overlay.test.js | 6 +- .../test/overlays/Popover.test.js | 145 +- .../react-spectrum/test/overlays/Tray.test.js | 16 +- .../test/picker/Picker.ssr.test.js | 7 +- .../react-spectrum/test/picker/Picker.test.js | 208 +- .../test/picker/TempUtilTest.test.js | 55 +- .../@adobe/react-spectrum/test/picker/data.js | 488 +- .../test/progress/ProgressBar.ssr.test.js | 7 +- .../test/progress/ProgressBar.test.js | 29 +- .../test/progress/ProgressCircle.ssr.test.js | 7 +- .../test/progress/ProgressCircle.test.js | 119 +- .../test/provider/Provider.ssr.test.js | 7 +- .../test/provider/Provider.test.tsx | 46 +- .../test/radio/Radio.ssr.test.js | 7 +- .../react-spectrum/test/radio/Radio.test.js | 696 ++- .../test/searchfield/SearchField.ssr.test.js | 7 +- .../test/searchfield/SearchField.test.js | 209 +- .../test/slider/RangeSlider.test.tsx | 182 +- .../test/slider/Slider.test.tsx | 293 +- .../react-spectrum/test/slider/utils.ts | 27 +- .../test/statuslight/StatusLight.ssr.test.js | 7 +- .../test/statuslight/StatusLight.test.js | 62 +- .../test/steplist/StepList.test.tsx | 80 +- .../test/switch/Switch.ssr.test.js | 7 +- .../react-spectrum/test/switch/Switch.test.js | 62 +- .../test/table/Table.ssr.test.js | 21 +- .../test/table/TableDnd.test.js | 1125 ++++- .../test/table/TableNestedRows.test.js | 46 +- .../test/table/TableSizing.test.tsx | 812 +-- .../react-spectrum/test/table/TableTests.js | 1521 +++--- .../test/table/TestTableUtils.test.tsx | 64 +- .../test/table/TreeGridTable.test.tsx | 638 ++- .../react-spectrum/test/tabs/Tabs.test.js | 505 +- .../test/tag/TagGroup.ssr.test.js | 7 +- .../react-spectrum/test/tag/TagGroup.test.js | 537 +- .../test/text/Heading.ssr.test.js | 7 +- .../test/text/Keyboard.ssr.test.js | 7 +- .../react-spectrum/test/text/Text.ssr.test.js | 7 +- .../test/textfield/TextArea.ssr.test.js | 7 +- .../test/textfield/TextArea.test.js | 36 +- .../test/textfield/TextField.ssr.test.js | 7 +- .../test/textfield/TextField.test.js | 336 +- .../test/toast/ToastContainer.ssr.test.js | 7 +- .../test/toast/ToastContainer.test.js | 20 +- .../test/tooltip/TooltipTrigger.test.js | 91 +- .../test/tree/TreeView.ssr.test.tsx | 7 +- .../test/tree/TreeView.test.tsx | 512 +- .../react-spectrum/test/utils/Slots.test.js | 50 +- .../test/utils/styleProps.test.js | 110 +- .../test/view/Content.ssr.test.js | 7 +- .../test/view/Footer.ssr.test.js | 7 +- .../test/view/Header.ssr.test.js | 7 +- .../react-spectrum/test/view/View.ssr.test.js | 7 +- .../react-spectrum/test/well/Well.ssr.test.js | 7 +- .../react-spectrum/test/well/Well.test.js | 24 +- .../css/lib/varUtils.js | 47 +- .../postcss-custom-properties-mapping.js | 2 +- .../postcss-custom-properties-passthrough.js | 2 +- .../spectrum-css-builder-temp/package.json | 14 +- .../components/accordion/index.css | 14 +- .../components/accordion/skin.css | 5 +- .../components/actiongroup/index.css | 17 +- .../components/assetlist/index.css | 3 +- .../components/avatar/skin.css | 2 +- .../components/badge/skin.css | 12 +- .../components/breadcrumb/index.css | 5 +- .../components/button/index.css | 26 +- .../components/button/skin.css | 622 ++- .../components/calendar/index.css | 13 +- .../components/calendar/skin.css | 33 +- .../components/card/index.css | 255 +- .../components/card/skin.css | 22 +- .../components/checkbox/index.css | 20 +- .../components/checkbox/skin.css | 33 +- .../components/circleloader/animation.css | 8 +- .../components/circleloader/index.css | 2 +- .../components/coachmark/index.css | 24 +- .../components/colorarea/skin.css | 44 +- .../components/colorhandle/index.css | 43 +- .../components/colorhandle/skin.css | 12 +- .../components/colorloupe/index.css | 22 +- .../components/colorloupe/skin.css | 2 +- .../components/colorslider/index.css | 16 +- .../components/colorslider/skin.css | 6 +- .../components/colorwheel/index.css | 8 +- .../components/colorwheel/skin.css | 2 +- .../components/commons/focus-ring.css | 18 +- .../components/commons/fonts.css | 21 +- .../components/cyclebutton/index.css | 2 +- .../components/dialog/index.css | 192 +- .../spectrum-css-temp/components/dnd/skin.css | 11 +- .../components/dropdown/index.css | 44 +- .../components/dropdown/skin.css | 1 - .../components/dropindicator/index.css | 10 +- .../components/dropzone/index.css | 2 +- .../components/dropzone/skin.css | 6 +- .../components/fieldlabel/index.css | 8 +- .../components/helptext/index.css | 26 +- .../components/helptext/skin.css | 12 +- .../components/image/index.css | 1 - .../components/inlinealert/index.css | 14 +- .../components/inlinealert/skin.css | 54 +- .../components/inputgroup/index.css | 21 +- .../components/inputgroup/skin.css | 42 +- .../components/menu/index.css | 46 +- .../components/menu/skin.css | 21 +- .../components/modal/index.css | 25 +- .../components/modal/skin.css | 1 - .../components/overlay/index.css | 7 +- .../components/page/skin.css | 2 +- .../components/popover/skin.css | 10 +- .../components/quickaction/index.css | 1 - .../components/radio/index.css | 35 +- .../components/radio/skin.css | 12 +- .../components/rating/skin.css | 3 +- .../components/search/index.css | 48 +- .../components/searchwithin/index.css | 8 +- .../components/sidenav/index.css | 16 +- .../components/sidenav/skin.css | 2 +- .../components/slider/index.css | 39 +- .../components/slider/skin.css | 33 +- .../components/splitbutton/index.css | 12 +- .../components/splitview/index.css | 35 +- .../components/statuslight/index.css | 25 +- .../components/steplist/index.css | 29 +- .../components/steplist/skin.css | 13 +- .../components/stepper/index.css | 73 +- .../components/stepper/skin.css | 35 +- .../components/table/index.css | 23 +- .../components/table/skin.css | 34 +- .../components/tabs/index.css | 27 +- .../components/tabs/skin.css | 12 +- .../components/tags/index.css | 8 +- .../components/tags/skin.css | 11 +- .../components/textfield/index.css | 85 +- .../components/textfield/skin.css | 14 +- .../components/toggle/index.css | 23 +- .../components/toggle/skin.css | 39 +- .../components/tooltip/index.css | 4 +- .../components/tooltip/skin.css | 2 +- .../components/tray/index.css | 22 +- .../components/treeview/index.css | 14 +- .../components/typography/skin.css | 218 +- .../components/typography/vars.css | 2260 +++++---- .../components/underlay/index.css | 17 +- .../components/well/index.css | 2 +- .../@adobe/spectrum-css-temp/package.json | 4 +- .../@adobe/spectrum-css-temp/vars/express.css | 59 +- .../spectrum-css-temp/vars/spectrum-dark.css | 76 +- .../vars/spectrum-darkest.css | 76 +- .../vars/spectrum-global.css | 139 +- .../spectrum-css-temp/vars/spectrum-large.css | 204 +- .../spectrum-css-temp/vars/spectrum-light.css | 76 +- .../vars/spectrum-lightest.css | 76 +- .../vars/spectrum-medium.css | 236 +- .../vars/spectrum-metadata.json | 2 +- packages/@internationalized/date/package.json | 28 +- .../date/scripts/generate-umalqura.js | 100 +- .../date/src/CalendarDate.ts | 200 +- .../date/src/DateFormatter.ts | 47 +- .../date/src/calendars/BuddhistCalendar.ts | 7 +- .../date/src/calendars/EthiopicCalendar.ts | 11 +- .../date/src/calendars/GregorianCalendar.ts | 10 +- .../date/src/calendars/HebrewCalendar.ts | 12 +- .../date/src/calendars/IndianCalendar.ts | 11 +- .../date/src/calendars/IslamicCalendar.ts | 32 +- .../date/src/calendars/JapaneseCalendar.ts | 21 +- .../date/src/calendars/PersianCalendar.ts | 6 +- .../date/src/calendars/TaiwanCalendar.ts | 11 +- .../@internationalized/date/src/conversion.ts | 110 +- .../date/src/createCalendar.ts | 12 +- packages/@internationalized/date/src/index.ts | 12 +- .../date/src/manipulation.ts | 163 +- .../@internationalized/date/src/queries.ts | 58 +- .../@internationalized/date/src/string.ts | 68 +- packages/@internationalized/date/src/types.ts | 114 +- packages/@internationalized/date/src/utils.ts | 2 +- .../date/tests/DateFormatter.test.js | 4 +- .../date/tests/ZonedDateTime.test.js | 36 +- .../date/tests/conversion.test.js | 215 +- .../date/tests/customCalendarImpl.ts | 8 +- .../date/tests/manipulation.test.js | 299 +- .../date/tests/queries.test.js | 415 +- .../date/tests/string.test.js | 59 +- .../@internationalized/message/package.json | 28 +- .../message/src/MessageDictionary.ts | 8 +- .../message/src/MessageFormatter.ts | 11 +- .../message/test/MessageDictionary.test.js | 13 +- .../@internationalized/number/package.json | 28 +- .../number/src/NumberFormatter.ts | 42 +- .../number/src/NumberParser.ts | 149 +- .../number/test/NumberParser.test.js | 729 ++- .../numberFormatSignDisplayPolyfill.test.js | 8 +- .../string-compiler/package.json | 16 +- .../string-compiler/src/stringCompiler.d.ts | 2 +- .../string-compiler/src/stringCompiler.js | 21 +- .../@internationalized/string/package.json | 28 +- .../string/src/LocalizedStringDictionary.ts | 36 +- .../string/src/LocalizedStringFormatter.ts | 15 +- .../test/LocalizedStringDictionary.test.js | 13 +- packages/@react-aria/actiongroup/package.json | 34 +- packages/@react-aria/actiongroup/src/index.ts | 13 +- .../aria-modal-polyfill/package.json | 34 +- .../@react-aria/autocomplete/package.json | 34 +- .../@react-aria/autocomplete/src/index.ts | 15 +- packages/@react-aria/breadcrumbs/package.json | 34 +- packages/@react-aria/breadcrumbs/src/index.ts | 8 +- packages/@react-aria/button/package.json | 34 +- packages/@react-aria/button/src/index.ts | 23 +- packages/@react-aria/calendar/package.json | 34 +- packages/@react-aria/calendar/src/index.ts | 9 +- packages/@react-aria/checkbox/package.json | 34 +- packages/@react-aria/checkbox/src/index.ts | 6 +- packages/@react-aria/collections/package.json | 32 +- packages/@react-aria/collections/src/index.ts | 16 +- packages/@react-aria/color/package.json | 34 +- packages/@react-aria/color/src/index.ts | 25 +- packages/@react-aria/combobox/package.json | 34 +- packages/@react-aria/datepicker/package.json | 34 +- packages/@react-aria/datepicker/src/index.ts | 7 +- packages/@react-aria/dialog/package.json | 40 +- packages/@react-aria/disclosure/package.json | 34 +- packages/@react-aria/disclosure/src/index.ts | 2 +- packages/@react-aria/dnd/package.json | 34 +- packages/@react-aria/dnd/src/index.ts | 63 +- .../@react-aria/example-theme/package.json | 16 +- packages/@react-aria/focus/package.json | 34 +- packages/@react-aria/focus/src/index.ts | 13 +- packages/@react-aria/form/package.json | 32 +- packages/@react-aria/grid/package.json | 34 +- packages/@react-aria/grid/src/index.ts | 5 +- packages/@react-aria/gridlist/package.json | 34 +- packages/@react-aria/gridlist/src/index.ts | 23 +- packages/@react-aria/i18n/package.json | 62 +- packages/@react-aria/i18n/src/index.ts | 5 +- packages/@react-aria/i18n/src/server.ts | 5 +- .../@react-aria/interactions/package.json | 34 +- .../@react-aria/interactions/src/index.ts | 25 +- packages/@react-aria/label/package.json | 34 +- packages/@react-aria/landmark/package.json | 34 +- packages/@react-aria/landmark/src/index.ts | 7 +- packages/@react-aria/link/package.json | 34 +- packages/@react-aria/listbox/package.json | 34 +- packages/@react-aria/listbox/src/index.ts | 12 +- .../@react-aria/live-announcer/package.json | 36 +- .../@react-aria/live-announcer/src/index.ts | 6 +- packages/@react-aria/menu/package.json | 34 +- packages/@react-aria/menu/src/index.ts | 23 +- packages/@react-aria/meter/package.json | 34 +- packages/@react-aria/numberfield/package.json | 34 +- packages/@react-aria/overlays/package.json | 34 +- packages/@react-aria/overlays/src/index.ts | 26 +- packages/@react-aria/progress/package.json | 34 +- packages/@react-aria/progress/src/index.ts | 8 +- packages/@react-aria/radio/package.json | 34 +- packages/@react-aria/radio/src/index.ts | 8 +- packages/@react-aria/searchfield/package.json | 34 +- packages/@react-aria/select/package.json | 34 +- packages/@react-aria/select/src/index.ts | 10 +- packages/@react-aria/selection/package.json | 34 +- packages/@react-aria/selection/src/index.ts | 21 +- packages/@react-aria/separator/package.json | 34 +- packages/@react-aria/slider/package.json | 34 +- packages/@react-aria/slider/src/index.ts | 9 +- packages/@react-aria/spinbutton/package.json | 34 +- packages/@react-aria/ssr/package.json | 34 +- packages/@react-aria/steplist/package.json | 34 +- packages/@react-aria/steplist/src/index.ts | 5 +- packages/@react-aria/switch/package.json | 34 +- packages/@react-aria/table/package.json | 34 +- packages/@react-aria/table/src/index.ts | 26 +- packages/@react-aria/tabs/package.json | 34 +- packages/@react-aria/tabs/src/index.ts | 10 +- packages/@react-aria/tag/package.json | 34 +- packages/@react-aria/tag/src/index.ts | 8 +- packages/@react-aria/test-utils/package.json | 34 +- .../test-utils/src/checkboxgroup.ts | 30 +- .../@react-aria/test-utils/src/combobox.ts | 28 +- packages/@react-aria/test-utils/src/dialog.ts | 20 +- packages/@react-aria/test-utils/src/events.ts | 38 +- .../@react-aria/test-utils/src/gridlist.ts | 50 +- .../@react-aria/test-utils/src/listbox.ts | 58 +- packages/@react-aria/test-utils/src/menu.ts | 84 +- .../@react-aria/test-utils/src/radiogroup.ts | 25 +- packages/@react-aria/test-utils/src/select.ts | 44 +- packages/@react-aria/test-utils/src/table.ts | 109 +- packages/@react-aria/test-utils/src/tabs.ts | 35 +- .../@react-aria/test-utils/src/testSetup.ts | 11 +- packages/@react-aria/test-utils/src/tree.ts | 68 +- packages/@react-aria/test-utils/src/types.ts | 46 +- packages/@react-aria/test-utils/src/user.ts | 126 +- packages/@react-aria/textfield/package.json | 34 +- packages/@react-aria/textfield/src/index.ts | 7 +- packages/@react-aria/toast/package.json | 34 +- packages/@react-aria/toast/src/index.ts | 7 +- packages/@react-aria/toggle/package.json | 34 +- packages/@react-aria/toolbar/package.json | 32 +- packages/@react-aria/tooltip/package.json | 34 +- packages/@react-aria/tooltip/src/index.ts | 7 +- packages/@react-aria/tree/package.json | 34 +- packages/@react-aria/utils/package.json | 34 +- packages/@react-aria/utils/src/index.ts | 40 +- packages/@react-aria/virtualizer/package.json | 34 +- .../@react-aria/visually-hidden/package.json | 38 +- .../@react-spectrum/accordion/package.json | 40 +- .../@react-spectrum/accordion/src/index.ts | 14 +- .../@react-spectrum/actionbar/package.json | 40 +- .../@react-spectrum/actionbar/src/index.ts | 5 +- .../@react-spectrum/actiongroup/package.json | 40 +- .../@react-spectrum/autocomplete/package.json | 40 +- packages/@react-spectrum/avatar/package.json | 40 +- packages/@react-spectrum/badge/package.json | 40 +- .../@react-spectrum/breadcrumbs/package.json | 40 +- packages/@react-spectrum/button/package.json | 34 +- .../@react-spectrum/buttongroup/package.json | 40 +- .../@react-spectrum/calendar/package.json | 40 +- packages/@react-spectrum/card/package.json | 40 +- packages/@react-spectrum/card/src/index.ts | 6 +- .../@react-spectrum/checkbox/package.json | 34 +- packages/@react-spectrum/color/package.json | 34 +- packages/@react-spectrum/color/src/index.ts | 5 +- .../@react-spectrum/combobox/package.json | 40 +- .../contextualhelp/package.json | 34 +- .../@react-spectrum/datepicker/package.json | 40 +- packages/@react-spectrum/dialog/package.json | 40 +- packages/@react-spectrum/dialog/src/index.ts | 10 +- packages/@react-spectrum/divider/package.json | 40 +- packages/@react-spectrum/dnd/package.json | 40 +- packages/@react-spectrum/dnd/src/index.ts | 25 +- .../@react-spectrum/dropzone/package.json | 34 +- .../@react-spectrum/filetrigger/package.json | 40 +- packages/@react-spectrum/form/package.json | 40 +- packages/@react-spectrum/icon/package.json | 40 +- packages/@react-spectrum/icon/src/index.ts | 10 +- .../illustratedmessage/package.json | 40 +- packages/@react-spectrum/image/package.json | 40 +- .../@react-spectrum/inlinealert/package.json | 38 +- packages/@react-spectrum/label/package.json | 40 +- .../@react-spectrum/labeledvalue/package.json | 40 +- packages/@react-spectrum/layout/package.json | 40 +- packages/@react-spectrum/link/package.json | 40 +- packages/@react-spectrum/list/package.json | 40 +- packages/@react-spectrum/listbox/package.json | 40 +- packages/@react-spectrum/menu/package.json | 40 +- packages/@react-spectrum/menu/src/index.ts | 6 +- packages/@react-spectrum/meter/package.json | 40 +- .../@react-spectrum/numberfield/package.json | 40 +- .../@react-spectrum/overlays/package.json | 40 +- packages/@react-spectrum/picker/package.json | 40 +- .../@react-spectrum/progress/package.json | 40 +- .../@react-spectrum/progress/src/index.ts | 6 +- .../@react-spectrum/provider/package.json | 40 +- .../@react-spectrum/provider/src/index.ts | 10 +- packages/@react-spectrum/radio/package.json | 40 +- .../s2/chromatic/Accordion.stories.tsx | 90 +- .../s2/chromatic/ActionButton.stories.tsx | 76 +- .../chromatic/ActionButtonGroup.stories.tsx | 50 +- .../s2/chromatic/ActionMenu.stories.tsx | 7 +- .../s2/chromatic/ActionMenuRTL.stories.tsx | 7 +- .../s2/chromatic/AlertDialog.stories.tsx | 7 +- .../s2/chromatic/AlertDialogRTL.stories.tsx | 7 +- .../s2/chromatic/Avatar.stories.tsx | 2 +- .../s2/chromatic/Badge.stories.tsx | 65 +- .../s2/chromatic/Breadcrumbs.stories.tsx | 45 +- .../s2/chromatic/BreadcrumbsRTL.stories.tsx | 7 +- .../s2/chromatic/Button.stories.tsx | 82 +- .../s2/chromatic/ButtonGroup.stories.tsx | 57 +- .../s2/chromatic/Card.stories.tsx | 225 +- .../s2/chromatic/CardView.stories.tsx | 7 +- .../s2/chromatic/Checkbox.stories.tsx | 35 +- .../s2/chromatic/CheckboxGroup.stories.tsx | 102 +- .../s2/chromatic/ColorArea.stories.tsx | 2 +- .../s2/chromatic/ColorField.stories.tsx | 52 +- .../s2/chromatic/ColorSlider.stories.tsx | 93 +- .../chromatic/ColorSwatchPicker.stories.tsx | 5 +- .../s2/chromatic/ColorWheel.stories.tsx | 4 +- .../s2/chromatic/Combobox.stories.tsx | 58 +- .../s2/chromatic/ComboboxRTL.stories.tsx | 17 +- .../s2/chromatic/ContextualHelp.stories.tsx | 7 +- .../chromatic/ContextualHelpRTL.stories.tsx | 7 +- .../s2/chromatic/DateRangePicker.stories.tsx | 5 +- .../s2/chromatic/Dialog.stories.tsx | 20 +- .../s2/chromatic/DialogRTL.stories.tsx | 7 +- .../s2/chromatic/Disclosure.stories.tsx | 38 +- .../s2/chromatic/Divider.stories.tsx | 4 +- .../s2/chromatic/DropZone.stories.tsx | 63 +- .../s2/chromatic/Fonts.stories.tsx | 74 +- .../s2/chromatic/Forms.stories.tsx | 125 +- .../s2/chromatic/Icon.stories.tsx | 2 +- .../chromatic/IllustratedMessage.stories.tsx | 47 +- .../s2/chromatic/InlineAlert.stories.tsx | 21 +- .../@react-spectrum/s2/chromatic/Link.tsx | 7 +- .../s2/chromatic/LinkButton.stories.tsx | 17 +- .../s2/chromatic/ListView.stories.tsx | 105 +- .../s2/chromatic/Menu.stories.tsx | 24 +- .../s2/chromatic/MenuRTL.stories.tsx | 7 +- .../s2/chromatic/Meter.stories.tsx | 2 +- .../chromatic/NotificationBadge.stories.tsx | 2 +- .../s2/chromatic/NumberField.stories.tsx | 38 +- .../s2/chromatic/Picker.stories.tsx | 86 +- .../s2/chromatic/PickerRTL.stories.tsx | 17 +- .../s2/chromatic/Popover.stories.tsx | 15 +- .../s2/chromatic/ProgressBar.stories.tsx | 2 +- .../s2/chromatic/ProgressCircle.stories.tsx | 8 +- .../s2/chromatic/RadioGroup.stories.tsx | 27 +- .../s2/chromatic/RangeSlider.stories.tsx | 13 +- .../s2/chromatic/SearchField.stories.tsx | 13 +- .../s2/chromatic/SegmentedControl.stories.tsx | 35 +- .../s2/chromatic/SelectBoxGroup.stories.tsx | 18 +- .../s2/chromatic/Slider.stories.tsx | 25 +- .../s2/chromatic/StatusLight.stories.tsx | 8 +- .../s2/chromatic/Switch.stories.tsx | 8 +- .../s2/chromatic/TableView.stories.tsx | 159 +- .../s2/chromatic/Tabs.stories.tsx | 235 +- .../s2/chromatic/TagGroup.stories.tsx | 63 +- .../s2/chromatic/TextField.stories.tsx | 48 +- .../s2/chromatic/Toast.stories.tsx | 19 +- .../s2/chromatic/ToggleButton.stories.tsx | 63 +- .../chromatic/ToggleButtonGroup.stories.tsx | 52 +- .../s2/chromatic/Tooltip.stories.tsx | 7 +- .../s2/chromatic/TooltipRTL.stories.tsx | 7 +- .../s2/chromatic/TreeView.stories.tsx | 135 +- .../@react-spectrum/s2/chromatic/check.tsx | 4 +- .../@react-spectrum/s2/chromatic/utils.tsx | 8 +- .../@react-spectrum/s2/exports/Accordion.ts | 19 +- .../@react-spectrum/s2/exports/ActionMenu.ts | 16 +- packages/@react-spectrum/s2/exports/Card.ts | 18 +- .../@react-spectrum/s2/exports/CardView.ts | 18 +- .../@react-spectrum/s2/exports/ColorArea.ts | 9 +- .../@react-spectrum/s2/exports/ColorField.ts | 9 +- .../@react-spectrum/s2/exports/ColorSlider.ts | 9 +- .../@react-spectrum/s2/exports/ColorSwatch.ts | 9 +- .../s2/exports/ColorSwatchPicker.ts | 9 +- .../@react-spectrum/s2/exports/ColorWheel.ts | 9 +- .../s2/exports/ContextualHelp.ts | 6 +- .../@react-spectrum/s2/exports/Disclosure.ts | 8 +- packages/@react-spectrum/s2/exports/Icon.ts | 7 +- packages/@react-spectrum/s2/exports/Menu.ts | 19 +- .../s2/exports/SegmentedControl.ts | 6 +- .../@react-spectrum/s2/exports/TableView.ts | 30 +- .../@react-spectrum/s2/exports/TreeView.ts | 7 +- packages/@react-spectrum/s2/exports/index.ts | 154 +- .../s2/exports/useAsyncList.ts | 8 +- packages/@react-spectrum/s2/package.json | 100 +- .../gradient/generic1/Conversationbubbles.tsx | 4 +- .../gradient/generic2/Conversationbubbles.tsx | 4 +- .../linear/BrowserNotCompatible.tsx | 4 +- .../linear/CloudStateDisconnected.tsx | 4 +- .../linear/ConfettiCelebration.tsx | 4 +- .../linear/Conversationbubbles.tsx | 4 +- .../linear/MegaphonePromoteExpressive.tsx | 4 +- .../linear/NoInternetConnection.tsx | 4 +- packages/@react-spectrum/s2/src/Accordion.tsx | 128 +- packages/@react-spectrum/s2/src/ActionBar.tsx | 138 +- .../@react-spectrum/s2/src/ActionButton.tsx | 549 ++- .../s2/src/ActionButtonGroup.tsx | 80 +- .../@react-spectrum/s2/src/ActionMenu.tsx | 29 +- .../@react-spectrum/s2/src/AlertDialog.tsx | 49 +- packages/@react-spectrum/s2/src/Avatar.tsx | 68 +- .../@react-spectrum/s2/src/AvatarGroup.tsx | 49 +- packages/@react-spectrum/s2/src/Badge.tsx | 288 +- .../@react-spectrum/s2/src/Breadcrumbs.tsx | 268 +- packages/@react-spectrum/s2/src/Button.tsx | 675 +-- .../@react-spectrum/s2/src/ButtonGroup.tsx | 122 +- packages/@react-spectrum/s2/src/Calendar.tsx | 311 +- packages/@react-spectrum/s2/src/Card.tsx | 695 +-- packages/@react-spectrum/s2/src/CardView.tsx | 181 +- .../@react-spectrum/s2/src/CenterBaseline.tsx | 16 +- packages/@react-spectrum/s2/src/Checkbox.tsx | 224 +- .../@react-spectrum/s2/src/CheckboxGroup.tsx | 164 +- .../@react-spectrum/s2/src/ClearButton.tsx | 9 +- .../@react-spectrum/s2/src/CloseButton.tsx | 115 +- packages/@react-spectrum/s2/src/CoachMark.tsx | 390 +- packages/@react-spectrum/s2/src/ColorArea.tsx | 74 +- .../@react-spectrum/s2/src/ColorField.tsx | 90 +- .../@react-spectrum/s2/src/ColorHandle.tsx | 61 +- .../@react-spectrum/s2/src/ColorSlider.tsx | 213 +- .../@react-spectrum/s2/src/ColorSwatch.tsx | 112 +- .../s2/src/ColorSwatchPicker.tsx | 120 +- .../@react-spectrum/s2/src/ColorWheel.tsx | 129 +- packages/@react-spectrum/s2/src/ComboBox.tsx | 453 +- packages/@react-spectrum/s2/src/Content.tsx | 97 +- .../@react-spectrum/s2/src/ContextualHelp.tsx | 124 +- .../@react-spectrum/s2/src/CustomDialog.tsx | 73 +- packages/@react-spectrum/s2/src/DateField.tsx | 84 +- .../@react-spectrum/s2/src/DatePicker.tsx | 177 +- .../s2/src/DateRangePicker.tsx | 364 +- packages/@react-spectrum/s2/src/Dialog.tsx | 35 +- .../s2/src/DialogContainer.tsx | 11 +- .../@react-spectrum/s2/src/DialogTrigger.tsx | 4 +- .../@react-spectrum/s2/src/Disclosure.tsx | 168 +- packages/@react-spectrum/s2/src/Divider.tsx | 118 +- packages/@react-spectrum/s2/src/DropZone.tsx | 110 +- packages/@react-spectrum/s2/src/Field.tsx | 303 +- packages/@react-spectrum/s2/src/Fonts.tsx | 29 +- packages/@react-spectrum/s2/src/Form.tsx | 65 +- .../s2/src/FullscreenDialog.tsx | 57 +- packages/@react-spectrum/s2/src/Icon.tsx | 103 +- .../s2/src/IllustratedMessage.tsx | 167 +- packages/@react-spectrum/s2/src/Image.tsx | 143 +- .../s2/src/ImageCoordinator.tsx | 59 +- .../@react-spectrum/s2/src/InlineAlert.tsx | 164 +- .../@react-spectrum/s2/src/LabeledValue.tsx | 206 +- packages/@react-spectrum/s2/src/Link.tsx | 143 +- packages/@react-spectrum/s2/src/ListBox.tsx | 11 +- packages/@react-spectrum/s2/src/ListView.tsx | 395 +- packages/@react-spectrum/s2/src/Menu.tsx | 436 +- packages/@react-spectrum/s2/src/Meter.tsx | 67 +- packages/@react-spectrum/s2/src/Modal.tsx | 171 +- .../s2/src/NotificationBadge.tsx | 171 +- .../@react-spectrum/s2/src/NumberField.tsx | 237 +- packages/@react-spectrum/s2/src/Picker.tsx | 473 +- packages/@react-spectrum/s2/src/Popover.tsx | 343 +- .../@react-spectrum/s2/src/ProgressBar.tsx | 132 +- .../@react-spectrum/s2/src/ProgressCircle.tsx | 114 +- packages/@react-spectrum/s2/src/Provider.tsx | 23 +- .../@react-spectrum/s2/src/RadioGroup.tsx | 171 +- .../@react-spectrum/s2/src/RangeCalendar.tsx | 98 +- .../@react-spectrum/s2/src/RangeSlider.tsx | 59 +- .../@react-spectrum/s2/src/SearchField.tsx | 185 +- .../s2/src/SegmentedControl.tsx | 177 +- .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 420 +- packages/@react-spectrum/s2/src/Skeleton.tsx | 124 +- .../s2/src/SkeletonCollection.tsx | 29 +- packages/@react-spectrum/s2/src/Slider.tsx | 194 +- .../@react-spectrum/s2/src/StatusLight.tsx | 83 +- packages/@react-spectrum/s2/src/Switch.tsx | 175 +- packages/@react-spectrum/s2/src/TableView.tsx | 835 ++-- packages/@react-spectrum/s2/src/Tabs.tsx | 501 +- .../@react-spectrum/s2/src/TabsPicker.tsx | 250 +- packages/@react-spectrum/s2/src/TagGroup.tsx | 242 +- packages/@react-spectrum/s2/src/TextField.tsx | 234 +- packages/@react-spectrum/s2/src/TimeField.tsx | 71 +- .../@react-spectrum/s2/src/Toast.module.css | 16 +- packages/@react-spectrum/s2/src/Toast.tsx | 200 +- .../@react-spectrum/s2/src/ToggleButton.tsx | 80 +- .../s2/src/ToggleButtonGroup.tsx | 23 +- packages/@react-spectrum/s2/src/Toolbar.tsx | 1 - packages/@react-spectrum/s2/src/Tooltip.tsx | 90 +- packages/@react-spectrum/s2/src/TreeView.tsx | 234 +- packages/@react-spectrum/s2/src/bar-utils.ts | 133 +- .../@react-spectrum/s2/src/font-faces.css | 162 +- packages/@react-spectrum/s2/src/page.macro.ts | 4 +- packages/@react-spectrum/s2/src/pressScale.ts | 5 +- .../@react-spectrum/s2/src/progress-utils.tsx | 2 +- .../@react-spectrum/s2/src/style-utils.ts | 370 +- packages/@react-spectrum/s2/src/useDOMRef.ts | 26 +- .../@react-spectrum/s2/src/useMediaQuery.ts | 6 +- .../s2/src/useSpectrumContextProps.ts | 6 +- .../s2/stories/Accordion.stories.tsx | 126 +- .../s2/stories/ActionBar.stories.tsx | 9 +- .../s2/stories/ActionButton.stories.tsx | 301 +- .../s2/stories/ActionButtonGroup.stories.tsx | 31 +- .../s2/stories/ActionMenu.stories.tsx | 10 +- .../s2/stories/AlertDialog.stories.tsx | 8 +- .../s2/stories/Avatar.stories.tsx | 17 +- .../s2/stories/AvatarGroup.stories.tsx | 7 +- .../s2/stories/Badge.stories.tsx | 8 +- .../s2/stories/Breadcrumbs.stories.tsx | 36 +- .../s2/stories/Button.stories.tsx | 61 +- .../s2/stories/ButtonGroup.stories.tsx | 25 +- .../s2/stories/Calendar.stories.tsx | 27 +- .../s2/stories/Card.stories.tsx | 229 +- .../s2/stories/CardView.stories.tsx | 125 +- .../s2/stories/Checkbox.stories.tsx | 14 +- .../s2/stories/CheckboxGroup.stories.tsx | 44 +- .../s2/stories/CoachMark.stories.tsx | 26 +- .../s2/stories/ColorArea.stories.tsx | 2 +- .../s2/stories/ColorField.stories.tsx | 18 +- .../s2/stories/ColorSlider.stories.tsx | 2 +- .../s2/stories/ColorSwatch.stories.tsx | 6 +- .../s2/stories/ColorSwatchPicker.stories.tsx | 8 +- .../s2/stories/ColorWheel.stories.tsx | 4 +- .../s2/stories/ComboBox.stories.tsx | 100 +- .../s2/stories/ContextualHelp.stories.tsx | 10 +- .../s2/stories/CustomDialog.stories.tsx | 129 +- .../s2/stories/DateField.stories.tsx | 25 +- .../s2/stories/DatePicker.stories.tsx | 25 +- .../s2/stories/DateRangePicker.stories.tsx | 30 +- .../s2/stories/Dialog.stories.tsx | 118 +- .../s2/stories/Disclosure.stories.tsx | 61 +- .../s2/stories/Divider.stories.tsx | 4 +- .../s2/stories/DropZone.stories.tsx | 65 +- .../s2/stories/Form.stories.tsx | 117 +- .../s2/stories/FullscreenDialog.stories.tsx | 28 +- .../s2/stories/Icon.stories.tsx | 6 +- .../s2/stories/IllustratedMessage.stories.tsx | 47 +- .../s2/stories/InlineAlert.stories.tsx | 33 +- .../s2/stories/LabeledValue.stories.tsx | 102 +- .../s2/stories/Link.stories.tsx | 7 +- .../s2/stories/LinkButton.stories.tsx | 17 +- .../s2/stories/ListView.stories.tsx | 247 +- .../s2/stories/Menu.stories.tsx | 114 +- .../s2/stories/Meter.stories.tsx | 2 +- .../s2/stories/NotificationBadge.stories.tsx | 2 +- .../s2/stories/NumberField.stories.tsx | 29 +- .../s2/stories/Picker.stories.tsx | 93 +- .../s2/stories/Popover.stories.tsx | 66 +- .../s2/stories/ProgressCircle.stories.tsx | 12 +- .../s2/stories/RadioGroup.stories.tsx | 39 +- .../s2/stories/RangeCalendar.stories.tsx | 31 +- .../s2/stories/RangeSlider.stories.tsx | 20 +- .../s2/stories/SearchField.stories.tsx | 16 +- .../s2/stories/SegmentedControl.stories.tsx | 34 +- .../s2/stories/SelectBoxGroup.stories.tsx | 15 +- .../s2/stories/Slider.stories.tsx | 26 +- .../s2/stories/StatusLight.stories.tsx | 8 +- .../s2/stories/StyleMacro.stories.tsx | 16 +- .../s2/stories/Switch.stories.tsx | 14 +- .../s2/stories/TableView.stories.tsx | 796 ++- .../s2/stories/Tabs.stories.tsx | 181 +- .../s2/stories/TagGroup.stories.tsx | 63 +- .../s2/stories/TextField.stories.tsx | 51 +- .../s2/stories/TimeField.stories.tsx | 25 +- .../s2/stories/Toast.stories.tsx | 55 +- .../s2/stories/ToggleButton.stories.tsx | 11 +- .../s2/stories/ToggleButtonGroup.stories.tsx | 31 +- .../s2/stories/Tooltip.stories.tsx | 32 +- .../s2/stories/TreeView.stories.tsx | 202 +- packages/@react-spectrum/s2/stories/utils.tsx | 95 +- .../s2/style/__tests__/mergeStyles.test.ts | 19 +- .../s2/style/__tests__/style-macro.test.js | 24 +- packages/@react-spectrum/s2/style/index.ts | 119 +- .../@react-spectrum/s2/style/package.json | 4 +- .../s2/style/spectrum-theme.ts | 585 ++- .../@react-spectrum/s2/style/style-macro.ts | 414 +- packages/@react-spectrum/s2/style/tokens.ts | 114 +- packages/@react-spectrum/s2/style/types.ts | 216 +- .../s2/test/ActionButtonGroup.test.tsx | 40 +- .../s2/test/CheckboxGroup.test.tsx | 94 +- .../s2/test/CoachMark.test.tsx | 16 +- .../@react-spectrum/s2/test/Combobox.test.tsx | 77 +- .../s2/test/CustomDialog.test.tsx | 9 +- .../s2/test/DropZone.browser.test.tsx | 30 +- .../s2/test/EditableTableView.test.tsx | 512 +- .../@react-spectrum/s2/test/Image.test.tsx | 11 +- .../s2/test/LabeledValue.test.tsx | 115 +- .../@react-spectrum/s2/test/Menu.test.tsx | 266 +- .../@react-spectrum/s2/test/Picker.test.tsx | 72 +- .../s2/test/RadioGroup.test.tsx | 96 +- .../s2/test/SelectBoxGroup.test.tsx | 27 +- .../s2/test/TableView.test.tsx | 99 +- .../@react-spectrum/s2/test/TagGroup.test.tsx | 26 +- .../s2/test/TextField.test.tsx | 4 +- .../s2/test/ToggleButtonGroup.test.tsx | 14 +- .../@react-spectrum/s2/test/TreeView.test.tsx | 365 +- .../s2/test/utils/dragAndDrop.ts | 43 +- .../@react-spectrum/s2/test/utils/render.tsx | 7 +- packages/@react-spectrum/s2/ui-icons/Add.tsx | 4 +- .../@react-spectrum/s2/ui-icons/Arrow.tsx | 4 +- .../@react-spectrum/s2/ui-icons/Asterisk.tsx | 16 +- .../@react-spectrum/s2/ui-icons/Checkmark.tsx | 28 +- .../@react-spectrum/s2/ui-icons/Chevron.tsx | 28 +- .../s2/ui-icons/CornerTriangle.tsx | 32 +- .../@react-spectrum/s2/ui-icons/Cross.tsx | 16 +- packages/@react-spectrum/s2/ui-icons/Dash.tsx | 4 +- .../s2/ui-icons/DragHandle.tsx | 20 +- .../@react-spectrum/s2/ui-icons/Gripper.tsx | 4 +- .../@react-spectrum/s2/ui-icons/LinkOut.tsx | 20 +- .../@react-spectrum/searchfield/package.json | 40 +- packages/@react-spectrum/slider/package.json | 40 +- .../@react-spectrum/statuslight/package.json | 40 +- .../@react-spectrum/steplist/package.json | 40 +- .../@react-spectrum/story-utils/package.json | 36 +- .../story-utils/src/ErrorBoundary.tsx | 7 +- .../style-macro-s1/package.json | 8 +- .../style-macro-s1/src/runtime.ts | 35 +- .../style-macro-s1/src/spectrum-theme.ts | 389 +- .../style-macro-s1/src/style-macro.ts | 284 +- .../style-macro-s1/src/types.ts | 167 +- .../stories/StyleMacro.stories.tsx | 10 +- packages/@react-spectrum/switch/package.json | 40 +- packages/@react-spectrum/table/package.json | 40 +- packages/@react-spectrum/table/src/index.ts | 17 +- packages/@react-spectrum/tabs/package.json | 40 +- packages/@react-spectrum/tabs/src/index.ts | 6 +- packages/@react-spectrum/tag/package.json | 40 +- .../@react-spectrum/test-utils/package.json | 42 +- .../test-utils/src/testSetup.ts | 4 +- packages/@react-spectrum/text/package.json | 34 +- .../@react-spectrum/textfield/package.json | 40 +- .../@react-spectrum/theme-dark/package.json | 40 +- .../theme-default/package.json | 40 +- .../theme-express/package.json | 40 +- .../@react-spectrum/theme-light/package.json | 40 +- packages/@react-spectrum/toast/package.json | 34 +- packages/@react-spectrum/toast/src/index.ts | 6 +- packages/@react-spectrum/tooltip/package.json | 40 +- packages/@react-spectrum/tooltip/src/index.ts | 5 +- packages/@react-spectrum/tree/package.json | 40 +- packages/@react-spectrum/tree/src/index.ts | 6 +- packages/@react-spectrum/utils/package.json | 38 +- packages/@react-spectrum/utils/src/index.ts | 39 +- packages/@react-spectrum/view/package.json | 40 +- packages/@react-spectrum/well/package.json | 40 +- .../@react-stately/autocomplete/package.json | 34 +- .../@react-stately/autocomplete/src/index.ts | 6 +- packages/@react-stately/calendar/package.json | 34 +- packages/@react-stately/calendar/src/index.ts | 16 +- packages/@react-stately/checkbox/package.json | 34 +- .../@react-stately/collections/package.json | 34 +- .../@react-stately/collections/src/index.ts | 8 +- packages/@react-stately/color/package.json | 34 +- packages/@react-stately/color/src/index.ts | 23 +- packages/@react-stately/combobox/package.json | 34 +- packages/@react-stately/combobox/src/index.ts | 11 +- packages/@react-stately/data/package.json | 34 +- packages/@react-stately/data/src/index.ts | 8 +- .../@react-stately/datepicker/package.json | 34 +- .../@react-stately/datepicker/src/index.ts | 33 +- .../@react-stately/disclosure/package.json | 34 +- .../@react-stately/disclosure/src/index.ts | 5 +- packages/@react-stately/dnd/package.json | 34 +- packages/@react-stately/dnd/src/index.ts | 10 +- packages/@react-stately/flags/package.json | 34 +- packages/@react-stately/flags/src/index.ts | 7 +- packages/@react-stately/form/package.json | 32 +- packages/@react-stately/form/src/index.ts | 9 +- packages/@react-stately/grid/package.json | 34 +- packages/@react-stately/layout/package.json | 34 +- packages/@react-stately/layout/src/index.ts | 15 +- packages/@react-stately/list/package.json | 34 +- packages/@react-stately/list/src/index.ts | 5 +- packages/@react-stately/menu/package.json | 34 +- packages/@react-stately/menu/src/index.ts | 9 +- .../@react-stately/numberfield/package.json | 34 +- .../@react-stately/numberfield/src/index.ts | 6 +- packages/@react-stately/overlays/package.json | 34 +- packages/@react-stately/radio/package.json | 34 +- .../@react-stately/searchfield/package.json | 34 +- packages/@react-stately/select/package.json | 34 +- packages/@react-stately/select/src/index.ts | 9 +- .../@react-stately/selection/package.json | 34 +- .../@react-stately/selection/src/index.ts | 6 +- packages/@react-stately/slider/package.json | 34 +- packages/@react-stately/steplist/package.json | 34 +- packages/@react-stately/table/package.json | 34 +- packages/@react-stately/table/src/index.ts | 32 +- packages/@react-stately/tabs/package.json | 34 +- packages/@react-stately/toast/package.json | 26 +- packages/@react-stately/toast/src/index.ts | 7 +- packages/@react-stately/toggle/package.json | 34 +- packages/@react-stately/tooltip/package.json | 34 +- packages/@react-stately/tree/package.json | 34 +- packages/@react-stately/utils/package.json | 40 +- .../@react-stately/virtualizer/package.json | 34 +- .../@react-stately/virtualizer/src/index.ts | 16 +- packages/@react-types/actionbar/package.json | 14 +- .../@react-types/actionbar/src/index.d.ts | 6 +- .../@react-types/actiongroup/package.json | 14 +- .../@react-types/autocomplete/package.json | 14 +- packages/@react-types/avatar/package.json | 14 +- packages/@react-types/badge/package.json | 14 +- .../@react-types/breadcrumbs/package.json | 14 +- packages/@react-types/button/package.json | 14 +- packages/@react-types/button/src/index.d.ts | 19 +- .../@react-types/buttongroup/package.json | 14 +- packages/@react-types/calendar/package.json | 14 +- packages/@react-types/calendar/src/index.d.ts | 9 +- packages/@react-types/card/package.json | 14 +- packages/@react-types/checkbox/package.json | 14 +- packages/@react-types/checkbox/src/index.d.ts | 7 +- packages/@react-types/color/package.json | 14 +- packages/@react-types/color/src/index.d.ts | 27 +- packages/@react-types/combobox/package.json | 14 +- .../@react-types/contextualhelp/package.json | 14 +- packages/@react-types/datepicker/package.json | 14 +- .../@react-types/datepicker/src/index.d.ts | 27 +- packages/@react-types/dialog/package.json | 14 +- packages/@react-types/dialog/src/index.d.ts | 8 +- packages/@react-types/divider/package.json | 14 +- packages/@react-types/form/package.json | 14 +- packages/@react-types/grid/package.json | 14 +- .../illustratedmessage/package.json | 14 +- packages/@react-types/image/package.json | 14 +- packages/@react-types/label/package.json | 14 +- packages/@react-types/layout/package.json | 14 +- packages/@react-types/link/package.json | 14 +- packages/@react-types/list/package.json | 14 +- packages/@react-types/listbox/package.json | 14 +- packages/@react-types/menu/package.json | 14 +- packages/@react-types/menu/src/index.d.ts | 6 +- packages/@react-types/meter/package.json | 14 +- .../@react-types/numberfield/package.json | 14 +- packages/@react-types/overlays/package.json | 14 +- packages/@react-types/overlays/src/index.d.ts | 44 +- packages/@react-types/progress/package.json | 14 +- packages/@react-types/progress/src/index.d.ts | 14 +- packages/@react-types/provider/package.json | 10 +- packages/@react-types/provider/src/index.d.ts | 10 +- packages/@react-types/radio/package.json | 14 +- .../@react-types/searchfield/package.json | 14 +- packages/@react-types/select/package.json | 14 +- packages/@react-types/shared/package.json | 8 +- .../@react-types/shared/src/collections.d.ts | 154 +- packages/@react-types/shared/src/dna.d.ts | 49 +- packages/@react-types/shared/src/dnd.d.ts | 158 +- packages/@react-types/shared/src/dom.d.ts | 314 +- packages/@react-types/shared/src/events.d.ts | 108 +- packages/@react-types/shared/src/inputs.d.ts | 55 +- .../@react-types/shared/src/labelable.d.ts | 12 +- packages/@react-types/shared/src/refs.d.ts | 15 +- .../@react-types/shared/src/removable.d.ts | 4 +- .../@react-types/shared/src/selection.d.ts | 22 +- packages/@react-types/shared/src/style.d.ts | 281 +- packages/@react-types/slider/package.json | 14 +- packages/@react-types/slider/src/index.d.ts | 6 +- .../@react-types/statuslight/package.json | 14 +- packages/@react-types/switch/package.json | 14 +- packages/@react-types/table/package.json | 14 +- packages/@react-types/table/src/index.d.ts | 45 +- packages/@react-types/tabs/package.json | 14 +- packages/@react-types/tabs/src/index.d.ts | 6 +- packages/@react-types/text/package.json | 14 +- packages/@react-types/textfield/package.json | 14 +- .../@react-types/textfield/src/index.d.ts | 6 +- packages/@react-types/tooltip/package.json | 14 +- packages/@react-types/view/package.json | 14 +- packages/@react-types/view/src/index.d.ts | 2 +- packages/@react-types/well/package.json | 14 +- .../@spectrum-icons/build-tools/compileSVG.js | 5 +- .../build-tools/generateIcons.js | 14 +- .../@spectrum-icons/build-tools/package.json | 8 +- packages/@spectrum-icons/color/package.json | 6 +- .../color/scripts/generateIcons.cjs | 13 +- .../color/stories/IconsColor.stories.tsx | 9 +- .../@spectrum-icons/color/tsconfig.types.json | 5 +- .../chromatic/IconsExpress.chromatic.tsx | 11 +- packages/@spectrum-icons/express/package.json | 6 +- .../express/stories/IconsExpress.stories.tsx | 22 +- .../express/tsconfig.types.json | 5 +- .../illustrations/package.json | 6 +- .../illustrations/src/Error.tsx | 59 +- .../illustrations/src/File.tsx | 15 +- .../illustrations/src/Folder.tsx | 15 +- .../illustrations/src/NoSearchResults.tsx | 24 +- .../illustrations/src/NotFound.tsx | 10 +- .../illustrations/src/Timeout.tsx | 22 +- .../illustrations/src/Unauthorized.tsx | 15 +- .../illustrations/src/Unavailable.tsx | 25 +- .../illustrations/src/Upload.tsx | 20 +- .../illustrations/tsconfig.types.json | 5 +- packages/@spectrum-icons/ui/package.json | 6 +- .../ui/scripts/generateIcons.cjs | 22 +- .../@spectrum-icons/ui/tsconfig.types.json | 5 +- .../workflow/chromatic/Workflow.chromatic.tsx | 21 +- .../@spectrum-icons/workflow/package.json | 6 +- .../workflow/scripts/generateIcons.cjs | 14 +- .../stories/IconsWorkflow.stories.tsx | 37 +- .../workflow/tsconfig.types.json | 5 +- packages/dev/codemods/package.json | 36 +- packages/dev/codemods/src/index.ts | 66 +- .../s1-to-s2/__tests__/actionbutton.test.ts | 7 +- .../s1-to-s2/__tests__/actiongroup.test.ts | 63 +- .../src/s1-to-s2/__tests__/actionmenu.test.ts | 21 +- .../src/s1-to-s2/__tests__/avatar.test.ts | 7 +- .../src/s1-to-s2/__tests__/badge.test.ts | 7 +- .../s1-to-s2/__tests__/breadcrumbs.test.ts | 63 +- .../src/s1-to-s2/__tests__/button.test.ts | 35 +- .../s1-to-s2/__tests__/buttongroup.test.ts | 7 +- .../src/s1-to-s2/__tests__/calendar.test.ts | 7 +- .../src/s1-to-s2/__tests__/checkbox.test.ts | 7 +- .../s1-to-s2/__tests__/checkboxgroup.test.ts | 7 +- .../src/s1-to-s2/__tests__/cli.e2e.test.ts | 96 +- .../src/s1-to-s2/__tests__/colorarea.test.ts | 7 +- .../src/s1-to-s2/__tests__/colorfield.test.ts | 14 +- .../s1-to-s2/__tests__/colorslider.test.ts | 7 +- .../s1-to-s2/__tests__/colorswatch.test.ts | 8 +- .../src/s1-to-s2/__tests__/colorwheel.test.ts | 7 +- .../src/s1-to-s2/__tests__/combobox.test.ts | 70 +- .../s1-to-s2/__tests__/contextualhelp.test.ts | 8 +- .../src/s1-to-s2/__tests__/datefield.test.ts | 15 +- .../src/s1-to-s2/__tests__/datepicker.test.ts | 15 +- .../__tests__/daterangepicker.test.ts | 15 +- .../src/s1-to-s2/__tests__/dialog.test.ts | 99 +- .../__tests__/dialogcontainer.test.ts | 7 +- .../src/s1-to-s2/__tests__/divider.test.ts | 7 +- .../src/s1-to-s2/__tests__/dropzone.test.ts | 7 +- .../src/s1-to-s2/__tests__/form.test.ts | 14 +- .../src/s1-to-s2/__tests__/icon.test.ts | 49 +- .../__tests__/illustratedmessage.test.ts | 14 +- .../src/s1-to-s2/__tests__/imports.test.ts | 116 +- .../s1-to-s2/__tests__/inlinealert.test.ts | 7 +- .../src/s1-to-s2/__tests__/link.test.ts | 21 +- .../src/s1-to-s2/__tests__/listbox.test.ts | 7 +- .../src/s1-to-s2/__tests__/listview.test.ts | 14 +- .../src/s1-to-s2/__tests__/menu.test.ts | 57 +- .../src/s1-to-s2/__tests__/meter.test.ts | 8 +- .../__tests__/multi-collection.test.ts | 14 +- .../s1-to-s2/__tests__/numberfield.test.ts | 21 +- .../src/s1-to-s2/__tests__/picker.test.ts | 63 +- .../s1-to-s2/__tests__/progressbar.test.ts | 22 +- .../s1-to-s2/__tests__/progresscircle.test.ts | 7 +- .../src/s1-to-s2/__tests__/provider.test.ts | 7 +- .../src/s1-to-s2/__tests__/radio.test.ts | 7 +- .../src/s1-to-s2/__tests__/radiogroup.test.ts | 16 +- .../s1-to-s2/__tests__/rangeslider.test.ts | 21 +- .../s1-to-s2/__tests__/searchfield.test.ts | 14 +- .../src/s1-to-s2/__tests__/slider.test.ts | 35 +- .../s1-to-s2/__tests__/statuslight.test.ts | 14 +- .../src/s1-to-s2/__tests__/styleProps.test.ts | 140 +- .../src/s1-to-s2/__tests__/subset.test.ts | 80 +- .../src/s1-to-s2/__tests__/switch.test.ts | 7 +- .../src/s1-to-s2/__tests__/table.test.ts | 85 +- .../src/s1-to-s2/__tests__/tabs.test.ts | 42 +- .../src/s1-to-s2/__tests__/taggroup.test.ts | 35 +- .../src/s1-to-s2/__tests__/textarea.test.ts | 14 +- .../src/s1-to-s2/__tests__/textfield.test.ts | 14 +- .../src/s1-to-s2/__tests__/timefield.test.ts | 15 +- .../s1-to-s2/__tests__/togglebutton.test.ts | 7 +- .../src/s1-to-s2/__tests__/toolbar.test.ts | 7 +- .../src/s1-to-s2/__tests__/tooltip.test.ts | 49 +- .../src/s1-to-s2/__tests__/well.test.ts | 7 +- .../src/s1-to-s2/src/codemods/codemod.ts | 183 +- .../components/ActionGroup/transform.ts | 94 +- .../codemods/components/Avatar/transform.ts | 11 +- .../components/Breadcrumbs/transform.ts | 9 +- .../ContextualHelpTrigger/transform.ts | 2 +- .../components/DateField/transform.ts | 5 +- .../components/DatePicker/transform.ts | 5 +- .../components/DateRangePicker/transform.ts | 5 +- .../components/DialogTrigger/transform.ts | 57 +- .../src/codemods/components/Item/transform.ts | 40 +- .../src/codemods/components/Link/transform.ts | 21 +- .../src/codemods/components/Row/transform.ts | 56 +- .../codemods/components/Section/transform.ts | 21 +- .../components/TableView/transform.ts | 131 +- .../src/codemods/components/Tabs/transform.ts | 66 +- .../components/TimeField/transform.ts | 5 +- .../s1-to-s2/src/codemods/icons/iconMap.ts | 1595 ++---- .../s1-to-s2/src/codemods/shared/colors.ts | 11 +- .../src/codemods/shared/dimensions.ts | 49 +- .../src/codemods/shared/styleProps.ts | 215 +- .../src/codemods/shared/transforms.ts | 456 +- .../src/codemods/shared/unsafeStyle.ts | 157 +- .../src/s1-to-s2/src/codemods/shared/utils.ts | 78 +- .../src/s1-to-s2/src/getComponents.ts | 27 +- .../dev/codemods/src/s1-to-s2/src/index.ts | 62 +- .../codemods/src/s1-to-s2/src/transform.ts | 4 +- .../src/s1-to-s2/src/utils/addMacroSupport.ts | 12 +- .../src/s1-to-s2/src/utils/installPackage.ts | 27 +- .../codemods/src/s1-to-s2/src/utils/logger.ts | 8 +- .../src/s1-to-s2/src/utils/waitForKeypress.ts | 2 +- .../src/use-monopackages/src/codemod.ts | 85 +- .../src/use-monopackages/src/index.ts | 9 +- .../codemods/src/use-subpaths/src/codemod.ts | 48 +- .../codemods/src/use-subpaths/src/index.ts | 9 +- .../src/use-subpaths/src/specifiers.ts | 13 +- packages/dev/codemods/tsconfig.json | 2 +- packages/dev/css-module-types/index.d.ts | 2 +- packages/dev/docs/package.json | 8 +- .../dev/docs/pages/blog/SubmenuAnimation.tsx | 139 +- .../dev/docs/pages/react-aria/home.global.css | 48 +- .../dev/docs/pages/react-aria/home/A11y.tsx | 317 +- .../docs/pages/react-aria/home/ExampleApp.tsx | 556 ++- .../pages/react-aria/home/FocusExample.tsx | 14 +- .../dev/docs/pages/react-aria/home/I18n.tsx | 110 +- .../pages/react-aria/home/KanbanExample.tsx | 222 +- .../docs/pages/react-aria/home/Keyboard.tsx | 22 +- .../pages/react-aria/home/ListBoxExample.tsx | 238 +- .../pages/react-aria/home/MouseAnimation.tsx | 238 +- .../react-aria/home/PaginatedCarousel.tsx | 1 - .../docs/pages/react-aria/home/Pagination.tsx | 15 +- .../dev/docs/pages/react-aria/home/Styles.tsx | 281 +- .../pages/react-aria/home/SwitchAnimation.tsx | 68 +- .../docs/pages/react-aria/home/components.tsx | 207 +- .../dev/docs/pages/react-aria/home/home.css | 119 +- .../dev/docs/pages/react-aria/home/plants.ts | 18 +- .../dev/docs/pages/react-aria/home/utils.ts | 40 +- packages/dev/docs/src/BasePage.js | 98 +- packages/dev/docs/src/ContextTable.js | 50 +- packages/dev/docs/src/ExampleCard.js | 32 +- packages/dev/docs/src/ExampleList.js | 10 +- packages/dev/docs/src/ExampleThemeSwitcher.js | 4 +- packages/dev/docs/src/HeaderInfo.js | 38 +- packages/dev/docs/src/Highlights.js | 8 +- packages/dev/docs/src/Image.js | 53 +- packages/dev/docs/src/Layout.js | 415 +- packages/dev/docs/src/MigrationBanner.js | 30 +- packages/dev/docs/src/PostListing.js | 33 +- packages/dev/docs/src/PropTable.js | 115 +- packages/dev/docs/src/ResourceCard.js | 154 +- packages/dev/docs/src/StarterKits.js | 28 +- packages/dev/docs/src/StateTable.js | 40 +- packages/dev/docs/src/ThemeSwitcher.js | 28 +- packages/dev/docs/src/ToC.js | 47 +- packages/dev/docs/src/TypeLink.js | 8 +- packages/dev/docs/src/VersionBadge.js | 23 +- packages/dev/docs/src/attachToToC.js | 5 +- packages/dev/docs/src/client.js | 112 +- packages/dev/docs/src/docs.css | 178 +- packages/dev/docs/src/docs.js | 34 +- packages/dev/docs/src/headerInfo.css | 1 - packages/dev/docs/src/resourceCard.css | 8 +- packages/dev/docs/src/syntax-highlight.css | 4 +- packages/dev/docs/src/types.js | 357 +- packages/dev/docs/src/utils.js | 19 +- packages/dev/eslint-plugin-rsp-rules/index.js | 6 +- .../rules/act-events-test.js | 12 +- .../rules/faster-node-contains.js | 23 +- .../rules/no-getByRole-toThrow.js | 28 +- .../rules/no-non-shadow-contains.js | 44 +- .../rules/no-package-root-imports.js | 19 +- .../rules/no-react-key.js | 36 +- .../rules/safe-event-target.js | 101 +- .../rules/shadow-safe-active-element.js | 43 +- .../rules/sort-imports.js | 40 +- .../test/faster-node-contains.test-lint.js | 70 +- .../test/no-non-shadow-contains.test-lint.js | 102 +- .../test/no-package-root-imports.test-lint.js | 75 +- .../test/no-react-key.test-lint.js | 92 +- .../test/safe-event-target.test-lint.js | 202 +- .../shadow-safe-active-element.test-lint.js | 42 +- .../test/sort-imports.test-lint.js | 40 +- packages/dev/mcp/react-aria/package.json | 38 +- .../react-aria/scripts/smoke-list-pages.mjs | 2 +- packages/dev/mcp/react-aria/src/index.ts | 4 +- packages/dev/mcp/react-aria/tsconfig.json | 10 +- packages/dev/mcp/s2/package.json | 42 +- packages/dev/mcp/s2/scripts/build-data.mjs | 105 +- .../dev/mcp/s2/scripts/smoke-list-pages.mjs | 2 +- packages/dev/mcp/s2/src/index.ts | 111 +- packages/dev/mcp/s2/src/s2-data.ts | 46 +- packages/dev/mcp/s2/tsconfig.json | 10 +- packages/dev/mcp/shared/package.json | 30 +- packages/dev/mcp/shared/src/page-manager.ts | 24 +- packages/dev/mcp/shared/src/parser.ts | 28 +- packages/dev/mcp/shared/src/server.ts | 16 +- packages/dev/mcp/shared/src/types.ts | 16 +- packages/dev/mcp/shared/src/utils.ts | 7 +- packages/dev/mcp/shared/tsconfig.json | 7 +- .../LocalesPlugin.d.ts | 2 +- .../optimize-locales-plugin/LocalesPlugin.js | 13 +- .../dev/optimize-locales-plugin/package.json | 6 +- .../dev/parcel-config-storybook/package.json | 12 +- packages/dev/parcel-namer-docs/DocsNamer.js | 46 +- packages/dev/parcel-namer-docs/package.json | 6 +- packages/dev/parcel-namer-intl/IntlNamer.js | 4 +- packages/dev/parcel-namer-intl/package.json | 6 +- packages/dev/parcel-namer-s2/S2Namer.js | 28 +- packages/dev/parcel-namer-s2/package.json | 20 +- .../parcel-optimizer-strict-mode/package.json | 6 +- .../dev/parcel-packager-docs/DocsPackager.js | 21 +- .../dev/parcel-packager-docs/package.json | 6 +- .../dev/parcel-packager-ssg/SSGPackager.js | 48 +- packages/dev/parcel-packager-ssg/package.json | 10 +- .../dev/parcel-resolver-build/package.json | 6 +- .../dev/parcel-resolver-docs/DocsResolver.js | 36 +- .../dev/parcel-resolver-docs/package.json | 6 +- .../LocalesResolver.js | 13 +- .../package.json | 8 +- .../StorybookResolver.ts | 35 +- .../parcel-resolver-storybook/package.json | 12 +- .../parcel-transformer-css-env/package.json | 6 +- .../DocsTransformer.js | 318 +- .../__tests__/DocsTransformer.parceltest.tsx | 110 +- .../dev/parcel-transformer-docs/package.json | 6 +- .../dev/parcel-transformer-intl/package.json | 6 +- .../MDXFragments.js | 14 +- .../MDXTransformer.js | 178 +- .../parcel-transformer-mdx-docs/package.json | 10 +- .../parcel-transformer-mdx-docs/processCSS.js | 65 +- .../package.json | 6 +- .../StorybookMDXTransformer.mjs | 4 +- .../package.json | 10 +- .../IconTransformer.js | 31 +- .../parcel-transformer-s2-icon/package.json | 20 +- .../StoryTransformer.ts | 130 +- .../parcel-transformer-storybook/csf-hmr.js | 6 +- .../parcel-transformer-storybook/package.json | 14 +- .../react-docgen-typescript.ts | 60 +- packages/dev/s2-docs/MDXTransformer.mjs | 21 +- packages/dev/s2-docs/S2DocsNamer.js | 5 +- packages/dev/s2-docs/package.json | 44 +- packages/dev/s2-docs/pages/WelcomeHeader.tsx | 20 +- .../s2-docs/pages/react-aria/Draggable.tsx | 20 +- .../pages/react-aria/DraggableGridList.tsx | 2 +- .../pages/react-aria/DraggableListBox.tsx | 2 +- .../pages/react-aria/DraggableTable.tsx | 6 +- .../pages/react-aria/DraggableTree.tsx | 6 +- .../s2-docs/pages/react-aria/DropTarget.tsx | 17 +- .../pages/react-aria/DroppableGridList.tsx | 4 +- .../pages/react-aria/DroppableListBox.tsx | 4 +- .../pages/react-aria/DroppableTable.tsx | 4 +- .../pages/react-aria/DroppableTree.tsx | 6 +- .../s2-docs/pages/react-aria/ExampleToast.tsx | 3 +- .../pages/react-aria/FocusRingExample.css | 2 +- .../s2-docs/pages/react-aria/HomeHeader.tsx | 78 +- .../pages/react-aria/MyToastRegion.tsx | 15 +- .../pages/react-aria/PokemonGridList.tsx | 18 +- .../pages/react-aria/PokemonListBox.tsx | 14 +- .../s2-docs/pages/react-aria/PokemonTable.tsx | 17 +- .../s2-docs/pages/react-aria/PokemonTree.tsx | 102 +- .../pages/react-aria/blog/CalendarSystems.tsx | 7 +- .../react-aria/blog/ColorEditorExample.tsx | 41 +- .../blog/DragBetweenListsExample.tsx | 53 +- .../react-aria/blog/RangeCalendarExample.tsx | 10 +- .../react-aria/blog/SubmenuAnimation.tsx | 479 +- .../pages/react-aria/examples/EmojiPicker.css | 1 - .../s2-docs/pages/react-aria/examples/Tab.tsx | 24 +- .../pages/react-aria/examples/TabList.tsx | 8 +- .../pages/react-aria/examples/TabPanel.tsx | 8 +- .../react-aria/examples/TabPanelCarousel.tsx | 14 +- .../examples/TabSelectionIndicator.tsx | 21 +- .../pages/react-aria/examples/Tabs.tsx | 8 +- .../pages/react-aria/examples/photos/App.tsx | 23 +- .../examples/photos/PhotoDetail.tsx | 32 +- .../react-aria/examples/photos/PhotoGrid.css | 2 +- .../react-aria/examples/photos/PhotoGrid.tsx | 70 +- .../react-aria/examples/photos/Sidebar.tsx | 36 +- .../react-aria/examples/photos/albums.json | 68 +- .../pages/react-aria/examples/plants/App.tsx | 148 +- .../react-aria/examples/plants/Labels.tsx | 59 +- .../examples/plants/PlantActionMenu.tsx | 39 +- .../examples/plants/PlantDialog.tsx | 87 +- .../react-aria/examples/plants/PlantList.tsx | 23 +- .../react-aria/examples/plants/PlantTable.tsx | 70 +- .../react-aria/examples/plants/plants.ts | 18 +- .../pages/react-aria/useClipboardExample.css | 10 +- .../pages/react-aria/useClipboardGrid.css | 1 - .../pages/react-aria/useDragExample.css | 2 +- .../dev/s2-docs/pages/s2/home/Collapsing.tsx | 10 +- packages/dev/s2-docs/pages/s2/home/Colors.tsx | 27 +- .../dev/s2-docs/pages/s2/home/DarkMode.tsx | 27 +- .../dev/s2-docs/pages/s2/home/ExampleApp.tsx | 264 +- .../dev/s2-docs/pages/s2/home/ExampleApp2.tsx | 194 +- packages/dev/s2-docs/pages/s2/home/HCM.tsx | 15 +- packages/dev/s2-docs/pages/s2/home/Header.tsx | 82 +- packages/dev/s2-docs/pages/s2/home/Home.tsx | 364 +- packages/dev/s2-docs/pages/s2/home/Icons.tsx | 20 +- packages/dev/s2-docs/pages/s2/home/Mobile.tsx | 373 +- .../s2-docs/pages/s2/home/ObjectStyles.tsx | 66 +- packages/dev/s2-docs/pages/s2/home/Press.tsx | 233 +- .../s2-docs/pages/s2/home/ReduceMotion.tsx | 13 +- .../dev/s2-docs/pages/s2/home/ReleaseLink.tsx | 21 +- packages/dev/s2-docs/pages/s2/home/Rems.tsx | 11 +- .../dev/s2-docs/pages/s2/home/Responsive.tsx | 21 +- packages/dev/s2-docs/pages/s2/home/States.tsx | 179 +- .../pages/s2/home/SubmenuAnimation.tsx | 80 +- .../dev/s2-docs/pages/s2/home/Typography.tsx | 98 +- .../s2-docs/pages/s2/home/app/AccountMenu.tsx | 52 +- .../dev/s2-docs/pages/s2/home/app/Arrows.tsx | 96 +- .../dev/s2-docs/pages/s2/home/app/Home.tsx | 153 +- .../dev/s2-docs/pages/s2/home/app/Ideas.tsx | 62 +- .../pages/s2/home/app/Notifications.tsx | 11 +- .../dev/s2-docs/pages/s2/home/app/Photos.tsx | 70 +- .../dev/s2-docs/pages/s2/home/app/Sidebar.tsx | 82 +- .../s2-docs/pages/s2/home/app/photos-1.json | 2600 +++++++++- .../s2-docs/pages/s2/home/app/photos-2.json | 2590 +++++++++- .../s2-docs/pages/s2/home/app/photos-3.json | 2614 +++++++++- .../s2-docs/pages/s2/home/app/photos-4.json | 2612 +++++++++- .../dev/s2-docs/pages/s2/home/app/topics.json | 4339 ++++++++++++++++- .../s2-docs/scripts/generateAgentSkills.mjs | 83 +- .../s2-docs/scripts/generateMarkdownDocs.mjs | 451 +- .../dev/s2-docs/scripts/generateOGImages.mjs | 50 +- .../dev/s2-docs/scripts/testAccessibility.mjs | 25 +- .../s2-docs/scripts/validateS2DocsBuild.mjs | 20 +- packages/dev/s2-docs/src/BundlerSwitcher.tsx | 17 +- packages/dev/s2-docs/src/ClassAPI.tsx | 8 +- packages/dev/s2-docs/src/Code.tsx | 206 +- packages/dev/s2-docs/src/CodeBlock.tsx | 146 +- packages/dev/s2-docs/src/CodeClient.tsx | 8 +- packages/dev/s2-docs/src/CodeFold.tsx | 48 +- packages/dev/s2-docs/src/CodePlatter.tsx | 389 +- packages/dev/s2-docs/src/CodeSandbox.tsx | 160 +- packages/dev/s2-docs/src/ColorSearchView.tsx | 243 +- packages/dev/s2-docs/src/Command.tsx | 8 +- packages/dev/s2-docs/src/ComponentCard.tsx | 309 +- .../dev/s2-docs/src/ComponentCardClient.tsx | 10 +- .../dev/s2-docs/src/ComponentCardView.tsx | 39 +- packages/dev/s2-docs/src/CopyButton.tsx | 36 +- packages/dev/s2-docs/src/DisclosureRow.tsx | 4 +- packages/dev/s2-docs/src/Error.tsx | 14 +- packages/dev/s2-docs/src/ExampleApp.tsx | 25 +- packages/dev/s2-docs/src/ExampleList.tsx | 32 +- packages/dev/s2-docs/src/ExampleOutput.tsx | 25 +- packages/dev/s2-docs/src/ExampleSwitcher.tsx | 41 +- packages/dev/s2-docs/src/ExpandableCode.tsx | 28 +- packages/dev/s2-docs/src/FileTabs.tsx | 29 +- packages/dev/s2-docs/src/FunctionJSDoc.tsx | 38 +- packages/dev/s2-docs/src/Header.tsx | 60 +- packages/dev/s2-docs/src/IconColors.tsx | 15 +- packages/dev/s2-docs/src/IconPicker.tsx | 99 +- packages/dev/s2-docs/src/IconSearchView.tsx | 156 +- packages/dev/s2-docs/src/IconSizes.tsx | 19 +- .../dev/s2-docs/src/IllustrationCards.tsx | 186 +- packages/dev/s2-docs/src/InstallCommand.tsx | 17 +- packages/dev/s2-docs/src/LabeledValueTypes.ts | 29 +- packages/dev/s2-docs/src/Layout.tsx | 153 +- packages/dev/s2-docs/src/Link.tsx | 44 +- packages/dev/s2-docs/src/MarkdownMenu.tsx | 22 +- packages/dev/s2-docs/src/MobileHeader.tsx | 77 +- packages/dev/s2-docs/src/MobileSearchMenu.tsx | 107 +- packages/dev/s2-docs/src/Nav.tsx | 167 +- packages/dev/s2-docs/src/OptimisticToc.tsx | 79 +- packages/dev/s2-docs/src/PageSkeleton.tsx | 42 +- .../dev/s2-docs/src/PatternTestingFAQ.tsx | 19 +- packages/dev/s2-docs/src/PendingBadge.tsx | 6 +- packages/dev/s2-docs/src/PostList.tsx | 99 +- packages/dev/s2-docs/src/PropTable.tsx | 289 +- packages/dev/s2-docs/src/Router.tsx | 25 +- packages/dev/s2-docs/src/S2Colors.tsx | 133 +- packages/dev/s2-docs/src/S2FAQ.tsx | 35 +- .../dev/s2-docs/src/S2StyleProperties.tsx | 4 +- packages/dev/s2-docs/src/S2Typography.tsx | 33 +- packages/dev/s2-docs/src/SearchMenu.tsx | 197 +- .../dev/s2-docs/src/SearchMenuTrigger.tsx | 228 +- .../dev/s2-docs/src/SearchMenuWrapper.tsx | 17 +- .../s2-docs/src/SearchMenuWrapperServer.tsx | 5 +- packages/dev/s2-docs/src/SearchTagGroups.tsx | 60 +- packages/dev/s2-docs/src/SettingsContext.tsx | 6 +- packages/dev/s2-docs/src/SettingsProvider.tsx | 19 +- packages/dev/s2-docs/src/ShadcnCommand.tsx | 35 +- packages/dev/s2-docs/src/StackBlitz.tsx | 130 +- packages/dev/s2-docs/src/StarterKits.tsx | 34 +- packages/dev/s2-docs/src/StateTable.tsx | 46 +- packages/dev/s2-docs/src/StaticTable.tsx | 19 +- packages/dev/s2-docs/src/Step.tsx | 34 +- .../dev/s2-docs/src/StyleMacroProperties.tsx | 398 +- packages/dev/s2-docs/src/Table.tsx | 18 +- packages/dev/s2-docs/src/Tabs.tsx | 104 +- packages/dev/s2-docs/src/TypePopover.tsx | 20 +- .../dev/s2-docs/src/TypographySearchView.tsx | 123 +- packages/dev/s2-docs/src/VersionBadge.tsx | 21 +- packages/dev/s2-docs/src/Video.tsx | 7 +- packages/dev/s2-docs/src/VisualExample.tsx | 197 +- .../dev/s2-docs/src/VisualExampleClient.tsx | 731 ++- packages/dev/s2-docs/src/anatomy.css | 12 +- packages/dev/s2-docs/src/client.tsx | 178 +- packages/dev/s2-docs/src/color.macro.ts | 179 +- packages/dev/s2-docs/src/colorSearchData.tsx | 248 +- packages/dev/s2-docs/src/constants.tsx | 7 +- packages/dev/s2-docs/src/getPages.ts | 72 +- packages/dev/s2-docs/src/iconAliases.js | 405 +- packages/dev/s2-docs/src/icons/AdobeLogo.tsx | 7 +- packages/dev/s2-docs/src/icons/Esbuild.tsx | 3 +- packages/dev/s2-docs/src/icons/GithubLogo.tsx | 32 +- .../src/icons/InternationalizedLogo.tsx | 5 +- packages/dev/s2-docs/src/icons/Nextjs.tsx | 5 +- packages/dev/s2-docs/src/icons/NpmLogo.tsx | 5 +- packages/dev/s2-docs/src/icons/Parcel.tsx | 10 +- .../dev/s2-docs/src/icons/ReactAriaLogo.tsx | 10 +- .../dev/s2-docs/src/icons/ReactRouter.tsx | 5 +- packages/dev/s2-docs/src/icons/Rollup.tsx | 10 +- packages/dev/s2-docs/src/icons/Vite.tsx | 19 +- packages/dev/s2-docs/src/icons/Webpack.tsx | 10 +- .../dev/s2-docs/src/illustrationAliases.js | 356 +- .../dev/s2-docs/src/illustrations/generic1.ts | 8 +- .../dev/s2-docs/src/illustrations/generic2.ts | 8 +- .../dev/s2-docs/src/illustrations/linear.ts | 8 +- packages/dev/s2-docs/src/pageUtils.ts | 15 +- packages/dev/s2-docs/src/prefetch.ts | 48 +- packages/dev/s2-docs/src/searchUtils.tsx | 321 +- packages/dev/s2-docs/src/styleProperties.ts | 1590 +++--- packages/dev/s2-docs/src/textWidth.ts | 2 +- packages/dev/s2-docs/src/types.tsx | 519 +- packages/dev/s2-docs/src/typography.tsx | 166 +- packages/dev/s2-docs/src/useLocalStorage.ts | 19 +- packages/dev/s2-docs/src/zip.tsx | 12 +- packages/dev/s2-docs/tailwind/tailwind.css | 8 +- packages/dev/s2-icon-builder/index.js | 15 +- packages/dev/s2-icon-builder/package.json | 24 +- .../gen-iframe-modern.mjs | 56 +- .../gen-preview-modern.mjs | 68 +- .../dev/storybook-builder-parcel/package.json | 12 +- .../dev/storybook-builder-parcel/preset.mjs | 88 +- .../templates/iframe.html | 2 +- .../dev/storybook-react-parcel/package.json | 8 +- .../dev/storybook-react-parcel/preset.mjs | 6 +- .../style-macro-chrome-plugin/package.json | 14 +- .../src/background.js | 9 +- .../src/content-script.js | 2 - .../style-macro-chrome-plugin/src/devtool.js | 44 +- .../src/manifest.json | 14 +- packages/dev/test-utils/package.json | 22 +- .../dev/test-utils/src/StrictModeWrapper.tsx | 6 +- .../dev/test-utils/src/mockImplementation.ts | 16 +- .../src/mockIntersectionObserver.ts | 10 +- .../dev/test-utils/src/renderOverride.tsx | 32 +- packages/dev/test-utils/src/shadowDOM.ts | 6 +- packages/dev/test-utils/src/ssrUtils.js | 3 +- packages/dev/test-utils/src/ssrWorker.js | 68 +- packages/dev/test-utils/src/testSSR.tsx | 106 +- packages/dev/test-utils/src/types.ts | 4 +- packages/dev/ts-plugin/package.json | 2 +- packages/dev/ts-plugin/src/index.js | 12 +- .../react-aria-components/example/index.css | 58 +- .../exports/Autocomplete.ts | 8 +- .../react-aria-components/exports/Calendar.ts | 28 +- .../react-aria-components/exports/Checkbox.ts | 9 +- .../exports/CheckboxGroup.ts | 15 +- .../exports/CollectionBuilder.ts | 6 +- .../exports/ColorArea.ts | 9 +- .../exports/ColorField.ts | 9 +- .../exports/ColorPicker.ts | 9 +- .../exports/ColorSlider.ts | 9 +- .../exports/ColorSwatch.ts | 9 +- .../exports/ColorSwatchPicker.ts | 22 +- .../exports/ColorThumb.ts | 9 +- .../exports/ColorWheel.ts | 24 +- .../react-aria-components/exports/ComboBox.ts | 24 +- .../exports/DateField.ts | 17 +- .../exports/DatePicker.ts | 27 +- .../exports/DateRangePicker.ts | 40 +- .../exports/Disclosure.ts | 14 +- .../exports/DisclosureGroup.ts | 18 +- .../react-aria-components/exports/GridList.ts | 47 +- .../react-aria-components/exports/ListBox.ts | 46 +- .../react-aria-components/exports/Menu.ts | 20 +- .../exports/RadioGroup.ts | 22 +- .../exports/RangeCalendar.ts | 29 +- .../react-aria-components/exports/Select.ts | 24 +- .../exports/SharedElementTransition.ts | 6 +- .../react-aria-components/exports/Slider.ts | 21 +- .../react-aria-components/exports/Switch.ts | 9 +- .../react-aria-components/exports/Table.ts | 66 +- .../react-aria-components/exports/Tabs.ts | 22 +- .../react-aria-components/exports/TagGroup.ts | 8 +- .../exports/TimeField.ts | 17 +- .../react-aria-components/exports/Toast.ts | 16 +- .../exports/ToggleButtonGroup.ts | 6 +- .../react-aria-components/exports/Tree.ts | 51 +- .../exports/Virtualizer.ts | 17 +- .../react-aria-components/exports/index.ts | 505 +- .../exports/useAsyncList.ts | 8 +- .../exports/useDragAndDrop.ts | 46 +- .../react-aria-components/exports/useDrop.ts | 8 +- .../src/Autocomplete.tsx | 104 +- .../react-aria-components/src/Breadcrumbs.tsx | 102 +- packages/react-aria-components/src/Button.tsx | 34 +- .../react-aria-components/src/Calendar.tsx | 380 +- .../react-aria-components/src/Checkbox.tsx | 254 +- .../react-aria-components/src/Collection.tsx | 138 +- .../react-aria-components/src/ColorArea.tsx | 54 +- .../react-aria-components/src/ColorField.tsx | 154 +- .../react-aria-components/src/ColorPicker.tsx | 13 +- .../react-aria-components/src/ColorSlider.tsx | 73 +- .../react-aria-components/src/ColorSwatch.tsx | 24 +- .../src/ColorSwatchPicker.tsx | 88 +- .../react-aria-components/src/ColorThumb.tsx | 59 +- .../react-aria-components/src/ColorWheel.tsx | 65 +- .../react-aria-components/src/ComboBox.tsx | 253 +- .../react-aria-components/src/DateField.tsx | 281 +- .../react-aria-components/src/DatePicker.tsx | 316 +- packages/react-aria-components/src/Dialog.tsx | 103 +- .../react-aria-components/src/Disclosure.tsx | 166 +- .../react-aria-components/src/DragAndDrop.tsx | 69 +- .../react-aria-components/src/DropZone.tsx | 58 +- .../react-aria-components/src/FieldError.tsx | 19 +- .../react-aria-components/src/FileTrigger.tsx | 32 +- packages/react-aria-components/src/Form.tsx | 17 +- .../react-aria-components/src/GridList.tsx | 633 ++- packages/react-aria-components/src/Group.tsx | 68 +- packages/react-aria-components/src/Header.tsx | 22 +- .../react-aria-components/src/Heading.tsx | 9 +- .../src/HiddenDateInput.tsx | 44 +- packages/react-aria-components/src/Input.tsx | 56 +- .../react-aria-components/src/Keyboard.tsx | 8 +- packages/react-aria-components/src/Label.tsx | 10 +- packages/react-aria-components/src/Link.tsx | 39 +- .../react-aria-components/src/ListBox.tsx | 439 +- packages/react-aria-components/src/Menu.tsx | 323 +- packages/react-aria-components/src/Meter.tsx | 40 +- packages/react-aria-components/src/Modal.tsx | 115 +- .../react-aria-components/src/NumberField.tsx | 94 +- .../src/OverlayArrow.tsx | 31 +- .../react-aria-components/src/Popover.tsx | 139 +- .../react-aria-components/src/ProgressBar.tsx | 46 +- .../react-aria-components/src/RadioGroup.tsx | 245 +- .../react-aria-components/src/SearchField.tsx | 76 +- packages/react-aria-components/src/Select.tsx | 228 +- .../src/SelectionIndicator.tsx | 23 +- .../react-aria-components/src/Separator.tsx | 67 +- .../src/SharedElementTransition.tsx | 43 +- packages/react-aria-components/src/Slider.tsx | 154 +- packages/react-aria-components/src/Switch.tsx | 240 +- packages/react-aria-components/src/Table.tsx | 1453 +++--- .../react-aria-components/src/TableLayout.ts | 14 +- packages/react-aria-components/src/Tabs.tsx | 356 +- .../react-aria-components/src/TagGroup.tsx | 298 +- packages/react-aria-components/src/Text.tsx | 2 +- .../react-aria-components/src/TextArea.tsx | 16 +- .../react-aria-components/src/TextField.tsx | 91 +- packages/react-aria-components/src/Toast.tsx | 126 +- .../src/ToggleButton.tsx | 66 +- .../src/ToggleButtonGroup.tsx | 77 +- .../react-aria-components/src/Toolbar.tsx | 16 +- .../react-aria-components/src/Tooltip.tsx | 82 +- packages/react-aria-components/src/Tree.tsx | 932 ++-- .../src/TreeDropTargetDelegate.ts | 90 +- .../react-aria-components/src/Virtualizer.tsx | 103 +- .../src/useDragAndDrop.tsx | 101 +- packages/react-aria-components/src/utils.tsx | 297 +- .../stories/Autocomplete.stories.tsx | 541 +- .../stories/Breadcrumbs.stories.tsx | 4 +- .../stories/Button.stories.tsx | 53 +- .../stories/Calendar.stories.tsx | 183 +- .../stories/Checkbox.stories.tsx | 3 +- .../stories/CheckboxGroup.stories.tsx | 24 +- .../stories/ColorArea.stories.tsx | 11 +- .../stories/ColorField.stories.tsx | 10 +- .../stories/ColorPicker.stories.tsx | 65 +- .../stories/ColorSlider.stories.tsx | 5 +- .../stories/ColorSwatch.stories.tsx | 5 +- .../stories/ColorWheel.stories.tsx | 6 +- .../stories/ComboBox.stories.tsx | 199 +- .../stories/DateField.stories.tsx | 28 +- .../stories/DatePicker.stories.tsx | 144 +- .../stories/Disclosure.stories.tsx | 4 +- .../stories/DisclosureGroup.stories.tsx | 10 +- .../stories/Dropzone.stories.tsx | 61 +- .../stories/FileTrigger.stories.tsx | 36 +- .../stories/Form.stories.tsx | 9 +- .../stories/GridList.stories.tsx | 279 +- .../stories/Link.stories.tsx | 6 +- .../stories/ListBox.stories.tsx | 360 +- .../stories/Menu.stories.tsx | 129 +- .../stories/Meter.stories.tsx | 2 +- .../stories/Modal.stories.tsx | 15 +- .../stories/NumberField.stories.tsx | 16 +- .../stories/Popover.stories.tsx | 158 +- .../stories/ProgressBar.stories.tsx | 2 +- .../stories/RadioGroup.stories.tsx | 100 +- .../stories/SearchField.stories.tsx | 4 +- .../stories/Select.stories.tsx | 184 +- .../stories/Slider.stories.tsx | 11 +- .../stories/Table.stories.tsx | 675 ++- .../stories/Tabs.stories.tsx | 57 +- .../stories/TagGroup.stories.tsx | 32 +- .../stories/TextField.stories.tsx | 9 +- .../stories/TimeField.stories.tsx | 7 +- .../stories/ToggleButton.stories.tsx | 1 - .../stories/Toolbar.stories.tsx | 12 +- .../stories/Tooltip.stories.tsx | 72 +- .../stories/Tree.stories.tsx | 990 ++-- .../stories/animations.stories.tsx | 2 - .../stories/button-ripple.css | 2 +- .../react-aria-components/stories/styles.css | 66 +- .../react-aria-components/stories/utils.tsx | 54 +- .../test/AriaAutocomplete.test-util.tsx | 147 +- .../test/AriaMenu.test-util.tsx | 376 +- .../test/AriaTree.test-util.tsx | 81 +- .../test/Autocomplete.test.tsx | 559 ++- .../test/Breadcrumbs.ssr.test.js | 16 +- .../test/Breadcrumbs.test.js | 62 +- .../react-aria-components/test/Button.test.js | 87 +- .../test/Calendar.test.js | 289 +- .../test/Checkbox.test.js | 128 +- .../test/CheckboxGroup.test.js | 87 +- .../test/ColorArea.test.js | 28 +- .../test/ColorField.test.js | 42 +- .../test/ColorPicker.test.js | 14 +- .../test/ColorSlider.test.js | 51 +- .../test/ColorSwatch.test.js | 8 +- .../test/ColorSwatchPicker.test.js | 84 +- .../test/ColorWheel.test.js | 36 +- .../test/ComboBox.ssr.test.js | 36 +- .../test/ComboBox.test.js | 259 +- .../test/DateField.test.js | 153 +- .../test/DatePicker.test.js | 80 +- .../test/DateRangePicker.test.js | 144 +- .../test/Dialog.ssr.test.js | 16 +- .../react-aria-components/test/Dialog.test.js | 30 +- .../test/Disclosure.ssr.test.js | 20 +- .../test/Disclosure.test.js | 29 +- .../test/DropZone.test.js | 156 +- .../test/FieldError.test.js | 14 +- .../test/FileTrigger.test.js | 1 - .../react-aria-components/test/Form.test.js | 21 +- .../test/GridList.ssr.test.js | 16 +- .../test/GridList.test.js | 683 ++- .../react-aria-components/test/Group.test.tsx | 40 +- .../test/HiddenDateInput.test.js | 27 +- .../react-aria-components/test/Link.test.js | 48 +- .../test/ListBox.ssr.test.js | 46 +- .../test/ListBox.test.js | 748 ++- .../react-aria-components/test/Menu.test.tsx | 649 ++- .../react-aria-components/test/Meter.test.js | 18 +- .../test/NumberField.test.js | 145 +- .../test/Popover.test.js | 54 +- .../test/ProgressBar.test.js | 36 +- .../test/RadioGroup.test.js | 223 +- .../test/RangeCalendar.test.tsx | 233 +- .../test/SearchField.test.js | 26 +- .../test/Select.ssr.test.js | 16 +- .../react-aria-components/test/Select.test.js | 102 +- .../test/Separator.test.js | 2 +- .../react-aria-components/test/Slider.test.js | 102 +- .../react-aria-components/test/Switch.test.js | 113 +- .../test/Table.ssr.test.js | 36 +- .../react-aria-components/test/Table.test.js | 1043 ++-- .../test/Tabs.ssr.test.js | 22 +- .../react-aria-components/test/Tabs.test.js | 309 +- .../test/TagGroup.ssr.test.js | 18 +- .../test/TagGroup.test.js | 282 +- .../test/TextField.test.js | 79 +- .../test/TimeField.test.js | 74 +- .../react-aria-components/test/Toast.test.js | 20 +- .../test/ToggleButton.test.js | 44 +- .../test/ToggleButtonGroup.test.js | 22 +- .../test/Toolbar.test.tsx | 8 +- .../test/Tooltip.test.js | 38 +- .../test/Tree.ssr.test.js | 39 +- .../react-aria-components/test/Tree.test.tsx | 1287 +++-- .../test/Treeble.test.js | 95 +- .../test/VirtualizedMenu.test.tsx | 16 +- packages/react-aria-components/test/types.tsx | 10 +- .../react-aria/exports/CollectionBuilder.ts | 7 +- packages/react-aria/exports/index.ts | 279 +- .../private/actiongroup/useActionGroup.ts | 7 +- .../private/actiongroup/useActionGroupItem.ts | 6 +- .../autocomplete/useSearchAutocomplete.ts | 8 +- .../private/collections/BaseCollection.ts | 10 +- .../private/collections/useCachedChildren.ts | 5 +- .../exports/private/focus/FocusScope.ts | 6 +- .../exports/private/focus/virtualFocus.ts | 7 +- .../private/grid/GridKeyboardDelegate.ts | 5 +- .../grid/useGridSelectionAnnouncement.ts | 5 +- .../private/grid/useGridSelectionCheckbox.ts | 6 +- .../grid/useHighlightSelectionDescription.ts | 5 +- .../private/interactions/useFocusVisible.ts | 12 +- .../private/interactions/useFocusable.ts | 6 +- .../exports/private/landmark/useLandmark.ts | 5 +- .../private/live-announcer/LiveAnnouncer.ts | 6 +- .../exports/private/overlays/useModal.ts | 13 +- .../selection/useSelectableCollection.ts | 6 +- .../private/selection/useSelectableItem.ts | 7 +- .../private/selection/useSelectableList.ts | 6 +- .../private/selection/useTypeSelect.ts | 6 +- .../private/spinbutton/useSpinButton.ts | 6 +- .../exports/private/steplist/useStepList.ts | 6 +- .../private/steplist/useStepListItem.ts | 6 +- .../exports/private/utils/openLink.ts | 11 +- .../exports/private/utils/platform.ts | 12 +- .../private/utils/shadowdom/DOMFunctions.ts | 7 +- .../utils/shadowdom/ShadowTreeWalker.ts | 5 +- .../private/utils/useLoadMoreSentinel.ts | 5 +- .../private/virtualizer/useVirtualizerItem.ts | 5 +- .../exports/private/virtualizer/utils.ts | 7 +- .../react-aria/exports/useAutocomplete.ts | 8 +- packages/react-aria/exports/useBreadcrumbs.ts | 6 +- packages/react-aria/exports/useButton.ts | 9 +- packages/react-aria/exports/useCalendar.ts | 12 +- packages/react-aria/exports/useClipboard.ts | 8 +- packages/react-aria/exports/useColorArea.ts | 6 +- packages/react-aria/exports/useColorField.ts | 5 +- packages/react-aria/exports/useColorSlider.ts | 6 +- packages/react-aria/exports/useColorWheel.ts | 6 +- packages/react-aria/exports/useComboBox.ts | 6 +- packages/react-aria/exports/useDateField.ts | 6 +- .../react-aria/exports/useDateRangePicker.ts | 5 +- packages/react-aria/exports/useDisclosure.ts | 2 +- packages/react-aria/exports/useDrag.ts | 9 +- .../exports/useDraggableCollection.ts | 12 +- packages/react-aria/exports/useDrop.ts | 19 +- .../exports/useDroppableCollection.ts | 30 +- packages/react-aria/exports/useFocusable.ts | 6 +- packages/react-aria/exports/useGridList.ts | 17 +- .../react-aria/exports/useInteractOutside.ts | 5 +- packages/react-aria/exports/useLandmark.ts | 8 +- packages/react-aria/exports/useListBox.ts | 8 +- .../exports/useLocalizedStringFormatter.ts | 5 +- packages/react-aria/exports/useMove.ts | 8 +- .../react-aria/exports/useOverlayPosition.ts | 11 +- packages/react-aria/exports/useProgressBar.ts | 8 +- .../react-aria/exports/useRangeCalendar.ts | 12 +- packages/react-aria/exports/useSelect.ts | 7 +- packages/react-aria/exports/useSlider.ts | 7 +- packages/react-aria/exports/useTable.ts | 21 +- packages/react-aria/exports/useTimeField.ts | 6 +- .../react-aria/exports/useToggleButton.ts | 7 +- .../exports/useToggleButtonGroup.ts | 7 +- packages/react-aria/exports/useTree.ts | 8 +- packages/react-aria/intl/tag/en-US.json | 2 +- .../src/actiongroup/useActionGroup.ts | 46 +- .../src/actiongroup/useActionGroupItem.ts | 18 +- .../aria-modal-polyfill/ariaModalPolyfill.ts | 29 +- .../src/autocomplete/useAutocomplete.ts | 196 +- .../src/autocomplete/useSearchAutocomplete.ts | 121 +- .../src/breadcrumbs/useBreadcrumbItem.ts | 25 +- .../src/breadcrumbs/useBreadcrumbs.ts | 7 +- packages/react-aria/src/button/useButton.ts | 109 +- .../react-aria/src/button/useToggleButton.ts | 94 +- .../src/button/useToggleButtonGroup.ts | 78 +- .../react-aria/src/calendar/useCalendar.ts | 15 +- .../src/calendar/useCalendarBase.ts | 41 +- .../src/calendar/useCalendarCell.ts | 79 +- .../src/calendar/useCalendarGrid.ts | 42 +- .../src/calendar/useCalendarHeading.ts | 30 +- .../src/calendar/useCalendarMonthPicker.ts | 26 +- .../src/calendar/useCalendarYearPicker.ts | 40 +- .../src/calendar/useRangeCalendar.ts | 26 +- packages/react-aria/src/calendar/utils.ts | 44 +- .../react-aria/src/checkbox/useCheckbox.ts | 58 +- .../src/checkbox/useCheckboxGroup.ts | 32 +- .../src/checkbox/useCheckboxGroupItem.ts | 77 +- packages/react-aria/src/checkbox/utils.ts | 15 +- .../src/collections/BaseCollection.ts | 53 +- .../src/collections/CollectionBuilder.tsx | 152 +- .../react-aria/src/collections/Document.ts | 34 +- .../react-aria/src/collections/Hidden.tsx | 20 +- .../src/collections/useCachedChildren.ts | 15 +- packages/react-aria/src/color/useColorArea.ts | 270 +- .../src/color/useColorAreaGradient.ts | 34 +- .../src/color/useColorChannelField.ts | 32 +- .../react-aria/src/color/useColorField.ts | 145 +- .../react-aria/src/color/useColorSlider.ts | 63 +- .../react-aria/src/color/useColorSwatch.ts | 20 +- .../react-aria/src/color/useColorWheel.ts | 198 +- .../react-aria/src/combobox/useComboBox.ts | 196 +- .../react-aria/src/datepicker/useDateField.ts | 103 +- .../src/datepicker/useDatePicker.ts | 47 +- .../src/datepicker/useDatePickerGroup.ts | 8 +- .../src/datepicker/useDateRangePicker.ts | 81 +- .../src/datepicker/useDateSegment.ts | 46 +- .../src/datepicker/useDisplayNames.ts | 2 +- packages/react-aria/src/dialog/useDialog.ts | 25 +- .../src/disclosure/useDisclosure.ts | 24 +- packages/react-aria/src/dnd/DragManager.ts | 181 +- packages/react-aria/src/dnd/DragPreview.tsx | 66 +- .../src/dnd/DropTargetKeyboardNavigation.ts | 34 +- .../src/dnd/ListDropTargetDelegate.ts | 50 +- packages/react-aria/src/dnd/constants.ts | 50 +- packages/react-aria/src/dnd/useAutoScroll.ts | 16 +- packages/react-aria/src/dnd/useClipboard.ts | 16 +- packages/react-aria/src/dnd/useDrag.ts | 108 +- .../src/dnd/useDraggableCollection.ts | 8 +- .../react-aria/src/dnd/useDraggableItem.ts | 22 +- packages/react-aria/src/dnd/useDrop.ts | 122 +- .../react-aria/src/dnd/useDropIndicator.ts | 16 +- .../src/dnd/useDroppableCollection.ts | 397 +- .../react-aria/src/dnd/useDroppableItem.ts | 37 +- packages/react-aria/src/dnd/useVirtualDrop.ts | 6 +- packages/react-aria/src/dnd/utils.ts | 50 +- packages/react-aria/src/focus/FocusRing.tsx | 31 +- packages/react-aria/src/focus/FocusScope.tsx | 246 +- packages/react-aria/src/focus/useFocusRing.ts | 54 +- .../src/focus/useHasTabbableChild.ts | 7 +- .../react-aria/src/form/useFormValidation.ts | 16 +- .../src/grid/GridKeyboardDelegate.ts | 111 +- packages/react-aria/src/grid/useGrid.ts | 117 +- packages/react-aria/src/grid/useGridCell.ts | 95 +- packages/react-aria/src/grid/useGridRow.ts | 33 +- .../react-aria/src/grid/useGridRowGroup.ts | 2 +- .../src/grid/useGridSelectionAnnouncement.ts | 33 +- .../src/grid/useGridSelectionCheckbox.ts | 10 +- .../grid/useHighlightSelectionDescription.ts | 26 +- packages/react-aria/src/grid/utils.ts | 15 +- .../react-aria/src/gridlist/useGridList.ts | 43 +- .../src/gridlist/useGridListItem.ts | 121 +- .../src/gridlist/useGridListSection.ts | 17 +- .../gridlist/useGridListSelectionCheckbox.ts | 5 +- packages/react-aria/src/gridlist/utils.ts | 15 +- packages/react-aria/src/i18n/I18nProvider.tsx | 37 +- packages/react-aria/src/i18n/server.tsx | 25 +- packages/react-aria/src/i18n/useCollator.ts | 8 +- .../react-aria/src/i18n/useDateFormatter.ts | 2 +- .../react-aria/src/i18n/useDefaultLocale.ts | 7 +- packages/react-aria/src/i18n/useFilter.ts | 94 +- .../src/i18n/useLocalizedStringFormatter.ts | 26 +- packages/react-aria/src/i18n/utils.ts | 40 +- .../src/interactions/PressResponder.tsx | 68 +- .../react-aria/src/interactions/Pressable.tsx | 131 +- .../react-aria/src/interactions/context.ts | 7 +- .../src/interactions/createEventHandler.ts | 8 +- .../src/interactions/focusSafely.ts | 5 +- .../src/interactions/textSelection.ts | 2 - .../react-aria/src/interactions/useFocus.ts | 80 +- .../src/interactions/useFocusVisible.ts | 84 +- .../src/interactions/useFocusWithin.ts | 142 +- .../src/interactions/useFocusable.tsx | 198 +- .../react-aria/src/interactions/useHover.ts | 59 +- .../src/interactions/useInteractOutside.ts | 16 +- .../src/interactions/useKeyboard.ts | 14 +- .../src/interactions/useLongPress.ts | 37 +- .../react-aria/src/interactions/useMove.ts | 121 +- .../react-aria/src/interactions/usePress.ts | 502 +- .../src/interactions/useScrollWheel.ts | 29 +- packages/react-aria/src/interactions/utils.ts | 102 +- packages/react-aria/src/label/useField.ts | 36 +- packages/react-aria/src/label/useLabel.ts | 10 +- .../react-aria/src/landmark/useLandmark.ts | 132 +- packages/react-aria/src/link/useLink.ts | 29 +- packages/react-aria/src/listbox/useListBox.ts | 78 +- .../src/listbox/useListBoxSection.ts | 34 +- packages/react-aria/src/listbox/useOption.ts | 39 +- packages/react-aria/src/listbox/utils.ts | 19 +- .../src/live-announcer/LiveAnnouncer.tsx | 9 +- packages/react-aria/src/menu/useMenu.ts | 64 +- packages/react-aria/src/menu/useMenuItem.ts | 107 +- .../react-aria/src/menu/useMenuSection.ts | 26 +- .../react-aria/src/menu/useMenuTrigger.ts | 28 +- .../src/menu/useSafelyMouseToSubmenu.ts | 42 +- .../react-aria/src/menu/useSubmenuTrigger.ts | 86 +- packages/react-aria/src/menu/utils.ts | 11 +- packages/react-aria/src/meter/useMeter.ts | 10 +- .../src/numberfield/useNumberField.ts | 241 +- .../react-aria/src/overlays/DismissButton.tsx | 8 +- packages/react-aria/src/overlays/Overlay.tsx | 23 +- .../src/overlays/PortalProvider.tsx | 12 +- .../src/overlays/ariaHideOutside.ts | 41 +- .../src/overlays/calculatePosition.ts | 350 +- .../src/overlays/useCloseOnScroll.ts | 11 +- packages/react-aria/src/overlays/useModal.tsx | 73 +- .../src/overlays/useModalOverlay.ts | 32 +- .../react-aria/src/overlays/useOverlay.ts | 41 +- .../src/overlays/useOverlayPosition.ts | 91 +- .../src/overlays/useOverlayTrigger.ts | 12 +- .../react-aria/src/overlays/usePopover.ts | 36 +- .../src/overlays/usePreventScroll.ts | 36 +- .../react-aria/src/progress/useProgressBar.ts | 23 +- packages/react-aria/src/radio/useRadio.ts | 81 +- .../react-aria/src/radio/useRadioGroup.ts | 24 +- packages/react-aria/src/radio/utils.ts | 15 +- .../src/searchfield/useSearchField.ts | 41 +- .../react-aria/src/select/HiddenSelect.tsx | 98 +- packages/react-aria/src/select/useSelect.ts | 99 +- .../src/selection/ListKeyboardDelegate.ts | 81 +- .../src/selection/useSelectableCollection.ts | 168 +- .../src/selection/useSelectableItem.ts | 167 +- .../src/selection/useSelectableList.ts | 51 +- .../react-aria/src/selection/useTypeSelect.ts | 18 +- packages/react-aria/src/selection/utils.ts | 11 +- .../react-aria/src/separator/useSeparator.ts | 6 +- packages/react-aria/src/slider/useSlider.ts | 76 +- .../react-aria/src/slider/useSliderThumb.ts | 120 +- packages/react-aria/src/slider/utils.ts | 6 +- .../src/spinbutton/useSpinButton.ts | 74 +- packages/react-aria/src/ssr/SSRProvider.tsx | 59 +- .../react-aria/src/steplist/useStepList.ts | 14 +- .../src/steplist/useStepListItem.ts | 16 +- packages/react-aria/src/switch/useSwitch.ts | 31 +- .../src/table/TableKeyboardDelegate.ts | 8 +- packages/react-aria/src/table/useTable.ts | 96 +- packages/react-aria/src/table/useTableCell.ts | 18 +- .../src/table/useTableColumnHeader.ts | 17 +- .../src/table/useTableColumnResize.ts | 155 +- .../react-aria/src/table/useTableHeaderRow.ts | 10 +- packages/react-aria/src/table/useTableRow.ts | 55 +- .../src/table/useTableSelectionCheckbox.ts | 16 +- packages/react-aria/src/table/utils.ts | 11 +- .../src/tabs/TabsKeyboardDelegate.ts | 8 +- packages/react-aria/src/tabs/useTab.ts | 33 +- packages/react-aria/src/tabs/useTabList.ts | 60 +- packages/react-aria/src/tabs/useTabPanel.ts | 17 +- packages/react-aria/src/tabs/utils.ts | 16 +- packages/react-aria/src/tag/useTag.ts | 47 +- packages/react-aria/src/tag/useTagGroup.ts | 90 +- .../src/textfield/useFormattedTextField.ts | 121 +- .../react-aria/src/textfield/useTextField.ts | 156 +- packages/react-aria/src/toast/useToast.ts | 26 +- .../react-aria/src/toast/useToastRegion.ts | 52 +- packages/react-aria/src/toggle/useToggle.ts | 69 +- packages/react-aria/src/toolbar/useToolbar.ts | 31 +- packages/react-aria/src/tooltip/useTooltip.ts | 4 +- .../src/tooltip/useTooltipTrigger.ts | 31 +- packages/react-aria/src/tree/useTree.ts | 31 +- packages/react-aria/src/tree/useTreeItem.ts | 26 +- packages/react-aria/src/utils/animation.ts | 23 +- packages/react-aria/src/utils/domHelpers.ts | 10 +- .../react-aria/src/utils/filterDOMProps.ts | 38 +- .../src/utils/focusWithoutScrolling.ts | 11 +- packages/react-aria/src/utils/getNonce.ts | 14 +- packages/react-aria/src/utils/getOffset.ts | 6 +- .../react-aria/src/utils/getScrollParent.ts | 1 - .../react-aria/src/utils/isElementVisible.ts | 28 +- packages/react-aria/src/utils/isFocusable.ts | 13 +- .../react-aria/src/utils/isVirtualEvent.ts | 3 +- packages/react-aria/src/utils/keyboard.tsx | 6 +- packages/react-aria/src/utils/mergeProps.ts | 12 +- packages/react-aria/src/utils/mergeRefs.ts | 4 +- packages/react-aria/src/utils/openLink.tsx | 101 +- packages/react-aria/src/utils/platform.ts | 13 +- .../react-aria/src/utils/scrollIntoView.ts | 31 +- .../src/utils/shadowdom/DOMFunctions.ts | 15 +- .../src/utils/shadowdom/ShadowTreeWalker.ts | 73 +- .../react-aria/src/utils/useDescription.ts | 2 +- packages/react-aria/src/utils/useDrag1D.ts | 46 +- packages/react-aria/src/utils/useFormReset.ts | 1 - .../src/utils/useGlobalListeners.ts | 48 +- packages/react-aria/src/utils/useId.ts | 20 +- packages/react-aria/src/utils/useLabels.ts | 11 +- .../react-aria/src/utils/useLayoutEffect.ts | 5 +- packages/react-aria/src/utils/useLoadMore.ts | 23 +- .../src/utils/useLoadMoreSentinel.ts | 14 +- packages/react-aria/src/utils/useObjectRef.ts | 4 +- .../react-aria/src/utils/useResizeObserver.ts | 19 +- packages/react-aria/src/utils/useSlot.ts | 8 +- packages/react-aria/src/utils/useSyncRef.ts | 2 +- .../react-aria/src/utils/useUpdateEffect.ts | 2 +- .../react-aria/src/utils/useValueEffect.ts | 11 +- .../react-aria/src/utils/useViewportSize.ts | 19 +- .../react-aria/src/virtualizer/ScrollView.tsx | 294 +- .../src/virtualizer/Virtualizer.tsx | 57 +- .../src/virtualizer/VirtualizerItem.tsx | 30 +- .../src/virtualizer/useVirtualizerItem.ts | 8 +- packages/react-aria/src/virtualizer/utils.ts | 6 +- .../src/visually-hidden/VisuallyHidden.tsx | 32 +- .../stories/button/useButton.stories.tsx | 13 +- .../react-aria/stories/calendar/Example.tsx | 88 +- .../stories/calendar/useCalendar.stories.tsx | 8 +- .../stories/checkbox/useCheckbox.stories.tsx | 2 +- .../react-aria/stories/combobox/example.tsx | 51 +- .../datepicker/useDatePicker.stories.tsx | 8 +- .../stories/dnd/DraggableCollection.tsx | 135 +- .../stories/dnd/DraggableListBox.tsx | 59 +- .../react-aria/stories/dnd/DroppableGrid.tsx | 169 +- .../stories/dnd/DroppableListBox.tsx | 119 +- .../react-aria/stories/dnd/Reorderable.tsx | 201 +- .../stories/dnd/VirtualizedListBox.tsx | 163 +- packages/react-aria/stories/dnd/dnd.css | 28 +- .../react-aria/stories/dnd/dnd.stories.tsx | 202 +- .../stories/focus/FocusScope.stories.tsx | 135 +- packages/react-aria/stories/grid/example.tsx | 72 +- .../interactions/useFocusRing.stories.tsx | 44 +- .../stories/interactions/useHover.stories.tsx | 9 +- .../useInteractOutside.stories.tsx | 23 +- .../stories/interactions/useMove.stories.tsx | 180 +- .../stories/interactions/usePress.stories.tsx | 28 +- .../stories/label/useField.stories.tsx | 14 +- .../stories/landmark/Landmark.stories.tsx | 224 +- .../react-aria/stories/landmark/index.css | 8 +- .../stories/menu/useMenu.stories.tsx | 12 +- .../overlays/UseOverlayPosition.stories.tsx | 33 +- .../stories/overlays/useModal.stories.tsx | 32 +- .../react-aria/stories/select/example.tsx | 62 +- .../stories/select/useSelect.stories.tsx | 2 +- .../react-aria/stories/selection/List.tsx | 13 +- .../selection/useSelectableList.stories.tsx | 27 +- .../stories/slider/Slider.stories.tsx | 22 +- .../stories/slider/StoryMultiSlider.tsx | 79 +- .../stories/slider/StoryRangeSlider.tsx | 78 +- .../react-aria/stories/slider/StorySlider.tsx | 57 +- .../stories/slider/story-slider.css | 10 +- .../table/example-backwards-compat.tsx | 111 +- .../react-aria/stories/table/example-docs.tsx | 124 +- .../stories/table/example-resizing.tsx | 237 +- packages/react-aria/stories/table/example.tsx | 103 +- .../react-aria/stories/table/resizing.css | 2 +- .../stories/table/useTable.stories.tsx | 164 +- packages/react-aria/stories/tabs/example.tsx | 7 +- .../stories/tabs/useTabList.stories.tsx | 6 +- .../textfield/useTextField.stories.tsx | 13 +- packages/react-aria/stories/toast/Example.tsx | 21 +- .../stories/toast/useToast.stories.tsx | 10 +- .../stories/utils/platform.stories.tsx | 40 +- .../stories/utils/useId.stories.tsx | 19 +- .../test/actiongroup/useActionGroup.test.ts | 2 +- .../test/aria-modal-polyfill/index.test.tsx | 24 +- .../useSearchAutocomplete.test.js | 13 +- .../breadcrumbs/useBreadcrumbItem.test.js | 2 +- .../test/breadcrumbs/useBreadcrumbs.test.js | 3 +- .../test/calendar/useCalendar.test.js | 728 ++- .../test/checkbox/useCheckboxGroup.test.tsx | 71 +- .../collections/CollectionBuilder.test.js | 20 +- .../test/color/useColorField.test.js | 16 +- .../test/color/useColorWheel.test.tsx | 182 +- .../test/combobox/useComboBox.test.js | 89 +- .../test/datepicker/useDatePicker.test.tsx | 2 +- .../test/disclosure/useDisclosure.test.ts | 17 +- .../dnd/DropTargetKeyboardNavigation.test.tsx | 101 +- packages/react-aria/test/dnd/dnd.ssr.test.js | 7 +- packages/react-aria/test/dnd/dnd.test.js | 1122 +++-- packages/react-aria/test/dnd/examples.js | 26 +- .../react-aria/test/dnd/useClipboard.test.js | 81 +- .../test/dnd/useDraggableCollection.test.js | 97 +- .../test/dnd/useDroppableCollection.test.js | 277 +- .../react-aria/test/focus/FocusScope.test.js | 504 +- .../focus/FocusScopeOwnerDocument.test.js | 96 +- packages/react-aria/test/grid/useGrid.test.js | 4 +- .../test/i18n/languagechange.test.js | 50 +- packages/react-aria/test/i18n/server.test.js | 4 +- .../test/interactions/Focusable.test.js | 14 +- .../test/interactions/PressResponder.test.js | 12 +- .../test/interactions/Pressable.test.js | 14 +- .../test/interactions/focusSafely.test.js | 1 - .../test/interactions/useFocus.test.js | 171 +- .../test/interactions/useFocusVisible.test.js | 63 +- .../test/interactions/useFocusWithin.test.js | 89 +- .../test/interactions/useHover.test.js | 152 +- .../interactions/useInteractOutside.test.js | 176 +- .../test/interactions/useKeyboard.test.js | 31 +- .../test/interactions/useLongPress.test.js | 56 +- .../test/interactions/useMove.test.js | 297 +- .../test/interactions/usePress.test.js | 1208 +++-- .../react-aria/test/label/useField.test.js | 10 +- .../react-aria/test/label/useLabel.test.js | 17 +- .../test/landmark/useLandmark.ssr.test.js | 7 +- .../test/landmark/useLandmark.test.tsx | 545 ++- packages/react-aria/test/link/useLink.test.js | 8 +- .../react-aria/test/menu/useMenu.test.tsx | 26 +- .../test/menu/useMenuTrigger.test.js | 10 +- .../test/numberfield/useNumberField.test.ts | 13 +- .../test/overlays/DismissButton.test.tsx | 2 - .../test/overlays/ariaHideOutside.test.js | 98 +- .../test/overlays/calculatePosition.test.ts | 116 +- .../test/overlays/useModal.ssr.test.js | 7 +- .../react-aria/test/overlays/useModal.test.js | 18 +- .../test/overlays/useModalOverlay.test.js | 74 +- .../test/overlays/useOverlay.test.js | 42 +- .../test/overlays/useOverlayPosition.test.tsx | 85 +- .../test/overlays/useOverlayTrigger.test.js | 6 +- .../test/overlays/usePreventScroll.test.js | 4 +- .../test/progress/useProgressBar.test.js | 11 +- .../test/searchfield/useSearchField.test.js | 13 +- .../test/select/HiddenSelect.test.tsx | 62 +- .../selection/useSelectableCollection.test.js | 43 +- .../react-aria/test/slider/useSlider.test.js | 136 +- .../test/slider/useSliderThumb.test.js | 270 +- .../test/spinbutton/useSpinButton.test.js | 30 +- .../test/ssr/SSRProvider.ssr.test.js | 21 +- .../react-aria/test/ssr/SSRProvider.test.js | 4 +- .../test/table/ariaTableResizing.test.tsx | 32 +- .../test/table/tableResizingTests.tsx | 91 +- .../react-aria/test/table/useTable.test.tsx | 51 +- .../table/useTableBackwardCompat.test.tsx | 33 +- .../react-aria/test/tag/useTagGroup.test.js | 51 +- .../test/textfield/useTextField.test.js | 11 +- .../react-aria/test/toast/useToast.test.js | 9 +- .../test/tooltip/useTooltip.test.js | 25 +- .../test/utils/DOMFunctions.test.js | 18 +- .../react-aria/test/utils/domHelpers.test.js | 31 +- .../react-aria/test/utils/mergeProps.test.jsx | 46 +- .../react-aria/test/utils/mergeRefs.test.tsx | 6 +- .../test/utils/runAfterTransition.test.ts | 23 +- .../test/utils/shadowTreeWalker.test.tsx | 177 +- .../test/utils/useFormReset.test.tsx | 8 +- .../test/utils/useObjectRef.test.js | 3 +- .../test/utils/useViewportSize.ssr.test.tsx | 19 +- .../visually-hidden/VisuallyHidden.test.tsx | 8 +- packages/react-stately/exports/Color.ts | 9 +- packages/react-stately/exports/index.ts | 144 +- .../autocomplete/useAutocompleteState.ts | 7 +- .../private/collections/getChildNodes.ts | 8 +- .../exports/private/flags/flags.ts | 7 +- .../private/form/useFormValidationState.ts | 10 +- .../exports/private/grid/GridCollection.ts | 7 +- .../private/steplist/useStepListState.ts | 6 +- .../exports/private/table/TableCollection.ts | 6 +- .../exports/private/table/useTreeGridState.ts | 6 +- .../react-stately/exports/useAsyncList.ts | 8 +- .../react-stately/exports/useCalendarState.ts | 8 +- .../exports/useColorAreaState.ts | 9 +- .../exports/useColorFieldState.ts | 6 +- .../exports/useColorPickerState.ts | 9 +- .../exports/useColorSliderState.ts | 9 +- .../exports/useColorWheelState.ts | 9 +- .../react-stately/exports/useComboBoxState.ts | 11 +- .../exports/useDateFieldState.ts | 15 +- .../exports/useDatePickerState.ts | 7 +- .../exports/useDateRangePickerState.ts | 13 +- .../exports/useDisclosureGroupState.ts | 5 +- .../exports/useDraggableCollectionState.ts | 5 +- .../exports/useDroppableCollectionState.ts | 5 +- .../exports/useMenuTriggerState.ts | 7 +- .../exports/useMultipleSelectionState.ts | 6 +- .../exports/useOverlayTriggerState.ts | 5 +- .../exports/useRangeCalendarState.ts | 13 +- .../react-stately/exports/useSelectState.ts | 9 +- .../exports/useSingleSelectListState.ts | 5 +- .../react-stately/exports/useTableState.ts | 14 +- .../exports/useTimeFieldState.ts | 7 +- .../react-stately/exports/useToastState.ts | 7 +- .../src/autocomplete/useAutocompleteState.ts | 18 +- packages/react-stately/src/calendar/types.ts | 150 +- .../src/calendar/useCalendarState.ts | 115 +- .../src/calendar/useRangeCalendarState.ts | 117 +- packages/react-stately/src/calendar/utils.ts | 68 +- .../src/checkbox/useCheckboxGroupState.ts | 58 +- .../src/collections/CollectionBuilder.ts | 110 +- .../react-stately/src/collections/Item.ts | 15 +- .../react-stately/src/collections/Section.ts | 7 +- .../src/collections/getChildNodes.ts | 15 +- .../react-stately/src/collections/types.ts | 28 +- .../src/collections/useCollection.ts | 16 +- packages/react-stately/src/color/Color.ts | 174 +- packages/react-stately/src/color/types.ts | 50 +- .../src/color/useColorAreaState.ts | 93 +- .../src/color/useColorChannelFieldState.ts | 31 +- .../src/color/useColorFieldState.ts | 64 +- .../src/color/useColorPickerState.ts | 6 +- .../src/color/useColorSliderState.ts | 41 +- .../src/color/useColorWheelState.ts | 62 +- .../src/combobox/useComboBoxState.ts | 276 +- .../react-stately/src/data/useAsyncList.ts | 128 +- .../react-stately/src/data/useListData.ts | 91 +- .../react-stately/src/data/useTreeData.ts | 236 +- .../src/datepicker/IncompleteDate.ts | 35 +- .../src/datepicker/placeholders.ts | 161 +- .../react-stately/src/datepicker/types.ts | 100 +- .../src/datepicker/useDateFieldState.ts | 218 +- .../src/datepicker/useDatePickerState.ts | 113 +- .../src/datepicker/useDateRangePickerState.ts | 160 +- .../src/datepicker/useTimeFieldState.ts | 42 +- .../react-stately/src/datepicker/utils.ts | 101 +- .../src/disclosure/useDisclosureGroupState.ts | 30 +- .../src/disclosure/useDisclosureState.ts | 25 +- .../src/dnd/useDraggableCollectionState.ts | 54 +- .../src/dnd/useDroppableCollectionState.ts | 179 +- .../src/form/useFormValidationState.ts | 105 +- .../react-stately/src/grid/GridCollection.ts | 34 +- .../react-stately/src/grid/useGridState.ts | 76 +- .../react-stately/src/layout/GridLayout.ts | 90 +- .../react-stately/src/layout/ListLayout.ts | 250 +- .../react-stately/src/layout/TableLayout.ts | 147 +- .../src/layout/WaterfallLayout.ts | 94 +- .../react-stately/src/list/ListCollection.ts | 4 +- .../react-stately/src/list/useListState.ts | 64 +- .../src/list/useSingleSelectListState.ts | 29 +- .../src/menu/useMenuTriggerState.ts | 24 +- .../src/menu/useSubmenuTriggerState.ts | 85 +- .../src/numberfield/useNumberFieldState.ts | 164 +- .../src/overlays/useOverlayTriggerState.ts | 24 +- .../src/radio/useRadioGroupState.ts | 58 +- .../src/searchfield/useSearchFieldState.ts | 34 +- .../src/select/useSelectState.ts | 118 +- .../src/selection/SelectionManager.ts | 35 +- packages/react-stately/src/selection/types.ts | 98 +- .../selection/useMultipleSelectionState.ts | 47 +- .../src/slider/useSliderState.ts | 103 +- .../src/steplist/useStepListState.ts | 109 +- packages/react-stately/src/table/Cell.ts | 16 +- packages/react-stately/src/table/Column.ts | 33 +- packages/react-stately/src/table/Row.ts | 28 +- packages/react-stately/src/table/TableBody.ts | 13 +- .../src/table/TableCollection.ts | 33 +- .../src/table/TableColumnLayout.ts | 92 +- .../react-stately/src/table/TableHeader.ts | 12 +- .../react-stately/src/table/TableUtils.ts | 67 +- .../src/table/useTableColumnResizeState.ts | 152 +- .../react-stately/src/table/useTableState.ts | 96 +- .../src/table/useTreeGridState.ts | 88 +- .../react-stately/src/tabs/useTabListState.ts | 83 +- .../react-stately/src/toast/useToastState.ts | 29 +- .../src/toggle/useToggleGroupState.ts | 38 +- .../src/toggle/useToggleState.ts | 24 +- .../src/tooltip/useTooltipTriggerState.ts | 32 +- .../react-stately/src/tree/TreeCollection.ts | 4 +- .../react-stately/src/tree/useTreeState.ts | 38 +- packages/react-stately/src/utils/number.ts | 18 +- .../src/utils/useControlledState.ts | 60 +- .../react-stately/src/virtualizer/Layout.ts | 5 +- .../src/virtualizer/LayoutInfo.ts | 2 +- .../react-stately/src/virtualizer/Rect.ts | 45 +- .../src/virtualizer/ReusableView.ts | 7 +- .../react-stately/src/virtualizer/Size.ts | 3 +- .../src/virtualizer/Virtualizer.ts | 64 +- .../react-stately/src/virtualizer/types.ts | 36 +- .../src/virtualizer/useVirtualizerState.ts | 115 +- .../stories/tree/useTreeState.stories.tsx | 33 +- .../react-stately/test/color/Color.test.tsx | 65 +- .../test/color/useColorFieldState.test.js | 32 +- .../test/combobox/useComboBoxState.test.js | 128 +- .../test/data/useAsyncList.test.js | 317 +- .../test/data/useListData.test.js | 96 +- .../test/data/useTreeData.test.js | 398 +- .../useDisclosureGroupState.test.ts | 17 +- .../disclosure/useDisclosureState.test.ts | 15 +- .../numberfield/useNumberFieldState.test.ts | 23 +- .../test/slider/useSliderState.test.js | 86 +- .../test/table/TableUtils.test.js | 328 +- .../test/toast/useToastState.test.js | 86 +- .../tooltip/useTooltipTriggerState.test.js | 96 +- .../react-stately/test/utils/number.test.ts | 6 +- .../test/utils/useControlledState.test.tsx | 142 +- .../test/virtualizer/LayoutInfo.test.tsx | 1 - .../fixtures/prefix.html | 4 +- .../fixtures/variants.html | 4 +- .../package.json | 20 +- .../src/index.d.ts | 8 +- .../src/index.js | 45 +- .../test/__snapshots__/index.test.js.snap | 10 +- .../test/index.test.js | 41 +- postcss.config.js | 2 +- scripts/addHeaders.js | 12 +- scripts/addMissingPeers.js | 11 +- scripts/api-diff.js | 55 +- scripts/buildBranchAPI.js | 66 +- scripts/buildEsm.js | 22 +- scripts/buildI18n.js | 43 +- scripts/buildIcons.js | 53 +- scripts/buildPublishedAPI.js | 113 +- scripts/buildRegistry.mjs | 38 +- scripts/buildWebsite.js | 78 +- scripts/bumpVersions.js | 72 +- scripts/changelog.js | 14 +- scripts/checkGroupSeparators.mjs | 9 +- scripts/cleanIcons.js | 6 +- scripts/compareAPIs.js | 221 +- scripts/compareSize.js | 17 +- scripts/convertAnatomy.js | 48 +- scripts/createExcelSheet.mjs | 63 +- scripts/createFeed.mjs | 78 +- scripts/createFeedS2.mjs | 26 +- scripts/diff.js | 17 +- scripts/extractExamples.mjs | 35 +- scripts/extractExamplesS2.mjs | 163 +- scripts/extractStarter.mjs | 103 +- scripts/fixUseClient.js | 5 +- scripts/generateAllPlurals.mjs | 36 +- scripts/generateIconDts.js | 11 +- scripts/generateS2IconIndex.js | 53 +- scripts/getCommitsForTesting.mjs | 34 +- scripts/icon-builder-fixture/package.json | 24 +- scripts/icon-builder-fixture/src/App.tsx | 5 +- scripts/icon-builder-fixture/src/index.html | 18 +- scripts/icon-builder-fixture/tsconfig.json | 14 +- scripts/lint-packages.js | 30 +- scripts/mapStaticColors.mjs | 6 +- scripts/merge-spectrum-css.js | 93 +- scripts/migrateDeps.mjs | 407 +- scripts/migrateIntl.mjs | 18 +- scripts/moveTypes.mjs | 5 +- scripts/oldReactSupport.mjs | 1 - scripts/processComponentImages.mjs | 16 +- scripts/react-16-install-prep.mjs | 6 +- scripts/react-17-install-prep.mjs | 6 +- scripts/react-18-install-prep.mjs | 1 - scripts/react-canary-install-prep.mjs | 8 +- scripts/removeUnusedDeps.js | 26 +- scripts/reportExports.js | 28 +- scripts/sendWeeklyExcelSheet.mjs | 14 +- scripts/setupTests.js | 24 +- scripts/testDocs.js | 41 +- scripts/updateParcel.js | 2 +- scripts/verdaccio-config.yaml | 2 +- scripts/verdaccio-generate-versions.js | 18 +- starters/docs/.babelrc.json | 9 +- starters/docs/.storybook/main.js | 22 +- starters/docs/.storybook/preview.js | 8 +- starters/docs/package.json | 16 +- starters/docs/src/Breadcrumbs.css | 2 +- starters/docs/src/Breadcrumbs.tsx | 12 +- starters/docs/src/Button.css | 4 +- starters/docs/src/Button.tsx | 18 +- starters/docs/src/Calendar.css | 7 +- starters/docs/src/Calendar.tsx | 46 +- starters/docs/src/Checkbox.css | 8 +- starters/docs/src/Checkbox.tsx | 52 +- starters/docs/src/CheckboxGroup.css | 6 +- starters/docs/src/CheckboxGroup.tsx | 29 +- starters/docs/src/ColorArea.css | 1 - starters/docs/src/ColorArea.tsx | 10 +- starters/docs/src/ColorField.css | 4 +- starters/docs/src/ColorField.tsx | 28 +- starters/docs/src/ColorPicker.css | 2 +- starters/docs/src/ColorPicker.tsx | 49 +- starters/docs/src/ColorSlider.css | 9 +- starters/docs/src/ColorSlider.tsx | 27 +- starters/docs/src/ColorSwatch.css | 2 +- starters/docs/src/ColorSwatch.tsx | 19 +- starters/docs/src/ColorSwatchPicker.css | 4 +- starters/docs/src/ColorSwatchPicker.tsx | 22 +- starters/docs/src/ColorThumb.css | 6 +- starters/docs/src/ColorThumb.tsx | 4 +- starters/docs/src/ColorWheel.tsx | 15 +- starters/docs/src/ComboBox.css | 6 +- starters/docs/src/ComboBox.tsx | 27 +- starters/docs/src/CommandPalette.css | 2 +- starters/docs/src/CommandPalette.tsx | 26 +- starters/docs/src/Content.css | 2 +- starters/docs/src/Content.tsx | 4 +- starters/docs/src/DateField.css | 6 +- starters/docs/src/DateField.tsx | 18 +- starters/docs/src/DatePicker.css | 2 +- starters/docs/src/DatePicker.tsx | 19 +- starters/docs/src/DateRangePicker.css | 8 +- starters/docs/src/DateRangePicker.tsx | 26 +- starters/docs/src/Dialog.css | 4 +- starters/docs/src/Dialog.tsx | 2 +- starters/docs/src/Disclosure.css | 4 +- starters/docs/src/Disclosure.tsx | 2 +- starters/docs/src/DisclosureGroup.css | 2 +- starters/docs/src/DisclosureGroup.tsx | 5 +- starters/docs/src/DropZone.css | 2 +- starters/docs/src/DropZone.tsx | 4 +- starters/docs/src/Form.css | 6 +- starters/docs/src/Form.tsx | 14 +- starters/docs/src/GridList.css | 30 +- starters/docs/src/GridList.tsx | 59 +- starters/docs/src/InputGroup.css | 4 +- starters/docs/src/InputGroup.tsx | 14 +- starters/docs/src/Link.css | 2 +- starters/docs/src/Link.tsx | 2 +- starters/docs/src/ListBox.css | 37 +- starters/docs/src/ListBox.tsx | 41 +- starters/docs/src/Menu.css | 15 +- starters/docs/src/Menu.tsx | 60 +- starters/docs/src/Meter.css | 14 +- starters/docs/src/Meter.tsx | 44 +- starters/docs/src/Modal.css | 4 +- starters/docs/src/Modal.tsx | 2 +- starters/docs/src/NumberField.css | 10 +- starters/docs/src/NumberField.tsx | 34 +- starters/docs/src/Popover.css | 18 +- starters/docs/src/Popover.tsx | 20 +- starters/docs/src/ProgressBar.css | 27 +- starters/docs/src/ProgressBar.tsx | 34 +- starters/docs/src/ProgressCircle.tsx | 104 +- starters/docs/src/RadioGroup.css | 14 +- starters/docs/src/RadioGroup.tsx | 36 +- starters/docs/src/RangeCalendar.css | 6 +- starters/docs/src/RangeCalendar.tsx | 53 +- starters/docs/src/SearchField.css | 13 +- starters/docs/src/SearchField.tsx | 32 +- starters/docs/src/SegmentedControl.css | 4 +- starters/docs/src/SegmentedControl.tsx | 22 +- starters/docs/src/Select.css | 6 +- starters/docs/src/Select.tsx | 46 +- starters/docs/src/Separator.css | 6 +- starters/docs/src/Separator.tsx | 6 +- starters/docs/src/Sheet.css | 4 +- starters/docs/src/Sheet.tsx | 8 +- starters/docs/src/Slider.css | 41 +- starters/docs/src/Slider.tsx | 65 +- starters/docs/src/Switch.css | 12 +- starters/docs/src/Switch.tsx | 36 +- starters/docs/src/Table.css | 21 +- starters/docs/src/Table.tsx | 120 +- starters/docs/src/Tabs.css | 10 +- starters/docs/src/Tabs.tsx | 14 +- starters/docs/src/TagGroup.css | 8 +- starters/docs/src/TagGroup.tsx | 73 +- starters/docs/src/TextField.css | 4 +- starters/docs/src/TextField.tsx | 14 +- starters/docs/src/TimeField.css | 2 +- starters/docs/src/TimeField.tsx | 18 +- starters/docs/src/Toast.css | 8 +- starters/docs/src/Toast.tsx | 4 +- starters/docs/src/ToggleButton.css | 4 +- starters/docs/src/ToggleButton.tsx | 14 +- starters/docs/src/ToggleButtonGroup.css | 6 +- starters/docs/src/ToggleButtonGroup.tsx | 5 +- starters/docs/src/Toolbar.css | 10 +- starters/docs/src/Toolbar.tsx | 9 +- starters/docs/src/Tooltip.css | 14 +- starters/docs/src/Tooltip.tsx | 22 +- starters/docs/src/Tree.css | 22 +- starters/docs/src/Tree.tsx | 27 +- starters/docs/src/theme.css | 20 +- starters/docs/src/utilities.css | 98 +- starters/docs/stories/Breadcrumbs.stories.tsx | 2 +- starters/docs/stories/Button.stories.tsx | 2 +- starters/docs/stories/Calendar.stories.tsx | 4 +- starters/docs/stories/Checkbox.stories.tsx | 3 +- .../docs/stories/CheckboxGroup.stories.tsx | 2 +- starters/docs/stories/ColorArea.stories.tsx | 2 +- starters/docs/stories/ColorField.stories.tsx | 2 +- starters/docs/stories/ColorPicker.stories.tsx | 2 +- starters/docs/stories/ColorSlider.stories.tsx | 2 +- starters/docs/stories/ColorSwatch.stories.tsx | 2 +- .../stories/ColorSwatchPicker.stories.tsx | 7 +- starters/docs/stories/ColorWheel.stories.tsx | 2 +- starters/docs/stories/ComboBox.stories.tsx | 2 +- .../docs/stories/CommandPalette.stories.tsx | 6 +- starters/docs/stories/DateField.stories.tsx | 2 +- starters/docs/stories/DatePicker.stories.tsx | 2 +- .../docs/stories/DateRangePicker.stories.tsx | 2 +- starters/docs/stories/Dialog.stories.tsx | 8 +- starters/docs/stories/Disclosure.stories.tsx | 3 +- .../docs/stories/DisclosureGroup.stories.tsx | 2 +- starters/docs/stories/Form.stories.tsx | 2 +- starters/docs/stories/GridList.stories.tsx | 175 +- starters/docs/stories/Link.stories.tsx | 2 +- starters/docs/stories/ListBox.stories.tsx | 46 +- starters/docs/stories/Menu.stories.tsx | 2 +- starters/docs/stories/Meter.stories.tsx | 2 +- starters/docs/stories/Modal.stories.tsx | 10 +- starters/docs/stories/NumberField.stories.tsx | 2 +- starters/docs/stories/Popover.stories.tsx | 6 +- starters/docs/stories/ProgressBar.stories.tsx | 2 +- starters/docs/stories/RadioGroup.stories.tsx | 2 +- .../docs/stories/RangeCalendar.stories.tsx | 4 +- starters/docs/stories/SearchField.stories.tsx | 2 +- starters/docs/stories/Select.stories.tsx | 2 +- starters/docs/stories/Slider.stories.tsx | 2 +- starters/docs/stories/Switch.stories.tsx | 2 +- starters/docs/stories/Table.stories.tsx | 2 +- starters/docs/stories/Tabs.stories.tsx | 14 +- starters/docs/stories/TagGroup.stories.tsx | 2 +- starters/docs/stories/TextField.stories.tsx | 2 +- starters/docs/stories/TimeField.stories.tsx | 2 +- starters/docs/stories/Toast.stories.tsx | 13 +- .../docs/stories/ToggleButton.stories.tsx | 2 +- .../stories/ToggleButtonGroup.stories.tsx | 2 +- starters/docs/stories/Toolbar.stories.tsx | 8 +- starters/docs/stories/Tooltip.stories.tsx | 6 +- starters/docs/stories/Tree.stories.tsx | 4 +- starters/docs/stories/styles.css | 2 +- starters/docs/tsconfig.json | 11 +- starters/tailwind/.storybook/main.js | 19 +- starters/tailwind/.storybook/preview.js | 6 +- starters/tailwind/package.json | 24 +- starters/tailwind/src/AlertDialog.tsx | 43 +- starters/tailwind/src/Breadcrumbs.tsx | 26 +- starters/tailwind/src/Button.tsx | 48 +- starters/tailwind/src/Calendar.tsx | 63 +- starters/tailwind/src/Checkbox.tsx | 63 +- starters/tailwind/src/CheckboxGroup.tsx | 20 +- starters/tailwind/src/ColorArea.tsx | 16 +- starters/tailwind/src/ColorField.tsx | 16 +- starters/tailwind/src/ColorPicker.tsx | 21 +- starters/tailwind/src/ColorSlider.tsx | 28 +- starters/tailwind/src/ColorSwatch.tsx | 17 +- starters/tailwind/src/ColorSwatchPicker.tsx | 30 +- starters/tailwind/src/ColorThumb.tsx | 13 +- starters/tailwind/src/ColorWheel.tsx | 13 +- starters/tailwind/src/ComboBox.tsx | 48 +- starters/tailwind/src/CommandPalette.tsx | 19 +- starters/tailwind/src/DateField.tsx | 33 +- starters/tailwind/src/DatePicker.tsx | 35 +- starters/tailwind/src/DateRangePicker.tsx | 41 +- starters/tailwind/src/Dialog.tsx | 14 +- starters/tailwind/src/Disclosure.tsx | 47 +- starters/tailwind/src/DisclosureGroup.tsx | 14 +- starters/tailwind/src/DropZone.tsx | 19 +- starters/tailwind/src/Field.tsx | 73 +- starters/tailwind/src/FieldButton.tsx | 21 +- starters/tailwind/src/Form.tsx | 4 +- starters/tailwind/src/GridList.tsx | 69 +- starters/tailwind/src/Link.tsx | 25 +- starters/tailwind/src/ListBox.tsx | 68 +- starters/tailwind/src/Menu.tsx | 85 +- starters/tailwind/src/Meter.tsx | 34 +- starters/tailwind/src/Modal.tsx | 4 +- starters/tailwind/src/NumberField.tsx | 64 +- starters/tailwind/src/Popover.tsx | 28 +- starters/tailwind/src/ProgressBar.tsx | 25 +- starters/tailwind/src/RadioGroup.tsx | 42 +- starters/tailwind/src/RangeCalendar.tsx | 105 +- starters/tailwind/src/SearchField.tsx | 37 +- starters/tailwind/src/Select.tsx | 49 +- starters/tailwind/src/Separator.tsx | 7 +- starters/tailwind/src/Slider.tsx | 67 +- starters/tailwind/src/Switch.tsx | 36 +- starters/tailwind/src/Table.tsx | 120 +- starters/tailwind/src/Tabs.tsx | 55 +- starters/tailwind/src/TagGroup.tsx | 70 +- starters/tailwind/src/TextField.tsx | 16 +- starters/tailwind/src/TimeField.tsx | 24 +- starters/tailwind/src/Toast.tsx | 14 +- starters/tailwind/src/ToggleButton.tsx | 22 +- starters/tailwind/src/ToggleButtonGroup.tsx | 14 +- starters/tailwind/src/Toolbar.tsx | 18 +- starters/tailwind/src/Tooltip.tsx | 25 +- starters/tailwind/src/Tree.tsx | 48 +- starters/tailwind/src/utils.ts | 13 +- .../tailwind/stories/AlertDialog.stories.tsx | 13 +- .../tailwind/stories/Breadcrumbs.stories.tsx | 4 +- starters/tailwind/stories/Button.stories.tsx | 10 +- .../tailwind/stories/Calendar.stories.tsx | 8 +- .../tailwind/stories/Checkbox.stories.tsx | 6 +- .../stories/CheckboxGroup.stories.tsx | 32 +- .../tailwind/stories/ColorArea.stories.tsx | 5 +- .../tailwind/stories/ColorField.stories.tsx | 4 +- .../tailwind/stories/ColorPicker.stories.tsx | 4 +- .../tailwind/stories/ColorSlider.stories.tsx | 4 +- .../tailwind/stories/ColorSwatch.stories.tsx | 4 +- .../stories/ColorSwatchPicker.stories.tsx | 4 +- .../tailwind/stories/ColorWheel.stories.tsx | 4 +- .../tailwind/stories/ComboBox.stories.tsx | 14 +- .../stories/CommandPalette.stories.tsx | 14 +- .../tailwind/stories/DateField.stories.tsx | 12 +- .../tailwind/stories/DatePicker.stories.tsx | 12 +- .../stories/DateRangePicker.stories.tsx | 12 +- .../tailwind/stories/Disclosure.stories.tsx | 10 +- .../stories/DisclosureGroup.stories.tsx | 13 +- starters/tailwind/stories/Form.stories.tsx | 14 +- .../tailwind/stories/GridList.stories.tsx | 6 +- starters/tailwind/stories/Link.stories.tsx | 10 +- starters/tailwind/stories/ListBox.stories.tsx | 4 +- starters/tailwind/stories/Menu.stories.tsx | 8 +- starters/tailwind/stories/Meter.stories.tsx | 4 +- .../tailwind/stories/NumberField.stories.tsx | 12 +- starters/tailwind/stories/Popover.stories.tsx | 22 +- .../tailwind/stories/ProgressBar.stories.tsx | 4 +- .../tailwind/stories/RadioGroup.stories.tsx | 26 +- .../stories/RangeCalendar.stories.tsx | 8 +- .../tailwind/stories/SearchField.stories.tsx | 12 +- starters/tailwind/stories/Select.stories.tsx | 12 +- starters/tailwind/stories/Slider.stories.tsx | 4 +- starters/tailwind/stories/Switch.stories.tsx | 4 +- starters/tailwind/stories/Table.stories.tsx | 33 +- starters/tailwind/stories/Tabs.stories.tsx | 16 +- .../tailwind/stories/TagGroup.stories.tsx | 6 +- .../tailwind/stories/TextField.stories.tsx | 12 +- .../tailwind/stories/TimeField.stories.tsx | 12 +- starters/tailwind/stories/Toast.stories.tsx | 13 +- .../tailwind/stories/ToggleButton.stories.tsx | 4 +- .../stories/ToggleButtonGroup.stories.tsx | 20 +- starters/tailwind/stories/Toolbar.stories.tsx | 16 +- starters/tailwind/stories/Tooltip.stories.tsx | 18 +- starters/tailwind/stories/Tree.stories.tsx | 24 +- starters/tailwind/tsconfig.json | 11 +- test/browser/setup.ts | 14 +- tsconfig.build.json | 6 +- tsconfig.json | 13 +- vitest.browser.config.ts | 8 +- yarn.config.cjs | 105 +- yarn.lock | 226 +- 3117 files changed, 150312 insertions(+), 76938 deletions(-) create mode 100644 .oxfmtrc.json create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json diff --git a/.chromatic-fc/custom-addons/chromatic/index.js b/.chromatic-fc/custom-addons/chromatic/index.js index 65e774a8d17..6f23a3a33f4 100644 --- a/.chromatic-fc/custom-addons/chromatic/index.js +++ b/.chromatic-fc/custom-addons/chromatic/index.js @@ -10,7 +10,7 @@ export const withChromaticProvider = makeDecorator({ parameterName: 'chromaticProvider', wrapper: (getStory, context, {options, parameters}) => { options = {express: false, ...options, ...parameters}; - let selectedLocales + let selectedLocales; if (options.locales && options.locales.length) { selectedLocales = options.locales; } else { @@ -19,16 +19,34 @@ export const withChromaticProvider = makeDecorator({ let height; let minHeight; - if(isNaN(options.height)) { + if (isNaN(options.height)) { minHeight = 1000; } else { height = options.height; } if (context.title.includes('S2/')) { - return + return ( + + ); } else { - return + return ( + + ); } } }); @@ -40,25 +58,36 @@ function RenderS2({getStory, context, options, selectedLocales, height, minHeigh
{colorSchemes.map(colorScheme => - (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale => - + (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale => ( +
-

{`${colorScheme}, base, ${locale}`}

+

{`${colorScheme}, base, ${locale}`}

{getStory(context)}
- ) + )) )}
- ) + ); } function RenderV3({getStory, context, options, selectedLocales, height, minHeight}) { - let colorSchemes = options.express ? [] : (options.colorSchemes || ['light']); + let colorSchemes = options.express ? [] : options.colorSchemes || ['light']; let scalesToRender = options.scales || ['medium']; - let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light; - let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light'; + let expressTheme = + colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light; + let expressColorScheme = + colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light'; let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium'; let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US'; @@ -67,27 +96,41 @@ function RenderV3({getStory, context, options, selectedLocales, height, minHeigh
{colorSchemes.map(colorScheme => scalesToRender.map(scale => - (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale => - + (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale => ( +

{`${colorScheme}, ${scale}, ${locale}`}

{getStory(context)} - ) + )) ) )} - {options.express !== false && - + {options.express !== false && ( + -

express, {expressColorScheme}, {expressScale}, {expressLocale}

+

+ express, {expressColorScheme}, {expressScale}, {expressLocale} +

{getStory(context)} - } + )}
- ) + ); } function DisableAnimations({children, disableAnimations}) { diff --git a/.chromatic-fc/layout.js b/.chromatic-fc/layout.js index ed9b1e43447..8c02f562f8b 100644 --- a/.chromatic-fc/layout.js +++ b/.chromatic-fc/layout.js @@ -3,11 +3,8 @@ import React from 'react'; export function VerticalCenter({children, className, style}) { return ( -
- { children } +
+ {children}
); } diff --git a/.chromatic-fc/main.mjs b/.chromatic-fc/main.mjs index 997be771c99..8abcc5fbab3 100644 --- a/.chromatic-fc/main.mjs +++ b/.chromatic-fc/main.mjs @@ -1,17 +1,14 @@ - export default { framework: { name: 'storybook-react-parcel', - options: {}, + options: {} }, stories: [ '../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}', '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)' ], - addons: process.env.NODE_ENV === 'production' ? [] : [ - 'storybook/actions', - '@storybook/addon-a11y' - ], + addons: + process.env.NODE_ENV === 'production' ? [] : ['storybook/actions', '@storybook/addon-a11y'], typescript: { check: false, reactDocgen: false diff --git a/.chromatic-fc/manager.js b/.chromatic-fc/manager.js index f5b5f6f1903..68aee3b6f3e 100644 --- a/.chromatic-fc/manager.js +++ b/.chromatic-fc/manager.js @@ -3,6 +3,6 @@ import {addons} from 'storybook/manager-api'; addons.setConfig({ enableShortcuts: false, sidebar: { - showRoots: false, + showRoots: false } }); diff --git a/.chromatic-fc/preview-head.html b/.chromatic-fc/preview-head.html index 9019bc78375..e21ac98bfca 100644 --- a/.chromatic-fc/preview-head.html +++ b/.chromatic-fc/preview-head.html @@ -22,16 +22,56 @@ c77d41 font: adobe-clean, style: italic, weight: 800 f5ecaa font: adobe-clean, style: italic, weight: 300 --> - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - + + + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - + + diff --git a/.chromatic-fc/preview.js b/.chromatic-fc/preview.js index 0346e38a8e1..bc84ab59fa1 100644 --- a/.chromatic-fc/preview.js +++ b/.chromatic-fc/preview.js @@ -3,7 +3,6 @@ import React from 'react'; import {VerticalCenter} from './layout'; import {withChromaticProvider} from './custom-addons/chromatic'; - // decorator order matters, the last one will be the outer most configureActions({ @@ -26,7 +25,14 @@ export const parameters = { export const decorators = [ story => ( - + {story()} ), diff --git a/.chromatic/custom-addons/chromatic/index.js b/.chromatic/custom-addons/chromatic/index.js index 053fd17d1d0..d8b23247634 100644 --- a/.chromatic/custom-addons/chromatic/index.js +++ b/.chromatic/custom-addons/chromatic/index.js @@ -1,4 +1,11 @@ -import {expressThemes, locales, S2Backgrounds, S2ColorThemes, scales, themes} from '../../constants'; +import { + expressThemes, + locales, + S2Backgrounds, + S2ColorThemes, + scales, + themes +} from '../../constants'; import {makeDecorator} from 'storybook/preview-api'; import {Provider, View} from '@adobe/react-spectrum'; import {Provider as S2Provider} from '@react-spectrum/s2'; @@ -12,7 +19,7 @@ export const withChromaticProvider = makeDecorator({ parameterName: 'chromaticProvider', wrapper: (getStory, context, {options, parameters}) => { options = {...options, ...parameters}; - let selectedLocales + let selectedLocales; if (options.locales && options.locales.length) { selectedLocales = options.locales; } else { @@ -21,16 +28,34 @@ export const withChromaticProvider = makeDecorator({ let height; let minHeight; - if(isNaN(options.height)) { + if (isNaN(options.height)) { minHeight = 1000; } else { height = options.height; } if (context.title.includes('S2')) { - return + return ( + + ); } else { - return + return ( + + ); } } }); @@ -45,27 +70,41 @@ function RenderS2({getStory, context, options, selectedLocales, height, minHeigh
{colorSchemes.map(colorScheme => backgrounds.map(background => - (colorScheme === 'light' || context.title.includes('RTL') ? selectedLocales : ['en-US']).map(locale => - + (colorScheme === 'light' || context.title.includes('RTL') + ? selectedLocales + : ['en-US'] + ).map(locale => ( +
-

{`${colorScheme}, ${background}, ${locale}`}

+

{`${colorScheme}, ${background}, ${locale}`}

{getStory(context)}
- ) + )) ) )}
- ) + ); } function RenderV3({getStory, context, options, selectedLocales, height, minHeight}) { - let colorSchemes = options.express ? [] : (options.colorSchemes || Object.keys(themes)); + let colorSchemes = options.express ? [] : options.colorSchemes || Object.keys(themes); let scalesToRender = options.scales || Object.keys(scales); - let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light; - let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light'; + let expressTheme = + colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light; + let expressColorScheme = + colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light'; let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium'; let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US'; @@ -73,29 +112,43 @@ function RenderV3({getStory, context, options, selectedLocales, height, minHeigh return (
- {colorSchemes.map(colorScheme => - scalesToRender.map(scale => - (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale => - - -

{`${colorScheme}, ${scale}, ${locale}`}

- {getStory(context)} - - - ) - ) - )} - {options.express !== false && - - -

express, {expressColorScheme}, {expressScale}, {expressLocale}

- {getStory(context)} - - - } + {colorSchemes.map(colorScheme => + scalesToRender.map(scale => + (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale => ( + + +

{`${colorScheme}, ${scale}, ${locale}`}

+ {getStory(context)} + + + )) + ) + )} + {options.express !== false && ( + + +

+ express, {expressColorScheme}, {expressScale}, {expressLocale} +

+ {getStory(context)} + + + )}
- ) + ); } function DisableAnimations({children, disableAnimations}) { diff --git a/.chromatic/layout.js b/.chromatic/layout.js index ed9b1e43447..8c02f562f8b 100644 --- a/.chromatic/layout.js +++ b/.chromatic/layout.js @@ -3,11 +3,8 @@ import React from 'react'; export function VerticalCenter({children, className, style}) { return ( -
- { children } +
+ {children}
); } diff --git a/.chromatic/main.mjs b/.chromatic/main.mjs index 09ffdcf94fe..1eecedc39ad 100644 --- a/.chromatic/main.mjs +++ b/.chromatic/main.mjs @@ -1,23 +1,20 @@ - export default { framework: { name: 'storybook-react-parcel', - options: {}, + options: {} }, stories: [ '../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)', '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)' ], - addons: process.env.NODE_ENV === 'production' ? [] : [ - 'storybook/actions', - '@storybook/addon-a11y' - ], + addons: + process.env.NODE_ENV === 'production' ? [] : ['storybook/actions', '@storybook/addon-a11y'], typescript: { check: false, reactDocgen: false }, core: { - disableWhatsNewNotifications: true + disableWhatsNewNotifications: true }, features: { sidebarOnboardingChecklist: false diff --git a/.chromatic/manager.js b/.chromatic/manager.js index f5b5f6f1903..68aee3b6f3e 100644 --- a/.chromatic/manager.js +++ b/.chromatic/manager.js @@ -3,6 +3,6 @@ import {addons} from 'storybook/manager-api'; addons.setConfig({ enableShortcuts: false, sidebar: { - showRoots: false, + showRoots: false } }); diff --git a/.chromatic/preview-head.html b/.chromatic/preview-head.html index 53c9a34cedb..4e2301b39be 100644 --- a/.chromatic/preview-head.html +++ b/.chromatic/preview-head.html @@ -22,16 +22,56 @@ c77d41 font: adobe-clean, style: italic, weight: 800 f5ecaa font: adobe-clean, style: italic, weight: 300 --> - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - + + + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - - + + + + - + diff --git a/.chromatic/preview.js b/.chromatic/preview.js index 9eec4835f83..48f97abc75a 100644 --- a/.chromatic/preview.js +++ b/.chromatic/preview.js @@ -3,7 +3,6 @@ import React from 'react'; import {VerticalCenter} from './layout'; import {withChromaticProvider} from './custom-addons/chromatic'; - // decorator order matters, the last one will be the outer most configureActions({ @@ -23,7 +22,14 @@ export const parameters = { export const decorators = [ story => ( - + {story()} ), diff --git a/.circleci/api-comment.js b/.circleci/api-comment.js index fb30bca8c69..dfbc3c08c7e 100644 --- a/.circleci/api-comment.js +++ b/.circleci/api-comment.js @@ -22,7 +22,11 @@ async function run() { }); // Check if it is a merge commit from the github "Branch from fork action" - if (commit && commit.data?.parents?.length === 2 && commit.data.message.indexOf('Merge') > -1) { + if ( + commit && + commit.data?.parents?.length === 2 && + commit.data.message.indexOf('Merge') > -1 + ) { // Unfortunately listPullRequestsAssociatedWithCommit doesn't return fork prs so have to use search api // to find the fork PR the original commit lives in const forkHeadCommit = commit.data.parents[1].sha; @@ -31,14 +35,20 @@ async function run() { }); // Look for a PR that is from a fork and has a matching head commit as the current branch - const pullNumbers = searchRes.data.items.filter(i => i.pull_request !== undefined).map(j => j.number); + const pullNumbers = searchRes.data.items + .filter(i => i.pull_request !== undefined) + .map(j => j.number); for (let pull_number of pullNumbers) { const {data} = await octokit.pulls.get({ owner: 'adobe', repo: 'react-spectrum', pull_number }); - if (data && data.head.repo.full_name !== 'adobe/react-spectrum' && data.head.sha === forkHeadCommit) { + if ( + data && + data.head.repo.full_name !== 'adobe/react-spectrum' && + data.head.sha === forkHeadCommit + ) { pr = pull_number; break; } @@ -57,7 +67,7 @@ async function run() { try { diffs = fs.readFileSync('/tmp/dist/ts-diff.txt'); } catch (e) { - console.log('No TS Diff output to run on.') + console.log('No TS Diff output to run on.'); return; } if (diffs.length > 0) { @@ -70,7 +80,7 @@ async function run() { body: `${commentKey}## API Changes ${diffs} ` - }) + }); } // create new comment await octokit.issues.createComment({ diff --git a/.circleci/comment.js b/.circleci/comment.js index 49bbd89f65b..88cda2d00ad 100644 --- a/.circleci/comment.js +++ b/.circleci/comment.js @@ -19,7 +19,11 @@ async function run() { }); // Check if it is a merge commit from the github "Branch from fork action" - if (commit && commit.data?.parents?.length === 2 && commit.data.message.indexOf('Merge') > -1) { + if ( + commit && + commit.data?.parents?.length === 2 && + commit.data.message.indexOf('Merge') > -1 + ) { // Unfortunately listPullRequestsAssociatedWithCommit doesn't return fork prs so have to use search api // to find the fork PR the original commit lives in const forkHeadCommit = commit.data.parents[1].sha; @@ -28,7 +32,9 @@ async function run() { }); // Look for a PR that is from a fork and has a matching head commit as the current branch - const pullNumbers = searchRes.data.items.filter(i => i.pull_request !== undefined).map(j => j.number); + const pullNumbers = searchRes.data.items + .filter(i => i.pull_request !== undefined) + .map(j => j.number); for (let pull_number of pullNumbers) { const {data} = await octokit.pulls.get({ owner: 'adobe', @@ -36,7 +42,11 @@ async function run() { pull_number }); // eslint-disable-next-line max-depth - if (data && data.head.repo.full_name !== 'adobe/react-spectrum' && data.head.sha === forkHeadCommit) { + if ( + data && + data.head.repo.full_name !== 'adobe/react-spectrum' && + data.head.sha === forkHeadCommit + ) { pr = pull_number; break; } diff --git a/.circleci/config.yml b/.circleci/config.yml index b127b021741..b63f80e2da8 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -2,16 +2,16 @@ version: 2.1 parameters: GHA_Event: type: string - default: "" + default: '' GHA_Actor: type: string - default: "" + default: '' GHA_Action: type: string - default: "" + default: '' GHA_Meta: type: string - default: "" + default: '' orbs: aws-cli: circleci/aws-cli@5.4.1 @@ -70,7 +70,7 @@ commands: - aws-cli/setup: role_arn: $AWS_ROLE_ARN region: $AWS_DEFAULT_REGION - role_session_name: "CircleCI-Deploy-Session" + role_session_name: 'CircleCI-Deploy-Session' - run: name: Verify AWS CLI setup command: aws sts get-caller-identity @@ -962,7 +962,7 @@ workflows: - install filters: branches: - ignore: + ignore: - /main$/ - /gh-readonly-queue\/.*$/ - ts-build-branch: @@ -970,7 +970,7 @@ workflows: - install filters: branches: - ignore: + ignore: - /main$/ - /gh-readonly-queue\/.*$/ - ts-diff: @@ -979,7 +979,7 @@ workflows: - ts-build-branch filters: branches: - ignore: + ignore: - /main$/ - /gh-readonly-queue\/.*$/ - typecheck-docs: @@ -1101,10 +1101,10 @@ workflows: prod-docs: when: and: - - equal: [ "prod-docs", << pipeline.parameters.GHA_Action >> ] + - equal: ['prod-docs', << pipeline.parameters.GHA_Action >>] - or: - - equal: [ "release", << pipeline.parameters.GHA_Event >>] - - equal: [ "workflow_dispatch", << pipeline.parameters.GHA_Event >>] + - equal: ['release', << pipeline.parameters.GHA_Event >>] + - equal: ['workflow_dispatch', << pipeline.parameters.GHA_Event >>] jobs: - install - s2-docs-production: @@ -1123,7 +1123,7 @@ workflows: nightly: triggers: - schedule: - cron: "0 9 * * *" # 02:00 PDT + cron: '0 9 * * *' # 02:00 PDT filters: branches: only: @@ -1135,8 +1135,8 @@ workflows: nightly-manual: when: and: - - equal: [ "nightly", << pipeline.parameters.GHA_Action >> ] - - equal: [ "workflow_dispatch", << pipeline.parameters.GHA_Event >>] + - equal: ['nightly', << pipeline.parameters.GHA_Action >>] + - equal: ['workflow_dispatch', << pipeline.parameters.GHA_Event >>] jobs: - install - publish-nightly diff --git a/.github/ISSUE_TEMPLATE/Bug_Report.yml b/.github/ISSUE_TEMPLATE/Bug_Report.yml index ea825348e06..3e2a54a9399 100644 --- a/.github/ISSUE_TEMPLATE/Bug_Report.yml +++ b/.github/ISSUE_TEMPLATE/Bug_Report.yml @@ -3,10 +3,10 @@ description: File a bug report body: - type: markdown attributes: - value: "### Thanks for filing an issue! Before you submit, search open/closed issues before submitting since someone might have asked the same thing before!" + value: '### Thanks for filing an issue! Before you submit, search open/closed issues before submitting since someone might have asked the same thing before!' - type: markdown attributes: - value: "# 🐛 Bug Report " + value: '# 🐛 Bug Report ' - type: textarea id: general-summary attributes: @@ -61,7 +61,7 @@ body: required: true - type: markdown attributes: - value: "## 🌍 Your Environment" + value: '## 🌍 Your Environment' - type: input id: version attributes: @@ -94,7 +94,7 @@ body: required: true - type: markdown attributes: - value: "## 🦄 Other" + value: '## 🦄 Other' - type: input id: company-team attributes: diff --git a/.github/ISSUE_TEMPLATE/Documentation.yml b/.github/ISSUE_TEMPLATE/Documentation.yml index 3149446f5a7..a8aec4b2d3c 100644 --- a/.github/ISSUE_TEMPLATE/Documentation.yml +++ b/.github/ISSUE_TEMPLATE/Documentation.yml @@ -3,7 +3,7 @@ description: Have an issue or improvement for the react-spectrum documentation? body: - type: markdown attributes: - value: "### Thanks for filing an issue! Before you submit, search open/closed issues before submitting since someone might have asked the same thing before!" + value: '### Thanks for filing an issue! Before you submit, search open/closed issues before submitting since someone might have asked the same thing before!' - type: textarea id: documentation-request attributes: diff --git a/.github/ISSUE_TEMPLATE/Feature_Request.yml b/.github/ISSUE_TEMPLATE/Feature_Request.yml index 94fbe02d3f3..e8cc3fa8404 100644 --- a/.github/ISSUE_TEMPLATE/Feature_Request.yml +++ b/.github/ISSUE_TEMPLATE/Feature_Request.yml @@ -3,10 +3,10 @@ description: Want to add a feature to react-spectrum? body: - type: markdown attributes: - value: "### Thanks for filing an issue! Before you submit, search open/closed issues before submitting since someone might have asked the same thing before!" + value: '### Thanks for filing an issue! Before you submit, search open/closed issues before submitting since someone might have asked the same thing before!' - type: markdown attributes: - value: "# 🙋 Feature Request" + value: '# 🙋 Feature Request' - type: textarea id: general-summary attributes: @@ -31,14 +31,14 @@ body: id: possible-solution attributes: label: 💁 Possible Solution - description: Ideas how to implement this feature or a similar solution/workaround that already exists + description: Ideas how to implement this feature or a similar solution/workaround that already exists validations: required: false - type: textarea id: context attributes: label: 🔦 Context - description: | + description: | Providing context helps us come up with a solution that is most useful in the real world. How has this issue affected you? What are you trying to accomplish? validations: @@ -50,7 +50,7 @@ body: description: Examples help us understand the requested feature better. Include design mocks here if possible. - type: markdown attributes: - value: "## 🦄 Other" + value: '## 🦄 Other' - type: input id: company-team attributes: diff --git a/.github/ISSUE_TEMPLATE/Feedback.yml b/.github/ISSUE_TEMPLATE/Feedback.yml index cd909d0270e..1eb12cf93b3 100644 --- a/.github/ISSUE_TEMPLATE/Feedback.yml +++ b/.github/ISSUE_TEMPLATE/Feedback.yml @@ -3,10 +3,10 @@ description: Have some feedback? body: - type: markdown attributes: - value: "### Thanks for filing an issue! Before you submit, search open/closed issues before submitting since someone might have asked the same thing before!" + value: '### Thanks for filing an issue! Before you submit, search open/closed issues before submitting since someone might have asked the same thing before!' - type: markdown attributes: - value: "# 📝 Feedback" + value: '# 📝 Feedback' - type: textarea attributes: label: Provide your feedback here. @@ -16,7 +16,7 @@ body: id: content attributes: label: 🔦 Context - description: | + description: | How has this issue affected you? What are you trying to accomplish? - type: textarea @@ -26,7 +26,7 @@ body: description: If you have an example are seeing an error, please provide a code repository, gist or sample files to reproduce the issue - type: markdown attributes: - value: "## 🌍 Your Environment" + value: '## 🌍 Your Environment' - type: input id: version attributes: diff --git a/.github/actions/branch/index.js b/.github/actions/branch/index.js index 68f400a9f4e..3b1c4386192 100644 --- a/.github/actions/branch/index.js +++ b/.github/actions/branch/index.js @@ -49,7 +49,7 @@ async function run() { sha, ref: `heads/${branch}`, force: true - }) + }); } } } catch (error) { diff --git a/.github/actions/permissions/index.js b/.github/actions/permissions/index.js index b1bf79f780a..ceea64a70a4 100644 --- a/.github/actions/permissions/index.js +++ b/.github/actions/permissions/index.js @@ -12,8 +12,8 @@ async function run() { username: context.actor }); - if (!['admin','write'].includes(data.permission)) { - core.setFailed('User doesn\'t have write permissions or higher'); + if (!['admin', 'write'].includes(data.permission)) { + core.setFailed("User doesn't have write permissions or higher"); } } catch (error) { core.setFailed(error.message); diff --git a/.github/labeler.yml b/.github/labeler.yml index 22f72899f54..2ee0b684f5f 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -1,330 +1,329 @@ needs translations: -- changed-files: - - any-glob-to-any-file: ['**/intl/*.json'] + - changed-files: + - any-glob-to-any-file: ['**/intl/*.json'] S2: -- changed-files: - - any-glob-to-any-file: ['**/s2/**'] + - changed-files: + - any-glob-to-any-file: ['**/s2/**'] RAC: -- changed-files: - - any-glob-to-any-file: ['**/react-aria-components/**', '**/@react-aria/**'] + - changed-files: + - any-glob-to-any-file: ['**/react-aria-components/**', '**/@react-aria/**'] v3: -- all: - - changed-files: - - any-glob-to-any-file: '**/@react-spectrum/**' - - all-globs-to-all-files: '!**/@react-spectrum/s2/**' + - all: + - changed-files: + - any-glob-to-any-file: '**/@react-spectrum/**' + - all-globs-to-all-files: '!**/@react-spectrum/s2/**' Accordion: -- changed-files: - - any-glob-to-any-file: '**/Accordion.tsx' + - changed-files: + - any-glob-to-any-file: '**/Accordion.tsx' ActionBar: -- changed-files: - - any-glob-to-any-file: '**/ActionBar.tsx' + - changed-files: + - any-glob-to-any-file: '**/ActionBar.tsx' ActionButton: -- changed-files: - - any-glob-to-any-file: '**/ActionButton.tsx' + - changed-files: + - any-glob-to-any-file: '**/ActionButton.tsx' ActionButtonGroup: -- changed-files: - - any-glob-to-any-file: '**/ActionButtonGroup.tsx' + - changed-files: + - any-glob-to-any-file: '**/ActionButtonGroup.tsx' ActionMenu: -- changed-files: - - any-glob-to-any-file: '**/ActionMenu.tsx' + - changed-files: + - any-glob-to-any-file: '**/ActionMenu.tsx' Autocomplete: -- changed-files: - - any-glob-to-any-file: '**/Autocomplete.tsx' + - changed-files: + - any-glob-to-any-file: '**/Autocomplete.tsx' Avatar: -- changed-files: - - any-glob-to-any-file: '**/Avatar.tsx' + - changed-files: + - any-glob-to-any-file: '**/Avatar.tsx' AvatarGroup: -- changed-files: - - any-glob-to-any-file: '**/AvatarGroup.tsx' + - changed-files: + - any-glob-to-any-file: '**/AvatarGroup.tsx' Badge: -- changed-files: - - any-glob-to-any-file: '**/Badge.tsx' + - changed-files: + - any-glob-to-any-file: '**/Badge.tsx' Breadcrumbs: -- changed-files: - - any-glob-to-any-file: '**/Breadcrumbs.tsx' + - changed-files: + - any-glob-to-any-file: '**/Breadcrumbs.tsx' Button: -- changed-files: - - any-glob-to-any-file: '**/Button.tsx' + - changed-files: + - any-glob-to-any-file: '**/Button.tsx' ButtonGroup: -- changed-files: - - any-glob-to-any-file: '**/ButtonGroup.tsx' + - changed-files: + - any-glob-to-any-file: '**/ButtonGroup.tsx' Calendar: -- changed-files: - - any-glob-to-any-file: '**/Calendar.tsx' + - changed-files: + - any-glob-to-any-file: '**/Calendar.tsx' Card: -- changed-files: - - any-glob-to-any-file: '**/Card.tsx' + - changed-files: + - any-glob-to-any-file: '**/Card.tsx' CardView: -- changed-files: - - any-glob-to-any-file: '**/CardView.tsx' + - changed-files: + - any-glob-to-any-file: '**/CardView.tsx' Checkbox: -- changed-files: - - any-glob-to-any-file: '**/Checkbox.tsx' + - changed-files: + - any-glob-to-any-file: '**/Checkbox.tsx' CheckboxGroup: -- changed-files: - - any-glob-to-any-file: '**/CheckboxGroup.tsx' + - changed-files: + - any-glob-to-any-file: '**/CheckboxGroup.tsx' ColorArea: -- changed-files: - - any-glob-to-any-file: '**/ColorArea.tsx' + - changed-files: + - any-glob-to-any-file: '**/ColorArea.tsx' ColorField: -- changed-files: - - any-glob-to-any-file: '**/ColorField.tsx' + - changed-files: + - any-glob-to-any-file: '**/ColorField.tsx' ColorPicker: -- changed-files: - - any-glob-to-any-file: '**/ColorPicker.tsx' + - changed-files: + - any-glob-to-any-file: '**/ColorPicker.tsx' ColorSlider: -- changed-files: - - any-glob-to-any-file: '**/ColorSlider.tsx' + - changed-files: + - any-glob-to-any-file: '**/ColorSlider.tsx' ColorSwatch: -- changed-files: - - any-glob-to-any-file: '**/ColorSwatch.tsx' + - changed-files: + - any-glob-to-any-file: '**/ColorSwatch.tsx' ColorSwatchPicker: -- changed-files: - - any-glob-to-any-file: '**/ColorSwatchPicker.tsx' + - changed-files: + - any-glob-to-any-file: '**/ColorSwatchPicker.tsx' ColorWheel: -- changed-files: - - any-glob-to-any-file: '**/ColorWheel.tsx' + - changed-files: + - any-glob-to-any-file: '**/ColorWheel.tsx' ComboBox: -- changed-files: - - any-glob-to-any-file: '**/ComboBox.tsx' + - changed-files: + - any-glob-to-any-file: '**/ComboBox.tsx' ContextualHelp: -- changed-files: - - any-glob-to-any-file: '**/ContextualHelp.tsx' + - changed-files: + - any-glob-to-any-file: '**/ContextualHelp.tsx' DateField: -- changed-files: - - any-glob-to-any-file: '**/DateField.tsx' + - changed-files: + - any-glob-to-any-file: '**/DateField.tsx' DatePicker: -- changed-files: - - any-glob-to-any-file: '**/DatePicker.tsx' + - changed-files: + - any-glob-to-any-file: '**/DatePicker.tsx' DateRangePicker: -- changed-files: - - any-glob-to-any-file: '**/DateRangePicker.tsx' + - changed-files: + - any-glob-to-any-file: '**/DateRangePicker.tsx' Dialog: -- changed-files: - - any-glob-to-any-file: '**/Dialog.tsx' + - changed-files: + - any-glob-to-any-file: '**/Dialog.tsx' Disclosure: -- changed-files: - - any-glob-to-any-file: '**/Disclosure.tsx' + - changed-files: + - any-glob-to-any-file: '**/Disclosure.tsx' DisclosureGroup: -- changed-files: - - any-glob-to-any-file: '**/DisclosureGroup.tsx' + - changed-files: + - any-glob-to-any-file: '**/DisclosureGroup.tsx' Divider: -- changed-files: - - any-glob-to-any-file: '**/Divider.tsx' + - changed-files: + - any-glob-to-any-file: '**/Divider.tsx' DropZone: -- changed-files: - - any-glob-to-any-file: '**/DropZone.tsx' + - changed-files: + - any-glob-to-any-file: '**/DropZone.tsx' FileTrigger: -- changed-files: - - any-glob-to-any-file: '**/FileTrigger.tsx' + - changed-files: + - any-glob-to-any-file: '**/FileTrigger.tsx' Form: -- changed-files: - - any-glob-to-any-file: '**/Form.tsx' + - changed-files: + - any-glob-to-any-file: '**/Form.tsx' GridList: -- changed-files: - - any-glob-to-any-file: '**/GridList.tsx' + - changed-files: + - any-glob-to-any-file: '**/GridList.tsx' Group: -- changed-files: - - any-glob-to-any-file: '**/Group.tsx' + - changed-files: + - any-glob-to-any-file: '**/Group.tsx' I18nProvider: -- changed-files: - - any-glob-to-any-file: '**/I18nProvider.tsx' + - changed-files: + - any-glob-to-any-file: '**/I18nProvider.tsx' IllustratedMessage: -- changed-files: - - any-glob-to-any-file: '**/IllustratedMessage.tsx' + - changed-files: + - any-glob-to-any-file: '**/IllustratedMessage.tsx' Image: -- changed-files: - - any-glob-to-any-file: '**/Image.tsx' + - changed-files: + - any-glob-to-any-file: '**/Image.tsx' InlineAlert: -- changed-files: - - any-glob-to-any-file: '**/InlineAlert.tsx' + - changed-files: + - any-glob-to-any-file: '**/InlineAlert.tsx' Link: -- changed-files: - - any-glob-to-any-file: '**/Link.tsx' + - changed-files: + - any-glob-to-any-file: '**/Link.tsx' LinkButton: -- changed-files: - - any-glob-to-any-file: '**/LinkButton.tsx' + - changed-files: + - any-glob-to-any-file: '**/LinkButton.tsx' ListBox: -- changed-files: - - any-glob-to-any-file: '**/ListBox.tsx' + - changed-files: + - any-glob-to-any-file: '**/ListBox.tsx' Menu: -- changed-files: - - any-glob-to-any-file: '**/Menu.tsx' + - changed-files: + - any-glob-to-any-file: '**/Menu.tsx' Meter: -- changed-files: - - any-glob-to-any-file: '**/Meter.tsx' + - changed-files: + - any-glob-to-any-file: '**/Meter.tsx' Modal: -- changed-files: - - any-glob-to-any-file: '**/Modal.tsx' + - changed-files: + - any-glob-to-any-file: '**/Modal.tsx' NumberField: -- changed-files: - - any-glob-to-any-file: '**/NumberField.tsx' + - changed-files: + - any-glob-to-any-file: '**/NumberField.tsx' Picker: -- changed-files: - - any-glob-to-any-file: '**/Picker.tsx' + - changed-files: + - any-glob-to-any-file: '**/Picker.tsx' Popover: -- changed-files: - - any-glob-to-any-file: '**/Popover.tsx' + - changed-files: + - any-glob-to-any-file: '**/Popover.tsx' ProgressBar: -- changed-files: - - any-glob-to-any-file: '**/ProgressBar.tsx' + - changed-files: + - any-glob-to-any-file: '**/ProgressBar.tsx' ProgressCircle: -- changed-files: - - any-glob-to-any-file: '**/ProgressCircle.tsx' + - changed-files: + - any-glob-to-any-file: '**/ProgressCircle.tsx' RadioGroup: -- changed-files: - - any-glob-to-any-file: '**/RadioGroup.tsx' + - changed-files: + - any-glob-to-any-file: '**/RadioGroup.tsx' RangeCalendar: -- changed-files: - - any-glob-to-any-file: '**/RangeCalendar.tsx' + - changed-files: + - any-glob-to-any-file: '**/RangeCalendar.tsx' RangeSlider: -- changed-files: - - any-glob-to-any-file: '**/RangeSlider.tsx' + - changed-files: + - any-glob-to-any-file: '**/RangeSlider.tsx' SearchField: -- changed-files: - - any-glob-to-any-file: '**/SearchField.tsx' + - changed-files: + - any-glob-to-any-file: '**/SearchField.tsx' SegmentedControl: -- changed-files: - - any-glob-to-any-file: '**/SegmentedControl.tsx' + - changed-files: + - any-glob-to-any-file: '**/SegmentedControl.tsx' Select: -- changed-files: - - any-glob-to-any-file: '**/Select.tsx' + - changed-files: + - any-glob-to-any-file: '**/Select.tsx' SelectBoxGroup: -- changed-files: - - any-glob-to-any-file: '**/SelectBoxGroup.tsx' + - changed-files: + - any-glob-to-any-file: '**/SelectBoxGroup.tsx' Separator: -- changed-files: - - any-glob-to-any-file: '**/Separator.tsx' + - changed-files: + - any-glob-to-any-file: '**/Separator.tsx' Slider: -- changed-files: - - any-glob-to-any-file: '**/Slider.tsx' + - changed-files: + - any-glob-to-any-file: '**/Slider.tsx' StatusLight: -- changed-files: - - any-glob-to-any-file: '**/StatusLight.tsx' + - changed-files: + - any-glob-to-any-file: '**/StatusLight.tsx' Switch: -- changed-files: - - any-glob-to-any-file: '**/Switch.tsx' + - changed-files: + - any-glob-to-any-file: '**/Switch.tsx' Table: -- changed-files: - - any-glob-to-any-file: '**/Table.tsx' + - changed-files: + - any-glob-to-any-file: '**/Table.tsx' TableView: -- changed-files: - - any-glob-to-any-file: '**/TableView.tsx' + - changed-files: + - any-glob-to-any-file: '**/TableView.tsx' Tabs: -- changed-files: - - any-glob-to-any-file: '**/Tabs.tsx' + - changed-files: + - any-glob-to-any-file: '**/Tabs.tsx' TagGroup: -- changed-files: - - any-glob-to-any-file: '**/TagGroup.tsx' + - changed-files: + - any-glob-to-any-file: '**/TagGroup.tsx' TextArea: -- changed-files: - - any-glob-to-any-file: '**/TextArea.tsx' + - changed-files: + - any-glob-to-any-file: '**/TextArea.tsx' TextField: -- changed-files: - - any-glob-to-any-file: '**/TextField.tsx' + - changed-files: + - any-glob-to-any-file: '**/TextField.tsx' TimeField: -- changed-files: - - any-glob-to-any-file: '**/TimeField.tsx' + - changed-files: + - any-glob-to-any-file: '**/TimeField.tsx' Toast: -- changed-files: - - any-glob-to-any-file: '**/Toast.tsx' + - changed-files: + - any-glob-to-any-file: '**/Toast.tsx' ToggleButton: -- changed-files: - - any-glob-to-any-file: '**/ToggleButton.tsx' + - changed-files: + - any-glob-to-any-file: '**/ToggleButton.tsx' ToggleButtonGroup: -- changed-files: - - any-glob-to-any-file: '**/ToggleButtonGroup.tsx' + - changed-files: + - any-glob-to-any-file: '**/ToggleButtonGroup.tsx' Toolbar: -- changed-files: - - any-glob-to-any-file: '**/Toolbar.tsx' + - changed-files: + - any-glob-to-any-file: '**/Toolbar.tsx' Tooltip: -- changed-files: - - any-glob-to-any-file: '**/Tooltip.tsx' + - changed-files: + - any-glob-to-any-file: '**/Tooltip.tsx' Tree: -- changed-files: - - any-glob-to-any-file: '**/Tree.tsx' + - changed-files: + - any-glob-to-any-file: '**/Tree.tsx' TreeView: -- changed-files: - - any-glob-to-any-file: '**/TreeView.tsx' - + - changed-files: + - any-glob-to-any-file: '**/TreeView.tsx' diff --git a/.github/workflows-old/publish.yaml b/.github/workflows-old/publish.yaml index a505db27ce2..d04867dd91e 100644 --- a/.github/workflows-old/publish.yaml +++ b/.github/workflows-old/publish.yaml @@ -7,27 +7,27 @@ jobs: build: runs-on: ubuntu-latest steps: - - uses: actions/checkout@master - - name: Use Node 12 - uses: actions/setup-node@v1 - with: - node_version: 12.x - - name: Write npmrc - env: - NPMRC: ${{ secrets.NPMRC }} - run: echo "$NPMRC" > .npmrc - - name: install - run: yarn install - - name: Configure CI Git User - run: | - git remote rm origin - git remote add origin "https://github-actions:$GITHUB_TOKEN@github.com/adobe/react-spectrum.git" - git fetch - git config --global user.email octobot@github.com - git config --global user.name GitHub Actions - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - name: deploy - run: | - git update-index --assume-unchanged .npmrc - make ci + - uses: actions/checkout@master + - name: Use Node 12 + uses: actions/setup-node@v1 + with: + node_version: 12.x + - name: Write npmrc + env: + NPMRC: ${{ secrets.NPMRC }} + run: echo "$NPMRC" > .npmrc + - name: install + run: yarn install + - name: Configure CI Git User + run: | + git remote rm origin + git remote add origin "https://github-actions:$GITHUB_TOKEN@github.com/adobe/react-spectrum.git" + git fetch + git config --global user.email octobot@github.com + git config --global user.name GitHub Actions + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + - name: deploy + run: | + git update-index --assume-unchanged .npmrc + make ci diff --git a/.github/workflows-old/test.yaml b/.github/workflows-old/test.yaml index 416382b4e02..1a5a0482996 100644 --- a/.github/workflows-old/test.yaml +++ b/.github/workflows-old/test.yaml @@ -5,33 +5,33 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@master - - name: Use Node 12 - uses: actions/setup-node@v1 - with: - node_version: 12.x - - name: Write npmrc - env: - NPMRC: ${{ secrets.NPMRC }} - run: echo "$NPMRC" > .npmrc - - name: yarn install - run: | - make clean_node_modules - make install_no_postinstall - - name: build - run: | - make clean - make -B - - name: test - run: make ci-test - - name: build storybook - run: make storybook - - name: deploy storybook - env: - AZURE_STORAGE_SAS_TOKEN: ${{ secrets.AZURE_STORAGE_SAS_TOKEN }} - run: | - az storage blob upload-batch -d reactspectrum -s storybook-static --account-name reactspectrum - - name: comment on PR - uses: ./.github/actions/comment - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + - uses: actions/checkout@master + - name: Use Node 12 + uses: actions/setup-node@v1 + with: + node_version: 12.x + - name: Write npmrc + env: + NPMRC: ${{ secrets.NPMRC }} + run: echo "$NPMRC" > .npmrc + - name: yarn install + run: | + make clean_node_modules + make install_no_postinstall + - name: build + run: | + make clean + make -B + - name: test + run: make ci-test + - name: build storybook + run: make storybook + - name: deploy storybook + env: + AZURE_STORAGE_SAS_TOKEN: ${{ secrets.AZURE_STORAGE_SAS_TOKEN }} + run: | + az storage blob upload-batch -d reactspectrum -s storybook-static --account-name reactspectrum + - name: comment on PR + uses: ./.github/actions/comment + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml index 0bcc420d343..aacc4a1a78b 100644 --- a/.github/workflows/labeler.yml +++ b/.github/workflows/labeler.yml @@ -1,6 +1,6 @@ -name: "Pull Request Labeler" +name: 'Pull Request Labeler' on: -- pull_request_target + - pull_request_target jobs: labeler: @@ -9,6 +9,6 @@ jobs: pull-requests: write runs-on: ubuntu-latest steps: - - uses: actions/labeler@v5 - with: - sync-labels: true + - uses: actions/labeler@v5 + with: + sync-labels: true diff --git a/.github/workflows/lint-pr-titles.yaml b/.github/workflows/lint-pr-titles.yaml index 482015ca735..dfd076f7acb 100644 --- a/.github/workflows/lint-pr-titles.yaml +++ b/.github/workflows/lint-pr-titles.yaml @@ -10,16 +10,16 @@ jobs: name: Lint PR Title steps: - name: Check PR Title - env: + env: TITLE: ${{ github.event.pull_request.title}} run: | - if [[ "${TITLE,,}" =~ ^\[?\(?wip\]?\)? ]]; then - echo "PR is marked as a WIP. Skipping validation." - exit 0 - elif (echo "${TITLE,,}" | grep -P "^(fix|feat|build|chore|docs|test|refactor|ci|localize|bump|revert)(\(([A-Za-z0-9])+\))?:"); then - echo "Success" - exit 0 - else - echo "PR title validation failed. Please read our PR naming guide on our github wiki to see how to correctly name your PR: https://github.com/adobe/react-spectrum/wiki/Pull-Request-Naming-Guide" - exit 1 - fi + if [[ "${TITLE,,}" =~ ^\[?\(?wip\]?\)? ]]; then + echo "PR is marked as a WIP. Skipping validation." + exit 0 + elif (echo "${TITLE,,}" | grep -P "^(fix|feat|build|chore|docs|test|refactor|ci|localize|bump|revert)(\(([A-Za-z0-9])+\))?:"); then + echo "Success" + exit 0 + else + echo "PR title validation failed. Please read our PR naming guide on our github wiki to see how to correctly name your PR: https://github.com/adobe/react-spectrum/wiki/Pull-Request-Naming-Guide" + exit 1 + fi diff --git a/.github/workflows/weekly-api-diff.yml b/.github/workflows/weekly-api-diff.yml index e3c71fdf2d0..3a335397656 100644 --- a/.github/workflows/weekly-api-diff.yml +++ b/.github/workflows/weekly-api-diff.yml @@ -2,8 +2,8 @@ name: Weekly API Diff on: schedule: - - cron: '0 17 * * 1' # Monday 9am PST / 10am PDT (GH Actions cron is UTC) - workflow_dispatch: # manual trigger for testing + - cron: '0 17 * * 1' # Monday 9am PST / 10am PDT (GH Actions cron is UTC) + workflow_dispatch: # manual trigger for testing jobs: weekly-api-diff: @@ -14,7 +14,7 @@ jobs: steps: - uses: actions/checkout@v4 with: - fetch-depth: 0 # required for build:api-published to find the last Publish commit + fetch-depth: 0 # required for build:api-published to find the last Publish commit - uses: actions/setup-node@v4 with: diff --git a/.github/workflows/weekly-chromatic.yml b/.github/workflows/weekly-chromatic.yml index 2f4e702eff4..9796932604f 100644 --- a/.github/workflows/weekly-chromatic.yml +++ b/.github/workflows/weekly-chromatic.yml @@ -2,8 +2,8 @@ name: Weekly Chromatic on: schedule: - - cron: '0 17 * * 1' # Monday 9am PST / 10am PDT (GH Actions cron is UTC) - workflow_dispatch: # manual trigger for testing + - cron: '0 17 * * 1' # Monday 9am PST / 10am PDT (GH Actions cron is UTC) + workflow_dispatch: # manual trigger for testing jobs: chromatic: @@ -14,7 +14,7 @@ jobs: steps: - uses: actions/checkout@v4 with: - fetch-depth: 0 # chromatic needs full history for baseline comparison + fetch-depth: 0 # chromatic needs full history for baseline comparison - uses: actions/setup-node@v4 with: node-version: '24' @@ -39,7 +39,7 @@ jobs: steps: - uses: actions/checkout@v4 with: - fetch-depth: 0 # chromatic needs full history for baseline comparison + fetch-depth: 0 # chromatic needs full history for baseline comparison - uses: actions/setup-node@v4 with: node-version: '24' diff --git a/.github/workflows/weekly-excel-sheet.yaml b/.github/workflows/weekly-excel-sheet.yaml index 60721b73e2b..e564c64e498 100644 --- a/.github/workflows/weekly-excel-sheet.yaml +++ b/.github/workflows/weekly-excel-sheet.yaml @@ -2,7 +2,7 @@ name: Weekly Excel Sheet on: schedule: - - cron: '0 14 * * 1' # 7 AM PDT Mondays + - cron: '0 14 * * 1' # 7 AM PDT Mondays workflow_dispatch: jobs: diff --git a/.gitignore b/.gitignore index 63448f766af..178fe850797 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,6 @@ .idea .package-lock.json .parcel-cache -.vscode build-storybook.log coverage dist diff --git a/.oxfmtrc.json b/.oxfmtrc.json new file mode 100644 index 00000000000..92d1e75c0f3 --- /dev/null +++ b/.oxfmtrc.json @@ -0,0 +1,13 @@ +{ + "$schema": "./node_modules/oxfmt/configuration_schema.json", + "ignorePatterns": [ + "**/*.mdx", + "**/*.md", + "packages/dev/codemods/src/s1-to-s2/__testfixtures__/**" + ], + "singleQuote": true, + "bracketSpacing": false, + "trailingComma": "none", + "bracketSameLine": true, + "arrowParens": "avoid" +} diff --git a/.storybook-s2/custom-addons/provider/index.js b/.storybook-s2/custom-addons/provider/index.js index d4c703ce8d3..b635fc8021e 100644 --- a/.storybook-s2/custom-addons/provider/index.js +++ b/.storybook-s2/custom-addons/provider/index.js @@ -14,7 +14,7 @@ function ProviderUpdater(props) { useEffect(() => { let channel = addons.getChannel(); - let providerUpdate = (event) => { + let providerUpdate = event => { setLocale(event.locale); }; @@ -25,11 +25,7 @@ function ProviderUpdater(props) { }; }, []); - return ( - - {props.children} - - ); + return {props.children}; } export const withProviderSwitcher = makeDecorator({ diff --git a/.storybook-s2/custom-addons/provider/preset.ts b/.storybook-s2/custom-addons/provider/preset.ts index 53595a81a19..fafbb22081c 100644 --- a/.storybook-s2/custom-addons/provider/preset.ts +++ b/.storybook-s2/custom-addons/provider/preset.ts @@ -1,5 +1,5 @@ -import path from "node:path"; -import { fileURLToPath } from "node:url"; +import path from 'node:path'; +import {fileURLToPath} from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); @@ -13,5 +13,5 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url)); */ export const managerEntries = (existing: string[] = []) => [ ...existing, - path.join(__dirname, "register.tsx"), + path.join(__dirname, 'register.tsx') ]; diff --git a/.storybook-s2/custom-addons/provider/register.tsx b/.storybook-s2/custom-addons/provider/register.tsx index b06338db428..ab1a7638325 100644 --- a/.storybook-s2/custom-addons/provider/register.tsx +++ b/.storybook-s2/custom-addons/provider/register.tsx @@ -1,16 +1,15 @@ - import {addons, types} from 'storybook/manager-api'; import {locales} from '../../constants'; import React, {useEffect, useState} from 'react'; function ProviderFieldSetter({api}) { let [values, setValues] = useState(() => ({ - locale: api.getQueryParam('providerSwitcher-locale') || undefined, + locale: api.getQueryParam('providerSwitcher-locale') || undefined })); let channel = addons.getChannel(); - let onLocaleChange = (e) => { + let onLocaleChange = e => { let newValue = e.target.value || undefined; - setValues((old) => { + setValues(old => { let next = {...old, locale: newValue}; channel.emit('provider/updated', next); return next; @@ -37,20 +36,24 @@ function ProviderFieldSetter({api}) {
- ) + ); } -addons.register('ProviderSwitcher', (api) => { +addons.register('ProviderSwitcher', api => { addons.add('ProviderSwitcher', { title: 'viewport', type: types.TOOL, - match: ({ viewMode }) => { - return viewMode === 'story' || viewMode === 'docs' + match: ({viewMode}) => { + return viewMode === 'story' || viewMode === 'docs'; }, - render: () => , + render: () => }); }); diff --git a/.storybook-s2/docs/Colors.jsx b/.storybook-s2/docs/Colors.jsx index 11aa7ae1d7a..b8c08019752 100644 --- a/.storybook-s2/docs/Colors.jsx +++ b/.storybook-s2/docs/Colors.jsx @@ -9,7 +9,11 @@ export function Colors() { Background colors -

The backgroundColor property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.

+

+ The backgroundColor property supports the following values, in addition to + the semantic and global colors shown below. These colors are specifically chosen to be + used as backgrounds, so prefer them over global colors where possible. +

@@ -74,7 +78,11 @@ export function Colors() { Text colors -

The color property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.

+

+ The color property supports the following values, in addition to the + semantic and global colors shown below. These colors are specifically chosen to be used + as text colors, so prefer them over global colors where possible. +

@@ -92,7 +100,10 @@ export function Colors() { Semantic colors -

The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.

+

+ The following values are available across all color properties. Prefer to use semantic + colors over global colors when they represent a specific meaning. +

@@ -134,14 +145,20 @@ export function Colors() { } function ColorScale({scale}) { - return scale.map(([name, className]) => ( - - )) + return scale.map(([name, className]) => ); } function Color({name, className}) { return ( -
+
{name}
@@ -178,5 +195,5 @@ export function IconColors() {
- ) + ); } diff --git a/.storybook-s2/docs/Icons.jsx b/.storybook-s2/docs/Icons.jsx index e275afba22c..8d6ec48b061 100644 --- a/.storybook-s2/docs/Icons.jsx +++ b/.storybook-s2/docs/Icons.jsx @@ -1,5 +1,5 @@ import icons from '../../packages/@react-spectrum/s2/s2wf-icons/*.svg'; -import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; +import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; import {ActionButton, Text} from '@react-spectrum/s2'; import {H2, H3, P, Code, Pre, Link} from './typography'; import {highlight} from './highlight' with {type: 'macro'}; @@ -11,10 +11,11 @@ export function Icons() { return (
-

- Workflow icons -

-

Spectrum 2 offers a subset of the icons currently available in React Spectrum v3. These icons can be imported from @react-spectrum/s2/icons.

+

Workflow icons

+

+ Spectrum 2 offers a subset of the icons currently available in React Spectrum v3. These + icons can be imported from @react-spectrum/s2/icons. + 

{highlight("import Add from '@react-spectrum/s2/icons/Add';")}

See below for a full list of available icons. Click to copy import statement.

@@ -25,7 +26,11 @@ export function Icons() { return ( navigator.clipboard.writeText(`import ${importName} from '@react-spectrum/s2/icons/${name}';`)}> + onPress={() => + navigator.clipboard.writeText( + `import ${importName} from '@react-spectrum/s2/icons/${name}';` + ) + }> {name} @@ -33,54 +38,116 @@ export function Icons() { })}

Styling

-

The iconStyle macro can be used to set the size and color of a workflow icon. Icons support five t-shirt sizes, and a subset of the Spectrum colors. Other style properties available across components are also supported on icons.

- 
{highlight(`import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
+        

+          The iconStyle macro can be used to set the size and color of a workflow icon.
+          Icons support five t-shirt sizes, and a subset of the Spectrum colors.{' '}
+          
+            Other style properties
+          {' '}
+          available across components are also supported on icons.
+        

+        
+          {highlight(`import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 
-`)}

+`)}
+

Icon colors

Icon sizes

-
+
XS (14px)
-
+
S (16px)
-
+
M (20px)
-
+
L (22px)
-
+
XL (26px)

Custom icons

-

To use custom icons, you first need to convert your SVGs into compatible icon components. This depends on your bundler.

+

+ To use custom icons, you first need to convert your SVGs into compatible icon components. + This depends on your bundler. +

Parcel

-

If you are using Parcel, the @react-spectrum/parcel-transformer-s2-icon plugin can be used to convert SVGs to icon components. First install it into your project as a dev dependency:

+

+ If you are using Parcel, the @react-spectrum/parcel-transformer-s2-icon{' '} + plugin can be used to convert SVGs to icon components. First install it into your project + as a dev dependency: + 

yarn add @react-spectrum/parcel-transformer-s2-icon --dev
-

Then, add it to your .parcelrc:

- 
{highlight(`{
+        

+          Then, add it to your .parcelrc:
+        

+        
+          {highlight(`{
   "extends": "@parcel/config-default",
   "transformers": {
     "icon:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"]
   }
-}`)}

-        
Now you can import icon SVGs using the icon: pipeline:

+}`)}
+
+

+ Now you can import icon SVGs using the icon:{' '} + pipeline: + 

{highlight(`import Icon from 'icon:./path/to/Icon.svg';`)}

Other bundlers

-

The @react-spectrum/s2-icon-builder CLI tool can be used to pre-process a folder of SVG icons into TSX files.

- 
npx @react-spectrum/s2-icon-builder -i 'path/to/icons/*.svg' -o 'path/to/destination'
-

This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.

+

+ The @react-spectrum/s2-icon-builder CLI tool can be used to pre-process a + folder of SVG icons into TSX files. +

+ 
+          npx @react-spectrum/s2-icon-builder -i 'path/to/icons/*.svg' -o 'path/to/destination'
+
+

+ This outputs a folder of TSX files with names corresponding to the input SVG files. You + may rename them as you wish. To use them in your application, import them like normal + components. + 

{highlight(`import Icon from './path/to/destination/Icon';`)}
diff --git a/.storybook-s2/docs/Illustrations.jsx b/.storybook-s2/docs/Illustrations.jsx index 63f6e663441..87189ec8464 100644 --- a/.storybook-s2/docs/Illustrations.jsx +++ b/.storybook-s2/docs/Illustrations.jsx @@ -1,41 +1,86 @@ import linearIllustrations from '@react-spectrum/s2/spectrum-illustrations/linear/*.tsx'; import gradientIllustrations from '@react-spectrum/s2/spectrum-illustrations/gradient/*/*.tsx'; import Paste from '@react-spectrum/s2/icons/Paste'; -import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; +import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; import {ActionButton, Radio, RadioGroup} from '@react-spectrum/s2'; import {H2, H3, P, Code, Pre, Link} from './typography'; import {highlight} from './highlight' with {type: 'macro'}; -import { useState } from 'react'; +import {useState} from 'react'; export function Illustrations() { let [gradientStyle, setStyle] = useState('generic1'); return (
-

- Illustrations -

-

Spectrum 2 offers a collection of illustrations in two styles: gradient and linear. These illustrations can be imported from @react-spectrum/s2/illustrations. See below for a full list of available illustrations. Click the clipboard icon to copy the import statement.

+

Illustrations

+

+ Spectrum 2 offers a collection of illustrations in two styles: gradient and linear. These + illustrations can be imported from @react-spectrum/s2/illustrations. See + below for a full list of available illustrations. Click the clipboard icon to copy the + import statement. +

Gradient illustrations

-

Gradient illustrations are available in two styles: Generic 1 and Generic 2. These should be consistently applied within products. They can be imported using the corresponding sub-path, for example:

- 
{highlight("import Cloud from '@react-spectrum/s2/illustrations/gradient/generic1/Cloud';")}
- +

+ Gradient illustrations are available in two styles: Generic 1 and Generic 2. These should + be consistently applied within products. They can be imported using the corresponding + sub-path, for example: +

+ 
+          {highlight(
+            "import Cloud from '@react-spectrum/s2/illustrations/gradient/generic1/Cloud';"
+          )}
+
+ Generic 1 Generic 2 -
+
{Object.keys(gradientIllustrations[gradientStyle]).map(icon => { let Illustration = gradientIllustrations[gradientStyle][icon].default; return ( -
+
- + {icon} navigator.clipboard.writeText(`import ${icon} from '@react-spectrum/s2/illustrations/gradient/${gradientStyle}/${icon}';`)}> + onPress={() => + navigator.clipboard.writeText( + `import ${icon} from '@react-spectrum/s2/illustrations/gradient/${gradientStyle}/${icon}';` + ) + }> @@ -46,19 +91,48 @@ export function Illustrations() {

Linear illustrations

Linear illustrations can be imported as shown below:

{highlight("import Cloud from '@react-spectrum/s2/illustrations/linear/Cloud';")}
-
+
{Object.keys(linearIllustrations).map(icon => { let Illustration = linearIllustrations[icon].default; return ( -
+
- + {icon} navigator.clipboard.writeText(`import ${icon} from '@react-spectrum/s2/illustrations/linear/${icon}';`)}> + onPress={() => + navigator.clipboard.writeText( + `import ${icon} from '@react-spectrum/s2/illustrations/linear/${icon}';` + ) + }> @@ -67,23 +141,49 @@ export function Illustrations() { })}

Custom illustrations

-

To use custom illustrations, you first need to convert your SVGs into compatible illustration components. This depends on your bundler.

+

+ To use custom illustrations, you first need to convert your SVGs into compatible + illustration components. This depends on your bundler. +

Parcel

-

If you are using Parcel, the @react-spectrum/parcel-transformer-s2-icon plugin can be used to convert SVGs to illustration components. First install it into your project as a dev dependency:

+

+ If you are using Parcel, the @react-spectrum/parcel-transformer-s2-icon{' '} + plugin can be used to convert SVGs to illustration components. First install it into your + project as a dev dependency: + 

yarn add @react-spectrum/parcel-transformer-s2-icon --dev
-

Then, add it to your .parcelrc:

- 
{highlight(`{
+        

+          Then, add it to your .parcelrc:
+        

+        
+          {highlight(`{
   "extends": "@parcel/config-default",
   "transformers": {
     "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"]
   }
-}`)}

-        
Now you can import illustration SVGs using the illustration: pipeline:

-        
{highlight(`import Illustration from 'illustration:./path/to/Illustration.svg';`)}

+}`)}
+
+

+ Now you can import illustration SVGs using the illustration:{' '} + pipeline: +

+ 
+          {highlight(`import Illustration from 'illustration:./path/to/Illustration.svg';`)}
+

Other bundlers

-

The @react-spectrum/s2-icon-builder CLI tool can be used to pre-process a folder of SVG illustrations into TSX files.

- 
npx @react-spectrum/s2-icon-builder -i 'path/to/illustrations/*.svg' --type illustration -o 'path/to/destination'
-

This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.

+

+ The @react-spectrum/s2-icon-builder CLI tool can be used to pre-process a + folder of SVG illustrations into TSX files. +

+ 
+          npx @react-spectrum/s2-icon-builder -i 'path/to/illustrations/*.svg' --type illustration
+          -o 'path/to/destination'
+
+

+ This outputs a folder of TSX files with names corresponding to the input SVG files. You + may rename them as you wish. To use them in your application, import them like normal + components. + 

{highlight(`import Illustration from './path/to/destination/Illustration';`)}
diff --git a/.storybook-s2/docs/Intro.jsx b/.storybook-s2/docs/Intro.jsx index 933882036af..d6853e4cf25 100644 --- a/.storybook-s2/docs/Intro.jsx +++ b/.storybook-s2/docs/Intro.jsx @@ -1,5 +1,24 @@ -import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; -import {Button, ButtonGroup, Checkbox, Content, Dialog, DialogTrigger, Footer, Header, Heading, Image, InlineAlert, Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger, Switch, Text} from '@react-spectrum/s2'; +import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; +import { + Button, + ButtonGroup, + Checkbox, + Content, + Dialog, + DialogTrigger, + Footer, + Header, + Heading, + Image, + InlineAlert, + Menu, + MenuItem, + MenuSection, + MenuTrigger, + SubmenuTrigger, + Switch, + Text +} from '@react-spectrum/s2'; import NewIcon from '@react-spectrum/s2/icons/New'; import ImgIcon from '@react-spectrum/s2/icons/Image'; import CopyIcon from '@react-spectrum/s2/icons/Copy'; @@ -30,15 +49,53 @@ export function Docs() {
-

Introducing Spectrum 2 – a new update to Adobe's design system, now in pre-release! Designed to support our growing suite of products, Spectrum 2 aims to work seamlessly across experiences by balancing personality and function.

-

The React Spectrum team has been hard at work to bring the Spectrum 2 design to our components. Spectrum 2 in React Spectrum is built on React Aria Components and a new styling foundation powered by Spectrum Tokens. This gives you access to Spectrum design fundamentals such as colors, spacing, sizing, and typography in your own applications and custom components. Spectrum 2 also brings new features such as t-shirt sizing, improved form layout, dynamic new press interactions, and more.

-

Check out the new Button design, with fresh new colors and icons, a fun new press scaling interaction, and support for t-shirt sizes.

+

+ + Introducing{' '} + + Spectrum 2 + + {' '} + – a new update to Adobe's design system, now in pre-release! Designed to support our + growing suite of products, Spectrum 2 aims to work seamlessly across experiences by + balancing personality and function. +

+

+ The React Spectrum team has been hard at work to bring the Spectrum 2 design to our + components. Spectrum 2 in React Spectrum is built on{' '} + + React Aria Components + {' '} + and a new styling foundation powered by{' '} + + Spectrum Tokens + + . This gives you access to Spectrum design fundamentals such as colors, spacing, sizing, + and typography in your own applications and custom components. Spectrum 2 also brings new + features such as t-shirt sizing, improved form layout, dynamic new press interactions, and + more. +

+

+ Check out the new Button design, with fresh new colors and icons, a fun new press scaling + interaction, and support for t-shirt sizes. +

- - - + + + -

Spectrum 2 switches have a more accessible design, with a solid border and new animations.

+

+ Spectrum 2 switches have a more accessible design, with a solid border and new animations. +

Wi-Fi @@ -53,22 +110,38 @@ export function Docs() { Dialog title
Header
-

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. Duis aute irure dolor in

+

+ 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. + Duis aute irure dolor in +

-
Don't show this again
+
+ Don't show this again +
- - + + )} -

Menus received a major design update, with new styles for sections, links, selection, focus rings, and submenus.

+

+ Menus received a major design update, with new styles for sections, links, selection, + focus rings, and submenus. +

- +
@@ -108,7 +181,11 @@ export function Docs() { Menu section header Menu section description
- + Share link Enable comments and downloads @@ -131,17 +208,68 @@ export function Docs() {

Spectrum 2 in React Spectrum can be installed from npm:

yarn add @react-spectrum/s2

Configuring your bundler

-

React Spectrum supports styling via 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.

-

See below to learn more about using the React Spectrum style macro.

+

+ React Spectrum supports styling via{' '} + + 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. +

+

+ See{' '} + + below + {' '} + to learn more about using the React Spectrum style macro. +

Webpack, Next.js, Vite, Rollup, or ESBuild

-

First, install unplugin-parcel-macros using your package manager:

+

+ First, install{' '} + + unplugin-parcel-macros + {' '} + using your package manager: + 

yarn add unplugin-parcel-macros --dev
-

Then, configure your bundler according to the steps documented in the readme. 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 these docs for details.

-

See the examples folder in our repo for working setups with various build tools. For details on optimizing the output CSS, see the style macro docs.

+

+ Then, configure your bundler according to the steps documented in the{' '} + + readme + + . 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{' '} + + these docs + {' '} + for details. +

+

+ See the{' '} + + examples folder + {' '} + in our repo for working setups with various build tools. For details on optimizing the + output CSS, see the{' '} + + style macro docs + + . +

Setting up your app

-

Wrap your app in an S2 {''} 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.

- 
{highlight(`import {Provider, Button} from '@react-spectrum/s2';
+        

+          Wrap your app in an S2 {''} 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.
+        

+        
+          {highlight(`import {Provider, Button} from '@react-spectrum/s2';
 
 function App() {
   return (
@@ -154,13 +282,24 @@ function App() {
       
     
   );
-}`)}

+}`)}
+
- +

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 {''} element instead of the {''}. This ensures that the page has styles even before your JavaScript loads. A {''} is still necessary in addition to page.css in order to include the fonts, set the locale, etc.

- 
{highlight(`// Apply S2 background to the  element
+        

+          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 {''} element instead of the {''}. This
+          ensures that the page has styles even before your JavaScript loads. A{' '}
+          {''} is still necessary in addition to page.css in
+          order to include the fonts, set the locale, etc.
+        

+        
+          {highlight(`// Apply S2 background to the  element
 import '@react-spectrum/s2/page.css';
 
 function App() {
@@ -169,110 +308,290 @@ function App() {
       {/* ... */}
     
   );
-}`)}

-        
By default, this uses the base background layer. This can be customized by setting the data-background attribute on the {''} element.

-        
{highlight(`
+}`)}
+        

+        

+          By default, this uses the base background layer. This can be customized by
+          setting the data-background attribute on the {''} element.
+        

+        
+          {highlight(`
   
-`)}

+`)}
+

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 {''} to force the app to always render in a certain color scheme.

- 
{highlight(`import {Provider} from '@react-spectrum/s2';
+        

+          By default, React Spectrum follows the operating system color scheme setting, supporting
+          both light and dark mode. The colorScheme prop can be set on{' '}
+          {''} to force the app to always render in a certain color scheme.
+        

+        
+          {highlight(`import {Provider} from '@react-spectrum/s2';
 
 
   {/* your app */}
-`)}

-        
When using page.css, set the data-color-scheme attribute on the {''} element.

-        
{highlight(`
+`)}
+        

+        

+          When using page.css, set the data-color-scheme attribute on the{' '}
+          {''} element.
+        

+        
+          {highlight(`
   
-`)}

+`)}
+

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 rendering setting the locale prop on the {''}.

- 
{highlight(`import {Provider} from '@react-spectrum/s2';
+        

+          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 rendering setting the{' '}
+          locale prop on the {''}.
+        

+        
+          {highlight(`import {Provider} from '@react-spectrum/s2';
 
 
   {/* your app */}
-`)}

+`)}
+

Server-side rendering

-

When using SSR, the {''} component can be rendered as the root {''} element. The locale prop should always be specified to avoid hydration errors. page.css is not needed in this case.

- 
{highlight(`
+        

+          When using SSR, the {''} component can be rendered as the root{' '}
+          {''} element. The locale prop should always be specified
+          to avoid hydration errors. page.css is not needed in this case.
+        

+        
+          {highlight(`
   
     {/* ... */}
   
-`)}

+`)}
+

Usage with older React Spectrum versions

See Adobe internal documentation.

Styling

-

React Spectrum v3 supported a limited set of style props for layout and positioning using Spectrum-defined values. In Spectrum 2, we’re improving on this by offering a much more flexible style macro. This offers additional Spectrum tokens, improves performance by generating CSS at build time rather than runtime, and works with any DOM element for use in custom components.

-

Macros are a new bundler feature that enable functions to run at build time. The React Spectrum style macro uses this to generate CSS that can be applied to any DOM element or component. Import the style macro using the with {`{type: 'macro'}`} import attribute, and pass the result to the styles prop of any React Spectrum component to provide it with styles.

- 
{highlight(`import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+        

+          React Spectrum v3 supported a limited set of{' '}
+          
+            style props
+          {' '}
+          for layout and positioning using Spectrum-defined values. In Spectrum 2, we’re improving
+          on this by offering a much more flexible style macro. This offers additional Spectrum
+          tokens, improves performance by generating CSS at build time rather than runtime, and
+          works with any DOM element for use in custom components.
+        

+        

+          
+            Macros
+          {' '}
+          are a new bundler feature that enable functions to run at build time. The React Spectrum{' '}
+          style macro uses this to generate CSS that can be applied to any DOM element
+          or component. Import the style macro using the with{' '}
+          {`{type: 'macro'}`}{' '}
+          
+            import attribute
+          
+          , and pass the result to the styles prop of any React Spectrum component to
+          provide it with styles.
+        

+        
+          {highlight(`import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {ActionButton} from '@react-spectrum/s2';
 
 
   Edit
-`)}

-        
The styles prop accepts a limited set of CSS properties, including layout, spacing, sizing, and positioning. Other styles such as colors and internal padding cannot be customized within Spectrum components.

-        
+`)}
+
+

+ The styles prop accepts a limited set of CSS properties, including layout, + spacing, sizing, and positioning. Other styles such as colors and internal padding cannot + be customized within Spectrum components. +

+ Learn more about styling - See the full docs to learn about using the style macro to build custom components. + + See the{' '} + + full docs + {' '} + to learn about using the style macro to build custom components. +

Supported CSS properties on Spectrum components

-
    -
  • margin
    • -
  • marginStart
    • -
  • marginEnd
    • -
  • marginTop
    • -
  • marginBottom
    • -
  • marginX
    • -
  • marginY
    • -
  • width
    • -
  • minWidth
    • -
  • maxWidth
    • -
  • flexGrow
    • -
  • flexShrink
    • -
  • flexBasis
    • -
  • justifySelf
    • -
  • alignSelf
    • -
  • order
    • -
  • gridArea
    • -
  • gridRow
    • -
  • gridRowStart
    • -
  • gridRowEnd
    • -
  • gridColumn
    • -
  • gridColumnStart
    • -
  • gridColumnEnd
    • -
  • position
    • -
  • zIndex
    • -
  • top
    • -
  • bottom
    • -
  • inset
    • -
  • insetX
    • -
  • insetY
    • -
  • insetStart
    • -
  • insetEnd
    • -
  • visibility
    • +
      +
    • + margin +
      • +
    • + marginStart +
      • +
    • + marginEnd +
      • +
    • + marginTop +
      • +
    • + marginBottom +
      • +
    • + marginX +
      • +
    • + marginY +
      • +
    • + width +
      • +
    • + minWidth +
      • +
    • + maxWidth +
      • +
    • + flexGrow +
      • +
    • + flexShrink +
      • +
    • + flexBasis +
      • +
    • + justifySelf +
      • +
    • + alignSelf +
      • +
    • + order +
      • +
    • + gridArea +
      • +
    • + gridRow +
      • +
    • + gridRowStart +
      • +
    • + gridRowEnd +
      • +
    • + gridColumn +
      • +
    • + gridColumnStart +
      • +
    • + gridColumnEnd +
      • +
    • + position +
      • +
    • + zIndex +
      • +
    • + top +
      • +
    • + bottom +
      • +
    • + inset +
      • +
    • + insetX +
      • +
    • + insetY +
      • +
    • + insetStart +
      • +
    • + insetEnd +
      • +
    • + visibility +

    UNSAFE Style Overrides

    -

    We highly discourage overriding the styles of React Spectrum components because it may break at any time when we change our implementation, making it difficult for you to update in the future. Consider using React Aria Components with our style macro to build a custom component with Spectrum styles instead.

    -

    That said, just like in React Spectrum v3, the UNSAFE_className and UNSAFE_style props are supported on Spectrum 2 components as last-resort escape hatches.

    - 
    {highlight(`/* YourComponent.tsx */
+        
    
+          We highly discourage overriding the styles of React Spectrum components because it may
+          break at any time when we change our implementation, making it difficult for you to update
+          in the future. Consider using{' '}
+          
+            React Aria Components
+          {' '}
+          with our{' '}
+          
+            style macro
+          {' '}
+          to build a custom component with Spectrum styles instead.
+        
    
+        
    
+          That said, just like in React Spectrum v3, the UNSAFE_className and{' '}
+          UNSAFE_style props are supported on Spectrum 2 components as last-resort
+          escape hatches.
+        
    
+        
    +          {highlight(`/* YourComponent.tsx */
 import {Button} from '@react-spectrum/s2';
 import './YourComponent.css';
 
 function YourComponent() {
   return ;
-}`)}
    
-        
    {highlight(`/* YourComponent.css */
+}`)}
+        
    
+        
    +          {highlight(
+            `/* YourComponent.css */
 .your-unsafe-class {
   background: red;
-}`, 'CSS')}
    
+}`,
+            'CSS'
+          )}
+

    CSS Resets

    -

    CSS resets are strongly discouraged. Global CSS selectors can unintentionally affect elements that were not intended, leading to style clashes. Since Spectrum 2 uses CSS cascade layers, global CSS outside a @layer will override S2's CSS. Therefore, if you cannot remove your CSS reset, it must be placed in a lower layer. This can be done by declaring your reset layer before the _ layer used by S2.

    - 
    {highlight(`/* App.css */
+        
    
+          CSS resets are strongly discouraged. Global CSS selectors can unintentionally affect
+          elements that were not intended, leading to style clashes. Since Spectrum 2 uses{' '}
+          
+            CSS cascade layers
+          
+          , global CSS outside a @layer will override S2's CSS. Therefore, if you
+          cannot remove your CSS reset, it must be placed in a lower layer. This can be done by
+          declaring your reset layer before the _ layer used by S2.
+        
    
+        
    +          {highlight(`/* App.css */
 @layer reset, _;
-@import "reset.css" layer(reset);`)}
    
+@import "reset.css" layer(reset);`)}
+
- ) + ); } function Example({children}) { diff --git a/.storybook-s2/docs/MDXLayout.jsx b/.storybook-s2/docs/MDXLayout.jsx index cf1bf504eef..fce42793916 100644 --- a/.storybook-s2/docs/MDXLayout.jsx +++ b/.storybook-s2/docs/MDXLayout.jsx @@ -1,4 +1,4 @@ -import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; +import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; import {highlight} from './highlight' with {type: 'macro'}; import {H2, H3, H3, P, Pre, Code, Strong, H4, Link} from './typography'; import {MDXProvider} from '@mdx-js/react'; @@ -13,17 +13,17 @@ const mdxComponents = { code: Code, strong: Strong, ul: ({children}) =>
    {children}
, - li: ({children}) =>
  • {children}
    • , + li: ({children}) => ( +
  • {children}
    • + ), a: Link -} +}; export function MDXLayout({children}) { return (
    - - {children} - + {children}
    ); diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx index 76c44aa0fd7..6bb6f4f5ba5 100644 --- a/.storybook-s2/docs/Migrating.jsx +++ b/.storybook-s2/docs/Migrating.jsx @@ -1,58 +1,124 @@ -import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; +import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; import {P, Code, Pre, H3, H2, Link} from './typography'; export function Migrating() { return (
    -

    - Migrating to Spectrum 2 -

    -

    An automated upgrade assistant is available by running the following command in the project you want to upgrade:

    +

    Migrating to Spectrum 2

    +

    + An automated upgrade assistant is available by running the following command in the + project you want to upgrade: + 

    npx @react-spectrum/codemods s1-to-s2
    -

    To only upgrade specific components, provide a --components argument with a comma-separated list of components to upgrade:

    +

    + To only upgrade specific components, provide a --components argument with a + comma-separated list of components to upgrade: + 

    npx @react-spectrum/codemods s1-to-s2 --components=Button,TextField

    The following arguments are also available:

      -
    • --path - Path to apply the upgrade changes to. Defaults to the current directory (.)
      • -
    • --dry - Runs the upgrade assistant without making changes to components
      • -
    • --ignore-pattern - Ignore files that match the provided glob expression. Defaults to '**/node_modules/**'
      • +
    • + --path - Path to apply the upgrade changes to. Defaults to the current + directory (.) +
      • +
    • + --dry - Runs the upgrade assistant without making changes to components +
      • +
    • + --ignore-pattern - Ignore files that match the provided glob expression. + Defaults to '**/node_modules/**' +
    -

    For cases that the upgrade assistant doesn't handle automatically or where you'd rather upgrade some components manually, use the guide below.

    +

    + For cases that the upgrade assistant doesn't handle automatically or where you'd rather + upgrade some components manually, use the guide below. +

    -

    Note that [PENDING] indicates that future changes will occur before the final release, and the current solution should be considered temporary.

    +

    + Note that [PENDING] indicates that future changes will occur before the final release, and + the current solution should be considered temporary. +

    Components

    All components

      -
    • Update imports to use the @react-spectrum/s2 package instead of @adobe/react-spectrum or individual packages like @react-spectrum/button
      • -
    • Update style props to use the style macro instead. See the 'Style props' section below
      • +
    • + Update imports to use the @react-spectrum/s2 package instead of{' '} + @adobe/react-spectrum or individual packages like{' '} + @react-spectrum/button +
      • +
    • + Update{' '} + + style props + {' '} + to use the style macro instead. See + the 'Style props' section below +

    Accordion

      -
    • Update Item to be Disclosure. Disclosure should now consist of two children: DisclosureTitle and DisclosurePanel. Note that you can now add interactive elements inside the header and adjacent to the title by using the DisclosureHeader component with the DisclosureTitle and interactive elements inside.
      • -
    • Update Item's title prop to be a child of DisclosureTitle
      • -
    • Update children of Item to be children of DisclosurePanel
      • -
    • Update key to be id (and keep key if rendered inside array.map)
      • -
    • Remove disabledKeys and add isDisabled to individual Disclosure components
      • -
    • Add allowsMultipleExpanded to allow multiple Disclosure components to be expanded at once (previously default behavior)
      • +
    • + Update Item to be Disclosure. Disclosure should + now consist of two children: DisclosureTitle and{' '} + DisclosurePanel. Note that you can now add interactive elements inside the + header and adjacent to the title by using the DisclosureHeader component + with the DisclosureTitle and interactive elements inside. +
      • +
    • + Update Item's title prop to be a child of DisclosureTitle +
      • +
    • + Update children of Item to be children of DisclosurePanel +
      • +
    • + Update key to be id (and keep key if rendered + inside array.map) +
      • +
    • + Remove disabledKeys and add isDisabled to individual{' '} + Disclosure components +
      • +
    • + Add allowsMultipleExpanded to allow multiple Disclosure{' '} + components to be expanded at once (previously default behavior) +

    ActionBar

      -
    • Remove ActionBarContainer and move ActionBar to renderActionBar prop of TableView or CardView
      • -
    • Update Item to ActionButton
      • -
    • Update root level onAction to be called via onPress on each ActionButton
      • -
    • Apply isDisabled directly on each ActionButton or ToggleButton instead of root level disabledKeys
      • -
    • Update key to be id (and keep key if rendered inside array.map)
      • -
    • Convert dynamic collections render function to items.map
      • -
    • [PENDING] Comment out buttonLabelBehavior (it has not been implemented yet)
      • +
    • + Remove ActionBarContainer and move ActionBar to{' '} + renderActionBar prop of TableView or CardView +
      • +
    • + Update Item to ActionButton +
      • +
    • + Update root level onAction to be called via onPress on each{' '} + ActionButton +
      • +
    • + Apply isDisabled directly on each ActionButton or{' '} + ToggleButton instead of root level disabledKeys +
      • +
    • + Update key to be id (and keep key if rendered + inside array.map) +
      • +
    • + Convert dynamic collections render function to items.map +
      • +
    • + [PENDING] Comment out buttonLabelBehavior (it has not been implemented yet) +

    ActionButton

    @@ -60,22 +126,53 @@ export function Migrating() {

    ActionMenu

      -
    • [PENDING] Comment out closeOnSelect (it has not been implemented yet)
      • -
    • [PENDING] Comment out trigger (it has not been implemented yet)
      • -
    • Update Item to be a MenuItem
      • +
    • + [PENDING] Comment out closeOnSelect (it has not been implemented yet) +
      • +
    • + [PENDING] Comment out trigger (it has not been implemented yet) +
      • +
    • + Update Item to be a MenuItem +

    ActionGroup

      -
    • Use ActionButtonGroup if you are migrating from an ActionGroup that didn't allow for selection. ActionButtonGroup takes ActionButtons as children.
      • -
    • Use ToggleButtonGroup if you are migrating from an ActionGroup that used single or multiple selection. ToggleButtonGroup takes ToggleButtons as children.
      • -
    • [PENDING] Comment out overflowMode (it has not been implemented yet)
      • -
    • [PENDING] Comment out buttonLabelBehavior (it has not been implemented yet)
      • -
    • [PENDING] Comment out summaryIcon (it has not been implemented yet)
      • -
    • Update root level onAction to called via onPress on each ActionButton
      • -
    • Apply isDisabled directly on each ActionButton or ToggleButton instead of root level disabledKeys
      • -
    • Update key to be id (and keep key if rendered inside array.map)
      • -
    • Convert dynamic collections render function to items.map
      • +
    • + Use ActionButtonGroup if you are migrating from an ActionGroup{' '} + that didn't allow for selection. ActionButtonGroup takes{' '} + ActionButtons as children.{' '} +
      • +
    • + Use ToggleButtonGroup if you are migrating from an ActionGroup{' '} + that used single or multiple selection. ToggleButtonGroup takes{' '} + ToggleButtons as children.{' '} +
      • +
    • + [PENDING] Comment out overflowMode (it has not been implemented yet) +
      • +
    • + [PENDING] Comment out buttonLabelBehavior (it has not been implemented yet) +
      • +
    • + [PENDING] Comment out summaryIcon (it has not been implemented yet) +
      • +
    • + Update root level onAction to called via onPress on each{' '} + ActionButton +
      • +
    • + Apply isDisabled directly on each ActionButton or{' '} + ToggleButton instead of root level disabledKeys +
      • +
    • + Update key to be id (and keep key if rendered + inside array.map) +
      • +
    • + Convert dynamic collections render function to items.map +

    AlertDialog

    @@ -83,32 +180,63 @@ export function Migrating() {

    Avatar

      -
    • [PENDING] Comment out isDisabled (it has not been implemented yet)
      • -
    • Update size to be a pixel value if it currently matches 'avatar-size-*'
      • +
    • + [PENDING] Comment out isDisabled (it has not been implemented yet) +
      • +
    • + Update size to be a pixel value if it currently matches{' '} + 'avatar-size-*' +

    Badge

      -
    • Change variant="info" to variant="informative"
      • +
    • + Change variant="info" to variant="informative" +

    Breadcrumbs

      -
    • [PENDING] Comment out showRoot (it has not been implemented yet)
      • -
    • [PENDING] Comment out isMultiline (it has not been implemented yet)
      • -
    • [PENDING] Comment out autoFocusCurrent (it has not been implemented yet)
      • -
    • Remove size="S" (Small is no longer a supported size in Spectrum 2)
      • -
    • Update Item to be a Breadcrumb
      • +
    • + [PENDING] Comment out showRoot (it has not been implemented yet) +
      • +
    • + [PENDING] Comment out isMultiline (it has not been implemented yet) +
      • +
    • + [PENDING] Comment out autoFocusCurrent (it has not been implemented yet) +
      • +
    • + Remove size="S" (Small is no longer a supported size in Spectrum 2) +
      • +
    • + Update Item to be a Breadcrumb +

    Button

      -
    • Change variant="cta" to variant="accent"
      • -
    • Change variant="overBackground" to variant="primary" staticColor="white"
      • -
    • Change style to fillStyle
      • -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • If href is present, the Button should be converted to a LinkButton
      • -
    • Remove elementType (it is no longer supported in Spectrum 2)
      • +
    • + Change variant="cta" to variant="accent" +
      • +
    • + Change variant="overBackground" to{' '} + variant="primary" staticColor="white" +
      • +
    • + Change style to fillStyle +
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + If href is present, the Button should be converted to a{' '} + LinkButton +
      • +
    • + Remove elementType (it is no longer supported in Spectrum 2) +

    ButtonGroup

    @@ -122,24 +250,37 @@ export function Migrating() {

    CheckboxGroup

      -
    • Remove showErrorIcon (it has been removed due to accessibility issues)
      • +
    • + Remove showErrorIcon (it has been removed due to accessibility issues) +

    ColorArea

      -
    • Remove size and instead provide a size via the style macro (i.e. {`styles={style({size: 20})}`})
      • +
    • + Remove size and instead provide a size via the style macro (i.e.{' '} + {`styles={style({size: 20})}`}) +

    ColorField

      -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +

    ColorSlider

      -
    • Remove showValueLabel (it has been removed due to accessibility issues)
      • +
    • + Remove showValueLabel (it has been removed due to accessibility issues) +

    ColorSwatch

    @@ -147,179 +288,372 @@ export function Migrating() {

    ColorWheel

      -
    • Remove size and instead provide a size via the style macro (i.e. {`styles={style({size: 20})}`})
      • +
    • + Remove size and instead provide a size via the style macro (i.e.{' '} + {`styles={style({size: 20})}`}) +

    ComboBox

      -
    • Change menuWidth value from a DimensionValue to a pixel value
      • -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • -
    • Update Item to be a ComboBoxItem
      • +
    • + Change menuWidth value from a DimensionValue to a pixel value +
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +
      • +
    • + Update Item to be a ComboBoxItem +

    DateField

      -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +

    DatePicker

      -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +

    DateRangePicker

      -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +

    Dialog

      -
    • Update children to move render props from being the second child of DialogTrigger to being a child of Dialog
      • -
    • Remove onDismiss and use onOpenChange on the DialogTrigger, or onDismiss on the DialogContainer instead
      • -
    • Dialog is now meant specifically for rendering modal dialogs only and follows the same preset layout as before
      • -
    • If you are trying to create a dialog with a custom layout use CustomDialog
      • -
    • If you are trying to create a fullscreen dialog use FullscreenDialog
      • -
    • If you are trying to create a popover dialog use Popover
      • -
    • Supports isKeyboardDismissDisabled in place of DialogTrigger
      • -
    • Supports isDismissible in place of DialogTrigger. Note the fixed spelling from previous isDismissible prop.
      • -
    • Supports role: "dialog" | "alertdialog"
      • +
    • + Update children to move render props from being the second child of{' '} + DialogTrigger to being a child of Dialog +
      • +
    • + Remove onDismiss and use onOpenChange on the{' '} + DialogTrigger, or onDismiss on the{' '} + DialogContainer instead +
      • +
    • + Dialog is now meant specifically for rendering modal dialogs only and + follows the same preset layout as before +
      • +
    • + If you are trying to create a dialog with a custom layout use CustomDialog +
      • +
    • + If you are trying to create a fullscreen dialog use FullscreenDialog +
      • +
    • + If you are trying to create a popover dialog use Popover +
      • +
    • + Supports isKeyboardDismissDisabled in place of DialogTrigger +
      • +
    • + Supports isDismissible in place of DialogTrigger. Note the + fixed spelling from previous isDismissible prop. +
      • +
    • + Supports role: "dialog" | "alertdialog" +

    DialogContainer

      -
    • Remove type, this is dependent on the dialog level child that you use (e.g. Dialog, FullscreenDialog, Popover)
      • -
    • Remove isDismissable, prop now exists on the dialog level component as isDismissible
      • -
    • Remove isKeyboardDismissDisabled, prop now exists on the dialog level component
      • +
    • + Remove type, this is dependent on the dialog level child that you use (e.g.{' '} + Dialog, FullscreenDialog, Popover) +
      • +
    • + Remove isDismissable, prop now exists on the dialog level component as{' '} + isDismissible +
      • +
    • + Remove isKeyboardDismissDisabled, prop now exists on the dialog level + component +

    DialogTrigger

      -
    • [PENDING] Comment out type="tray" (Tray has not been implemented yet)
      • -
    • [PENDING] Comment out mobileType (Tray and other types have not been implemented yet for Popover)
      • -
    • Remove targetRef (it is no longer supported in Spectrum 2)
      • -
    • Update children to remove render props usage, and note that the close function was moved from DialogTrigger to Dialog
      • -
    • Remove containerPadding, prop now exists on the Popover component
      • -
    • Remove crossOffset, prop now exists on the Popover component
      • -
    • Remove hideArrow, prop now exists on the Popover component
      • -
    • Remove isDismissable, prop now exists on the dialog level component as isDismissible
      • -
    • Remove isKeyboardDismissDisabled, prop now exists on the dialog level component
      • -
    • Remove offset, prop now exists on the Popover component
      • -
    • Remove placement, prop now exists on the Popover component
      • -
    • Remove shouldFlip, prop now exists on the Popover component
      • -
    • Remove type, this is dependent on the dialog level child that you use (e.g. Dialog, FullscreenDialog, Popover)
      • +
    • + [PENDING] Comment out type="tray" (Tray has not been + implemented yet) +
      • +
    • + [PENDING] Comment out mobileType (Tray and other types have + not been implemented yet for Popover) +
      • +
    • + Remove targetRef (it is no longer supported in Spectrum 2) +
      • +
    • + Update children to remove render props usage, and note that the{' '} + close function was moved from DialogTrigger to{' '} + Dialog +
      • +
    • + Remove containerPadding, prop now exists on the Popover{' '} + component +
      • +
    • + Remove crossOffset, prop now exists on the Popover component +
      • +
    • + Remove hideArrow, prop now exists on the Popover component +
      • +
    • + Remove isDismissable, prop now exists on the dialog level component as{' '} + isDismissible +
      • +
    • + Remove isKeyboardDismissDisabled, prop now exists on the dialog level + component +
      • +
    • + Remove offset, prop now exists on the Popover component +
      • +
    • + Remove placement, prop now exists on the Popover component +
      • +
    • + Remove shouldFlip, prop now exists on the Popover component +
      • +
    • + Remove type, this is dependent on the dialog level child that you use (e.g.{' '} + Dialog, FullscreenDialog, Popover) +

    Divider

      -
    • Remove Divider component if within a Dialog (Updated design for Dialog in Spectrum 2)
      • +
    • + Remove Divider component if within a Dialog (Updated design for Dialog in Spectrum 2) +

    Flex

      -
    • Update Flex to be a div and apply flex styles using the style macro (i.e. {`
      `})
      • +
    • + Update Flex to be a div and apply flex styles using the style + macro (i.e. {`
      `}) +

    Form

      -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Remove isReadOnly (it is no longer supported in Spectrum 2)
      • -
    • Remove validationState (it is no longer supported in Spectrum 2)
      • -
    • Remove validationBehavior (it is no longer supported in Spectrum 2)
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Remove isReadOnly (it is no longer supported in Spectrum 2) +
      • +
    • + Remove validationState (it is no longer supported in Spectrum 2) +
      • +
    • + Remove validationBehavior (it is no longer supported in Spectrum 2) +

    Grid

      -
    • Update Grid to be a div and apply grid styles using the style macro (i.e. {`
      `})
      • +
    • + Update Grid to be a div and apply grid styles using the style + macro (i.e. {`
      `}) +

    IllustratedMessage

      -
    • Update illustrations to be from @react-spectrum/s2/illustrations. See Illustrations
      • +
    • + Update illustrations to be from @react-spectrum/s2/illustrations. See{' '} + Illustrations +

    InlineAlert

      -
    • Change variant="info" to variant="informative"
      • +
    • + Change variant="info" to variant="informative" +

    Item

      -
    • If within Menu: Update Item to be a MenuItem
      • -
    • If within ActionMenu: Update Item to be a MenuItem
      • -
    • If within TagGroup: Update Item to be a Tag
      • -
    • If within Breadcrumbs: Update Item to be a Breadcrumb
      • -
    • If within Picker: Update Item to be a PickerItem
      • -
    • If within ComboBox: Update Item to be a ComboBoxItem
      • -
    • If within ListBox: Update Item to be a ListBoxItem
      • -
    • If within ListView: Update Item to be a ListViewItem
      • -
    • If within TabList: Update Item to be a Tab
      • -
    • If within TabPanels: Update Item to be a TabPanel and remove surrounding TabPanels
      • -
    • Update key to be id (and keep key if rendered inside array.map)
      • +
    • + If within Menu: Update Item to be a MenuItem +
      • +
    • + If within ActionMenu: Update Item to be a{' '} + MenuItem +
      • +
    • + If within TagGroup: Update Item to be a Tag +
      • +
    • + If within Breadcrumbs: Update Item to be a{' '} + Breadcrumb +
      • +
    • + If within Picker: Update Item to be a PickerItem +
      • +
    • + If within ComboBox: Update Item to be a{' '} + ComboBoxItem +
      • +
    • + If within ListBox: Update Item to be a{' '} + ListBoxItem +
      • +
    • + If within ListView: Update Item to be a{' '} + ListViewItem +
      • +
    • + If within TabList: Update Item to be a Tab +
      • +
    • + If within TabPanels: Update Item to be a TabPanel{' '} + and remove surrounding TabPanels +
      • +
    • + Update key to be id (and keep key if rendered + inside array.map) +

    Link

      -
    • Change variant="overBackground" to staticColor="white"
      • -
    • If a was used inside Link (legacy API), remove the a and apply props (i.e href) directly to Link
      • +
    • + Change variant="overBackground" to staticColor="white" +
      • +
    • + If a was used inside Link (legacy API), remove the{' '} + a and apply props (i.e href) directly to Link +

    ListBox

      -
    • Update Item to be a ListBoxItem
      • +
    • + Update Item to be a ListBoxItem +

    ListView

      -
    • [PENDING] Comment out density (it has not been implemented yet)
      • -
    • [PENDING] Comment out dragAndDropHooks (it has not been implemented yet)
      • +
    • + [PENDING] Comment out density (it has not been implemented yet) +
      • +
    • + [PENDING] Comment out dragAndDropHooks (it has not been implemented yet) +

    Menu

      -
    • Update Item to be a MenuItem
      • +
    • + Update Item to be a MenuItem +

    MenuTrigger

      -
    • [PENDING] Comment out closeOnSelect (it has not been implemented yet)
      • +
    • + [PENDING] Comment out closeOnSelect (it has not been implemented yet) +

    NumberField

      -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +

    Picker

      -
    • Change menuWidth value from a DimensionValue to a pixel value
      • -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • -
    • Update Item to be a PickerItem
      • -
    • Change isLoading to loadingState and provide the appropriate loading state.
      • -
    • defaultSelectedKey and selectedKey have been deprecated in favor of defaultValue and value respectively. See the props table for the new accepted types.
      • +
    • + Change menuWidth value from a DimensionValue to a pixel value +
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +
      • +
    • + Update Item to be a PickerItem +
      • +
    • + Change isLoading to loadingState and provide the appropriate + loading state. +
      • +
    • + defaultSelectedKey and selectedKey have been deprecated in + favor of defaultValue and value respectively. See the{' '} + props table for the new accepted types. +

    ProgressBar

      -
    • Change variant="overBackground" to staticColor="white"
      • -
    • [PENDING] Comment out labelPosition (it has not been implemented yet)
      • -
    • [PENDING] Comment out showValueLabel (it has not been implemented yet)
      • +
    • + Change variant="overBackground" to staticColor="white" +
      • +
    • + [PENDING] Comment out labelPosition (it has not been implemented yet) +
      • +
    • + [PENDING] Comment out showValueLabel (it has not been implemented yet) +

    ProgressCircle

      -
    • Change variant="overBackground" to staticColor="white"
      • +
    • + Change variant="overBackground" to staticColor="white" +

    Radio

    @@ -327,9 +661,15 @@ export function Migrating() {

    RadioGroup

      -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • -
    • Remove showErrorIcon (it has been removed due to accessibility issues)
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +
      • +
    • + Remove showErrorIcon (it has been removed due to accessibility issues) +

    RangeCalendar

    @@ -337,38 +677,72 @@ export function Migrating() {

    RangeSlider

      -
    • Remove showValueLabel (it has been removed due to accessibility issues)
      • -
    • [PENDING] Comment out getValueLabel (it has not been implemented yet)
      • -
    • [PENDING] Comment out orientation (it has not been implemented yet)
      • +
    • + Remove showValueLabel (it has been removed due to accessibility issues) +
      • +
    • + [PENDING] Comment out getValueLabel (it has not been implemented yet) +
      • +
    • + [PENDING] Comment out orientation (it has not been implemented yet) +

    SearchField

      -
    • [PENDING] Comment out icon (it has not been implemented yet)
      • -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • +
    • + [PENDING] Comment out icon (it has not been implemented yet) +
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +

    Section

      -
    • If within Menu: Update Section to be a MenuSection
      • -
    • If within Picker: Update Section to be a PickerSection
      • +
    • + If within Menu: Update Section to be a{' '} + MenuSection +
      • +
    • + If within Picker: Update Section to be a{' '} + PickerSection +

    Slider

      -
    • Remove isFilled (Slider is always filled in Spectrum 2)
      • -
    • Remove trackGradient (Not supported in S2 design)
      • -
    • Remove showValueLabel (it has been removed due to accessibility issues)
      • -
    • [PENDING] Comment out getValueLabel (it has not been implemented yet)
      • -
    • [PENDING] Comment out orientation (it has not been implemented yet)
      • +
    • + Remove isFilled (Slider is always filled in Spectrum 2) +
      • +
    • + Remove trackGradient (Not supported in S2 design) +
      • +
    • + Remove showValueLabel (it has been removed due to accessibility issues) +
      • +
    • + [PENDING] Comment out getValueLabel (it has not been implemented yet) +
      • +
    • + [PENDING] Comment out orientation (it has not been implemented yet) +

    StatusLight

      -
    • Remove isDisabled (it is no longer supported in Spectrum 2)
      • -
    • Change variant="info" to variant="informative"
      • +
    • + Remove isDisabled (it is no longer supported in Spectrum 2) +
      • +
    • + Change variant="info" to variant="informative" +

    SubmenuTrigger

    @@ -379,54 +753,118 @@ export function Migrating() {

    TableView

      -
    • For Column and Row: Update key to be id (and keep key if rendered inside array.map)
      • -
    • For dynamic tables, pass a columns prop into Row
      • -
    • For Row: Update dynamic render function to pass in column instead of columnKey
      • -
    • Move loadingState and onLoadMore from TableBody to TableView
      • -
    • [PENDING] Comment out UNSTABLE_allowsExpandableRows (it has not been implemented yet)
      • -
    • [PENDING] Comment out UNSTABLE_onExpandedChange (it has not been implemented yet)
      • -
    • [PENDING] Comment out UNSTABLE_expandedKeys (it has not been implemented yet)
      • -
    • [PENDING] Comment out UNSTABLE_defaultExpandedKeys (it has not been implemented yet)
      • +
    • + For Column and Row: Update key to be{' '} + id (and keep key if rendered inside array.map) +
      • +
    • + For dynamic tables, pass a columns prop into Row +
      • +
    • + For Row: Update dynamic render function to pass in column{' '} + instead of columnKey +
      • +
    • + Move loadingState and onLoadMore from TableBody{' '} + to TableView +
      • +
    • + [PENDING] Comment out UNSTABLE_allowsExpandableRows (it has not been + implemented yet) +
      • +
    • + [PENDING] Comment out UNSTABLE_onExpandedChange (it has not been + implemented yet) +
      • +
    • + [PENDING] Comment out UNSTABLE_expandedKeys (it has not been implemented + yet) +
      • +
    • + [PENDING] Comment out UNSTABLE_defaultExpandedKeys (it has not been + implemented yet) +

    Tabs

      -
    • Inside TabList: Update Item to be Tab
      • -
    • Update items on Tabs to be on TabList
      • -
    • Inside TabPanels: Update Item to be a TabPanel and remove the surrounding TabPanels
      • -
    • Remove isEmphasized (it is no longer supported in Spectrum 2)
      • -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • +
    • + Inside TabList: Update Item to be Tab +
      • +
    • + Update items on Tabs to be on TabList +
      • +
    • + Inside TabPanels: Update Item to be a TabPanel{' '} + and remove the surrounding TabPanels +
      • +
    • + Remove isEmphasized (it is no longer supported in Spectrum 2) +
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +

    TagGroup

      -
    • Rename actionLabel to groupActionLabel
      • -
    • Rename onAction to onGroupAction
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Update Item to be Tag
      • +
    • + Rename actionLabel to groupActionLabel +
      • +
    • + Rename onAction to onGroupAction +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Update Item to be Tag +

    TextArea

      -
    • [PENDING] Comment out icon (it has not been implemented yet)
      • -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • +
    • + [PENDING] Comment out icon (it has not been implemented yet) +
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +

    TextField

      -
    • [PENDING] Comment out icon (it has not been implemented yet)
      • -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • +
    • + [PENDING] Comment out icon (it has not been implemented yet) +
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +

    TimeField

      -
    • Remove isQuiet (it is no longer supported in Spectrum 2)
      • -
    • Change validationState="invalid" to isInvalid
      • -
    • Remove validationState="valid" (it is no longer supported in Spectrum 2)
      • +
    • + Remove isQuiet (it is no longer supported in Spectrum 2) +
      • +
    • + Change validationState="invalid" to isInvalid +
      • +
    • + Remove validationState="valid" (it is no longer supported in Spectrum 2) +

    ToggleButton

    @@ -434,33 +872,66 @@ export function Migrating() {

    Tooltip

      -
    • Remove variant (it is no longer supported in Spectrum 2)
      • -
    • Remove placement and add to the parent TooltipTrigger instead
      • -
    • Remove showIcon (it is no longer supported in Spectrum 2)
      • -
    • Remove isOpen and add to the parent TooltipTrigger instead
      • +
    • + Remove variant (it is no longer supported in Spectrum 2) +
      • +
    • + Remove placement and add to the parent TooltipTrigger instead +
      • +
    • + Remove showIcon (it is no longer supported in Spectrum 2) +
      • +
    • + Remove isOpen and add to the parent TooltipTrigger instead +

    TooltipTrigger

      -
    • Update placement prop to be have one value (i.e. Update placement="bottom left" to be placement="bottom")
      • +
    • + Update placement prop to be have one value (i.e. Update{' '} + placement="bottom left" to be placement="bottom") +

    TreeView

    -

    If migrating from TreeView version 3.0.0-beta.3 or before, please do the following. Otherwise, no updates needed.

    +

    + If migrating from TreeView version 3.0.0-beta.3 or before, please do the following. + Otherwise, no updates needed. +

      -
    • Update content within TreeViewItem to be wrapped in TreeViewContentItem
      • +
    • + {' '} + Update content within TreeViewItem to be wrapped in{' '} + TreeViewContentItem +

    View

      -
    • Update View to be a div and apply styles using the style macro
      • +
    • + Update View to be a div and apply styles using the style macro +

    Well

    • - Update Well to be a div and apply styles using the style macro: - 
      +            Update Well to be a div and apply styles using the style
+            macro:
+            
                     
      {`
      
               
      {`  display: 'block',`}
      
               
      {`  textAlign: 'start',`}
      
@@ -478,25 +949,79 @@ export function Migrating() {

    Style props

    -

    React Spectrum v3 supported a limited set of style props for layout and positioning using Spectrum-defined values. Usage of these should be updated to instead use the style macro.

    +

    + React Spectrum v3 supported a limited set of{' '} + + style props + {' '} + for layout and positioning using Spectrum-defined values. Usage of these should be updated + to instead use the style macro. +

    Example:

    - 
    -          
    {`- import {ActionButton} from '@adobe/react-spectrum';`}
    
-          
    {`+ import {ActionButton} from '@react-spectrum/s2';`}
    
-          
    {`+ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};`}
    
+        
    +          
    {`- import {ActionButton} from '@adobe/react-spectrum';`}
    
+          
    {`+ import {ActionButton} from '@react-spectrum/s2';`}
    
+          
    {`+ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};`}
    
           
    {'\n'}
    
-          
    {`- `}
    
-          
    {`+ `}
    
+          
    {`- `}
    
+          
    {`+ `}
    
           
    {`    Edit`}
    
           
    {`  `}
    
         
    
 
         
    Border width
    
-        
    Affected style props: borderWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, borderXWidth, borderYWidth.
    
+        
    
+          Affected style props: borderWidth, borderStartWidth,{' '}
+          borderEndWidth, borderTopWidth, borderBottomWidth,{' '}
+          borderXWidth, borderYWidth.
+        
    
         
    Example:
    
-        
    -          
    {`- `}
    
-          
    {`+ 
    `}
    
+        
    +          
    {`- `}
    
+          
    {`+ 
    `}
    
         
    
         
    Border widths should be updated to use pixel values. Use the following mappings:
    
         
@@ -508,73 +1033,165 @@ export function Migrating() {
           
-              
-              
+              
+              
-              
-              
+              
+              
-              
-              
+              
+              
-              
-              
+              
+              
-              
-              
+              
+              
    
           
             
    'none'0
+                'none'
+              
+                0
+              
             
    
             
    'thin'1
+                'thin'
+              
+                1
+              
             
    
             
    'thick'2
+                'thick'
+              
+                2
+              
             
    
             
    'thicker'4
+                'thicker'
+              
+                4
+              
             
    
             
    'thickest''[8px]'
+                'thickest'
+              
+                '[8px]'
+              
             
    
               
         
    
 
         
    Border radius
    
-        
    Affected style props: borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius.
    
+        
    
+          Affected style props: borderRadius, borderTopStartRadius,{' '}
+          borderTopEndRadius, borderBottomStartRadius,{' '}
+          borderBottomEndRadius.
+        
    
         
    Example:
    
-        
    -          
    {`- `}
    
-          
    {`+ 
    `}
    
+        
    +          
    {`- `}
    
+          
    {`+ 
    `}
    
         
    
-        
    Border radius values should be updated to use pixel values. Use the following mappings:
    
-          
-            
-              
-                
-                
-              
-            
-            
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-            
+        
    
+          Border radius values should be updated to use pixel values. Use the following mappings:
+        
    
+        
    Spectrum 1Spectrum 2
    'xsmall''[1px]'
    'small''sm'
    'regular''default'
    'medium''lg'
    'large''xl'
    
+          
+            
+              
+              
+            
+          
+          
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+          
    Spectrum 1Spectrum 2
    
+                'xsmall'
+              
+                '[1px]'
+              
    
+                'small'
+              
+                'sm'
+              
    
+                'regular'
+              
+                'default'
+              
    
+                'medium'
+              
+                'lg'
+              
    
+                'large'
+              
+                'xl'
+              
    
         
    
 
         
    Dimension values
    
-        
    Affected style props: width, minWidth, maxWidth, height, minHeight, maxHeight, margin, marginStart, marginEnd, marginTop, marginBottom, marginX, marginY, top, bottom, left, right, start, end, flexBasis, gap, columnGap, rowGap, padding, paddingX, paddingY, paddingStart, paddingEnd, paddingTop, paddingBottom.
    
+        
    
+          Affected style props: width, minWidth, maxWidth,{' '}
+          height, minHeight, maxHeight, margin,{' '}
+          marginStart, marginEnd, marginTop,{' '}
+          marginBottom, marginX, marginY, top,{' '}
+          bottom, left, right, start,{' '}
+          end, flexBasis, gap, columnGap,{' '}
+          rowGap, padding, paddingX, paddingY,{' '}
+          paddingStart, paddingEnd, paddingTop,{' '}
+          paddingBottom.
+        
    
         
    Example:
    
-        
    -          
    {`- `}
    
-          
    {`+ `}
    
+        
    +          
    {`- `}
    
+          
    {`+ `}
    
           
    {`    Edit`}
    
           
    {`  `}
    
         
    
@@ -588,334 +1205,661 @@ export function Migrating() {
           
           
             
-              'size-0'
-              0
+              
+                'size-0'
+              
+              
+                0
+              
             
             
-              'size-10'
-              1
+              
+                'size-10'
+              
+              
+                1
+              
             
             
-              'size-25'
-              2
+              
+                'size-25'
+              
+              
+                2
+              
             
             
-              'size-40'
-              3
+              
+                'size-40'
+              
+              
+                3
+              
             
             
-              'size-50'
-              4
+              
+                'size-50'
+              
+              
+                4
+              
             
             
-              'size-65'
-              5
+              
+                'size-65'
+              
+              
+                5
+              
             
             
-              'size-75'
-              6
+              
+                'size-75'
+              
+              
+                6
+              
             
             
-              'size-85'
-              7
+              
+                'size-85'
+              
+              
+                7
+              
             
             
-              'size-100'
-              8
+              
+                'size-100'
+              
+              
+                8
+              
             
             
-              'size-115'
-              9
+              
+                'size-115'
+              
+              
+                9
+              
             
             
-              'size-125'
-              10
+              
+                'size-125'
+              
+              
+                10
+              
             
             
-              'size-130'
-              11
+              
+                'size-130'
+              
+              
+                11
+              
             
             
-              'size-150'
-              12
+              
+                'size-150'
+              
+              
+                12
+              
             
             
-              'size-160'
-              13
+              
+                'size-160'
+              
+              
+                13
+              
             
             
-              'size-175'
-              14
+              
+                'size-175'
+              
+              
+                14
+              
             
             
-              'size-200'
-              16
+              
+                'size-200'
+              
+              
+                16
+              
             
             
-              'size-225'
-              18
+              
+                'size-225'
+              
+              
+                18
+              
             
             
-              'size-250'
-              20
+              
+                'size-250'
+              
+              
+                20
+              
             
             
-              'size-275'
-              22
+              
+                'size-275'
+              
+              
+                22
+              
             
             
-              'size-300'
-              24
+              
+                'size-300'
+              
+              
+                24
+              
             
             
-              'size-325'
-              26
+              
+                'size-325'
+              
+              
+                26
+              
             
             
-              'size-350'
-              28
+              
+                'size-350'
+              
+              
+                28
+              
             
             
-              'size-400'
-              32
+              
+                'size-400'
+              
+              
+                32
+              
             
             
-              'size-450'
-              36
+              
+                'size-450'
+              
+              
+                36
+              
             
             
-              'size-500'
-              40
+              
+                'size-500'
+              
+              
+                40
+              
             
             
-              'size-550'
-              44
+              
+                'size-550'
+              
+              
+                44
+              
             
             
-              'size-600'
-              48
+              
+                'size-600'
+              
+              
+                48
+              
             
             
-              'size-675'
-              54
+              
+                'size-675'
+              
+              
+                54
+              
             
             
-              'size-700'
-              56
+              
+                'size-700'
+              
+              
+                56
+              
             
             
-              'size-800'
-              64
+              
+                'size-800'
+              
+              
+                64
+              
             
             
-              'size-900'
-              72
+              
+                'size-900'
+              
+              
+                72
+              
             
             
-              'size-1000'
-              80
+              
+                'size-1000'
+              
+              
+                80
+              
             
             
-              'size-1200'
-              96
+              
+                'size-1200'
+              
+              
+                96
+              
             
             
-              'size-1250'
-              100
+              
+                'size-1250'
+              
+              
+                100
+              
             
             
-              'size-1600'
-              128
+              
+                'size-1600'
+              
+              
+                128
+              
             
             
-              'size-1700'
-              136
+              
+                'size-1700'
+              
+              
+                136
+              
             
             
-              'size-2000'
-              160
+              
+                'size-2000'
+              
+              
+                160
+              
             
             
-              'size-2400'
-              192
+              
+                'size-2400'
+              
+              
+                192
+              
             
             
-              'size-3000'
-              240
+              
+                'size-3000'
+              
+              
+                240
+              
             
             
-              'size-3400'
-              272
+              
+                'size-3400'
+              
+              
+                272
+              
             
             
-              'size-3600'
-              288
+              
+                'size-3600'
+              
+              
+                288
+              
             
             
-              'size-4600'
-              368
+              
+                'size-4600'
+              
+              
+                368
+              
             
             
-              'size-5000'
-              400
+              
+                'size-5000'
+              
+              
+                400
+              
             
             
-              'size-6000'
-              480
+              
+                'size-6000'
+              
+              
+                480
+              
             
             
-              'static-size-0'
-              0
+              
+                'static-size-0'
+              
+              
+                0
+              
             
             
-              'static-size-10'
-              1
+              
+                'static-size-10'
+              
+              
+                1
+              
             
             
-              'static-size-25'
-              2
+              
+                'static-size-25'
+              
+              
+                2
+              
             
             
-              'static-size-40'
-              3
+              
+                'static-size-40'
+              
+              
+                3
+              
             
             
-              'static-size-50'
-              4
+              
+                'static-size-50'
+              
+              
+                4
+              
             
             
-              'static-size-65'
-              5
+              
+                'static-size-65'
+              
+              
+                5
+              
             
             
-              'static-size-100'
-              8
+              
+                'static-size-100'
+              
+              
+                8
+              
             
             
-              'static-size-115'
-              9
+              
+                'static-size-115'
+              
+              
+                9
+              
             
             
-              'static-size-125'
-              10
+              
+                'static-size-125'
+              
+              
+                10
+              
             
             
-              'static-size-130'
-              11
+              
+                'static-size-130'
+              
+              
+                11
+              
             
             
-              'static-size-150'
-              12
+              
+                'static-size-150'
+              
+              
+                12
+              
             
             
-              'static-size-160'
-              13
+              
+                'static-size-160'
+              
+              
+                13
+              
             
             
-              'static-size-175'
-              14
+              
+                'static-size-175'
+              
+              
+                14
+              
             
             
-              'static-size-200'
-              16
+              
+                'static-size-200'
+              
+              
+                16
+              
             
             
-              'static-size-225'
-              18
+              
+                'static-size-225'
+              
+              
+                18
+              
             
             
-              'static-size-250'
-              20
+              
+                'static-size-250'
+              
+              
+                20
+              
             
             
-              'static-size-300'
-              24
+              
+                'static-size-300'
+              
+              
+                24
+              
             
             
-              'static-size-400'
-              32
+              
+                'static-size-400'
+              
+              
+                32
+              
             
             
-              'static-size-450'
-              36
+              
+                'static-size-450'
+              
+              
+                36
+              
             
             
-              'static-size-500'
-              40
+              
+                'static-size-500'
+              
+              
+                40
+              
             
             
-              'static-size-550'
-              44
+              
+                'static-size-550'
+              
+              
+                44
+              
             
             
-              'static-size-600'
-              48
+              
+                'static-size-600'
+              
+              
+                48
+              
             
             
-              'static-size-700'
-              56
+              
+                'static-size-700'
+              
+              
+                56
+              
             
             
-              'static-size-800'
-              64
+              
+                'static-size-800'
+              
+              
+                64
+              
             
             
-              'static-size-900'
-              72
+              
+                'static-size-900'
+              
+              
+                72
+              
             
             
-              'static-size-1000'
-              80
+              
+                'static-size-1000'
+              
+              
+                80
+              
             
             
-              'static-size-1200'
-              96
+              
+                'static-size-1200'
+              
+              
+                96
+              
             
             
-              'static-size-1700'
-              136
+              
+                'static-size-1700'
+              
+              
+                136
+              
             
             
-              'static-size-2400'
-              192
+              
+                'static-size-2400'
+              
+              
+                192
+              
             
             
-              'static-size-2600'
-              208
+              
+                'static-size-2600'
+              
+              
+                208
+              
             
             
-              'static-size-3400'
-              272
+              
+                'static-size-3400'
+              
+              
+                272
+              
             
             
-              'static-size-3600'
-              288
+              
+                'static-size-3600'
+              
+              
+                288
+              
             
             
-              'static-size-4600'
-              368
+              
+                'static-size-4600'
+              
+              
+                368
+              
             
             
-              'static-size-5000'
-              400
+              
+                'static-size-5000'
+              
+              
+                400
+              
             
             
-              'static-size-6000'
-              480
+              
+                'static-size-6000'
+              
+              
+                480
+              
             
             
-              'single-line-height'
-              32
+              
+                'single-line-height'
+              
+              
+                32
+              
             
             
-              'single-line-width'
-              192
+              
+                'single-line-width'
+              
+              
+                192
+              
             
           
         
 
         
    Break points
    
-        
    Break points previously used in style props can be used in the style macro with updated keys. Use the following mappings:
    
+        
    
+          Break points previously used in style props can be used in the style macro with updated
+          keys. Use the following mappings:
+        
    
         
@@ -925,27 +1869,61 @@ export function Migrating() {
           
-              
-              
+              
+              
-              
-              
+              
+              
-              
-              
+              
+              
-              
-              
+              
+              
    
           
             
    
           
             
    basedefault
+                base
+              
+                default
+              
             
    
             
    Ssm
+                S
+              
+                sm
+              
             
    
             
    Mmd
+                M
+              
+                md
+              
             
    
             
    Llg
+                L
+              
+                lg
+              
             
    
               
         
    
         
    Example:
    
-        
    -          
    {`- `}
    
-          
    {`+ 
    `}
    
+        
    +          
    {`- `}
    
+          
    {`+ 
    `}
    
         
    
       
    
     
    
diff --git a/.storybook-s2/docs/Release Notes.mdx b/.storybook-s2/docs/Release Notes.mdx
index d263a535d20..08b58379a3f 100644
--- a/.storybook-s2/docs/Release Notes.mdx	
+++ b/.storybook-s2/docs/Release Notes.mdx	
@@ -7,34 +7,37 @@ export default MDXLayout;
 ## v0.12.0
 
 ### Updates
-* [ActionButton](?path=/docs/actionbutton--docs): Add pending state
-* [ColorSlider](?path=/docs/colorslider--docs): Fix `ColorLoupe` position in RTL locales
-* [ComboBox](?path=/docs/combobox--docs): Support avatars and onAction
-* [CustomDialog](?path=/docs/customdialog--docs): Support custom widths
-* [Dialog](?path=/docs/dialog--docs): Add XL size
-* [Disclosure](?path=/docs/disclosure--docs): Add animation to disclosure
-* [InlineAlert](?path=/docs/inlinealert--docs): Support heading-less Inline Alerts
-* [Picker](?path=/docs/picker--docs): Support multiple selection and avatars
-* [Tags](?path=/docs/taggroup--docs): Fix Tag collapse calculation for removeable tags
-* [Tooltip](?path=/docs/tooltip--docs): Prevent text overflow by default
-* Allow placeholders in supported S2 components (e.g. ColorArea, ComboBox, NumberField, SearchField, TextArea, TextField)
-* Apply `page.css` styles to the Shadow DOM
+
+- [ActionButton](?path=/docs/actionbutton--docs): Add pending state
+- [ColorSlider](?path=/docs/colorslider--docs): Fix `ColorLoupe` position in RTL locales
+- [ComboBox](?path=/docs/combobox--docs): Support avatars and onAction
+- [CustomDialog](?path=/docs/customdialog--docs): Support custom widths
+- [Dialog](?path=/docs/dialog--docs): Add XL size
+- [Disclosure](?path=/docs/disclosure--docs): Add animation to disclosure
+- [InlineAlert](?path=/docs/inlinealert--docs): Support heading-less Inline Alerts
+- [Picker](?path=/docs/picker--docs): Support multiple selection and avatars
+- [Tags](?path=/docs/taggroup--docs): Fix Tag collapse calculation for removeable tags
+- [Tooltip](?path=/docs/tooltip--docs): Prevent text overflow by default
+- Allow placeholders in supported S2 components (e.g. ColorArea, ComboBox, NumberField, SearchField, TextArea, TextField)
+- Apply `page.css` styles to the Shadow DOM
 
 ### Popover Styling Updates
 
-The Popover component has been updated to better support custom styling. To 
+The Popover component has been updated to better support custom styling. To
 remove the preset padding, use the new `padding` prop and wrap your Popover content
 in a custom div with your desired styling.
 
 ## v0.11.0
 
 ### New Components
-* [SelectBoxGroup](?path=/docs/selectboxgroup-alpha--docs)
+
+- [SelectBoxGroup](?path=/docs/selectboxgroup-alpha--docs)
 
 ### Updates
-* [ComboBox](?path=/docs/combobox--docs): Fix empty state rendering when no items match the current query
-* [Picker](?path=/docs/picker--docs): Fix erroneous dropdown outline when opening the Picker via click  
-* [Tabs](?path=/docs/tabs--docs): Support collapse behavior on Tabs when customizing the layout
+
+- [ComboBox](?path=/docs/combobox--docs): Fix empty state rendering when no items match the current query
+- [Picker](?path=/docs/picker--docs): Fix erroneous dropdown outline when opening the Picker via click
+- [Tabs](?path=/docs/tabs--docs): Support collapse behavior on Tabs when customizing the layout
 
 ## v0.10.0
 
@@ -46,40 +49,41 @@ If you previously used `page.css` without a `Provider`, you'll need to add a `Pr
 
 ### New Components
 
-* [Calendar](?path=/docs/calendar--docs)
-* [RangeCalendar](?path=/docs/rangecalendar--docs)
-* [DateField](?path=/docs/datefield--docs)
-* [DatePicker](?path=/docs/datepicker--docs)
-* [DateRangePicker](?path=/docs/daterangepicker--docs)
-* [TimeField](?path=/docs/timefield--docs)
+- [Calendar](?path=/docs/calendar--docs)
+- [RangeCalendar](?path=/docs/rangecalendar--docs)
+- [DateField](?path=/docs/datefield--docs)
+- [DatePicker](?path=/docs/datepicker--docs)
+- [DateRangePicker](?path=/docs/daterangepicker--docs)
+- [TimeField](?path=/docs/timefield--docs)
 
 ### Updates
 
-* [CardView](?path=/docs/cardview--docs): Fix ActionBar from not scrolling
-* [ActionButton](?path=/docs/actionbutton--docs): Fix avatar-only ActionButtons to have square dimensions
-* [Tabs](?path=/docs/tabs--docs): Improve selection indicator animation, fix collasped tabs
-* [ProgressCircle](?path=/docs/progresscircle--docs): Add track outline in High Contrast Mode
-* [Switch](?path=/docs/switch--docs): Fix the toggle in RTL locales
-* [TreeView](?path=/docs/treeview--docs): Support async loading
+- [CardView](?path=/docs/cardview--docs): Fix ActionBar from not scrolling
+- [ActionButton](?path=/docs/actionbutton--docs): Fix avatar-only ActionButtons to have square dimensions
+- [Tabs](?path=/docs/tabs--docs): Improve selection indicator animation, fix collasped tabs
+- [ProgressCircle](?path=/docs/progresscircle--docs): Add track outline in High Contrast Mode
+- [Switch](?path=/docs/switch--docs): Fix the toggle in RTL locales
+- [TreeView](?path=/docs/treeview--docs): Support async loading
 
 ## v0.9.1
 
 ### Updates
-* [Button](?path=/docs/button--docs): Fix focus visible styles from being applied on standard focus
-* [ContextualHelp](?path=/docs/contextualhelp--docs): Update width to match Spectrum designs
-* [Tabs](?path=/docs/tabs--docs): Update selection indicator when tab text changes
-* [TagGroup](?path=/docs/taggroup--docs): Fix focus visible styles from being applied on standard focus
+
+- [Button](?path=/docs/button--docs): Fix focus visible styles from being applied on standard focus
+- [ContextualHelp](?path=/docs/contextualhelp--docs): Update width to match Spectrum designs
+- [Tabs](?path=/docs/tabs--docs): Update selection indicator when tab text changes
+- [TagGroup](?path=/docs/taggroup--docs): Fix focus visible styles from being applied on standard focus
 
 ## v0.9.0
 
 ### Updates
 
-* [Combobox](?path=/docs/combobox--docs): Support for virtualization and async loading
-* [Dialog](?path=/docs/dialog--docs): Update sizes
-* [Picker](?path=/docs/picker--docs): Support for virtualization and async loading
-* [Popover](?path=/docs/popover--docs): Add `triggerRef` prop
-* [TableView](?path=/docs/tableview--docs): Support custom menus in columns
-* Apply `position: relative` to Radio and Checkbox to prevent layout jumps
+- [Combobox](?path=/docs/combobox--docs): Support for virtualization and async loading
+- [Dialog](?path=/docs/dialog--docs): Update sizes
+- [Picker](?path=/docs/picker--docs): Support for virtualization and async loading
+- [Popover](?path=/docs/popover--docs): Add `triggerRef` prop
+- [TableView](?path=/docs/tableview--docs): Support custom menus in columns
+- Apply `position: relative` to Radio and Checkbox to prevent layout jumps
 
 ### UNSAFE_className Typescript Error
 
@@ -87,62 +91,62 @@ Style macros passed to `UNSAFE_className` will now result in a TypeScript error.
 
 We strongly discourage using `UNSAFE_className` because it results in inconsistent UIs and hard to maintain code. Instead, use [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html) with the [S2 style macro](https://react-spectrum.adobe.com/s2/index.html?path=/docs/style-macro--docs) to create custom components. [Safe style properties](https://react-spectrum.adobe.com/s2/index.html?path=/docs/intro--docs#styling) can be passed to the `styles` prop of an S2 component.
 
-
 ### Style macro updates
 
 We have made significant changes to the way our Style Macro generates class names in an effort to make them stable between versions. While we work to stabilize the style macro class names, we have added a postfix based on the version number so that class names don't conflict with any prior or future version.
 
 We also made some changes to the available style macro values.
 
-* Reduced the default spacing scale so it only goes up to 96px. Other values can be used via the `space()` macro
-* Switched to rems for media queries. Since component sizes scale with rems, breakpoints need to match.
-* Switch to px instead of rems for padding and absolute positioning. This avoids adding extra whitespace that causes additional text wrapping.
-* Used rems and touch scaling for icon sizes, and added t-shirt size prop
-* Added support for percentages and [viewport relative units](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths) (e.g. vw)
-* Added support for arbitrary [aspect ratio values](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
-* Added support for `calc` and other [math functions](https://www.w3.org/TR/css-values-4/#math)
-* Added support for [css-wide keywords](https://www.w3.org/TR/css-values-4/#common-keywords) like `inherit`
-* Colors no longer include default hover/press/focus states (e.g. `backgroundColor: 'accent'`). Use the `baseColor` macro instead.
-* The `control` value has been removed from `fontSize`, `borderRadius`, `width`, `height`, and other sizing properties. Use explicit values for each t-shirt size instead.
-* Fixed spelling of `disc` in `listStyleType` (was `dist`)
+- Reduced the default spacing scale so it only goes up to 96px. Other values can be used via the `space()` macro
+- Switched to rems for media queries. Since component sizes scale with rems, breakpoints need to match.
+- Switch to px instead of rems for padding and absolute positioning. This avoids adding extra whitespace that causes additional text wrapping.
+- Used rems and touch scaling for icon sizes, and added t-shirt size prop
+- Added support for percentages and [viewport relative units](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths) (e.g. vw)
+- Added support for arbitrary [aspect ratio values](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
+- Added support for `calc` and other [math functions](https://www.w3.org/TR/css-values-4/#math)
+- Added support for [css-wide keywords](https://www.w3.org/TR/css-values-4/#common-keywords) like `inherit`
+- Colors no longer include default hover/press/focus states (e.g. `backgroundColor: 'accent'`). Use the `baseColor` macro instead.
+- The `control` value has been removed from `fontSize`, `borderRadius`, `width`, `height`, and other sizing properties. Use explicit values for each t-shirt size instead.
+- Fixed spelling of `disc` in `listStyleType` (was `dist`)
 
 ## v0.8.0
 
 ### New Components
 
-* [NotificationBadge](?path=/docs/actionbutton--docs#notification-badges)
-* [Toast](?path=/docs/toast--docs) (alpha)
+- [NotificationBadge](?path=/docs/actionbutton--docs#notification-badges)
+- [Toast](?path=/docs/toast--docs) (alpha)
 
 ### Updates
 
-* Pass DOM Props to ButtonGroup
-* Prevent Dividers from growing or shrinking in a flex container by default
-* Export Autocomplete
-* Export SortDescriptor type
+- Pass DOM Props to ButtonGroup
+- Prevent Dividers from growing or shrinking in a flex container by default
+- Export Autocomplete
+- Export SortDescriptor type
 
 ### Disclosure Design updates
+
 Spectrum has updated the S disclosure design. As a result, all other sizes (M, L, XL) now map to one size smaller than before. See [PR](https://github.com/adobe/react-spectrum/pull/8006) for details.
 
 ## v0.7.0
 
 ### New Components
 
-* [TreeView](?path=/docs/treeview--docs)
+- [TreeView](?path=/docs/treeview--docs)
 
 ### Updates
 
-* [Badge](?path=/docs/badge--docs): Add `overflowMode` prop, fix icon alignment, update typo from `variant="charteuse"` to `variant="chartreuse"`
-* [CardView](?path=/docs/cardview--docs): Fix styling when using `renderActionBar`
-* Image: Add `fetchPriority` prop
-* [Menu](?path=/docs/menu--docs): Fix menu item's focus rings from exceeding popover boundaries
-* [Tabs](?path=/docs/tabs--docs): Add collapse behavior
-* Remove `all: revert-layer` from style macro generated CSS to fix Safari issues
-* Remove references to CSS `flex` shorthand. Please use `flexGrow`, `flexBasis`, and `flexShrink` instead.
+- [Badge](?path=/docs/badge--docs): Add `overflowMode` prop, fix icon alignment, update typo from `variant="charteuse"` to `variant="chartreuse"`
+- [CardView](?path=/docs/cardview--docs): Fix styling when using `renderActionBar`
+- Image: Add `fetchPriority` prop
+- [Menu](?path=/docs/menu--docs): Fix menu item's focus rings from exceeding popover boundaries
+- [Tabs](?path=/docs/tabs--docs): Add collapse behavior
+- Remove `all: revert-layer` from style macro generated CSS to fix Safari issues
+- Remove references to CSS `flex` shorthand. Please use `flexGrow`, `flexBasis`, and `flexShrink` instead.
 
 ### Codemods
 
-* Update S2 icon migration map
-* Handle margin/padding shorthands in style props codemod
+- Update S2 icon migration map
+- Handle margin/padding shorthands in style props codemod
 
 ### Important CSS update
 
@@ -156,36 +160,36 @@ To fix these Safari issues, we have removed `all: revert-layer` in this release.
 
 ### New Components
 
-* [ActionBar](?path=/docs/actionbar--docs)
+- [ActionBar](?path=/docs/actionbar--docs)
 
 ### Updates
 
-* [Button](?path=/docs/button--docs): Add `genai` and `premium` gradient variants
-* [Menu](?path=/docs/menu--docs): Add `hideLinkOutIcon` prop, update alignment of items in different sections, and show checkmark on selected items that are links.
-* Added `staticColor="auto"` option to [ActionButton](?path=/docs/actionbutton--docs), [ToggleButton](?path=/docs/togglebutton--docs), [Divider](?path=/docs/divider--docs), [Meter](?path=/docs/meter--docs), [ProgressBar](?path=/docs/progressbar--docs), and [Link](?path=/docs/link--docs)
-* [ContextualHelp](?path=/docs/contextualhelp--docs): Fix alignment with field labels
-* [InlineAlert](?path=/docs/inlinealert--docs): Remove maximum width
-* [CheckboxGroup](?path=/docs/checkboxgroup--docs): Fix `isRequired` within a Form
+- [Button](?path=/docs/button--docs): Add `genai` and `premium` gradient variants
+- [Menu](?path=/docs/menu--docs): Add `hideLinkOutIcon` prop, update alignment of items in different sections, and show checkmark on selected items that are links.
+- Added `staticColor="auto"` option to [ActionButton](?path=/docs/actionbutton--docs), [ToggleButton](?path=/docs/togglebutton--docs), [Divider](?path=/docs/divider--docs), [Meter](?path=/docs/meter--docs), [ProgressBar](?path=/docs/progressbar--docs), and [Link](?path=/docs/link--docs)
+- [ContextualHelp](?path=/docs/contextualhelp--docs): Fix alignment with field labels
+- [InlineAlert](?path=/docs/inlinealert--docs): Remove maximum width
+- [CheckboxGroup](?path=/docs/checkboxgroup--docs): Fix `isRequired` within a Form
 
 ### Codemods
 
-* Added TableView codemods
+- Added TableView codemods
 
 ## v0.5.0
 
 In this release we have updated our Dialog and DialogTrigger APIs to improve layout flexibility for custom dialogs and popovers. Dialog has been split into four components:
 
-* [Dialog](?path=/docs/dialog--docs) – a modal dialog with a standard layout with slots for the heading, content, hero image, button group, etc. This corresponds to the previous `type="modal"` API.
-* [FullscreenDialog](?path=/docs/fullscreendialog--docs) – a fullscreen or takeover modal, similar to a Dialog but with different slots and layout. This corresponds to the previous `type="fullscreen"` and `type="fullscreenTakeover"` APIs.
-* [CustomDialog](?path=/docs/customdialog--docs) – a modal dialog with a completely custom layout. It can have default padding or go edge-to-edge. No built-in slots are provided, the layout is entirely up to you.
-* [Popover](?path=/docs/popover--docs) Popovers no longer support the previous dialog-style layout, which was rarely needed in recent apps. In addition, popover now has a reduced amount of padding by default, which was a common request.
+- [Dialog](?path=/docs/dialog--docs) – a modal dialog with a standard layout with slots for the heading, content, hero image, button group, etc. This corresponds to the previous `type="modal"` API.
+- [FullscreenDialog](?path=/docs/fullscreendialog--docs) – a fullscreen or takeover modal, similar to a Dialog but with different slots and layout. This corresponds to the previous `type="fullscreen"` and `type="fullscreenTakeover"` APIs.
+- [CustomDialog](?path=/docs/customdialog--docs) – a modal dialog with a completely custom layout. It can have default padding or go edge-to-edge. No built-in slots are provided, the layout is entirely up to you.
+- [Popover](?path=/docs/popover--docs) Popovers no longer support the previous dialog-style layout, which was rarely needed in recent apps. In addition, popover now has a reduced amount of padding by default, which was a common request.
 
 In addition, several DialogTrigger props have moved to the above children:
 
-* `type` is removed. Use one of the above components instead.
-* `isKeyboardDismissDisabled` moved to Dialog, FullscreenDialog, and CustomDialog
-* `isDismissable` was renamed to `isDismissible` (fixed spelling), and moved to Dialog and CustomDialog
-* `hideArrow`, `offset`, `crossOffset`, `containerPadding`, `placement`, and `shouldFlip` moved to Popover
+- `type` is removed. Use one of the above components instead.
+- `isKeyboardDismissDisabled` moved to Dialog, FullscreenDialog, and CustomDialog
+- `isDismissable` was renamed to `isDismissible` (fixed spelling), and moved to Dialog and CustomDialog
+- `hideArrow`, `offset`, `crossOffset`, `containerPadding`, `placement`, and `shouldFlip` moved to Popover
 
 We've also continued to iterate on developer experience based on your feedback. Documentation on style macro usage with regards to
 [colors](?path=/docs/style-macro--docs#colors) and [typography](?path=/docs/style-macro--docs#typography) have been added to help clarify
@@ -195,60 +199,60 @@ added to help you generate a properly optimized output when using the bundler of
 
 ### New components
 
-* [ActionButtonGroup](?path=/docs/actionbuttongroup--docs)
-* [CloseButton](?path=/docs/customdialog--docs)
-* [CustomDialog](?path=/docs/customdialog--docs)
-* [FullscreenDialog](?path=/docs/fullscreendialog--docs)
-* [Popover](?path=/docs/popover--docs)
-* [ToggleButtonGroup](?path=/docs/togglebuttongroup--docs)
+- [ActionButtonGroup](?path=/docs/actionbuttongroup--docs)
+- [CloseButton](?path=/docs/customdialog--docs)
+- [CustomDialog](?path=/docs/customdialog--docs)
+- [FullscreenDialog](?path=/docs/fullscreendialog--docs)
+- [Popover](?path=/docs/popover--docs)
+- [ToggleButtonGroup](?path=/docs/togglebuttongroup--docs)
 
 ### Updates
 
-* [Accordion](?path=/docs/accordion--docs): Add support for adjacent sibling elements in header
-* [ActionButton](?path=/docs/actionbutton--docs): Add support for Avatars in ActionButtons
-* [Dialog](?path=/docs/dialog--docs): See above for a summary of the changes to Dialog and Dialog adjacent components.
-* [Disclosure](?path=/docs/disclosure--docs): Add support for adjacent sibling elements in header
-* [DropZone](?path=/docs/dropzone--docs): Add t-shirt sizing
-* [Menu](?path=/docs/menu--docs): Add support for separate user defined selection modes per MenuSection
-* [Meter](?path=/docs/meter--docs): Add label positioning support
-* Update Spectrum Tokens to v53
-* Allow arbitrary pixel sizes for style macro sizing properties (e.g. width, height)
+- [Accordion](?path=/docs/accordion--docs): Add support for adjacent sibling elements in header
+- [ActionButton](?path=/docs/actionbutton--docs): Add support for Avatars in ActionButtons
+- [Dialog](?path=/docs/dialog--docs): See above for a summary of the changes to Dialog and Dialog adjacent components.
+- [Disclosure](?path=/docs/disclosure--docs): Add support for adjacent sibling elements in header
+- [DropZone](?path=/docs/dropzone--docs): Add t-shirt sizing
+- [Menu](?path=/docs/menu--docs): Add support for separate user defined selection modes per MenuSection
+- [Meter](?path=/docs/meter--docs): Add label positioning support
+- Update Spectrum Tokens to v53
+- Allow arbitrary pixel sizes for style macro sizing properties (e.g. width, height)
 
 ### Codemods
 
-* Support Dialog updates
-* Support ActionGroup -> ActionButtonGroup/ToggleButtonGroup
-* Support arbitrary pixel sizing for style macro sizing properties
-* Update S1 to S2 icon mapping
+- Support Dialog updates
+- Support ActionGroup -> ActionButtonGroup/ToggleButtonGroup
+- Support arbitrary pixel sizing for style macro sizing properties
+- Update S1 to S2 icon mapping
 
 ## v0.4.0
 
 ### New components
 
-* [Accordion](?path=/docs/accordion--docs)
-* [Disclosure](?path=/docs/disclosure--docs)
-* [Card](?path=/docs/card--docs)
-* [CardView](?path=/docs/cardview--docs)
-* [SegmentedControl](?path=/docs/segmentedcontrol--docs)
-* [TableView](?path=/docs/tableview--docs)
+- [Accordion](?path=/docs/accordion--docs)
+- [Disclosure](?path=/docs/disclosure--docs)
+- [Card](?path=/docs/card--docs)
+- [CardView](?path=/docs/cardview--docs)
+- [SegmentedControl](?path=/docs/segmentedcontrol--docs)
+- [TableView](?path=/docs/tableview--docs)
 
 ### Updates
 
-* [ProgressBar](?path=/docs/progressbar--docs): Support side label, update edges to be rounded, and support custom widths
-* [ProgressCircle]((?path=/docs/progresscircle--docs)): Update edges to be rounded
-* [Badge](?path=/docs/badge--docs): Add subtle and outline fill variants
-* [Breadcrumbs](?path=/docs/breadcrumbs--docs): Add collapse behavior
-* [Button](?path=/docs/button--docs): Add support for pending state
-* Update Spectrum Tokens to v46
+- [ProgressBar](?path=/docs/progressbar--docs): Support side label, update edges to be rounded, and support custom widths
+- [ProgressCircle](<(?path=/docs/progresscircle--docs)>): Update edges to be rounded
+- [Badge](?path=/docs/badge--docs): Add subtle and outline fill variants
+- [Breadcrumbs](?path=/docs/breadcrumbs--docs): Add collapse behavior
+- [Button](?path=/docs/button--docs): Add support for pending state
+- Update Spectrum Tokens to v46
 
 ### Codemods
 
-* Handle legacy Link API
-* Remove Section and Items imports if not used elsewhere in file
-* Support Badge
-* Support Well
-* Support icons
-* Fix links and install step
+- Handle legacy Link API
+- Remove Section and Items imports if not used elsewhere in file
+- Support Badge
+- Support Well
+- Support icons
+- Fix links and install step
 
 ## v0.3.0
 
@@ -256,49 +260,49 @@ added to help you generate a properly optimized output when using the bundler of
 
 ### New components
 
-* [NumberField](?path=/docs/numberfield--docs)
-* [AlertDialog](?path=/docs/alertdialog--docs)
-* [Linear and gradient illustrations](?path=/docs/illustrations--docs)
-* [AvatarGroup](?path=/docs/avatargroup--docs)
-* [Tabs](?path=/docs/tabs--docs)
+- [NumberField](?path=/docs/numberfield--docs)
+- [AlertDialog](?path=/docs/alertdialog--docs)
+- [Linear and gradient illustrations](?path=/docs/illustrations--docs)
+- [AvatarGroup](?path=/docs/avatargroup--docs)
+- [Tabs](?path=/docs/tabs--docs)
 
 ### Updates
 
-* Add collapse and action support to TagGroup
-* Add support for new Adobe Clean variable font
-* Updated [workflow icons](?path=/docs/workflow-icons--docs) – **PLEASE NOTE**: some icons changed names in this release.
-* Add CLI and Parcel plugins to build custom icons and illustrations
-* Add translations for all components
-* Add slot contexts to all S2 components
-* Fix menu z-index
-* Fix overlay trigger press scaling and menu description color
-* Fix ComboBox and NumberField custom width
-* Fix padding on fields with no visible label
-* Add ContextualHelp Storybook stories to components missing them
+- Add collapse and action support to TagGroup
+- Add support for new Adobe Clean variable font
+- Updated [workflow icons](?path=/docs/workflow-icons--docs) – **PLEASE NOTE**: some icons changed names in this release.
+- Add CLI and Parcel plugins to build custom icons and illustrations
+- Add translations for all components
+- Add slot contexts to all S2 components
+- Fix menu z-index
+- Fix overlay trigger press scaling and menu description color
+- Fix ComboBox and NumberField custom width
+- Fix padding on fields with no visible label
+- Add ContextualHelp Storybook stories to components missing them
 
 ## v0.2.0
 
 ### New components
 
-* [Breadcrumbs](?path=/docs/breadcrumbs--docs)
-* [Contextual Help](?path=/docs/contextualhelp--docs)
-* [ColorArea](?path=/docs/colorarea--docs)
-* [ColorField](?path=/docs/colorfield--docs)
-* [ColorSlider](?path=/docs/colorslider--docs)
-* [ColorSwatch](?path=/docs/colorswatch--docs)
-* [ColorSwatchPicker](?path=/docs/colorswatchpicker--docs)
-* [ColorWheel](?path=/docs/colorwheel--docs)
-* [RangeSlider](?path=/docs/rangeslider--docs)
-* [Slider](?path=/docs/slider--docs)
+- [Breadcrumbs](?path=/docs/breadcrumbs--docs)
+- [Contextual Help](?path=/docs/contextualhelp--docs)
+- [ColorArea](?path=/docs/colorarea--docs)
+- [ColorField](?path=/docs/colorfield--docs)
+- [ColorSlider](?path=/docs/colorslider--docs)
+- [ColorSwatch](?path=/docs/colorswatch--docs)
+- [ColorSwatchPicker](?path=/docs/colorswatchpicker--docs)
+- [ColorWheel](?path=/docs/colorwheel--docs)
+- [RangeSlider](?path=/docs/rangeslider--docs)
+- [Slider](?path=/docs/slider--docs)
 
 ### Updates
 
-* [ESBuild starter](https://github.com/adobe/react-spectrum/tree/main/examples/s2-esbuild-starter-app) added
-* InlineAlert iconography updated
-* ContextualHelp added to all form field components
-* Fixed custom widths for field components
-* Spectrum tokens updated
-* CSS processing updated so output size is smaller
+- [ESBuild starter](https://github.com/adobe/react-spectrum/tree/main/examples/s2-esbuild-starter-app) added
+- InlineAlert iconography updated
+- ContextualHelp added to all form field components
+- Fixed custom widths for field components
+- Spectrum tokens updated
+- CSS processing updated so output size is smaller
 
 See the updated [API changelog](https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/api-diff.md) for a full list of changes since RSP v3.
 
@@ -306,16 +310,16 @@ See the updated [API changelog](https://github.com/adobe/react-spectrum/blob/mai
 
 ### New components
 
-* [Badge](?path=/docs/badge--docs)
-* [ComboBox](?path=/docs/combobox--docs)
-* [Meter](?path=/docs/meter--docs)
-* [Picker](?path=/docs/picker--docs)
+- [Badge](?path=/docs/badge--docs)
+- [ComboBox](?path=/docs/combobox--docs)
+- [Meter](?path=/docs/meter--docs)
+- [Picker](?path=/docs/picker--docs)
 
 ### Updates
 
-* [TagGroup](?path=/docs/taggroup--docs) now supports avatars, images, error message and description help text, and improved hover/focus styling
-* Updated React Aria Components to v1.2.0
-* Fixed global styles such as CSS resets from applying to Spectrum 2 elements. Note that any CSS rule referenced from an `UNSAFE_className` prop must now be wrapped in `@layer UNSAFE_overrides`. See [the docs](?path=/docs/intro--docs#unsafe-style-overrides) for more details.
-* The `style` macro will now error if it is called without importing `with {type: 'macro'}`. Previously it would fail to apply styles silently. This should help with debugging.
+- [TagGroup](?path=/docs/taggroup--docs) now supports avatars, images, error message and description help text, and improved hover/focus styling
+- Updated React Aria Components to v1.2.0
+- Fixed global styles such as CSS resets from applying to Spectrum 2 elements. Note that any CSS rule referenced from an `UNSAFE_className` prop must now be wrapped in `@layer UNSAFE_overrides`. See [the docs](?path=/docs/intro--docs#unsafe-style-overrides) for more details.
+- The `style` macro will now error if it is called without importing `with {type: 'macro'}`. Previously it would fail to apply styles silently. This should help with debugging.
 
 See the updated [API changelog](https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/api-diff.md) for a full list of changes since RSP v3.
diff --git a/.storybook-s2/docs/Release030Intro.jsx b/.storybook-s2/docs/Release030Intro.jsx
index b65b6837727..64b9f98985c 100644
--- a/.storybook-s2/docs/Release030Intro.jsx
+++ b/.storybook-s2/docs/Release030Intro.jsx
@@ -5,14 +5,20 @@ export function Release030Intro() {
   return (
     <>
       
    
-        Spectrum 2 now lives in npm, please update your dependencies to @react-spectrum/s2@^0.3.0 if you were using a previous version.
-        You'll need to update your imports to the new package name:
+        Spectrum 2 now lives in npm, please update your dependencies to{' '}
+        @react-spectrum/s2@^0.3.0 if you were using a previous version. You'll need to
+        update your imports to the new package name:
       
    
       
    {highlight(`import {...} from '@react-spectrum/s2';`)}
    
       
    and in your package.json:
    
       
    {highlight(`"@react-spectrum/s2": "^0.3.0"`)}
    
 
-      
    To help teams kickstart their migrations from v3 to Spectrum 2, we've also added a migration wizard. Please read the migration documentation for more information.
    
+      
    
+        To help teams kickstart their migrations from v3 to Spectrum 2, we've also added a migration
+        wizard. Please read the{' '}
+        migration documentation for more
+        information.
+      
    
     
-  )
+  );
 }
diff --git a/.storybook-s2/docs/StyleMacro.jsx b/.storybook-s2/docs/StyleMacro.jsx
index d862b3e5607..600d2f7472b 100644
--- a/.storybook-s2/docs/StyleMacro.jsx
+++ b/.storybook-s2/docs/StyleMacro.jsx
@@ -1,5 +1,13 @@
-import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
-import {Content, Disclosure, DisclosureTitle, DisclosurePanel, Heading, InlineAlert, Link} from '@react-spectrum/s2';
+import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
+import {
+  Content,
+  Disclosure,
+  DisclosureTitle,
+  DisclosurePanel,
+  Heading,
+  InlineAlert,
+  Link
+} from '@react-spectrum/s2';
 import {highlight} from './highlight' with {type: 'macro'};
 import {H2, H3, H3, P, Pre, Code, Strong} from './typography';
 import {Colors} from './Colors';
@@ -12,63 +20,156 @@ export function StyleMacro() {
           paddingX: 48,
           marginBottom: 48
         })}>
-        
    
-          Style Macro
-        
    
+        
    Style Macro
    
       
       
    
-        
    The React Spectrum style macro generates atomic CSS at build time, which can be applied to any DOM element or Spectrum component. Style properties use Spectrum tokens such as colors, spacing, sizing, and typography, helping you work more quickly with TypeScript autocomplete, reduce the design choices you need to make, and improve consistency between Adobe applications.
    
-        
    {highlight(`import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+        
    
+          The React Spectrum style{' '}
+          
+            macro
+          {' '}
+          generates atomic CSS at build time, which can be applied to any DOM element or Spectrum
+          component. Style properties use Spectrum tokens such as colors, spacing, sizing, and
+          typography, helping you work more quickly with TypeScript autocomplete, reduce the design
+          choices you need to make, and improve consistency between Adobe applications.
+        
    
+        
    +          {highlight(`import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 
    
   {/* ... */}
-
    `)}
    
-        
    Atomic CSS scales as your application grows because it outputs a separate rule for each CSS property you write, ensuring there is no duplication across your whole app. The above example generates two CSS rules:
    
-        
    {highlight(`.bJ { background-color: #ffbcb4 }
-.ac { color: #fff }`, 'CSS')}
    
-        
    These rules are reused across your app wherever the same values are used, which keeps your bundle size small even as you add features. In addition, you only pay for the values you use – there’s no unnecessary CSS custom properties for colors and other tokens that aren’t used.
    
-        
    The style macro colocates your styles with your component code, rather than in separate CSS files. Colocation enables you to:
    
+
    `)}
+        
    
+        
    
+          Atomic CSS scales as your application grows because it outputs a separate
+          rule for each CSS property you write, ensuring there is no duplication across your whole
+          app. The above example generates two CSS rules:
+        
    
+        
    +          {highlight(
+            `.bJ { background-color: #ffbcb4 }
+.ac { color: #fff }`,
+            'CSS'
+          )}
+        
    
+        
    
+          These rules are reused across your app wherever the same values are used, which keeps your
+          bundle size small even as you add features. In addition, you only pay for the values you
+          use – there’s no unnecessary CSS custom properties for colors and other tokens that aren’t
+          used.
+        
    
+        
    
+          The style macro colocates your styles with your component
+          code, rather than in separate CSS files. Colocation enables you to:
+        
    
         
      
-          
    • Develop more efficiently – No need to switch between multiple files when working on a component, or spend time writing CSS selectors.
      • 
-          
    • Refactor with confidence – Changing the styles in a component is guaranteed to never unintentionally affect any other parts of your application. When you delete a component, the corresponding styles are also removed, reducing technical debt.
      • 
+          
    • 
+            Develop more efficiently – No need to switch between multiple files
+            when working on a component, or spend time writing CSS selectors.
+          
      • 
+          
    • 
+            Refactor with confidence – Changing the styles in a component is
+            guaranteed to never unintentionally affect any other parts of your application. When you
+            delete a component, the corresponding styles are also removed, reducing technical debt.
+          
      • 
         
    
         
    Values
    
-        
    The style macro supports a constrained set of values for each CSS property, which conform to the Spectrum design system. For example, the backgroundColor property supports Spectrum colors, and does not allow arbitrary hex or rgb values by default. This helps make it easier to build consistent UIs that are maintainable over time.
    
+        
    
+          The style macro supports a constrained set of values for each CSS property,
+          which conform to the Spectrum design system. For example, the backgroundColor{' '}
+          property supports Spectrum colors, and does not allow arbitrary hex or rgb values by
+          default. This helps make it easier to build consistent UIs that are maintainable over
+          time.
+        
    
         
    Colors
    
-        
    The Spectrum 2 color palette is available across all color properties. See the following sections for color values available for each property.
    
+        
    
+          The Spectrum 2 color palette is available across all color properties. See the following
+          sections for color values available for each property.
+        
    
         
         
    Spacing
    
-        
    Spacing properties such as margin and padding support a limited set of values. The API is represented in pixels, however, only values conforming to a 4px grid are allowed. This helps ensure that spacing and sizing are visually consistent. Spacing values are automatically converted to rems, which scale according to the user’s font size preference.
    
+        
    
+          Spacing properties such as margin and padding support a limited
+          set of values. The API is represented in pixels, however, only values conforming to a 4px
+          grid are allowed. This helps ensure that spacing and sizing are visually consistent.
+          Spacing values are automatically converted to rems, which scale according to the user’s
+          font size preference.
+        
    
         
    In addition to numeric values, the following spacing options are available:
    
         
      
-          
    • text-to-control – The default horizontal spacing between text and a UI control, for example between a label and input. This value automatically adjusts based on the font size.
      • 
-          
    • text-to-visual – The default horizontal spacing between text and a visual element, such as an icon. This value automatically adjusts based on the font size.
      • 
-          
    • edge-to-text – The default horizontal spacing between the edge of a UI control and text within it. This value is calculated relative to the height of the control.
      • 
-          
    • pill – The default horizontal spacing between the edge of a pill-shaped UI control (e.g. a fully rounded button) and text within it. This value is calculated relative to the height of the control.
      • 
+          
    • 
+            text-to-control – The default horizontal spacing between text and a UI
+            control, for example between a label and input. This value automatically adjusts based
+            on the font size.
+          
      • 
+          
    • 
+            text-to-visual – The default horizontal spacing between text and a visual
+            element, such as an icon. This value automatically adjusts based on the font size.
+          
      • 
+          
    • 
+            edge-to-text – The default horizontal spacing between the edge of a UI
+            control and text within it. This value is calculated relative to the height of the
+            control.
+          
      • 
+          
    • 
+            pill – The default horizontal spacing between the edge of a pill-shaped UI
+            control (e.g. a fully rounded button) and text within it. This value is calculated
+            relative to the height of the control.
+          
      • 
         
    
         
    Sizing
    
-        
    Sizing properties such as width and height accept arbitrary pixel values. Internally, sizes are converted to rems, which scale according to the user’s font size preference. Additionally, size values are multiplied by 1.25x on touch screen devices to help increase the size of hit targets.
    
+        
    
+          Sizing properties such as width and height accept arbitrary
+          pixel values. Internally, sizes are converted to rems, which scale according to the user’s
+          font size preference. Additionally, size values are multiplied by 1.25x on touch screen
+          devices to help increase the size of hit targets.
+        
    
         
    Typography
    
-        
    Spectrum 2 does not include specific components for typography. Instead, you can use the style macro to apply Spectrum typography to any HTML element or component.
    
-        
    The font shorthand applies default values for the fontFamily, fontSize, fontWeight, lineHeight, and color properties, following Spectrum design pairings. These individual properties can also be set to override the default set by the shorthand.
    
-        
    {highlight(`
    
+        
    
+          Spectrum 2 does not include specific components for typography. Instead, you can use the
+          style macro to apply Spectrum typography to any HTML element or component.
+        
    
+        
    
+          The font shorthand applies default values for the fontFamily,{' '}
+          fontSize, fontWeight, lineHeight, and{' '}
+          color properties, following Spectrum design pairings. These individual
+          properties can also be set to override the default set by the shorthand.
+        
    
+        
    +          {highlight(`
    
   
    Heading
    
   
    Body
    
   
      
     
    • List item
      • 
   
    
 
    
-`)}
    
+`)}
+        
    
         
    There are several different type scales.
    
         
      
-          
    • UI – use within interactive UI components.
      • 
-          
    • Body – use for the content of pages that are primarily text.
      • 
-          
    • Heading – use for headings in content pages.
      • 
-          
    • Title – use for titles within UI components such as cards or panels.
      • 
-          
    • Detail – use for less important metadata.
      • 
-          
    • Code – use for source code.
      • 
+          
    • 
+            UI – use within interactive UI components.
+          
      • 
+          
    • 
+            Body – use for the content of pages that are primarily text.
+          
      • 
+          
    • 
+            Heading – use for headings in content pages.
+          
      • 
+          
    • 
+            Title – use for titles within UI components such as cards or panels.
+          
      • 
+          
    • 
+            Detail – use for less important metadata.
+          
      • 
+          
    • 
+            Code – use for source code.
+          
      • 
         
    
-        
    Each type scale has a default size, and several t-shirt size modifiers for additional sizes.
    
+        
    
+          Each type scale has a default size, and several t-shirt size modifiers for additional
+          sizes.
+        
    
         
    
         
           Important Note
-          Only use {''} and {''} inside other Spectrum components with predefined styles, such as {''} and {''}. They do not include any styles by default, and should not be used standalone. Use HTML elements with the style macro directly instead.
+          
+            Only use{' '}
+            
+              {''}
+            {' '}
+            and{' '}
+            
+              {''}
+            {' '}
+            inside other Spectrum components with predefined styles, such as{' '}
+            
+              {''}
+            {' '}
+            and{' '}
+            
+              {''}
+            
+            . They do not include any styles by default, and should not be used standalone. Use HTML
+            elements with the style macro directly instead.
+          
         
         
    Conditional styles
    
-        
    The style macro also supports conditional styles, such as media queries, UI states such as hover and press, and component variants. Conditional values are defined as an object where each key is a condition. This keeps all values for each property together in one place so it is easy to see where overrides are coming from.
    
-        
    This example sets the padding of a div to 8px by default, and 32px at the large media query breakpoint (1024px) defined by Spectrum.
    
-        
    {highlight(`
    
+          The style macro also supports conditional styles, such as media queries, UI
+          states such as hover and press, and component variants. Conditional values are defined as
+          an object where each key is a condition. This keeps all values for each property together
+          in one place so it is easy to see where overrides are coming from.
+        
    
+        
    
+          This example sets the padding of a div to 8px by default, and 32px at the large media
+          query breakpoint (1024px) defined by Spectrum.
+        
    
+        
    +          {highlight(`
    `)}
    
-        
    Conditions are mutually exclusive, following object property order. The style macro uses CSS cascade layers to ensure that there are no specificity issues to worry about. The last matching condition always wins.
    
+  })} />`)}
+        
    
+        
    
+          Conditions are mutually exclusive, following object property order. The style{' '}
+          macro uses{' '}
+          
+            CSS cascade layers
+          {' '}
+          to ensure that there are no specificity issues to worry about. The last matching condition
+          always wins.
+        
    
         
    Runtime conditions
    
-        
    The style macro also supports conditions that are resolved in JavaScript at runtime, such as variant props and UI states. When a runtime condition is detected, the style macro returns a function that can be called at runtime to determine which styles to apply.
    
-        
    Runtime conditions can be named however you like, and values are defined as an object. This example changes the background color depending on a variant prop:
    
-        
    {highlight(`let styles = style({
+        
    
+          The style macro also supports conditions that are resolved in JavaScript at
+          runtime, such as variant props and UI states. When a runtime condition is detected, the{' '}
+          style macro returns a function that can be called at runtime to determine
+          which styles to apply.
+        
    
+        
    
+          Runtime conditions can be named however you like, and values are defined as an object.
+          This example changes the background color depending on a variant prop:
+        
    
+        
    +          {highlight(`let styles = style({
   backgroundColor: {
     variant: {
       primary: 'accent',
@@ -159,18 +344,33 @@ export function StyleMacro() {
 
 function MyComponent({variant}) {
   return 
    
-}`)}
    
-        
    Boolean conditions starting with is do not need to be nested in an object:
    
-        
    {highlight(`let styles = style({
+}`)}
+        
    
+        
    
+          Boolean conditions starting with is do not need to be nested in an object:
+        
    
+        
    +          {highlight(`let styles = style({
   backgroundColor: {
     default: 'gray-100',
     isSelected: 'gray-900'
   }
 });
 
-
    `)}
    
-        
    Runtime conditions also work well with the render props in React Aria Components. If you define your styles inline, you’ll even get autocomplete for all of the available conditions.
    
-        
    {highlight(`import {Checkbox} from 'react-aria-components';
+
    `)}
+        
    
+        
    
+          Runtime conditions also work well with the{' '}
+          
+            render props
+          {' '}
+          in React Aria Components. If you define your styles inline, you’ll even get autocomplete
+          for all of the available conditions.
+        
    
+        
    +          {highlight(`import {Checkbox} from 'react-aria-components';
 
 `)}
    
+  })} />`)}
+        
    
         
    Nesting conditions
    
-        
    Conditions can be nested to apply styles when multiple conditions are true. Keep in mind that conditions at the same level are mutually exclusive, with the last matching condition winning. Since only one value can apply at a time, there are no specificity issues to worry about.
    
-        
    {highlight(`let styles = style({
+        
    
+          Conditions can be nested to apply styles when multiple conditions are true. Keep in mind
+          that conditions at the same level are mutually exclusive, with the last matching condition
+          winning. Since only one value can apply at a time, there are no specificity issues to
+          worry about.
+        
    
+        
    +          {highlight(`let styles = style({
   backgroundColor: {
     default: 'gray-25',
     isSelected: {
@@ -197,11 +404,31 @@ function MyComponent({variant}) {
   }
 });
 
-
    `)}
    
-        
    The above example has three runtime conditions (isSelected, isEmphasized, and isDisabled), and uses the forcedColors condition to apply styles for Windows High Contrast Mode (WHCM). The order of precedence follows the order the conditions are defined in the object, with the isSelected + isDisabled + forcedColors state having the highest priority.
    
+
    `)}
+        
    
+        
    
+          The above example has three runtime conditions (isSelected,{' '}
+          isEmphasized, and isDisabled), and uses the{' '}
+          forcedColors condition to apply styles for{' '}
+          
+            Windows High Contrast Mode
+          {' '}
+          (WHCM). The order of precedence follows the order the conditions are defined in the
+          object, with the isSelected + isDisabled +{' '}
+          forcedColors state having the highest priority.
+        
    
         
    Reusing styles
    
-        
    Styles can be reused by extracting common properties into objects, and spreading them into style calls. These must either be constants (declared with const) in the same file, or imported from another file as a macro ({"with {type: 'macro'}"}). Properties can be overridden just like normal JS objects – the last value always wins.
    
-        
    {highlight(`const horizontalStack = {
+        
    
+          Styles can be reused by extracting common properties into objects, and spreading them into{' '}
+          style calls. These must either be constants (declared with const
+          ) in the same file, or imported from another file as a macro (
+          {"with {type: 'macro'}"}). Properties can be overridden just like normal JS
+          objects – the last value always wins.
+        
    
+        
    +          {highlight(`const horizontalStack = {
   display: 'flex',
   alignItems: 'center',
   columnGap: 8
@@ -210,27 +437,39 @@ function MyComponent({variant}) {
 const styles = style({
   ...horizontalStack,
   columnGap: 4
-});`)}
    
-        
    You can also create custom utilities by defining your own macros. These are normal functions so you can do whatever computations you like to generate styles.
    
-        
    {highlight(`// style-utils.ts
+});`)}
+        
    
+        
    
+          You can also create custom utilities by defining your own macros. These are normal
+          functions so you can do whatever computations you like to generate styles.
+        
    
+        
    +          {highlight(`// style-utils.ts
 export function horizontalStack(gap: number) {
   return {
     display: 'flex',
     alignItems: 'center',
     columnGap: gap
   } as const;
-}`)}
    
+}`)}
+        
    
         
    Then, import your macro and use it in a component.
    
-        
    {highlight(`// component.tsx
+        
    +          {highlight(`// component.tsx
 import {horizontalStack} from './style-utils' with {type: 'macro'};
 
 const styles = style({
   ...horizontalStack(4),
   backgroundColor: 'base'
-});`)}
    
+});`)}
+        
    
         
    Built-in Utilities
    
-        
    The focusRing utility generates styles for the standard Spectrum focus ring, allowing you to reuse it in custom components.
    
-        
    {highlight(`import {style, focusRing} from '@react-spectrum/s2/style' with {type: 'macro'};
+        
    
+          The focusRing utility generates styles for the standard Spectrum focus ring,
+          allowing you to reuse it in custom components.
+        
    
+        
    +          {highlight(`import {style, focusRing} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Button} from 'react-aria-components';
 
 const buttonStyle = style({
@@ -241,20 +480,56 @@ const buttonStyle = style({
 export function CustomButton(props) {
   return 
    
+`)}
+        
    
         
    CSS optimization
    
-        
    The style macro relies on CSS bundling and minification to generate optimized output. When configuring your build tool, follow these best practices:
    
+        
    
+          The style macro relies on CSS bundling and minification to generate optimized output. When
+          configuring your build tool, follow these best practices:
+        
    
         
      
-          
    • Ensure that the styles are extracted into a CSS bundle and not injected at runtime by {'
\ No newline at end of file
+
diff --git a/.storybook-s2/preview.tsx b/.storybook-s2/preview.tsx
index d0081fe3f90..bd9e5fd1bff 100644
--- a/.storybook-s2/preview.tsx
+++ b/.storybook-s2/preview.tsx
@@ -1,10 +1,18 @@
 import '@react-spectrum/s2/page.css';
-import { themes } from 'storybook/theming';
-import { DARK_MODE_EVENT_NAME, useDarkMode } from '@vueless/storybook-dark-mode';
-import { addons } from 'storybook/preview-api';
+import {themes} from 'storybook/theming';
+import {DARK_MODE_EVENT_NAME, useDarkMode} from '@vueless/storybook-dark-mode';
+import {addons} from 'storybook/preview-api';
 import React from 'react';
 import {withProviderSwitcher} from './custom-addons/provider';
-import {DocsContainer, Controls, Description, Primary, Stories, Subtitle, Title} from '@storybook/addon-docs/blocks';
+import {
+  DocsContainer,
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subtitle,
+  Title
+} from '@storybook/addon-docs/blocks';
 import './global.css';
 
 const DARK_MODE_STORAGE_KEY = 'sb-addon-themes-3';
@@ -14,7 +22,7 @@ function getInitialColorScheme(): 'dark' | 'light' {
   try {
     const stored = window.localStorage.getItem(DARK_MODE_STORAGE_KEY);
     if (stored) {
-      const { current } = JSON.parse(stored);
+      const {current} = JSON.parse(stored);
       return current === 'dark' ? 'dark' : 'light';
     }
   } catch {}
@@ -35,10 +43,18 @@ const preview = {
       exclude: ['key', 'ref']
     },
     docs: {
-      container: (props) => {
+      container: props => {
         const dark = useDarkMode();
         var style = getComputedStyle(document.body);
-        return ;
+        return (
+          
+        );
       },
       codePanel: true,
       source: {
@@ -56,15 +72,16 @@ const preview = {
       },
       page: () => {
         return (
-        <>
-          
-          <Subtitle />
-          <Description />
-          <Primary />
-          <Controls />
-          <Stories includePrimary={false} />
-        </>
-      )}
+          <>
+            <Title />
+            <Subtitle />
+            <Description />
+            <Primary />
+            <Controls />
+            <Stories includePrimary={false} />
+          </>
+        );
+      }
     },
     darkMode: {
       light: {
@@ -80,7 +97,14 @@ const preview = {
     },
     options: {
       storySort: {
-        order: ['Intro', 'Style Macro', 'Workflow Icons', 'Illustrations', 'Migrating', 'Release Notes'],
+        order: [
+          'Intro',
+          'Style Macro',
+          'Workflow Icons',
+          'Illustrations',
+          'Migrating',
+          'Release Notes'
+        ],
         method: 'alphabetical'
       }
     }
@@ -88,15 +112,15 @@ const preview = {
   argTypes: {
     styles: {
       table: {category: 'Styles'},
-      control: {disable: true},
+      control: {disable: true}
     },
     UNSAFE_className: {
       table: {category: 'Styles'},
-      control: {disable: true},
+      control: {disable: true}
     },
     UNSAFE_style: {
       table: {category: 'Styles'},
-      control: {disable: true},
+      control: {disable: true}
     }
   }
 };
@@ -107,18 +131,14 @@ export const parameters = {
       rules: [
         {
           id: 'aria-hidden-focus',
-          selector: 'body *:not([data-a11y-ignore="aria-hidden-focus"])',
+          selector: 'body *:not([data-a11y-ignore="aria-hidden-focus"])'
         }
       ]
     }
   },
-  layout: 'fullscreen',
+  layout: 'fullscreen'
 };
 
-
-
-export const decorators = [
-  withProviderSwitcher
-];
+export const decorators = [withProviderSwitcher];
 
 export default preview;
diff --git a/.storybook/custom-addons/descriptions/manager.js b/.storybook/custom-addons/descriptions/manager.js
index 22b03b1925e..a1162681137 100644
--- a/.storybook/custom-addons/descriptions/manager.js
+++ b/.storybook/custom-addons/descriptions/manager.js
@@ -1,5 +1,5 @@
 import {addons, types, useParameter} from 'storybook/manager-api';
-import { AddonPanel } from 'storybook/internal/components';
+import {AddonPanel} from 'storybook/internal/components';
 import React from 'react';
 
 const ADDON_ID = 'descriptionAddon';
@@ -13,7 +13,7 @@ const MyPanel = () => {
   return <div style={{margin: '15px'}}>{item}</div>;
 };
 
-addons.register(ADDON_ID, (api) => {
+addons.register(ADDON_ID, api => {
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'Description',
diff --git a/.storybook/custom-addons/provider/index.js b/.storybook/custom-addons/provider/index.js
index 9859e00acd2..34cf722ca2c 100644
--- a/.storybook/custom-addons/provider/index.js
+++ b/.storybook/custom-addons/provider/index.js
@@ -9,25 +9,27 @@ document.body.style.margin = '0';
 
 function ProviderUpdater(props) {
   let params = new URLSearchParams(document.location.search);
-  let localeParam = params.get("providerSwitcher-locale") || undefined;
+  let localeParam = params.get('providerSwitcher-locale') || undefined;
   let [localeValue, setLocale] = useState(localeParam);
-  let themeParam = params.get("providerSwitcher-theme") || undefined;
+  let themeParam = params.get('providerSwitcher-theme') || undefined;
   let [themeValue, setTheme] = useState(themeParam);
-  let scaleParam = params.get("providerSwitcher-scale") || undefined;
+  let scaleParam = params.get('providerSwitcher-scale') || undefined;
   let [scaleValue, setScale] = useState(scaleParam);
-  let expressParam = params.get("providerSwitcher-express") || undefined;
+  let expressParam = params.get('providerSwitcher-express') || undefined;
   let [expressValue, setExpress] = useState(expressParam === 'true');
-  let [storyReady, setStoryReady] = useState(window.parent === window || window.parent !== window.top); // reduce content flash because it takes a moment to get the provider details
+  let [storyReady, setStoryReady] = useState(
+    window.parent === window || window.parent !== window.top
+  ); // reduce content flash because it takes a moment to get the provider details
   let isDark = useDarkMode();
   // Typically themes are provided with both light + dark, and both scales.
   // To build our selector to see all themes, we need to hack it a bit.
   let theme = (expressValue ? expressThemes : themes)[themeValue || 'light'] || defaultTheme;
   // When the providerSwitcher theme is set explicitly use it, otherwise follow
   // the storybook-dark-mode toolbar toggle.
-  let colorScheme = themeValue ? themeValue.replace(/est$/, '') : (isDark ? 'dark' : 'light');
+  let colorScheme = themeValue ? themeValue.replace(/est$/, '') : isDark ? 'dark' : 'light';
   useEffect(() => {
     let channel = addons.getChannel();
-    let providerUpdate = (event) => {
+    let providerUpdate = event => {
       setLocale(event.locale);
       setTheme(event.theme === 'Auto' ? undefined : event.theme);
       setScale(event.scale === 'Auto' ? undefined : event.scale);
@@ -45,9 +47,7 @@ function ProviderUpdater(props) {
   if (props.options.mainElement == null) {
     return (
       <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue}>
-        <main>
-          {storyReady && props.children}
-        </main>
+        <main>{storyReady && props.children}</main>
       </Provider>
     );
   } else {
diff --git a/.storybook/custom-addons/provider/manager.js b/.storybook/custom-addons/provider/manager.js
index 5f33181c261..8d17597a38e 100644
--- a/.storybook/custom-addons/provider/manager.js
+++ b/.storybook/custom-addons/provider/manager.js
@@ -2,19 +2,18 @@ import {addons, types} from 'storybook/manager-api';
 import {locales} from '../../constants';
 import React, {useEffect, useState} from 'react';
 
-
 let THEMES = [
   {label: 'Auto', value: ''},
-  {label: "Light", value: "light"},
-  {label: "Lightest", value: "lightest"},
-  {label: "Dark", value: "dark"},
-  {label: "Darkest", value: "darkest"}
+  {label: 'Light', value: 'light'},
+  {label: 'Lightest', value: 'lightest'},
+  {label: 'Dark', value: 'dark'},
+  {label: 'Darkest', value: 'darkest'}
 ];
 
 let SCALES = [
   {label: 'Auto', value: ''},
-  {label: "Medium", value: "medium"},
-  {label: "Large", value: "large"}
+  {label: 'Medium', value: 'medium'},
+  {label: 'Large', value: 'large'}
 ];
 
 let TOAST_POSITIONS = [
@@ -41,33 +40,33 @@ function ProviderFieldSetter({api}) {
     express: expressParam === 'true'
   });
   let channel = addons.getChannel();
-  let onLocaleChange = (e) => {
+  let onLocaleChange = e => {
     let newValue = e.target.value || undefined;
-    setValues((old) => {
+    setValues(old => {
       let next = {...old, locale: newValue};
       channel.emit('provider/updated', next);
       return next;
     });
   };
-  let onThemeChange = (e) => {
+  let onThemeChange = e => {
     let newValue = e.target.value || undefined;
-    setValues((old) => {
+    setValues(old => {
       let next = {...old, theme: newValue};
       channel.emit('provider/updated', next);
       return next;
     });
   };
-  let onScaleChange = (e) => {
+  let onScaleChange = e => {
     let newValue = e.target.value || undefined;
-    setValues((old) => {
+    setValues(old => {
       let next = {...old, scale: newValue};
       channel.emit('provider/updated', next);
       return next;
     });
   };
-  let onExpressChange = (e) => {
+  let onExpressChange = e => {
     let newValue = e.target.checked;
-    setValues((old) => {
+    setValues(old => {
       let next = {...old, express: newValue};
       channel.emit('provider/updated', next);
       return next;
@@ -88,7 +87,7 @@ function ProviderFieldSetter({api}) {
       'providerSwitcher-locale': values.locale || '',
       'providerSwitcher-theme': values.theme || '',
       'providerSwitcher-scale': values.scale || '',
-      'providerSwitcher-express': String(values.express),
+      'providerSwitcher-express': String(values.express)
     });
   });
 
@@ -97,34 +96,52 @@ function ProviderFieldSetter({api}) {
       <div style={{marginRight: '10px'}}>
         <label htmlFor="locale">Locale: </label>
         <select id="locale" name="locale" onChange={onLocaleChange} value={values.locale}>
-          {locales.map(locale => <option key={locale.label} value={locale.value}>{locale.label}</option>)}
+          {locales.map(locale => (
+            <option key={locale.label} value={locale.value}>
+              {locale.label}
+            </option>
+          ))}
         </select>
       </div>
       <div style={{marginRight: '10px'}}>
         <label htmlFor="theme">Theme: </label>
         <select id="theme" name="theme" onChange={onThemeChange} value={values.theme}>
-          {THEMES.map(theme => <option key={theme.label} value={theme.value}>{theme.label}</option>)}
+          {THEMES.map(theme => (
+            <option key={theme.label} value={theme.value}>
+              {theme.label}
+            </option>
+          ))}
         </select>
       </div>
       <div style={{marginRight: '10px'}}>
         <label htmlFor="scale">Scale: </label>
         <select id="scale" name="scale" onChange={onScaleChange} value={values.scale}>
-          {SCALES.map(scale => <option key={scale.label} value={scale.value}>{scale.label}</option>)}
+          {SCALES.map(scale => (
+            <option key={scale.label} value={scale.value}>
+              {scale.label}
+            </option>
+          ))}
         </select>
       </div>
       <div style={{marginRight: '10px'}}>
         <label htmlFor="express">Express: </label>
-        <input type="checkbox" id="express" name="express" onChange={onExpressChange} checked={values.express} />
+        <input
+          type="checkbox"
+          id="express"
+          name="express"
+          onChange={onExpressChange}
+          checked={values.express}
+        />
       </div>
     </div>
-  )
+  );
 }
 
-addons.register('ProviderSwitcher', (api) => {
+addons.register('ProviderSwitcher', api => {
   addons.add('ProviderSwitcher', {
     title: 'viewport',
     type: types.TOOL,
-    match: ({ viewMode }) => viewMode === 'story',
-    render: () => <ProviderFieldSetter api={api} />,
+    match: ({viewMode}) => viewMode === 'story',
+    render: () => <ProviderFieldSetter api={api} />
   });
 });
diff --git a/.storybook/custom-addons/scrolling/index.js b/.storybook/custom-addons/scrolling/index.js
index a466408fd5b..f137e176362 100644
--- a/.storybook/custom-addons/scrolling/index.js
+++ b/.storybook/custom-addons/scrolling/index.js
@@ -10,7 +10,7 @@ function ScrollingDecorator(props) {
 
   useEffect(() => {
     let channel = addons.getChannel();
-    let updateScrolling = (val) => {
+    let updateScrolling = val => {
       setScrolling(val);
     };
     channel.on('scrolling/updated', updateScrolling);
@@ -19,40 +19,36 @@ function ScrollingDecorator(props) {
     };
   }, []);
 
-  let styles = {alignItems: 'center', boxSizing: 'border-box', display: 'flex', justifyContent: 'center'};
+  let styles = {
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center'
+  };
   if (isScrolling) {
     return (
       <div style={{overflow: 'auto', height: '100vh', width: '100vw'}}>
-        <StoryWrapper style={{...styles, height: '300vh', width: '300vw'}}>
-          {children}
-        </StoryWrapper>
+        <StoryWrapper style={{...styles, height: '300vh', width: '300vw'}}>{children}</StoryWrapper>
       </div>
     );
   } else {
-    return (
-      <StoryWrapper style={{...styles, minHeight: '100svh'}}>
-        {children}
-      </StoryWrapper>
-    );
+    return <StoryWrapper style={{...styles, minHeight: '100svh'}}>{children}</StoryWrapper>;
   }
 }
 
 function StoryWrapper({children, className, style}) {
   return (
-    <div
-      className={clsx('react-spectrum-story', className)}
-      style={style}
-    >
+    <div className={clsx('react-spectrum-story', className)} style={style}>
       <span style={{position: 'absolute', top: 0, left: 0}}>{React.version}</span>
       {children}
     </div>
   );
 }
 
-export const withScrollingSwitcher = (Story) => {
+export const withScrollingSwitcher = Story => {
   return (
     <ScrollingDecorator>
       <Story />
     </ScrollingDecorator>
-  )
-}
+  );
+};
diff --git a/.storybook/custom-addons/scrolling/manager.js b/.storybook/custom-addons/scrolling/manager.js
index 30cb5558b9a..b2904be2a88 100644
--- a/.storybook/custom-addons/scrolling/manager.js
+++ b/.storybook/custom-addons/scrolling/manager.js
@@ -6,35 +6,42 @@ const ScrollingToolbar = ({api}) => {
   let scrolling = api.getQueryParam('scrolling');
   let [isScrolling, setScrolling] = useState(scrolling === 'true' || false);
   let onChange = () => {
-    setScrolling((old) => {
+    setScrolling(old => {
       channel.emit('scrolling/updated', !old);
       return !old;
-    })
+    });
   };
 
   useEffect(() => {
     api.setQueryParams({
-      'scrolling': isScrolling
+      scrolling: isScrolling
     });
   });
 
   return (
     <div style={{display: 'flex', alignItems: 'center', fontSize: '12px'}}>
       <div style={{marginRight: '10px'}}>
-        <label htmlFor="scrolling">Scrolling:
-          <input type="checkbox" id="scrolling" name="scrolling" checked={isScrolling} onChange={onChange} />
+        <label htmlFor="scrolling">
+          Scrolling:
+          <input
+            type="checkbox"
+            id="scrolling"
+            name="scrolling"
+            checked={isScrolling}
+            onChange={onChange}
+          />
         </label>
       </div>
     </div>
   );
 };
 
-addons.register('ScrollingSwitcher', (api) => {
+addons.register('ScrollingSwitcher', api => {
   addons.add('ScrollingSwitcher', {
     title: 'Scrolling switcher',
     type: types.TOOL,
     //👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: () => <ScrollingToolbar api={api} />
   });
 });
diff --git a/.storybook/custom-addons/strictmode/index.js b/.storybook/custom-addons/strictmode/index.js
index 3141a7c9075..8eb270492ed 100644
--- a/.storybook/custom-addons/strictmode/index.js
+++ b/.storybook/custom-addons/strictmode/index.js
@@ -4,12 +4,12 @@ import React, {StrictMode, useEffect, useState} from 'react';
 function StrictModeDecorator(props) {
   let {children} = props;
   let params = new URLSearchParams(document.location.search);
-  let strictParam = params.get("strict") || undefined;
+  let strictParam = params.get('strict') || undefined;
   let [isStrict, setStrict] = useState(strictParam !== 'false');
 
   useEffect(() => {
     let channel = addons.getChannel();
-    let updateStrict = (val) => {
+    let updateStrict = val => {
       setStrict(val);
     };
     channel.on('strict/updated', updateStrict);
@@ -18,21 +18,13 @@ function StrictModeDecorator(props) {
     };
   }, []);
 
-  return isStrict ? (
-    <StrictMode>
-      {children}
-    </StrictMode>
-  ) : children;
+  return isStrict ? <StrictMode>{children}</StrictMode> : children;
 }
 
 export const withStrictModeSwitcher = makeDecorator({
   name: 'withStrictModeSwitcher',
   parameterName: 'strictModeSwitcher',
   wrapper: (getStory, context) => {
-    return (
-      <StrictModeDecorator>
-        {getStory(context)}
-      </StrictModeDecorator>
-    );
+    return <StrictModeDecorator>{getStory(context)}</StrictModeDecorator>;
   }
 });
diff --git a/.storybook/custom-addons/strictmode/manager.js b/.storybook/custom-addons/strictmode/manager.js
index 6db41527ccd..91537ec07db 100644
--- a/.storybook/custom-addons/strictmode/manager.js
+++ b/.storybook/custom-addons/strictmode/manager.js
@@ -6,7 +6,7 @@ const StrictModeToolBar = ({api}) => {
   let strictParam = api.getQueryParam('strict');
   let [isStrict, setStrict] = useState(strictParam !== 'false');
   let onChange = () => {
-    setStrict((old) => {
+    setStrict(old => {
       channel.emit('strict/updated', !old);
       return !old;
     });
@@ -14,15 +14,22 @@ const StrictModeToolBar = ({api}) => {
 
   useEffect(() => {
     api.setQueryParams({
-      'strict': isStrict
+      strict: isStrict
     });
   });
 
   return (
     <div style={{display: 'flex', alignItems: 'center', fontSize: '12px'}}>
       <div style={{marginRight: '10px'}}>
-        <label htmlFor="strictmode">StrictMode:
-          <input type="checkbox" id="strictmode" name="strictmode" checked={isStrict} onChange={onChange} />
+        <label htmlFor="strictmode">
+          StrictMode:
+          <input
+            type="checkbox"
+            id="strictmode"
+            name="strictmode"
+            checked={isStrict}
+            onChange={onChange}
+          />
         </label>
       </div>
     </div>
@@ -30,12 +37,12 @@ const StrictModeToolBar = ({api}) => {
 };
 
 if (process.env.NODE_ENV !== 'production') {
-  addons.register('StrictModeSwitcher', (api) => {
+  addons.register('StrictModeSwitcher', api => {
     addons.add('StrictModeSwitcher', {
       title: 'Strict mode switcher',
       type: types.TOOL,
       //👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active
-      match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+      match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
       render: () => <StrictModeToolBar api={api} />
     });
   });
diff --git a/.storybook/main.mjs b/.storybook/main.mjs
index 2638bdee8cd..3192edab779 100644
--- a/.storybook/main.mjs
+++ b/.storybook/main.mjs
@@ -1,6 +1,6 @@
-import { fileURLToPath } from "node:url";
+import {fileURLToPath} from 'node:url';
 
-const localAddon = (rel) => fileURLToPath(import.meta.resolve(rel));
+const localAddon = rel => fileURLToPath(import.meta.resolve(rel));
 
 export default {
   stories: [
@@ -20,7 +20,7 @@ export default {
     localAddon('./custom-addons/descriptions'),
     localAddon('./custom-addons/theme'),
     localAddon('./custom-addons/strictmode'),
-    localAddon('./custom-addons/scrolling'),
+    localAddon('./custom-addons/scrolling')
   ],
 
   typescript: {
diff --git a/.storybook/manager.js b/.storybook/manager.js
index f5b5f6f1903..68aee3b6f3e 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -3,6 +3,6 @@ import {addons} from 'storybook/manager-api';
 addons.setConfig({
   enableShortcuts: false,
   sidebar: {
-    showRoots: false,
+    showRoots: false
   }
 });
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 072aca784fd..f856ebac9dd 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -13,12 +13,32 @@
 <!-- This file loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese, adobe-clean-han-korean, adobe-clean-han-simplified-c, and adobe-clean-han-traditional.
      Access to these fonts was provided to a team account. -->
 <script>
-  (function(d) {
+  (function (d) {
     var config = {
-      kitId: 'uei1lip',
-      scriptTimeout: 3000,
-      async: true
-    },
-    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
+        kitId: 'uei1lip',
+        scriptTimeout: 3000,
+        async: true
+      },
+      h = d.documentElement,
+      t = setTimeout(function () {
+        h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive';
+      }, config.scriptTimeout),
+      tk = d.createElement('script'),
+      f = false,
+      s = d.getElementsByTagName('script')[0],
+      a;
+    h.className += ' wf-loading';
+    tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
+    tk.async = true;
+    tk.onload = tk.onreadystatechange = function () {
+      a = this.readyState;
+      if (f || (a && a != 'complete' && a != 'loaded')) return;
+      f = true;
+      clearTimeout(t);
+      try {
+        Typekit.load(config);
+      } catch (e) {}
+    };
+    s.parentNode.insertBefore(tk, s);
   })(document);
 </script>
diff --git a/.storybook/preview.js b/.storybook/preview.js
index a849ff52fb4..574739e70b4 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -9,7 +9,7 @@ import {withStrictModeSwitcher} from './custom-addons/strictmode';
 // decorator order matters, the last one will be the outer most
 
 configureActions({
-  depth: 2,
+  depth: 2
 });
 
 // Reflect storybook-dark-mode state on the document root so global CSS / consumers
@@ -30,7 +30,7 @@ function getInitialColorScheme() {
 
 if (typeof document !== 'undefined') {
   document.documentElement.dataset.colorScheme = getInitialColorScheme();
-  addons.getChannel().on(DARK_MODE_EVENT_NAME, (isDark) => {
+  addons.getChannel().on(DARK_MODE_EVENT_NAME, isDark => {
     document.documentElement.dataset.colorScheme = isDark ? 'dark' : 'light';
   });
 }
@@ -38,9 +38,7 @@ if (typeof document !== 'undefined') {
 export const parameters = {
   options: {
     storySort: (a, b) => {
-      return a.title === b.title
-        ? 0
-        : a.id.localeCompare(b.id, undefined, { numeric: true });
+      return a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, {numeric: true});
     }
   },
   a11y: {
@@ -48,7 +46,7 @@ export const parameters = {
       rules: [
         {
           id: 'aria-hidden-focus',
-          selector: 'body *:not([data-a11y-ignore="aria-hidden-focus"])',
+          selector: 'body *:not([data-a11y-ignore="aria-hidden-focus"])'
         }
       ]
     }
@@ -69,7 +67,7 @@ export const parameters = {
       brandTitle: 'React Spectrum',
       brandImage: new URL('raw:logo-dark.svg', import.meta.url).toString()
     }
-  },
+  }
 };
 
 export const decorators = [
diff --git a/.storybook/test-runner.js b/.storybook/test-runner.js
index cf2d9a408e5..2cdfdda034c 100644
--- a/.storybook/test-runner.js
+++ b/.storybook/test-runner.js
@@ -1,11 +1,10 @@
 const {configureAxe, checkA11y, injectAxe} = require('axe-playwright');
 const {getStoryContext} = require('storybook/test-runner');
 
-
 /*
-* See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
-* to learn more about the test-runner hooks API.
-*/
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * to learn more about the test-runner hooks API.
+ */
 module.exports = {
   async preRender(page) {
     await injectAxe(page);
@@ -22,7 +21,7 @@ module.exports = {
       rules: [
         {
           id: 'aria-hidden-focus',
-          selector: 'body *:not([data-a11y-ignore="aria-hidden-focus"])',
+          selector: 'body *:not([data-a11y-ignore="aria-hidden-focus"])'
         },
         ...(storyContext.parameters?.a11y?.config?.rules ?? [])
       ]
@@ -31,9 +30,9 @@ module.exports = {
     await checkA11y(page, '#root', {
       detailedReport: true,
       detailedReportOptions: {
-        html: true,
+        html: true
       },
-      axeOptions: storyContext.parameters?.a11y?.options,
+      axeOptions: storyContext.parameters?.a11y?.options
     });
-  },
+  }
 };
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000000..99e2f7ddf76
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["oxc.oxc-vscode"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000000..3441d7ee320
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file"
+}
diff --git a/.yarn/plugins/plugin-nightly-prep.js b/.yarn/plugins/plugin-nightly-prep.js
index 508b60acd98..49e48dce119 100644
--- a/.yarn/plugins/plugin-nightly-prep.js
+++ b/.yarn/plugins/plugin-nightly-prep.js
@@ -14,7 +14,17 @@ module.exports = {
   factory: require => {
     const {PortablePath, npath, ppath, xfs} = require('@yarnpkg/fslib');
     const {BaseCommand} = require(`@yarnpkg/cli`);
-    const {Project, Configuration, Cache, StreamReport, structUtils, Manifest, miscUtils, MessageName, WorkspaceResolver} = require(`@yarnpkg/core`);
+    const {
+      Project,
+      Configuration,
+      Cache,
+      StreamReport,
+      structUtils,
+      Manifest,
+      miscUtils,
+      MessageName,
+      WorkspaceResolver
+    } = require(`@yarnpkg/core`);
     const {Command, Option} = require(`clipanion`);
     const {parseSyml, stringifySyml} = require(`@yarnpkg/parsers`);
 
@@ -27,13 +37,11 @@ module.exports = {
         details: `
           This command will update all references in every workspace package json to point to the exact nightly version, no range.
         `,
-        examples: [[
-          `yarn apply-nightly`,
-        ]],
+        examples: [[`yarn apply-nightly`]]
       });
 
       all = Option.Boolean(`--all`, false, {
-        description: `Apply the deferred version changes on all workspaces`,
+        description: `Apply the deferred version changes on all workspaces`
       });
 
       async execute() {
@@ -41,116 +49,160 @@ module.exports = {
         const {project, workspace} = await Project.find(configuration, this.context.cwd);
         const cache = await Cache.find(configuration);
 
-        const applyReport = await StreamReport.start({
-          configuration,
-          json: this.json,
-          stdout: this.context.stdout,
-        }, async report => {
-          const prerelease = this.prerelease
-            ? typeof this.prerelease !== `boolean` ? this.prerelease : `rc.%n`
-            : null;
-
-          const allReleases = await resolveVersionFiles(project, xfs, ppath, parseSyml, structUtils, {prerelease});
-          let filteredReleases = new Map();
-
-          if (this.all) {
-            filteredReleases = allReleases;
-          } else {
-            const relevantWorkspaces = this.recursive
-              ? workspace.getRecursiveWorkspaceDependencies()
-              : [workspace];
-
-            for (const child of relevantWorkspaces) {
-              const release = allReleases.get(child);
-              if (typeof release !== `undefined`) {
-                filteredReleases.set(child, release);
+        const applyReport = await StreamReport.start(
+          {
+            configuration,
+            json: this.json,
+            stdout: this.context.stdout
+          },
+          async report => {
+            const prerelease = this.prerelease
+              ? typeof this.prerelease !== `boolean`
+                ? this.prerelease
+                : `rc.%n`
+              : null;
+
+            const allReleases = await resolveVersionFiles(
+              project,
+              xfs,
+              ppath,
+              parseSyml,
+              structUtils,
+              {prerelease}
+            );
+            let filteredReleases = new Map();
+
+            if (this.all) {
+              filteredReleases = allReleases;
+            } else {
+              const relevantWorkspaces = this.recursive
+                ? workspace.getRecursiveWorkspaceDependencies()
+                : [workspace];
+
+              for (const child of relevantWorkspaces) {
+                const release = allReleases.get(child);
+                if (typeof release !== `undefined`) {
+                  filteredReleases.set(child, release);
+                }
               }
             }
-          }
-
-          if (filteredReleases.size === 0) {
-            const protip = allReleases.size > 0
-              ? ` Did you want to add --all?`
-              : ``;
 
-            report.reportWarning(MessageName.UNNAMED, `The current workspace doesn't seem to require a version bump.${protip}`);
-            return;
-          }
+            if (filteredReleases.size === 0) {
+              const protip = allReleases.size > 0 ? ` Did you want to add --all?` : ``;
 
-          applyReleases(project, filteredReleases, Manifest, miscUtils, structUtils, MessageName, npath, WorkspaceResolver, {report});
+              report.reportWarning(
+                MessageName.UNNAMED,
+                `The current workspace doesn't seem to require a version bump.${protip}`
+              );
+              return;
+            }
 
-          if (!this.dryRun) {
-            if (!prerelease) {
-              if (this.all) {
-                await clearVersionFiles(project, xfs);
-              } else {
-                await updateVersionFiles(project, [...filteredReleases.keys()], xfs, parseSyml, stringifySyml, structUtils);
+            applyReleases(
+              project,
+              filteredReleases,
+              Manifest,
+              miscUtils,
+              structUtils,
+              MessageName,
+              npath,
+              WorkspaceResolver,
+              {report}
+            );
+
+            if (!this.dryRun) {
+              if (!prerelease) {
+                if (this.all) {
+                  await clearVersionFiles(project, xfs);
+                } else {
+                  await updateVersionFiles(
+                    project,
+                    [...filteredReleases.keys()],
+                    xfs,
+                    parseSyml,
+                    stringifySyml,
+                    structUtils
+                  );
+                }
               }
-            }
 
-            report.reportSeparator();
+              report.reportSeparator();
+            }
           }
-        });
+        );
 
-        if (this.dryRun || applyReport.hasErrors())
-          return applyReport.exitCode();
+        if (this.dryRun || applyReport.hasErrors()) return applyReport.exitCode();
 
-        return await project.installWithNewReport({
-          json: this.json,
-          stdout: this.context.stdout,
-        }, {
-          cache,
-        });
+        return await project.installWithNewReport(
+          {
+            json: this.json,
+            stdout: this.context.stdout
+          },
+          {
+            cache
+          }
+        );
       }
     }
 
     return {
-      commands: [
-        NightlyPrepCommand,
-      ],
+      commands: [NightlyPrepCommand]
     };
   }
 };
 
-async function resolveVersionFiles(project, xfs, ppath, parseSyml, structUtils, miscUtils, {prerelease = null} = {}) {
+async function resolveVersionFiles(
+  project,
+  xfs,
+  ppath,
+  parseSyml,
+  structUtils,
+  miscUtils,
+  {prerelease = null} = {}
+) {
   let candidateReleases = new Map();
 
   const deferredVersionFolder = project.configuration.get(`deferredVersionFolder`);
-  if (!xfs.existsSync(deferredVersionFolder))
-    return candidateReleases;
+  if (!xfs.existsSync(deferredVersionFolder)) return candidateReleases;
 
   const deferredVersionFiles = await xfs.readdirPromise(deferredVersionFolder);
 
   for (const entry of deferredVersionFiles) {
-    if (!entry.endsWith(`.yml`))
-      continue;
+    if (!entry.endsWith(`.yml`)) continue;
 
     const versionPath = ppath.join(deferredVersionFolder, entry);
     const versionContent = await xfs.readFilePromise(versionPath, `utf8`);
     const versionData = parseSyml(versionContent);
 
-
     for (const [identStr, decision] of Object.entries(versionData.releases || {})) {
-      if (decision === Decision.DECLINE)
-        continue;
+      if (decision === Decision.DECLINE) continue;
 
       const ident = structUtils.parseIdent(identStr);
 
       const workspace = project.tryWorkspaceByIdent(ident);
       if (workspace === null)
-        throw new Error(`Assertion failed: Expected a release definition file to only reference existing workspaces (${ppath.basename(versionPath)} references ${identStr})`);
+        throw new Error(
+          `Assertion failed: Expected a release definition file to only reference existing workspaces (${ppath.basename(versionPath)} references ${identStr})`
+        );
 
       if (workspace.manifest.version === null)
-        throw new Error(`Assertion failed: Expected the workspace to have a version (${structUtils.prettyLocator(project.configuration, workspace.anchoredLocator)})`);
+        throw new Error(
+          `Assertion failed: Expected the workspace to have a version (${structUtils.prettyLocator(project.configuration, workspace.anchoredLocator)})`
+        );
 
       // If there's a `stableVersion` field, then we assume that `version`
       // contains a prerelease version and that we need to base the version
       // bump relative to the latest stable instead.
       const baseVersion = workspace.manifest.raw.stableVersion ?? workspace.manifest.version;
-      const suggestedRelease = applyStrategy(baseVersion, validateReleaseDecision(decision, miscUtils), miscUtils);
+      const suggestedRelease = applyStrategy(
+        baseVersion,
+        validateReleaseDecision(decision, miscUtils),
+        miscUtils
+      );
 
       if (suggestedRelease === null)
-        throw new Error(`Assertion failed: Expected ${baseVersion} to support being bumped via strategy ${decision}`);
+        throw new Error(
+          `Assertion failed: Expected ${baseVersion} to support being bumped via strategy ${decision}`
+        );
 
       const bestRelease = suggestedRelease;
 
@@ -159,15 +211,30 @@ async function resolveVersionFiles(project, xfs, ppath, parseSyml, structUtils,
   }
 
   if (prerelease) {
-    candidateReleases = new Map([...candidateReleases].map(([workspace, release]) => {
-      return [workspace, applyPrerelease(release, {current: workspace.manifest.version, prerelease})];
-    }));
+    candidateReleases = new Map(
+      [...candidateReleases].map(([workspace, release]) => {
+        return [
+          workspace,
+          applyPrerelease(release, {current: workspace.manifest.version, prerelease})
+        ];
+      })
+    );
   }
 
   return candidateReleases;
 }
 
-function applyReleases(project, newVersions, Manifest, miscUtils, structUtils, MessageName, npath, WorkspaceResolver, {report}) {
+function applyReleases(
+  project,
+  newVersions,
+  Manifest,
+  miscUtils,
+  structUtils,
+  MessageName,
+  npath,
+  WorkspaceResolver,
+  {report}
+) {
   const allDependents = new Map();
 
   // First we compute the reverse map to figure out which workspace is
@@ -182,13 +249,11 @@ function applyReleases(project, newVersions, Manifest, miscUtils, structUtils, M
     for (const set of Manifest.allDependencies) {
       for (const descriptor of dependent.manifest[set].values()) {
         const workspace = project.tryWorkspaceByDescriptor(descriptor);
-        if (workspace === null)
-          continue;
+        if (workspace === null) continue;
 
         // We only care about workspaces that depend on a workspace that will
         // receive a fresh update
-        if (!newVersions.has(workspace))
-          continue;
+        if (!newVersions.has(workspace)) continue;
 
         const dependents = miscUtils.getArrayWithDefault(allDependents, workspace);
         dependents.push([dependent, set, descriptor.identHash]);
@@ -203,16 +268,22 @@ function applyReleases(project, newVersions, Manifest, miscUtils, structUtils, M
     const oldVersion = workspace.manifest.version;
     workspace.manifest.version = newVersion;
 
-    const identString = workspace.manifest.name !== null
-      ? structUtils.stringifyIdent(workspace.manifest.name)
-      : null;
+    const identString =
+      workspace.manifest.name !== null ? structUtils.stringifyIdent(workspace.manifest.name) : null;
 
-    report.reportInfo(MessageName.UNNAMED, `${structUtils.prettyLocator(project.configuration, workspace.anchoredLocator)}: Bumped to ${newVersion}`);
-    report.reportJson({cwd: npath.fromPortablePath(workspace.cwd), ident: identString, oldVersion, newVersion});
+    report.reportInfo(
+      MessageName.UNNAMED,
+      `${structUtils.prettyLocator(project.configuration, workspace.anchoredLocator)}: Bumped to ${newVersion}`
+    );
+    report.reportJson({
+      cwd: npath.fromPortablePath(workspace.cwd),
+      ident: identString,
+      oldVersion,
+      newVersion
+    });
 
     const dependents = allDependents.get(workspace);
-    if (typeof dependents === `undefined`)
-      continue;
+    if (typeof dependents === `undefined`) continue;
 
     for (const [dependent, set, identHash] of dependents) {
       const descriptor = dependent.manifest[set].get(identHash);
@@ -233,8 +304,7 @@ function applyReleases(project, newVersions, Manifest, miscUtils, structUtils, M
       }
 
       let newRange = `${newVersion}`;
-      if (useWorkspaceProtocol)
-        newRange = `${WorkspaceResolver.protocol}${newRange}`;
+      if (useWorkspaceProtocol) newRange = `${WorkspaceResolver.protocol}${newRange}`;
 
       const newDescriptor = structUtils.makeDescriptor(descriptor, newRange);
       dependent.manifest[set].set(identHash, newDescriptor);
@@ -244,8 +314,7 @@ function applyReleases(project, newVersions, Manifest, miscUtils, structUtils, M
 
 async function clearVersionFiles(project, xfs) {
   const deferredVersionFolder = project.configuration.get(`deferredVersionFolder`);
-  if (!xfs.existsSync(deferredVersionFolder))
-    return;
+  if (!xfs.existsSync(deferredVersionFolder)) return;
 
   await xfs.removePromise(deferredVersionFolder);
 }
@@ -254,22 +323,19 @@ async function updateVersionFiles(project, workspaces, xfs, parseSyml, stringify
   const workspaceSet = new Set(workspaces);
 
   const deferredVersionFolder = project.configuration.get(`deferredVersionFolder`);
-  if (!xfs.existsSync(deferredVersionFolder))
-    return;
+  if (!xfs.existsSync(deferredVersionFolder)) return;
 
   const deferredVersionFiles = await xfs.readdirPromise(deferredVersionFolder);
 
   for (const entry of deferredVersionFiles) {
-    if (!entry.endsWith(`.yml`))
-      continue;
+    if (!entry.endsWith(`.yml`)) continue;
 
     const versionPath = ppath.join(deferredVersionFolder, entry);
     const versionContent = await xfs.readFilePromise(versionPath, `utf8`);
     const versionData = parseSyml(versionContent);
 
     const releases = versionData?.releases;
-    if (!releases)
-      continue;
+    if (!releases) continue;
 
     for (const locatorStr of Object.keys(releases)) {
       const ident = structUtils.parseIdent(locatorStr);
@@ -281,11 +347,10 @@ async function updateVersionFiles(project, workspaces, xfs, parseSyml, stringify
     }
 
     if (Object.keys(versionData.releases).length > 0) {
-      await xfs.changeFilePromise(versionPath, stringifySyml(
-        new stringifySyml.PreserveOrdering(
-          versionData,
-        ),
-      ));
+      await xfs.changeFilePromise(
+        versionPath,
+        stringifySyml(new stringifySyml.PreserveOrdering(versionData))
+      );
     } else {
       await xfs.unlinkPromise(versionPath);
     }
diff --git a/.yarnrc.yml b/.yarnrc.yml
index 3d83d6c5d63..58fa67fa308 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -1,14 +1,14 @@
 changesetIgnorePatterns:
-  - "**/*.test.*"
-  - "**/*.md"
-  - "**/test/**"
+  - '**/*.test.*'
+  - '**/*.md'
+  - '**/test/**'
 
 nodeLinker: node-modules
 
 packageExtensions:
-  "@parcel/node-resolver-core@*":
+  '@parcel/node-resolver-core@*':
     peerDependencies:
-      "@parcel/core": ^2.12.0
+      '@parcel/core': ^2.12.0
 
 plugins:
   - .yarn/plugins/plugin-nightly-prep.js
diff --git a/__mocks__/svg.js b/__mocks__/svg.js
index 28b1467bf23..3107f783992 100644
--- a/__mocks__/svg.js
+++ b/__mocks__/svg.js
@@ -1,4 +1,8 @@
 export default function SvgrURL() {
-  return <svg><g></g></svg>;
-};
-export const ReactComponent = (props) => <svg {...props} />;
+  return (
+    <svg>
+      <g></g>
+    </svg>
+  );
+}
+export const ReactComponent = props => <svg {...props} />;
diff --git a/babel-esm.config.json b/babel-esm.config.json
index c16bd1b4767..ec4a0020354 100644
--- a/babel-esm.config.json
+++ b/babel-esm.config.json
@@ -2,7 +2,8 @@
   "presets": [
     "@babel/preset-typescript",
     "@babel/preset-react",
-    ["@babel/preset-env",
+    [
+      "@babel/preset-env",
       {
         "loose": true,
         "modules": false
@@ -28,9 +29,7 @@
         [
           "react-remove-properties",
           {
-            "properties": [
-              "data-testid"
-            ]
+            "properties": ["data-testid"]
           }
         ]
       ]
diff --git a/babel.config.json b/babel.config.json
index 015a74f120c..2c459c9c411 100644
--- a/babel.config.json
+++ b/babel.config.json
@@ -2,7 +2,8 @@
   "presets": [
     "@babel/preset-typescript",
     "@babel/preset-react",
-    ["@babel/preset-env",
+    [
+      "@babel/preset-env",
       {
         "loose": true
       }
@@ -27,9 +28,7 @@
         [
           "react-remove-properties",
           {
-            "properties": [
-              "data-testid"
-            ]
+            "properties": ["data-testid"]
           }
         ]
       ]
diff --git a/bin/imports.js b/bin/imports.js
index c6896080870..a9a4835f51f 100644
--- a/bin/imports.js
+++ b/bin/imports.js
@@ -38,7 +38,7 @@ module.exports = {
     fixable: 'code'
   },
   create: function (context) {
-    let processNode = (node) => {
+    let processNode = node => {
       if (!node.source || node.importKind === 'type') {
         return;
       }
@@ -70,7 +70,11 @@ module.exports = {
         return;
       }
 
-      if (!exists(pkg.dependencies, pkgName) && !exists(pkg.peerDependencies, pkgName) && pkgName !== pkg.name) {
+      if (
+        !exists(pkg.dependencies, pkgName) &&
+        !exists(pkg.peerDependencies, pkgName) &&
+        pkgName !== pkg.name
+      ) {
         context.report({
           node,
           message: `Missing dependency on ${pkgName}.`,
@@ -83,7 +87,9 @@ module.exports = {
             }
 
             let depPkg = JSON.parse(fs.readFileSync(depPath, 'utf8'));
-            let pkgVersion = substrings.some(v => depPkg.version.includes(v)) ?  depPkg.version : `^${depPkg.version}`;
+            let pkgVersion = substrings.some(v => depPkg.version.includes(v))
+              ? depPkg.version
+              : `^${depPkg.version}`;
 
             if (pkgName === '@react-spectrum/provider') {
               pkg.peerDependencies = insertObject(pkg.peerDependencies, pkgName, pkgVersion);
diff --git a/bin/pure-render.js b/bin/pure-render.js
index 566255178eb..d28d2028669 100644
--- a/bin/pure-render.js
+++ b/bin/pure-render.js
@@ -53,7 +53,7 @@ module.exports = {
             node.test.type === 'BinaryExpression' &&
             (node.test.operator === '==' || node.test.operator === '===') &&
             (isMemberExpressionEqual(node.test.left, member) ||
-            isMemberExpressionEqual(node.test.right, member))
+              isMemberExpressionEqual(node.test.right, member))
           ) {
             conditional = node.test;
           }
@@ -80,8 +80,7 @@ module.exports = {
 
           return (
             init.type === 'CallExpression' &&
-            ((init.callee.type === 'Identifier' &&
-              init.callee.name === 'useRef') ||
+            ((init.callee.type === 'Identifier' && init.callee.name === 'useRef') ||
               (init.callee.type === 'MemberExpression' &&
                 init.callee.object.type === 'Identifier' &&
                 init.callee.object.name === 'React' &&
@@ -99,7 +98,10 @@ module.exports = {
               type: 'Identifier',
               name: 'undefined'
             };
-            if (isLiteralEqual(conditional.operator, init, conditional.right) || isLiteralEqual(conditional.operator, init, conditional.left)) {
+            if (
+              isLiteralEqual(conditional.operator, init, conditional.right) ||
+              isLiteralEqual(conditional.operator, init, conditional.left)
+            ) {
               return;
             }
           }
@@ -108,8 +110,7 @@ module.exports = {
           context.report({
             node: member,
             message:
-              member.parent.type === 'AssignmentExpression' &&
-              member.parent.left === member
+              member.parent.type === 'AssignmentExpression' && member.parent.left === member
                 ? 'Writing to refs during rendering is not allowed. Move this into a useEffect or useLayoutEffect. See https://beta.reactjs.org/apis/useref'
                 : 'Reading from refs during rendering is not allowed. See https://beta.reactjs.org/apis/useref'
           });
diff --git a/bin/useLayoutEffectRule.js b/bin/useLayoutEffectRule.js
index b725e563a95..4ed02507c11 100644
--- a/bin/useLayoutEffectRule.js
+++ b/bin/useLayoutEffectRule.js
@@ -18,16 +18,16 @@ module.exports = {
         if (source !== 'react') {
           return;
         }
-        const importSpecifiers = node.specifiers.filter(specifier => specifier.type === 'ImportSpecifier');
+        const importSpecifiers = node.specifiers.filter(
+          specifier => specifier.type === 'ImportSpecifier'
+        );
         const getName = specifier => specifier.local.name;
-        importSpecifiers.map(
-          (item) => {
-            let itemName = getName(item);
-            if (itemName === 'useLayoutEffect') {
-              context.report(node, 'Please use useLayoutEffect from @react-aria/utils instead.');
-            }
+        importSpecifiers.map(item => {
+          let itemName = getName(item);
+          if (itemName === 'useLayoutEffect') {
+            context.report(node, 'Please use useLayoutEffect from @react-aria/utils instead.');
           }
-        );
+        });
       }
     };
   }
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 113c7814dcc..0a4f190019e 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,534 +1,505 @@
-import react from "eslint-plugin-react";
-import rulesdir from "eslint-plugin-rulesdir";
-import jsxA11Y from "eslint-plugin-jsx-a11y";
-import reactHooks from "eslint-plugin-react-hooks";
-import jest from "eslint-plugin-jest";
-import monorepo from "@jdb8/eslint-plugin-monorepo";
-import * as rspRules from "eslint-plugin-rsp-rules";
-import globals from "globals";
-import babelParser from "@babel/eslint-parser";
-import typescriptEslint from "@typescript-eslint/eslint-plugin";
-import jsdoc from "eslint-plugin-jsdoc";
+import react from 'eslint-plugin-react';
+import rulesdir from 'eslint-plugin-rulesdir';
+import jsxA11Y from 'eslint-plugin-jsx-a11y';
+import reactHooks from 'eslint-plugin-react-hooks';
+import jest from 'eslint-plugin-jest';
+import monorepo from '@jdb8/eslint-plugin-monorepo';
+import * as rspRules from 'eslint-plugin-rsp-rules';
+import globals from 'globals';
+import babelParser from '@babel/eslint-parser';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import jsdoc from 'eslint-plugin-jsdoc';
 import tseslint from 'typescript-eslint';
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-import stylistic from "@stylistic/eslint-plugin-ts";
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import js from '@eslint/js';
+import {FlatCompat} from '@eslint/eslintrc';
 
-import rulesDirPlugin from "eslint-plugin-rulesdir";
+import rulesDirPlugin from 'eslint-plugin-rulesdir';
 rulesDirPlugin.RULES_DIR = './bin';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all
 });
 
 const OFF = 0;
 const WARN = 1;
 const ERROR = 2;
 
-export default [{
+export default [
+  {
     ignores: [
-        "packages/@react-aria/i18n/server",
-        "packages/@spectrum-icons/color/**/*",
-        "packages/@spectrum-icons/ui/**/*",
-        "packages/@spectrum-icons/workflow/**/*",
-        "packages/@spectrum-icons/illustrations/**/*",
-        "packages/@spectrum-icons/express/**/*",
-        "**/node_modules",
-        "packages/*/*/dist",
-        "packages/*/*/i18n",
-        "packages/react-aria/dist",
-        "packages/react-aria/i18n",
-        "packages/react-aria-components/dist",
-        "packages/react-aria-components/i18n",
-        "packages/react-stately/dist",
-        "packages/dev/storybook-builder-parcel/preview.js",
-        "packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts",
-        "examples/**/*",
-        "starters/**/*",
-        "scripts/icon-builder-fixture/**/*",
-        "packages/@react-spectrum/s2/icon.d.ts",
-        "packages/@react-spectrum/s2/spectrum-illustrations",
-        "packages/dev/parcel-config-storybook/*",
-        "packages/dev/parcel-resolver-storybook/*",
-        "packages/dev/parcel-transformer-storybook/*",
-        "packages/dev/storybook-builder-parcel/*",
-        "packages/dev/storybook-react-parcel/*",
-        "packages/dev/s2-docs/pages/**",
-        "packages/dev/mcp/*/dist",
-        "packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/**"
-    ],
-}, ...compat.extends("eslint:recommended"), {
+      'packages/@react-aria/i18n/server',
+      'packages/@spectrum-icons/color/**/*',
+      'packages/@spectrum-icons/ui/**/*',
+      'packages/@spectrum-icons/workflow/**/*',
+      'packages/@spectrum-icons/illustrations/**/*',
+      'packages/@spectrum-icons/express/**/*',
+      '**/node_modules',
+      'packages/*/*/dist',
+      'packages/*/*/i18n',
+      'packages/react-aria/dist',
+      'packages/react-aria/i18n',
+      'packages/react-aria-components/dist',
+      'packages/react-aria-components/i18n',
+      'packages/react-stately/dist',
+      'packages/dev/storybook-builder-parcel/preview.js',
+      'packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts',
+      'examples/**/*',
+      'starters/**/*',
+      'scripts/icon-builder-fixture/**/*',
+      'packages/@react-spectrum/s2/icon.d.ts',
+      'packages/@react-spectrum/s2/spectrum-illustrations',
+      'packages/dev/parcel-config-storybook/*',
+      'packages/dev/parcel-resolver-storybook/*',
+      'packages/dev/parcel-transformer-storybook/*',
+      'packages/dev/storybook-builder-parcel/*',
+      'packages/dev/storybook-react-parcel/*',
+      'packages/dev/s2-docs/pages/**',
+      'packages/dev/mcp/*/dist',
+      'packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/**'
+    ]
+  },
+  ...compat.extends('eslint:recommended'),
+  {
     plugins: {
-        react,
-        rulesdir,
-        "jsx-a11y": jsxA11Y,
-        "react-hooks": reactHooks,
-        jest,
-        monorepo,
-        "rsp-rules": rspRules,
+      react,
+      rulesdir,
+      'jsx-a11y': jsxA11Y,
+      'react-hooks': reactHooks,
+      jest,
+      monorepo,
+      'rsp-rules': rspRules
     },
 
     languageOptions: {
-        globals: {
-            ...globals.browser,
-            ...globals.node,
-            ...globals.mocha,
-            ...globals.jest,
-            importSpectrumCSS: "readonly",
-            jest: true,
-            expect: true,
-            JSX: "readonly",
-            NodeJS: "readonly",
-            AsyncIterable: "readonly",
-            FileSystemFileEntry: "readonly",
-            FileSystemDirectoryEntry: "readonly",
-            FileSystemEntry: "readonly",
-            IS_REACT_ACT_ENVIRONMENT: "readonly",
-        },
-
-        parser: babelParser,
-        ecmaVersion: 6,
-        sourceType: "module",
-
-        parserOptions: {
-            ecmaFeatures: {
-                legacyDecorators: true,
-            },
-        },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.mocha,
+        ...globals.jest,
+        importSpectrumCSS: 'readonly',
+        jest: true,
+        expect: true,
+        JSX: 'readonly',
+        NodeJS: 'readonly',
+        AsyncIterable: 'readonly',
+        FileSystemFileEntry: 'readonly',
+        FileSystemDirectoryEntry: 'readonly',
+        FileSystemEntry: 'readonly',
+        IS_REACT_ACT_ENVIRONMENT: 'readonly'
+      },
+
+      parser: babelParser,
+      ecmaVersion: 6,
+      sourceType: 'module',
+
+      parserOptions: {
+        ecmaFeatures: {
+          legacyDecorators: true
+        }
+      }
     },
 
     settings: {
-        jsdoc: {
-            ignorePrivate: true,
-            publicFunctionsOnly: true,
-        },
-
-        react: {
-            version: "detect",
-        },
+      jsdoc: {
+        ignorePrivate: true,
+        publicFunctionsOnly: true
+      },
+
+      react: {
+        version: 'detect'
+      }
     },
 
     rules: {
-        "comma-dangle": ERROR,
-        indent: OFF,
-
-        "indent-legacy": [ERROR, ERROR, {
-            SwitchCase: WARN,
-        }],
-
-        quotes: [ERROR, "single", "avoid-escape"],
-        "linebreak-style": [ERROR, "unix"],
-        semi: [ERROR, "always"],
-
-        "space-before-function-paren": [ERROR, {
-            anonymous: "always",
-            named: "never",
-            asyncArrow: "ignore",
-        }],
-
-        "keyword-spacing": [ERROR, {
-            after: true,
-        }],
-
-        "jsx-quotes": [ERROR, "prefer-double"],
-
-        "brace-style": [ERROR, "1tbs", {
-            allowSingleLine: true,
-        }],
-
-        "object-curly-spacing": [ERROR, "never"],
-        curly: ERROR,
-        "no-fallthrough": OFF,
-        "comma-spacing": ERROR,
-        "comma-style": [ERROR, "last"],
-        "no-irregular-whitespace": [ERROR],
-        eqeqeq: [ERROR, "smart"],
-        "no-spaced-func": ERROR,
-        "array-bracket-spacing": [ERROR, "never"],
-
-        "key-spacing": [ERROR, {
-            beforeColon: false,
-            afterColon: true,
-        }],
-
-        "no-console": OFF,
-
-        "no-unused-vars": [ERROR, {
-            args: "none",
-            vars: "all",
-            varsIgnorePattern: "[rR]eact",
-        }],
-        "no-unused-private-class-members": OFF,
-
-        "space-in-parens": [ERROR, "never"],
-
-        "space-unary-ops": [ERROR, {
-            words: true,
-            nonwords: false,
-        }],
-
-        "spaced-comment": [ERROR, "always", {
-            exceptions: ["*", "#__PURE__"],
-            markers: ["/"],
-        }],
-
-        "max-depth": [WARN, 4],
-        radix: [ERROR, "always"],
-        "react/jsx-uses-react": WARN,
-        "eol-last": ERROR,
-        "arrow-spacing": ERROR,
-        "space-before-blocks": [ERROR, "always"],
-        "space-infix-ops": ERROR,
-        "no-new-wrappers": ERROR,
-        "no-self-compare": ERROR,
-        "no-nested-ternary": ERROR,
-        "no-multiple-empty-lines": ERROR,
-        "no-unneeded-ternary": ERROR,
-        // "no-duplicate-imports": ERROR,
-        "react/display-name": OFF,
-        "react/jsx-curly-spacing": [ERROR, "never"],
-        "react/jsx-indent-props": [ERROR, ERROR],
-        "react/jsx-no-duplicate-props": ERROR,
-        "react/jsx-no-literals": OFF,
-        "react/jsx-no-undef": ERROR,
-        "react/jsx-quotes": OFF,
-        "react/jsx-sort-prop-types": OFF,
-        "react/jsx-sort-props": OFF,
-        "react/jsx-uses-vars": ERROR,
-        "react/no-danger": OFF,
-        "react/no-did-mount-set-state": OFF,
-        "react/no-did-update-set-state": ERROR,
-        "react/no-multi-comp": OFF,
-        "react/no-set-state": OFF,
-
-        "react/no-unknown-property": [ERROR, {
-            ignore: ["prefix"],
-        }],
-
-        "react/react-in-jsx-scope": ERROR,
-        "react/require-extension": OFF,
-        "react/jsx-equals-spacing": ERROR,
-
-        "react/jsx-max-props-per-line": [ERROR, {
-            when: "multiline",
-        }],
-
-        "react/jsx-closing-bracket-location": [ERROR, "after-props"],
-        "react/jsx-tag-spacing": ERROR,
-        "react/jsx-indent": [ERROR, ERROR],
-        "react/jsx-wrap-multilines": ERROR,
-        "react/jsx-boolean-value": ERROR,
-        "react/jsx-first-prop-new-line": [ERROR, "multiline"],
-        "react/self-closing-comp": ERROR,
-
-        // Core hooks rules
-        "react-hooks/rules-of-hooks": ERROR, // https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md
-        "react-hooks/exhaustive-deps": WARN,
-
-        // React Compiler rules
-        'react-hooks/config': ERROR,
-        'react-hooks/error-boundaries': ERROR,
-        'react-hooks/component-hook-factories': ERROR,
-        'react-hooks/gating': ERROR,
-        'react-hooks/globals': ERROR,
-        // 'react-hooks/immutability': ERROR,
-        // 'react-hooks/preserve-manual-memoization': ERROR, // No idea how to turn this one on yet
-        'react-hooks/purity': ERROR,
-        // 'react-hooks/refs': ERROR, // can't turn on until https://github.com/facebook/react/issues/34775 is fixed
-        'react-hooks/set-state-in-effect': ERROR,
-        'react-hooks/set-state-in-render': ERROR,
-        'react-hooks/static-components': ERROR,
-        'react-hooks/unsupported-syntax': WARN,
-        'react-hooks/use-memo': ERROR,
-        'react-hooks/incompatible-library': WARN,
-
-        "rsp-rules/no-react-key": [ERROR],
-        "rsp-rules/sort-imports": [ERROR],
-        "rsp-rules/no-non-shadow-contains": [ERROR],
-        "rsp-rules/safe-event-target": [ERROR],
-        "rsp-rules/shadow-safe-active-element": [ERROR],
-        "rsp-rules/faster-node-contains": [ERROR],
-        "rulesdir/imports": [ERROR],
-        "rulesdir/useLayoutEffectRule": [ERROR],
-        "rulesdir/pure-render": [ERROR],
-        "jsx-a11y/accessible-emoji": ERROR,
-        "jsx-a11y/alt-text": ERROR,
-        "jsx-a11y/anchor-has-content": ERROR,
-        "jsx-a11y/anchor-is-valid": ERROR,
-        "jsx-a11y/aria-activedescendant-has-tabindex": ERROR,
-        "jsx-a11y/aria-props": ERROR,
-        "jsx-a11y/aria-proptypes": ERROR,
-        "jsx-a11y/aria-role": ERROR,
-        "jsx-a11y/aria-unsupported-elements": ERROR,
-        "jsx-a11y/click-events-have-key-events": ERROR,
-        "jsx-a11y/heading-has-content": ERROR,
-        "jsx-a11y/html-has-lang": ERROR,
-        "jsx-a11y/iframe-has-title": ERROR,
-        "jsx-a11y/img-redundant-alt": ERROR,
-
-        "jsx-a11y/interactive-supports-focus": [ERROR, {
-            tabbable: [
-                "button",
-                "checkbox",
-                "link",
-                "searchbox",
-                "spinbutton",
-                "switch",
-                "textbox",
-            ],
-        }],
-
-        "jsx-a11y/label-has-associated-control": [ERROR, {
-            assert: "either",
-            depth: 3,
-        }],
-
-        "jsx-a11y/media-has-caption": ERROR,
-        "jsx-a11y/mouse-events-have-key-events": ERROR,
-        "jsx-a11y/no-access-key": ERROR,
-        "jsx-a11y/no-distracting-elements": ERROR,
-        "jsx-a11y/no-interactive-element-to-noninteractive-role": ERROR,
-
-        "jsx-a11y/no-noninteractive-element-interactions": [WARN, {
-            handlers: [
-                "onClick",
-                "onMouseDown",
-                "onMouseUp",
-                "onKeyPress",
-                "onKeyDown",
-                "onKeyUp",
-            ],
-        }],
-
-        "jsx-a11y/no-noninteractive-element-to-interactive-role": [ERROR, {
-            ul: ["listbox", "menu", "menubar", "radiogroup", "tablist", "tree", "treegrid"],
-            ol: ["listbox", "menu", "menubar", "radiogroup", "tablist", "tree", "treegrid"],
-            li: ["menuitem", "option", "row", "tab", "treeitem"],
-            table: ["grid"],
-            td: ["gridcell", "columnheader", "rowheader"],
-            th: ["columnheader", "rowheader"],
-        }],
-
-        "jsx-a11y/no-noninteractive-tabindex": [ERROR, {
-            tags: [],
-            roles: ["alertdialog", "dialog", "tabpanel"],
-        }],
-
-        "jsx-a11y/no-redundant-roles": ERROR,
-
-        "jsx-a11y/no-static-element-interactions": [ERROR, {
-            handlers: [
-                "onClick",
-                "onMouseDown",
-                "onMouseUp",
-                "onKeyPress",
-                "onKeyDown",
-                "onKeyUp",
-            ],
-        }],
-
-        "jsx-a11y/role-has-required-aria-props": ERROR,
-        "jsx-a11y/role-supports-aria-props": ERROR,
-        "jsx-a11y/scope": ERROR,
-        "jsx-a11y/tabindex-no-positive": ERROR,
-
-        "monorepo/no-relative-import": ERROR,
-    },
-}, {
-    files: ["packages/**/*.ts", "packages/**/*.tsx"],
+      'no-fallthrough': OFF,
+      'no-irregular-whitespace': [ERROR],
+      eqeqeq: [ERROR, 'smart'],
+
+      'no-console': OFF,
+
+      'no-unused-vars': [
+        ERROR,
+        {
+          args: 'none',
+          vars: 'all',
+          varsIgnorePattern: '[rR]eact'
+        }
+      ],
+      'no-unused-private-class-members': OFF,
+
+      'spaced-comment': [
+        ERROR,
+        'always',
+        {
+          exceptions: ['*', '#__PURE__'],
+          markers: ['/']
+        }
+      ],
+
+      'max-depth': [WARN, 4],
+      radix: [ERROR, 'always'],
+      'react/jsx-uses-react': WARN,
+      'eol-last': ERROR,
+      'arrow-spacing': ERROR,
+      'space-before-blocks': [ERROR, 'always'],
+      'space-infix-ops': ERROR,
+      'no-new-wrappers': ERROR,
+      'no-self-compare': ERROR,
+      'no-nested-ternary': ERROR,
+      'no-multiple-empty-lines': ERROR,
+      'no-unneeded-ternary': ERROR,
+      // "no-duplicate-imports": ERROR,
+      'react/display-name': OFF,
+      'react/jsx-curly-spacing': [ERROR, 'never'],
+      'react/jsx-indent-props': [ERROR, ERROR],
+      'react/jsx-no-duplicate-props': ERROR,
+      'react/jsx-no-literals': OFF,
+      'react/jsx-no-undef': ERROR,
+      'react/jsx-quotes': OFF,
+      'react/jsx-sort-prop-types': OFF,
+      'react/jsx-sort-props': OFF,
+      'react/jsx-uses-vars': ERROR,
+      'react/no-danger': OFF,
+      'react/no-did-mount-set-state': OFF,
+      'react/no-did-update-set-state': ERROR,
+      'react/no-multi-comp': OFF,
+      'react/no-set-state': OFF,
+
+      'react/no-unknown-property': [
+        ERROR,
+        {
+          ignore: ['prefix']
+        }
+      ],
+
+      'react/react-in-jsx-scope': ERROR,
+      'react/require-extension': OFF,
+
+      'react/jsx-max-props-per-line': [
+        ERROR,
+        {
+          when: 'multiline'
+        }
+      ],
+
+      'react/jsx-boolean-value': ERROR,
+      'react/self-closing-comp': ERROR,
+
+      // Core hooks rules
+      'react-hooks/rules-of-hooks': ERROR, // https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md
+      'react-hooks/exhaustive-deps': WARN,
+
+      // React Compiler rules
+      'react-hooks/config': ERROR,
+      'react-hooks/error-boundaries': ERROR,
+      'react-hooks/component-hook-factories': ERROR,
+      'react-hooks/gating': ERROR,
+      'react-hooks/globals': ERROR,
+      // 'react-hooks/immutability': ERROR,
+      // 'react-hooks/preserve-manual-memoization': ERROR, // No idea how to turn this one on yet
+      'react-hooks/purity': ERROR,
+      // 'react-hooks/refs': ERROR, // can't turn on until https://github.com/facebook/react/issues/34775 is fixed
+      'react-hooks/set-state-in-effect': ERROR,
+      'react-hooks/set-state-in-render': ERROR,
+      'react-hooks/static-components': ERROR,
+      'react-hooks/unsupported-syntax': WARN,
+      'react-hooks/use-memo': ERROR,
+      'react-hooks/incompatible-library': WARN,
+
+      'rsp-rules/no-react-key': [ERROR],
+      'rsp-rules/sort-imports': [ERROR],
+      'rsp-rules/no-non-shadow-contains': [ERROR],
+      'rsp-rules/safe-event-target': [ERROR],
+      'rsp-rules/shadow-safe-active-element': [ERROR],
+      'rsp-rules/faster-node-contains': [ERROR],
+      'rulesdir/imports': [ERROR],
+      'rulesdir/useLayoutEffectRule': [ERROR],
+      'rulesdir/pure-render': [ERROR],
+      'jsx-a11y/accessible-emoji': ERROR,
+      'jsx-a11y/alt-text': ERROR,
+      'jsx-a11y/anchor-has-content': ERROR,
+      'jsx-a11y/anchor-is-valid': ERROR,
+      'jsx-a11y/aria-activedescendant-has-tabindex': ERROR,
+      'jsx-a11y/aria-props': ERROR,
+      'jsx-a11y/aria-proptypes': ERROR,
+      'jsx-a11y/aria-role': ERROR,
+      'jsx-a11y/aria-unsupported-elements': ERROR,
+      'jsx-a11y/click-events-have-key-events': ERROR,
+      'jsx-a11y/heading-has-content': ERROR,
+      'jsx-a11y/html-has-lang': ERROR,
+      'jsx-a11y/iframe-has-title': ERROR,
+      'jsx-a11y/img-redundant-alt': ERROR,
+
+      'jsx-a11y/interactive-supports-focus': [
+        ERROR,
+        {
+          tabbable: ['button', 'checkbox', 'link', 'searchbox', 'spinbutton', 'switch', 'textbox']
+        }
+      ],
+
+      'jsx-a11y/label-has-associated-control': [
+        ERROR,
+        {
+          assert: 'either',
+          depth: 3
+        }
+      ],
+
+      'jsx-a11y/media-has-caption': ERROR,
+      'jsx-a11y/mouse-events-have-key-events': ERROR,
+      'jsx-a11y/no-access-key': ERROR,
+      'jsx-a11y/no-distracting-elements': ERROR,
+      'jsx-a11y/no-interactive-element-to-noninteractive-role': ERROR,
+
+      'jsx-a11y/no-noninteractive-element-interactions': [
+        WARN,
+        {
+          handlers: ['onClick', 'onMouseDown', 'onMouseUp', 'onKeyPress', 'onKeyDown', 'onKeyUp']
+        }
+      ],
+
+      'jsx-a11y/no-noninteractive-element-to-interactive-role': [
+        ERROR,
+        {
+          ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+          ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+          li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
+          table: ['grid'],
+          td: ['gridcell', 'columnheader', 'rowheader'],
+          th: ['columnheader', 'rowheader']
+        }
+      ],
+
+      'jsx-a11y/no-noninteractive-tabindex': [
+        ERROR,
+        {
+          tags: [],
+          roles: ['alertdialog', 'dialog', 'tabpanel']
+        }
+      ],
+
+      'jsx-a11y/no-redundant-roles': ERROR,
+
+      'jsx-a11y/no-static-element-interactions': [
+        ERROR,
+        {
+          handlers: ['onClick', 'onMouseDown', 'onMouseUp', 'onKeyPress', 'onKeyDown', 'onKeyUp']
+        }
+      ],
+
+      'jsx-a11y/role-has-required-aria-props': ERROR,
+      'jsx-a11y/role-supports-aria-props': ERROR,
+      'jsx-a11y/scope': ERROR,
+      'jsx-a11y/tabindex-no-positive': ERROR,
+
+      'monorepo/no-relative-import': ERROR
+    }
+  },
+  {
+    files: ['packages/**/*.ts', 'packages/**/*.tsx'],
 
     plugins: {
-        react,
-        rulesdir,
-        "jsx-a11y": jsxA11Y,
-        "react-hooks": reactHooks,
-        jest,
-        "@typescript-eslint": typescriptEslint,
-        monorepo,
-        jsdoc,
-        "@stylistic": stylistic,
+      react,
+      rulesdir,
+      'jsx-a11y': jsxA11Y,
+      'react-hooks': reactHooks,
+      jest,
+      '@typescript-eslint': typescriptEslint,
+      monorepo,
+      jsdoc
     },
 
     languageOptions: {
-        globals: {
-          globalThis: "readonly",
+      globals: {
+        globalThis: 'readonly'
+      },
+
+      parser: tseslint.parser,
+      ecmaVersion: 6,
+      sourceType: 'module',
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+          legacyDecorators: true
         },
 
-        parser: tseslint.parser,
-        ecmaVersion: 6,
-        sourceType: "module",
-
-        parserOptions: {
-            ecmaFeatures: {
-                jsx: true,
-                legacyDecorators: true,
-            },
-
-            useJSXTextNode: true,
-            project: "./tsconfig.json",
-        },
+        useJSXTextNode: true,
+        project: './tsconfig.json'
+      }
     },
 
     rules: {
-        "jsdoc/require-description-complete-sentence": [ERROR, {
-            abbreviations: ["e.g", "i.e"],
-        }],
-
-        "jsdoc/check-alignment": ERROR,
-        "jsdoc/check-indentation": ERROR,
-
-        "jsdoc/check-tag-names": [ERROR, {
-            definedTags: ["selector", "note"],
-        }],
-
-        "jsdoc/require-description": [ERROR, {
-            exemptedBy: ["deprecated"],
-            checkConstructors: false,
-        }],
-
-        "no-redeclare": OFF,
-        "@typescript-eslint/no-redeclare": ERROR,
-        "no-unused-vars": OFF,
-        "@typescript-eslint/no-unused-vars": ERROR,
-
-        "@stylistic/member-delimiter-style": [ERROR, {
-            multiline: {
-                delimiter: "comma",
-                requireLast: false,
-            },
-
-            singleline: {
-                delimiter: "comma",
-                requireLast: false,
-            },
-        }],
-    },
-}, {
-    files: ["packages/**/src/**/*.ts", "packages/**/src/**/*.tsx"],
-    ignores: ["packages/dev/**"],
+      'jsdoc/require-description-complete-sentence': [
+        ERROR,
+        {
+          abbreviations: ['e.g', 'i.e']
+        }
+      ],
+
+      'jsdoc/check-alignment': ERROR,
+      'jsdoc/check-indentation': ERROR,
+
+      'jsdoc/check-tag-names': [
+        ERROR,
+        {
+          definedTags: ['selector', 'note']
+        }
+      ],
+
+      'jsdoc/require-description': [
+        ERROR,
+        {
+          exemptedBy: ['deprecated'],
+          checkConstructors: false
+        }
+      ],
+
+      'no-redeclare': OFF,
+      '@typescript-eslint/no-redeclare': ERROR,
+      'no-unused-vars': OFF,
+      '@typescript-eslint/no-unused-vars': ERROR
+    }
+  },
+  {
+    files: ['packages/**/src/**/*.ts', 'packages/**/src/**/*.tsx'],
+    ignores: ['packages/dev/**'],
     rules: {
-        "rsp-rules/no-package-root-imports": ERROR,
-    },
-}, {
+      'rsp-rules/no-package-root-imports': ERROR
+    }
+  },
+  {
     files: [
-        "**/test/**",
-        "**/stories/**",
-        "**/docs/**",
-        "**/chromatic/**",
-        "**/chromatic-fc/**",
-        "**/__tests__/**",
+      '**/test/**',
+      '**/stories/**',
+      '**/docs/**',
+      '**/chromatic/**',
+      '**/chromatic-fc/**',
+      '**/__tests__/**'
     ],
 
     rules: {
-        "rsp-rules/no-react-key": [ERROR],
-        "rsp-rules/act-events-test": ERROR,
-        "rsp-rules/no-getByRole-toThrow": ERROR,
-        "rsp-rules/no-non-shadow-contains": OFF,
-        "rsp-rules/safe-event-target": OFF,
-        "rsp-rules/shadow-safe-active-element": OFF,
-        "rsp-rules/faster-node-contains": OFF,
-        "rulesdir/imports": OFF,
-        "monorepo/no-internal-import": OFF,
-        "jsdoc/require-jsdoc": OFF
+      'rsp-rules/no-react-key': [ERROR],
+      'rsp-rules/act-events-test': ERROR,
+      'rsp-rules/no-getByRole-toThrow': ERROR,
+      'rsp-rules/no-non-shadow-contains': OFF,
+      'rsp-rules/safe-event-target': OFF,
+      'rsp-rules/shadow-safe-active-element': OFF,
+      'rsp-rules/faster-node-contains': OFF,
+      'rulesdir/imports': OFF,
+      'monorepo/no-internal-import': OFF,
+      'jsdoc/require-jsdoc': OFF
     },
 
     languageOptions: {
-        globals: {
-            ...globals.browser,
-            ...globals.node,
-            ...globals.mocha,
-            ...globals.jest,
-            importSpectrumCSS: "readonly",
-            jest: true,
-            expect: true,
-            JSX: "readonly",
-            NodeJS: "readonly",
-            AsyncIterable: "readonly",
-            FileSystemFileEntry: "readonly",
-            FileSystemDirectoryEntry: "readonly",
-            FileSystemEntry: "readonly",
-            IS_REACT_ACT_ENVIRONMENT: "readonly",
-            globalThis: "readonly",
-        },
-
-        parser: tseslint.parser,
-        ecmaVersion: 6,
-        sourceType: "module",
-
-        parserOptions: {
-            // eventually move to projectService for faster linting
-            ecmaFeatures: {
-                legacyDecorators: true,
-            },
-        },
-    },
-}, {
-    files: ["**/dev/**", "**/scripts/**"],
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.mocha,
+        ...globals.jest,
+        importSpectrumCSS: 'readonly',
+        jest: true,
+        expect: true,
+        JSX: 'readonly',
+        NodeJS: 'readonly',
+        AsyncIterable: 'readonly',
+        FileSystemFileEntry: 'readonly',
+        FileSystemDirectoryEntry: 'readonly',
+        FileSystemEntry: 'readonly',
+        IS_REACT_ACT_ENVIRONMENT: 'readonly',
+        globalThis: 'readonly'
+      },
+
+      parser: tseslint.parser,
+      ecmaVersion: 6,
+      sourceType: 'module',
+
+      parserOptions: {
+        // eventually move to projectService for faster linting
+        ecmaFeatures: {
+          legacyDecorators: true
+        }
+      }
+    }
+  },
+  {
+    files: ['**/dev/**', '**/scripts/**'],
 
     rules: {
-        "jsdoc/require-jsdoc": OFF,
-        "jsdoc/require-description": OFF,
-        "rsp-rules/safe-event-target": OFF,
-    },
-}, {
-    files: [
-        "packages/@react-aria/focus/src/**/*.ts",
-        "packages/@react-aria/focus/src/**/*.tsx",
-    ],
+      'jsdoc/require-jsdoc': OFF,
+      'jsdoc/require-description': OFF,
+      'rsp-rules/safe-event-target': OFF
+    }
+  },
+  {
+    files: ['packages/@react-aria/focus/src/**/*.ts', 'packages/@react-aria/focus/src/**/*.tsx'],
 
     rules: {
-        "no-restricted-globals": [ERROR, {
-            name: "window",
-            message: "Use getOwnerWindow from @react-aria/utils instead.",
-        }, {
-            name: "document",
-            message: "Use getOwnerDocument from @react-aria/utils instead.",
-        }],
-    },
-}, {
+      'no-restricted-globals': [
+        ERROR,
+        {
+          name: 'window',
+          message: 'Use getOwnerWindow from @react-aria/utils instead.'
+        },
+        {
+          name: 'document',
+          message: 'Use getOwnerDocument from @react-aria/utils instead.'
+        }
+      ]
+    }
+  },
+  {
     files: [
-        "packages/react-aria/src/interactions/**/*.ts",
-        "packages/react-aria/src/interactions/**/*.tsx",
+      'packages/react-aria/src/interactions/**/*.ts',
+      'packages/react-aria/src/interactions/**/*.tsx'
     ],
 
     rules: {
-        "no-restricted-globals": [WARN, {
-            name: "window",
-            message: "Use getOwnerWindow from @react-aria/utils instead.",
-        }, {
-            name: "document",
-            message: "Use getOwnerDocument from @react-aria/utils instead.",
-        }],
-    },
-}, {
+      'no-restricted-globals': [
+        WARN,
+        {
+          name: 'window',
+          message: 'Use getOwnerWindow from @react-aria/utils instead.'
+        },
+        {
+          name: 'document',
+          message: 'Use getOwnerDocument from @react-aria/utils instead.'
+        }
+      ]
+    }
+  },
+  {
     files: [
-        "packages/@react-aria/test-utils/src/**/*.ts",
-        "packages/@react-aria/test-utils/src/**/*.tsx",
+      'packages/@react-aria/test-utils/src/**/*.ts',
+      'packages/@react-aria/test-utils/src/**/*.tsx'
     ],
 
     rules: {
-        "rsp-rules/faster-node-contains": OFF,
-        "rsp-rules/no-non-shadow-contains": OFF,
-        "rsp-rules/shadow-safe-active-element": OFF,
-    },
-}, {
-    files: ["packages/@react-spectrum/s2/**", "packages/dev/s2-docs/**"],
+      'rsp-rules/faster-node-contains': OFF,
+      'rsp-rules/no-non-shadow-contains': OFF,
+      'rsp-rules/shadow-safe-active-element': OFF
+    }
+  },
+  {
+    files: ['packages/@react-spectrum/s2/**', 'packages/dev/s2-docs/**'],
 
     rules: {
-        "react/react-in-jsx-scope": OFF,
-    },
-}, {
-    files: ["packages/dev/style-macro-chrome-plugin/**"],
+      'react/react-in-jsx-scope': OFF
+    }
+  },
+  {
+    files: ['packages/dev/style-macro-chrome-plugin/**'],
     languageOptions: {
-        globals: {
-            ...globals.webextensions,
-            ...globals.browser
-        }
+      globals: {
+        ...globals.webextensions,
+        ...globals.browser
+      }
     }
-}];
+  }
+];
diff --git a/examples/next-app-csp/app/layout.tsx b/examples/next-app-csp/app/layout.tsx
index a295e627cd9..5ee1ee11539 100644
--- a/examples/next-app-csp/app/layout.tsx
+++ b/examples/next-app-csp/app/layout.tsx
@@ -1,34 +1,21 @@
-import type { Metadata } from "next";
-import { headers } from "next/headers";
-import {
-  LocalizedStringProvider,
-  createLocalizedStringDictionary,
-} from "@adobe/react-spectrum/i18n";
+import type {Metadata} from 'next';
+import {headers} from 'next/headers';
+import {LocalizedStringProvider, createLocalizedStringDictionary} from '@adobe/react-spectrum/i18n';
 
-const dictionary = createLocalizedStringDictionary([
-  "@react-spectrum/datepicker",
-]);
+const dictionary = createLocalizedStringDictionary(['@react-spectrum/datepicker']);
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app'
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const nonce = headers().get("x-nonce");
-  console.log("nonce", nonce);
+export default function RootLayout({children}: {children: React.ReactNode}) {
+  const nonce = headers().get('x-nonce');
+  console.log('nonce', nonce);
   return (
     <html lang="en">
       <body>
-        <LocalizedStringProvider
-          locale="en"
-          dictionary={dictionary}
-          nonce={nonce ?? ""}
-        />
+        <LocalizedStringProvider locale="en" dictionary={dictionary} nonce={nonce ?? ''} />
         {children}
       </body>
     </html>
diff --git a/examples/next-app-csp/app/page.tsx b/examples/next-app-csp/app/page.tsx
index 368ec781f6b..13f1cab94e9 100644
--- a/examples/next-app-csp/app/page.tsx
+++ b/examples/next-app-csp/app/page.tsx
@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
 import {Provider, defaultTheme, DatePicker} from '@adobe/react-spectrum';
 import {useRouter} from 'next/navigation';
 
 declare module '@adobe/react-spectrum' {
   interface RouterConfig {
-    routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>['push']>[1]>
+    routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>['push']>[1]>;
   }
 }
 
@@ -15,5 +15,5 @@ export default function Home() {
     <Provider theme={defaultTheme} locale="en" router={{navigate: router.push}}>
       <DatePicker label="Date" />
     </Provider>
-  )
+  );
 }
diff --git a/examples/next-app-csp/middleware.tsx b/examples/next-app-csp/middleware.tsx
index 3661cf4943b..47c1b659bfc 100644
--- a/examples/next-app-csp/middleware.tsx
+++ b/examples/next-app-csp/middleware.tsx
@@ -1,12 +1,12 @@
-import { NextResponse } from "next/server";
+import {NextResponse} from 'next/server';
 
 export function middleware(request: Request) {
-  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
+  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
   const cspHeader = `
     default-src 'self';
     script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https: http: 'unsafe-inline' ${
-    process.env.NODE_ENV === "production" ? "" : `'unsafe-eval'`
-  };
+      process.env.NODE_ENV === 'production' ? '' : `'unsafe-eval'`
+    };
     style-src 'self' 'unsafe-inline';
     img-src 'self' blob: data:;
     font-src 'self';
@@ -17,26 +17,18 @@ export function middleware(request: Request) {
     upgrade-insecure-requests;
 `;
   // Replace newline characters and spaces
-  const contentSecurityPolicyHeaderValue = cspHeader
-    .replace(/\s{2,}/g, " ")
-    .trim();
+  const contentSecurityPolicyHeaderValue = cspHeader.replace(/\s{2,}/g, ' ').trim();
 
   const requestHeaders = new Headers(request.headers);
-  requestHeaders.set("x-nonce", nonce);
-  requestHeaders.set(
-    "Content-Security-Policy",
-    contentSecurityPolicyHeaderValue
-  );
+  requestHeaders.set('x-nonce', nonce);
+  requestHeaders.set('Content-Security-Policy', contentSecurityPolicyHeaderValue);
 
   const response = NextResponse.next({
     request: {
-      headers: requestHeaders,
-    },
+      headers: requestHeaders
+    }
   });
-  response.headers.set(
-    "Content-Security-Policy",
-    contentSecurityPolicyHeaderValue
-  );
+  response.headers.set('Content-Security-Policy', contentSecurityPolicyHeaderValue);
 
   return response;
 }
@@ -51,11 +43,11 @@ export const config = {
      * - favicon.ico (favicon file)
      */
     {
-      source: "/((?!api|_next/static|_next/image|favicon.ico).*)",
+      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
       missing: [
-        { type: "header", key: "next-router-prefetch" },
-        { type: "header", key: "purpose", value: "prefetch" },
-      ],
-    },
-  ],
+        {type: 'header', key: 'next-router-prefetch'},
+        {type: 'header', key: 'purpose', value: 'prefetch'}
+      ]
+    }
+  ]
 };
diff --git a/examples/next-app-csp/next.config.js b/examples/next-app-csp/next.config.js
index 98c0d8f2b42..098b0e0cf99 100644
--- a/examples/next-app-csp/next.config.js
+++ b/examples/next-app-csp/next.config.js
@@ -3,18 +3,16 @@ const glob = require('glob');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  webpack(config, { isServer }) {
+  webpack(config, {isServer}) {
     if (!isServer) {
       // Don't include any locale strings in the client JS bundle.
-      config.plugins.push(localesPlugin.webpack({ locales: [] }));
+      config.plugins.push(localesPlugin.webpack({locales: []}));
     }
     return config;
   },
-  transpilePackages: [
-    '@adobe/react-spectrum',
-    '@react-spectrum/*',
-    '@spectrum-icons/*',
-  ].flatMap(spec => glob.sync(`${spec}`, { cwd: 'node_modules/' })),
-}
+  transpilePackages: ['@adobe/react-spectrum', '@react-spectrum/*', '@spectrum-icons/*'].flatMap(
+    spec => glob.sync(`${spec}`, {cwd: 'node_modules/'})
+  )
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/next-app-csp/package.json b/examples/next-app-csp/package.json
index 7a0963de24f..a20ccb4d545 100644
--- a/examples/next-app-csp/package.json
+++ b/examples/next-app-csp/package.json
@@ -2,6 +2,12 @@
   "name": "next-app",
   "version": "0.1.0",
   "private": true,
+  "workspaces": [
+    "../../packages/react-aria-components",
+    "../../packages/react-aria",
+    "../../packages/react-stately",
+    "../../packages/*/*"
+  ],
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -20,12 +26,6 @@
     "glob": "^11.0.3",
     "typescript": "^5"
   },
-  "workspaces": [
-    "../../packages/react-aria-components",
-    "../../packages/react-aria",
-    "../../packages/react-stately",
-    "../../packages/*/*"
-  ],
   "resolutions": {
     "react": "link:../../node_modules/react",
     "react-dom": "link:../../node_modules/react-dom"
diff --git a/examples/next-app/app/layout.tsx b/examples/next-app/app/layout.tsx
index 1491fb5cc44..60ac6b58bdd 100644
--- a/examples/next-app/app/layout.tsx
+++ b/examples/next-app/app/layout.tsx
@@ -1,18 +1,14 @@
-import type { Metadata } from 'next'
+import type {Metadata} from 'next';
 import {LocalizedStringProvider, createLocalizedStringDictionary} from '@adobe/react-spectrum/i18n';
 
 const dictionary = createLocalizedStringDictionary(['@react-spectrum/datepicker']);
 
 export const metadata: Metadata = {
   title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  description: 'Generated by create next app'
+};
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html lang="en">
       <body>
@@ -20,5 +16,5 @@ export default function RootLayout({
         {children}
       </body>
     </html>
-  )
+  );
 }
diff --git a/examples/next-app/app/page.tsx b/examples/next-app/app/page.tsx
index 368ec781f6b..13f1cab94e9 100644
--- a/examples/next-app/app/page.tsx
+++ b/examples/next-app/app/page.tsx
@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
 import {Provider, defaultTheme, DatePicker} from '@adobe/react-spectrum';
 import {useRouter} from 'next/navigation';
 
 declare module '@adobe/react-spectrum' {
   interface RouterConfig {
-    routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>['push']>[1]>
+    routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>['push']>[1]>;
   }
 }
 
@@ -15,5 +15,5 @@ export default function Home() {
     <Provider theme={defaultTheme} locale="en" router={{navigate: router.push}}>
       <DatePicker label="Date" />
     </Provider>
-  )
+  );
 }
diff --git a/examples/next-app/next.config.js b/examples/next-app/next.config.js
index 98c0d8f2b42..098b0e0cf99 100644
--- a/examples/next-app/next.config.js
+++ b/examples/next-app/next.config.js
@@ -3,18 +3,16 @@ const glob = require('glob');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  webpack(config, { isServer }) {
+  webpack(config, {isServer}) {
     if (!isServer) {
       // Don't include any locale strings in the client JS bundle.
-      config.plugins.push(localesPlugin.webpack({ locales: [] }));
+      config.plugins.push(localesPlugin.webpack({locales: []}));
     }
     return config;
   },
-  transpilePackages: [
-    '@adobe/react-spectrum',
-    '@react-spectrum/*',
-    '@spectrum-icons/*',
-  ].flatMap(spec => glob.sync(`${spec}`, { cwd: 'node_modules/' })),
-}
+  transpilePackages: ['@adobe/react-spectrum', '@react-spectrum/*', '@spectrum-icons/*'].flatMap(
+    spec => glob.sync(`${spec}`, {cwd: 'node_modules/'})
+  )
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/next-app/package.json b/examples/next-app/package.json
index da7f165b083..adbc149e641 100644
--- a/examples/next-app/package.json
+++ b/examples/next-app/package.json
@@ -2,7 +2,12 @@
   "name": "next-app",
   "version": "0.1.0",
   "private": true,
-  "packageManager": "yarn@4.2.2",
+  "workspaces": [
+    "../../packages/react-aria-components",
+    "../../packages/react-aria",
+    "../../packages/react-stately",
+    "../../packages/*/*"
+  ],
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -21,14 +26,9 @@
     "glob": "^11.0.3",
     "typescript": "^5"
   },
-  "workspaces": [
-    "../../packages/react-aria-components",
-    "../../packages/react-aria",
-    "../../packages/react-stately",
-    "../../packages/*/*"
-  ],
   "resolutions": {
     "react": "link:../../node_modules/react",
     "react-dom": "link:../../node_modules/react-dom"
-  }
+  },
+  "packageManager": "yarn@4.2.2"
 }
diff --git a/examples/rac-spectrum-tailwind/package.json b/examples/rac-spectrum-tailwind/package.json
index 66da2477513..47362214f2a 100644
--- a/examples/rac-spectrum-tailwind/package.json
+++ b/examples/rac-spectrum-tailwind/package.json
@@ -1,7 +1,6 @@
 {
   "name": "rac-spectrum-tailwind-example",
   "private": true,
-  "packageManager": "yarn@4.2.2",
   "scripts": {
     "start": "parcel src/index.html",
     "build": "PARCEL_WORKER_BACKEND=process parcel build src/index.html",
@@ -24,5 +23,6 @@
   },
   "devDependencies": {
     "process": "^0.11.10"
-  }
+  },
+  "packageManager": "yarn@4.2.2"
 }
diff --git a/examples/rac-spectrum-tailwind/src/App.js b/examples/rac-spectrum-tailwind/src/App.js
index ede6335c844..a4dadfde448 100644
--- a/examples/rac-spectrum-tailwind/src/App.js
+++ b/examples/rac-spectrum-tailwind/src/App.js
@@ -1,15 +1,15 @@
-import { useState } from "react";
-import { defaultTheme, Link, Provider } from "@adobe/react-spectrum";
-import User from "@spectrum-icons/workflow/User";
-import UserGroup from "@spectrum-icons/workflow/UserGroup";
-import Building from "@spectrum-icons/workflow/Building";
-import ThemeSwitcher from "./ThemeSwitcher";
-import { SelectBoxGroup, SelectBox } from "./components/SelectBoxGroup";
-import { SentimentRatingGroup } from "./components/SentimentRatingGroup";
-import { NavigationBox } from "./components/NavigationBox";
-import { StarRatingGroup } from "./components/StarRatingGroup";
-import { GenInputField } from "./components/GenInputField";
-import { PlanSwitcher } from "./components/PlanSwitcher";
+import {useState} from 'react';
+import {defaultTheme, Link, Provider} from '@adobe/react-spectrum';
+import User from '@spectrum-icons/workflow/User';
+import UserGroup from '@spectrum-icons/workflow/UserGroup';
+import Building from '@spectrum-icons/workflow/Building';
+import ThemeSwitcher from './ThemeSwitcher';
+import {SelectBoxGroup, SelectBox} from './components/SelectBoxGroup';
+import {SentimentRatingGroup} from './components/SentimentRatingGroup';
+import {NavigationBox} from './components/NavigationBox';
+import {StarRatingGroup} from './components/StarRatingGroup';
+import {GenInputField} from './components/GenInputField';
+import {PlanSwitcher} from './components/PlanSwitcher';
 
 export function App() {
   let [colorScheme, setColorScheme] = useState(undefined);
@@ -22,56 +22,49 @@ export function App() {
       </h1>
       <section className="max-w-xl m-auto">
         <section className="mb-300">
-          <h2 className="text-2xl font-semibold text-center underline underline-offset-2">
-            Intro
-          </h2>
+          <h2 className="text-2xl font-semibold text-center underline underline-offset-2">Intro</h2>
           <h3 className="text-xl font-semibold">📙 Overview</h3>
           <div className="mb-200">
-            This resource is meant to help you get started with creating custom
-            components using{" "}
+            This resource is meant to help you get started with creating custom components using{' '}
             <Link href="https://react-spectrum.adobe.com/react-aria/react-aria-components.html">
               React Aria Components
-            </Link>{" "}
-            and <Link href="https://tailwindcss.com/">Tailwind CSS</Link>, with
-            a theme that features{" "}
-            <Link href="https://spectrum.adobe.com/">Spectrum</Link> styles and
-            values. The goal for this is to enable you to deliver accessible
-            custom Spectrum components more quickly.
+            </Link>{' '}
+            and <Link href="https://tailwindcss.com/">Tailwind CSS</Link>, with a theme that
+            features <Link href="https://spectrum.adobe.com/">Spectrum</Link> styles and values. The
+            goal for this is to enable you to deliver accessible custom Spectrum components more
+            quickly.
           </div>
           <h3 className="text-xl font-semibold">✅ When to use this</h3>
           <div className="mb-200">
-            When you need to implement a component that follows Spectrum
-            guidelines, but doesn't exist in React Spectrum.
+            When you need to implement a component that follows Spectrum guidelines, but doesn't
+            exist in React Spectrum.
           </div>
           <h3 className="text-xl font-semibold">❌ When not to use this</h3>
           <div className="mb-200">
-            When you want to avoid patterns specifically outlined by Spectrum,
-            or when a React Spectrum component already exists for your use case.
+            When you want to avoid patterns specifically outlined by Spectrum, or when a React
+            Spectrum component already exists for your use case.
           </div>
           <h3 className="text-xl font-semibold">⚠️ Risks</h3>
           <div className="mb-200">
-            Since you're taking ownership of the components you build, you still
-            need to ensure they follow Spectrum guidelines and accessibility
-            guidelines.
+            Since you're taking ownership of the components you build, you still need to ensure they
+            follow Spectrum guidelines and accessibility guidelines.
           </div>
         </section>
         <section className="mb-300">
-          <h2 className="text-2xl font-semibold text-center underline underline-offset-2">
-            Setup
-          </h2>
+          <h2 className="text-2xl font-semibold text-center underline underline-offset-2">Setup</h2>
           <ol>
             <li>
               <h3 className="text-xl font-semibold">📦 Install dependencies</h3>
               <div className="mb-200">
-                We need to install{" "}
+                We need to install{' '}
                 <Link href="https://react-spectrum.adobe.com/react-spectrum/getting-started.html">
                   React Spectrum
                 </Link>
-                ,{" "}
+                ,{' '}
                 <Link href="https://react-spectrum.adobe.com/react-aria/react-aria-components.html#installation">
                   React Aria Components
                 </Link>
-                , and the{" "}
+                , and the{' '}
                 <Link href="https://react-spectrum.adobe.com/react-aria/styling.html#plugin">
                   RAC Tailwind plugin
                 </Link>
@@ -82,27 +75,23 @@ export function App() {
                 tailwindcss-react-aria-components
               </code>
               <div className="mb-200 mt-200">
-                Note that the reason React Spectrum is needed, is because the
-                Provider will provide CSS variables that our theme will
-                reference.
+                Note that the reason React Spectrum is needed, is because the Provider will provide
+                CSS variables that our theme will reference.
               </div>
             </li>
             <li>
               <h3 className="text-xl font-semibold">⚡ Install Tailwind</h3>
               <div className="mb-200">
-                Follow the instructions in the{" "}
-                <Link href="https://tailwindcss.com/docs/installation">
-                  Tailwind Docs
-                </Link>{" "}
-                based on your build setup.{" "}
+                Follow the instructions in the{' '}
+                <Link href="https://tailwindcss.com/docs/installation">Tailwind Docs</Link> based on
+                your build setup.{' '}
               </div>
             </li>
             <li>
               <h3 className="text-xl font-semibold">🛠️ Configure Tailwind</h3>
               <div className="mb-200">
                 <div className="mb-200">
-                  In your tailwind.config.js, include the preset from this
-                  template:
+                  In your tailwind.config.js, include the preset from this template:
                 </div>
                 <pre className="block p-40 bg-gray-200 rounded mb-200">{`/** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -117,70 +106,52 @@ module.exports = {
               </div>
             </li>
             <li>
-              Then, add a React Spectrum{" "}
+              Then, add a React Spectrum{' '}
               <Link href="https://react-spectrum.adobe.com/react-spectrum/Provider.html">
                 Provider
-              </Link>{" "}
-              to your app if one doesn't already exist. This will ensure that
-              your page has access to the proper CSS variables. If you include
-              these variables using some other method, that will work too.
+              </Link>{' '}
+              to your app if one doesn't already exist. This will ensure that your page has access
+              to the proper CSS variables. If you include these variables using some other method,
+              that will work too.
             </li>
           </ol>
           <div></div>
         </section>
         <section className="mb-600">
-          <h2 className="text-2xl font-semibold text-center underline underline-offset-2">
-            Usage
-          </h2>
+          <h2 className="text-2xl font-semibold text-center underline underline-offset-2">Usage</h2>
           <div>
             <h3 className="text-xl font-semibold">🎨 Add styles</h3>
-            <div className="mb-200">
-              You can now use Tailwind classes to style your components.
-            </div>
+            <div className="mb-200">You can now use Tailwind classes to style your components.</div>
             <div className="mb-100">Here are some examples:</div>
             <ul className="list-disc mb-200">
               <li>
-                Using <code className="p-40 bg-gray-200 rounded">ring</code>{" "}
-                will give you a focus ring with good default Spectrum styles for
-                it's color, width, and offset.
+                Using <code className="p-40 bg-gray-200 rounded">ring</code> will give you a focus
+                ring with good default Spectrum styles for it's color, width, and offset.
               </li>
               <li>
-                Using{" "}
-                <code className="p-40 bg-gray-200 rounded">bg-blue-600</code>{" "}
-                will give you a background that matches
-                --spectrum-global-color-blue-600.
+                Using <code className="p-40 bg-gray-200 rounded">bg-blue-600</code> will give you a
+                background that matches --spectrum-global-color-blue-600.
               </li>
               <li>
-                Using <code className="p-40 bg-gray-200 rounded">w-25</code>{" "}
-                will give you a width of
-                var(--spectrum-global-dimension-size-25).
+                Using <code className="p-40 bg-gray-200 rounded">w-25</code> will give you a width
+                of var(--spectrum-global-dimension-size-25).
               </li>
               <li>
-                Using{" "}
-                <code className="p-40 bg-gray-200 rounded">
-                  ease-in duration-100
-                </code>{" "}
-                will give you a transition that matches Spectrum's motion
-                values.
+                Using <code className="p-40 bg-gray-200 rounded">ease-in duration-100</code> will
+                give you a transition that matches Spectrum's motion values.
               </li>
               <li>
-                Using{" "}
-                <code className="p-40 bg-gray-200 rounded">sm:text-left</code>{" "}
-                will give you left text alignment for small width devices based
-                on Spectrum's break points.
+                Using <code className="p-40 bg-gray-200 rounded">sm:text-left</code> will give you
+                left text alignment for small width devices based on Spectrum's break points.
               </li>
               <li>
-                Using{" "}
-                <code className="p-40 bg-gray-200 rounded">dark:bg-black</code>{" "}
-                will give you a black background if the user is in dark mode
-                based on the React Spectrum provider.
+                Using <code className="p-40 bg-gray-200 rounded">dark:bg-black</code> will give you
+                a black background if the user is in dark mode based on the React Spectrum provider.
               </li>
             </ul>
             <div>
-              <h3 className="text-xl font-semibold">
-                🪄 Styling based on state
-              </h3>
-              To see how to add Tailwind styles based on state, see the{" "}
+              <h3 className="text-xl font-semibold">🪄 Styling based on state</h3>
+              To see how to add Tailwind styles based on state, see the{' '}
               <Link href="https://react-spectrum.adobe.com/react-aria/styling.html#tailwind-css">
                 RAC Styling docs
               </Link>
@@ -195,11 +166,7 @@ module.exports = {
         </h2>
         <div className="grid justify-center grid-cols-1 gap-160 auto-rows-fr">
           <SelectBoxGroup label="Select Boxes" defaultValue="Team">
-            <SelectBox
-              name="Individual"
-              icon={<User size="XL" />}
-              description="For 1 person"
-            />
+            <SelectBox name="Individual" icon={<User size="XL" />} description="For 1 person" />
             <SelectBox
               name="Team"
               icon={<UserGroup size="XL" />}
@@ -215,20 +182,12 @@ module.exports = {
           <SentimentRatingGroup />
 
           <div className="text-center">
-            <span className="text-xl font-semibold mb-200">
-              Navigation Boxes
-            </span>
+            <span className="text-xl font-semibold mb-200">Navigation Boxes</span>
             <div className="flex justify-center">
-              <NavigationBox
-                href="https://adobe.com"
-                src="https://i.imgur.com/DhygPot.jpg"
-              >
+              <NavigationBox href="https://adobe.com" src="https://i.imgur.com/DhygPot.jpg">
                 Premium
               </NavigationBox>
-              <NavigationBox
-                href="https://adobe.com"
-                src="https://i.imgur.com/Z7AzH2c.png"
-              >
+              <NavigationBox href="https://adobe.com" src="https://i.imgur.com/Z7AzH2c.png">
                 Templates
               </NavigationBox>
             </div>
@@ -242,9 +201,7 @@ module.exports = {
           <PlanSwitcher />
 
           <div className="w-full m-auto">
-            <div className="text-xl font-semibold text-center mb-200">
-              GenAI Input
-            </div>
+            <div className="text-xl font-semibold text-center mb-200">GenAI Input</div>
             <GenInputField />
           </div>
         </div>
diff --git a/examples/rac-spectrum-tailwind/src/ThemeSwitcher.js b/examples/rac-spectrum-tailwind/src/ThemeSwitcher.js
index 7b05e2f724c..71fa7aeb49a 100644
--- a/examples/rac-spectrum-tailwind/src/ThemeSwitcher.js
+++ b/examples/rac-spectrum-tailwind/src/ThemeSwitcher.js
@@ -1,20 +1,16 @@
-import { useProvider, ActionButton } from "@adobe/react-spectrum";
-import Moon from "@spectrum-icons/workflow/Moon";
-import Light from "@spectrum-icons/workflow/Light";
+import {useProvider, ActionButton} from '@adobe/react-spectrum';
+import Moon from '@spectrum-icons/workflow/Moon';
+import Light from '@spectrum-icons/workflow/Light';
 
-export default function ThemeSwitcher({ setColorScheme }) {
-  let { colorScheme } = useProvider();
-  let label =
-    colorScheme === "dark" ? "Switch to light theme" : "Switch to dark theme";
-  let otherScheme = colorScheme === "light" ? "dark" : "light";
+export default function ThemeSwitcher({setColorScheme}) {
+  let {colorScheme} = useProvider();
+  let label = colorScheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme';
+  let otherScheme = colorScheme === 'light' ? 'dark' : 'light';
 
   return (
     <div className="absolute right-0 m-50">
-      <ActionButton
-        aria-label={label}
-        onPress={() => setColorScheme(otherScheme)}
-      >
-        {colorScheme === "dark" ? <Light /> : <Moon />}
+      <ActionButton aria-label={label} onPress={() => setColorScheme(otherScheme)}>
+        {colorScheme === 'dark' ? <Light /> : <Moon />}
       </ActionButton>
     </div>
   );
diff --git a/examples/rac-spectrum-tailwind/src/components/GenInputField.tsx b/examples/rac-spectrum-tailwind/src/components/GenInputField.tsx
index 717d00334c4..a9dc9746958 100644
--- a/examples/rac-spectrum-tailwind/src/components/GenInputField.tsx
+++ b/examples/rac-spectrum-tailwind/src/components/GenInputField.tsx
@@ -1,29 +1,26 @@
-import { useState } from "react";
-import { Input, Group, TextField, Button } from "react-aria-components";
+import {useState} from 'react';
+import {Input, Group, TextField, Button} from 'react-aria-components';
 
 export function GenInputField() {
-  let [value, setValue] = useState("");
+  let [value, setValue] = useState('');
   let [isTextFieldFocused, setIsTextFieldFocused] = useState(false);
   return (
     <Group
       className={`flex m-auto align-middle bg-white dark:bg-black border rounded-full shadow-md h-800 w-[80%] ${
-        isTextFieldFocused ? "ring" : ""
-      }`}
-    >
+        isTextFieldFocused ? 'ring' : ''
+      }`}>
       <TextField
         onFocus={() => setIsTextFieldFocused(true)}
         onBlur={() => setIsTextFieldFocused(false)}
         value={value}
         onChange={setValue}
         aria-label="Prompt"
-        className="grow h-full p-150"
-      >
+        className="grow h-full p-150">
         <Input className="w-full h-full text-xl font-semibold text-black dark:bg-black dark:text-white p-50 focus:outline-hidden" />
       </TextField>
       <Button
-        isDisabled={value === ""}
-        className="self-end my-auto font-semibold text-white rounded-full disabled:bg-gray-300 disabled:text-gray-500 mx-200 bg-accent-800 p-150 focus-visible:ring focus:outline-hidden"
-      >
+        isDisabled={value === ''}
+        className="self-end my-auto font-semibold text-white rounded-full disabled:bg-gray-300 disabled:text-gray-500 mx-200 bg-accent-800 p-150 focus-visible:ring focus:outline-hidden">
         Generate
       </Button>
     </Group>
diff --git a/examples/rac-spectrum-tailwind/src/components/NavigationBox.tsx b/examples/rac-spectrum-tailwind/src/components/NavigationBox.tsx
index 0d1482ebead..e9b296595cb 100644
--- a/examples/rac-spectrum-tailwind/src/components/NavigationBox.tsx
+++ b/examples/rac-spectrum-tailwind/src/components/NavigationBox.tsx
@@ -1,21 +1,17 @@
-import { Link, LinkProps } from "react-aria-components";
+import {Link, LinkProps} from 'react-aria-components';
 
-interface NavigationBoxProps extends Omit<LinkProps, "children"> {
+interface NavigationBoxProps extends Omit<LinkProps, 'children'> {
   children?: React.ReactNode;
   src?: string;
 }
 
-export function NavigationBox({ children, src, ...other }: NavigationBoxProps) {
+export function NavigationBox({children, src, ...other}: NavigationBoxProps) {
   return (
     <Link
-      style={{ backgroundImage: `url("${src}")` }}
+      style={{backgroundImage: `url("${src}")`}}
       className="flex text-center text-white bg-cover m-175 rounded-medium h-2000 w-2000 p-60 focus-visible:ring focus:outline-hidden"
-      {...other}
-    >
-      <div
-        className="m-auto font-semibold"
-        style={{ textShadow: "#000 0 0 5px" }}
-      >
+      {...other}>
+      <div className="m-auto font-semibold" style={{textShadow: '#000 0 0 5px'}}>
         {children}
       </div>
     </Link>
diff --git a/examples/rac-spectrum-tailwind/src/components/PlanSwitcher.tsx b/examples/rac-spectrum-tailwind/src/components/PlanSwitcher.tsx
index 1b17d442f59..af33d7b7569 100644
--- a/examples/rac-spectrum-tailwind/src/components/PlanSwitcher.tsx
+++ b/examples/rac-spectrum-tailwind/src/components/PlanSwitcher.tsx
@@ -1,19 +1,18 @@
-import { Radio, RadioGroup, Label } from "react-aria-components";
+import {Radio, RadioGroup, Label} from 'react-aria-components';
 
 interface OptionProps {
-  side: "start" | "end";
+  side: 'start' | 'end';
   value: string;
   children: React.ReactNode;
 }
 
-function Option({ side, value, children }: OptionProps) {
+function Option({side, value, children}: OptionProps) {
   return (
     <Radio
       value={value}
       className={`w-full text-center border border-gray-300 p-75 flex items-center justify-center ${
-        side === "start" ? "rounded-s" : "rounded-e"
-      } selected:border-accent-800 selected:bg-accent-100 selected:text-accent-900 focus-visible:ring-half ring-offset-0`}
-    >
+        side === 'start' ? 'rounded-s' : 'rounded-e'
+      } selected:border-accent-800 selected:bg-accent-100 selected:text-accent-900 focus-visible:ring-half ring-offset-0`}>
       {children}
     </Radio>
   );
@@ -21,10 +20,7 @@ function Option({ side, value, children }: OptionProps) {
 
 export function PlanSwitcher() {
   return (
-    <RadioGroup
-      defaultValue="annual"
-      className="flex flex-col m-auto space-y-10 text-center"
-    >
+    <RadioGroup defaultValue="annual" className="flex flex-col m-auto space-y-10 text-center">
       <Label className="text-xl font-semibold mb-200">Plan Switcher</Label>
       <div className="relative m-auto flex justify-evenly w-[400px]">
         <Option aria-label="Own label" side="start" value="annual">
diff --git a/examples/rac-spectrum-tailwind/src/components/SelectBoxGroup.tsx b/examples/rac-spectrum-tailwind/src/components/SelectBoxGroup.tsx
index 31e2367f55a..98c57a065d6 100644
--- a/examples/rac-spectrum-tailwind/src/components/SelectBoxGroup.tsx
+++ b/examples/rac-spectrum-tailwind/src/components/SelectBoxGroup.tsx
@@ -1,16 +1,12 @@
-import type { RadioGroupProps } from "react-aria-components";
-import { Label, Radio, RadioGroup, Text } from "react-aria-components";
+import type {RadioGroupProps} from 'react-aria-components';
+import {Label, Radio, RadioGroup, Text} from 'react-aria-components';
 
-interface SelectBoxGroupProps extends Omit<RadioGroupProps, "children"> {
+interface SelectBoxGroupProps extends Omit<RadioGroupProps, 'children'> {
   children?: React.ReactNode;
   label?: string;
 }
 
-export function SelectBoxGroup({
-  label,
-  children,
-  ...props
-}: SelectBoxGroupProps) {
+export function SelectBoxGroup({label, children, ...props}: SelectBoxGroupProps) {
   return (
     <RadioGroup className="flex flex-col space-y-2 text-center" {...props}>
       <Label className="text-xl font-semibold mb-200">{label}</Label>
@@ -25,13 +21,12 @@ interface SelectBoxProps {
   description?: string;
 }
 
-export function SelectBox({ name, icon, description }: SelectBoxProps) {
+export function SelectBox({name, icon, description}: SelectBoxProps) {
   return (
     <Radio
       value={name}
-      className="flex justify-center bg-white border rounded dark:bg-black p-160 m-160 h-2000 w-2000 focus:outline-hidden focus-visible:ring-half focus-visible:ring-offset-0 selected:bg-accent-100 selected:border-accent-700"
-    >
-      {({ isSelected }) => (
+      className="flex justify-center bg-white border rounded dark:bg-black p-160 m-160 h-2000 w-2000 focus:outline-hidden focus-visible:ring-half focus-visible:ring-offset-0 selected:bg-accent-100 selected:border-accent-700">
+      {({isSelected}) => (
         <div className="relative flex flex-col items-center justify-center w-full h-full gap-150">
           {isSelected && (
             <div className="absolute top-0 left-0 -mt-75 -ml-75">
@@ -40,8 +35,7 @@ export function SelectBox({ name, icon, description }: SelectBoxProps) {
                   className="fill-gray-75 pt-[2px] pl-[2px]"
                   focusable="false"
                   aria-hidden="true"
-                  role="img"
-                >
+                  role="img">
                   <path d="M3.788 9A.999.999 0 0 1 3 8.615l-2.288-3a1 1 0 1 1 1.576-1.23l1.5 1.991 3.924-4.991a1 1 0 1 1 1.576 1.23l-4.712 6A.999.999 0 0 1 3.788 9z"></path>
                 </svg>
               </div>
diff --git a/examples/rac-spectrum-tailwind/src/components/SentimentRatingGroup.tsx b/examples/rac-spectrum-tailwind/src/components/SentimentRatingGroup.tsx
index 47da1fd8a54..a55b5a00ed8 100644
--- a/examples/rac-spectrum-tailwind/src/components/SentimentRatingGroup.tsx
+++ b/examples/rac-spectrum-tailwind/src/components/SentimentRatingGroup.tsx
@@ -1,11 +1,6 @@
-import {
-  Label,
-  Radio,
-  RadioGroup,
-  RadioGroupProps,
-} from "react-aria-components";
+import {Label, Radio, RadioGroup, RadioGroupProps} from 'react-aria-components';
 
-interface SentimentRatingGroupProps extends Omit<RadioGroupProps, "children"> {
+interface SentimentRatingGroupProps extends Omit<RadioGroupProps, 'children'> {
   ratings?: string[];
   value?: string;
   defaultValue?: string;
@@ -13,22 +8,21 @@ interface SentimentRatingGroupProps extends Omit<RadioGroupProps, "children"> {
 }
 
 export function SentimentRatingGroup({
-  ratings = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+  ratings = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
   ...other
 }: SentimentRatingGroupProps) {
   return (
     <RadioGroup
       orientation="horizontal"
       className="flex flex-col m-auto space-y-10 text-center"
-      {...other}
-    >
+      {...other}>
       <Label className="text-xl font-semibold mb-200">Sentiment Rating</Label>
       <div className="flex justify-between">
         <span>Least Likely</span>
         <span>Most Likely</span>
       </div>
       <div className="flex justify-evenly">
-        {ratings.map((rating) => (
+        {ratings.map(rating => (
           <SentimentRating key={rating} rating={rating} />
         ))}
       </div>
@@ -36,12 +30,11 @@ export function SentimentRatingGroup({
   );
 }
 
-export function SentimentRating({ rating }: { rating: string }) {
+export function SentimentRating({rating}: {rating: string}) {
   return (
     <Radio
       value={rating}
-      className="flex items-center justify-center bg-white border rounded-full disabled:bg-gray-200 disabled:text-gray-400 p-160 m-75 h-200 w-200 focus:outline-hidden focus-visible:ring dark:bg-black selected:bg-accent-800 dark:selected:bg-accent-800 selected:border-accent-800 selected:text-white pressed:bg-gray-200 dark:pressed:bg-gray-200 hover:border-gray-300"
-    >
+      className="flex items-center justify-center bg-white border rounded-full disabled:bg-gray-200 disabled:text-gray-400 p-160 m-75 h-200 w-200 focus:outline-hidden focus-visible:ring dark:bg-black selected:bg-accent-800 dark:selected:bg-accent-800 selected:border-accent-800 selected:text-white pressed:bg-gray-200 dark:pressed:bg-gray-200 hover:border-gray-300">
       {rating}
     </Radio>
   );
diff --git a/examples/rac-spectrum-tailwind/src/components/StarRatingGroup.tsx b/examples/rac-spectrum-tailwind/src/components/StarRatingGroup.tsx
index c11baf10160..95c3e580c1b 100644
--- a/examples/rac-spectrum-tailwind/src/components/StarRatingGroup.tsx
+++ b/examples/rac-spectrum-tailwind/src/components/StarRatingGroup.tsx
@@ -1,13 +1,7 @@
-import React, { useState } from "react";
-import {
-  Group,
-  Label,
-  Radio,
-  RadioGroup,
-  RadioGroupProps,
-} from "react-aria-components";
+import React, {useState} from 'react';
+import {Group, Label, Radio, RadioGroup, RadioGroupProps} from 'react-aria-components';
 
-interface StarRatingGroupProps extends Omit<RadioGroupProps, "children"> {
+interface StarRatingGroupProps extends Omit<RadioGroupProps, 'children'> {
   ratingCount?: number;
   value?: string;
   defaultValue?: string;
@@ -19,16 +13,13 @@ interface StarRatingGroupProps extends Omit<RadioGroupProps, "children"> {
 export function StarRatingGroup({
   ratingCount = 5,
   isEmphasized = false,
-  label = "Rating",
+  label = 'Rating',
   ...other
 }: StarRatingGroupProps) {
-  let allRatings = Array.from(Array(ratingCount).keys()).map((i) =>
-    String(i + 1)
-  );
+  let allRatings = Array.from(Array(ratingCount).keys()).map(i => String(i + 1));
 
   // Track which rating is hovered at the group level.
-  let [hoveredRating, setHoveredRating] =
-    useState<string | undefined>(undefined);
+  let [hoveredRating, setHoveredRating] = useState<string | undefined>(undefined);
 
   let onPointerOver = (e: React.PointerEvent<HTMLDivElement>) => {
     if ((e.target as HTMLElement).dataset?.rating) {
@@ -44,22 +35,17 @@ export function StarRatingGroup({
     <RadioGroup
       orientation="horizontal"
       className="flex flex-col m-auto space-y-10 text-center"
-      {...other}
-    >
-      {({ state }) => (
+      {...other}>
+      {({state}) => (
         <>
           <Label className="text-xl font-semibold mb-200">{label}</Label>
-          <Group
-            data-name="star-rating-group"
-            className="focus-visible:ring group"
-          >
+          <Group data-name="star-rating-group" className="focus-visible:ring group">
             <div
               data-name="star-rating-group"
               className="flex justify-evenly gap-75"
               onPointerOver={onPointerOver}
-              onPointerLeave={onPointerOut}
-            >
-              {allRatings.map((rating) => (
+              onPointerLeave={onPointerOut}>
+              {allRatings.map(rating => (
                 <StarRating
                   key={rating}
                   rating={rating}
@@ -80,7 +66,7 @@ export function StarRating({
   rating,
   selected,
   isEmphasized,
-  hoveredRating,
+  hoveredRating
 }: {
   rating: string;
   selected: string | null;
@@ -90,23 +76,20 @@ export function StarRating({
   let ratingNum = Number(rating);
   let selectedNum = Number(selected);
   let isFilled =
-    hoveredRating !== undefined
-      ? ratingNum <= Number(hoveredRating)
-      : ratingNum <= selectedNum;
-  let fillColor = isEmphasized ? "fill-accent-800" : "fill-gray-700";
-  let bgColor = isEmphasized ? "bg-accent-800" : "bg-gray-700";
+    hoveredRating !== undefined ? ratingNum <= Number(hoveredRating) : ratingNum <= selectedNum;
+  let fillColor = isEmphasized ? 'fill-accent-800' : 'fill-gray-700';
+  let bgColor = isEmphasized ? 'bg-accent-800' : 'bg-gray-700';
 
   return (
     <Radio aria-label={`${rating} stars`} value={rating}>
-      {({ isHovered, isSelected }) => (
+      {({isHovered, isSelected}) => (
         <>
           <svg
             data-rating={rating}
-            className={isFilled ? fillColor : "dark:fill-white"}
+            className={isFilled ? fillColor : 'dark:fill-white'}
             xmlns="http://www.w3.org/2000/svg"
             width={18}
-            height={18}
-          >
+            height={18}>
             {isFilled ? (
               <path d="m9.241.3 2.161 5.715 6.106.289a.255.255 0 0 1 .147.454l-4.77 3.823 1.612 5.9a.255.255 0 0 1-.386.28L9.002 13.4l-5.11 3.358a.255.255 0 0 1-.386-.28l1.612-5.9-4.77-3.821A.255.255 0 0 1 .495 6.3l6.107-.285L8.763.3a.255.255 0 0 1 .478 0Z" />
             ) : (
@@ -114,10 +97,7 @@ export function StarRating({
             )}
           </svg>
           {isHovered && isSelected && (
-            <span
-              aria-hidden="true"
-              className={`flex w-full h-25 -mb-25 ${bgColor}`}
-            />
+            <span aria-hidden="true" className={`flex w-full h-25 -mb-25 ${bgColor}`} />
           )}
         </>
       )}
diff --git a/examples/rac-spectrum-tailwind/src/index.html b/examples/rac-spectrum-tailwind/src/index.html
index bd9cbfce20f..ddfa87c7a43 100644
--- a/examples/rac-spectrum-tailwind/src/index.html
+++ b/examples/rac-spectrum-tailwind/src/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>React Aria Components + Spectrum + Tailwind
-  
-  
-
-
-  
      
-  
-
+  
+    
+    React Aria Components + Spectrum + Tailwind
+    
+    
+  
+  
+    
      
+    
+  
 
diff --git a/examples/rac-spectrum-tailwind/src/index.js b/examples/rac-spectrum-tailwind/src/index.js
index 39c39b6b611..d12f959a5b5 100644
--- a/examples/rac-spectrum-tailwind/src/index.js
+++ b/examples/rac-spectrum-tailwind/src/index.js
@@ -1,6 +1,5 @@
-import { createRoot } from "react-dom/client";
-import { App } from './App';
+import {createRoot} from 'react-dom/client';
+import {App} from './App';
 
 let root = createRoot(document.getElementById('root'));
 root.render();
-
diff --git a/examples/rac-spectrum-tailwind/src/spectrum-preset.js b/examples/rac-spectrum-tailwind/src/spectrum-preset.js
index 33a023de5bc..127202d74d2 100644
--- a/examples/rac-spectrum-tailwind/src/spectrum-preset.js
+++ b/examples/rac-spectrum-tailwind/src/spectrum-preset.js
@@ -1,553 +1,551 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   future: {
-    respectDefaultRingColorOpacity: true,
+    respectDefaultRingColorOpacity: true
   },
-  darkMode: ["class", '[style*="color-scheme: dark;"]'],
+  darkMode: ['class', '[style*="color-scheme: dark;"]'],
   theme: {
     extend: {
       ringOffsetWidth: {
-        DEFAULT: "var(--spectrum-alias-focus-ring-gap)",
+        DEFAULT: 'var(--spectrum-alias-focus-ring-gap)'
       },
       textColor: {
-        DEFAULT: "var(--spectrum-alias-text-color)",
+        DEFAULT: 'var(--spectrum-alias-text-color)'
       },
       ringOffsetColor: {
-        DEFAULT: "var(--spectrum-alias-background-color-default)",
-      },
+        DEFAULT: 'var(--spectrum-alias-background-color-default)'
+      }
     },
     screens: {
-      xs: "304px",
-      sm: "768px",
-      md: "1280px",
-      lg: "1768px",
-      xl: "2160px",
+      xs: '304px',
+      sm: '768px',
+      md: '1280px',
+      lg: '1768px',
+      xl: '2160px'
     },
     /** https://spectrum.adobe.com/page/color-system/ */
     colors: {
-      white: "var(--spectrum-global-color-static-white)",
-      black: "var(--spectrum-global-color-static-black)",
-      transparent: "var(--spectrum-alias-global-color-transparent)",
+      white: 'var(--spectrum-global-color-static-white)',
+      black: 'var(--spectrum-global-color-static-black)',
+      transparent: 'var(--spectrum-alias-global-color-transparent)',
       gray: {
-        50: "var(--spectrum-gray-50)",
-        75: "var(--spectrum-gray-75)",
-        100: "var(--spectrum-gray-100)",
-        200: "var(--spectrum-gray-200)",
-        300: "var(--spectrum-gray-300)",
-        400: "var(--spectrum-gray-400)",
-        500: "var(--spectrum-gray-500)",
-        600: "var(--spectrum-gray-600)",
-        700: "var(--spectrum-gray-700)",
-        800: "var(--spectrum-gray-800)",
-        900: "var(--spectrum-gray-900)",
+        50: 'var(--spectrum-gray-50)',
+        75: 'var(--spectrum-gray-75)',
+        100: 'var(--spectrum-gray-100)',
+        200: 'var(--spectrum-gray-200)',
+        300: 'var(--spectrum-gray-300)',
+        400: 'var(--spectrum-gray-400)',
+        500: 'var(--spectrum-gray-500)',
+        600: 'var(--spectrum-gray-600)',
+        700: 'var(--spectrum-gray-700)',
+        800: 'var(--spectrum-gray-800)',
+        900: 'var(--spectrum-gray-900)'
       },
       blue: {
-        DEFAULT: "var(--spectrum-global-color-static-blue)",
-        100: "var(--spectrum-blue-100)",
-        200: "var(--spectrum-blue-200)",
-        300: "var(--spectrum-blue-300)",
-        400: "var(--spectrum-blue-400)",
-        500: "var(--spectrum-blue-500)",
-        600: "var(--spectrum-blue-600)",
-        700: "var(--spectrum-blue-700)",
-        800: "var(--spectrum-blue-800)",
-        900: "var(--spectrum-blue-900)",
-        1000: "var(--spectrum-blue-1000)",
-        1100: "var(--spectrum-blue-1100)",
-        1200: "var(--spectrum-blue-1200)",
-        1300: "var(--spectrum-blue-1300)",
-        1400: "var(--spectrum-blue-1400)",
+        DEFAULT: 'var(--spectrum-global-color-static-blue)',
+        100: 'var(--spectrum-blue-100)',
+        200: 'var(--spectrum-blue-200)',
+        300: 'var(--spectrum-blue-300)',
+        400: 'var(--spectrum-blue-400)',
+        500: 'var(--spectrum-blue-500)',
+        600: 'var(--spectrum-blue-600)',
+        700: 'var(--spectrum-blue-700)',
+        800: 'var(--spectrum-blue-800)',
+        900: 'var(--spectrum-blue-900)',
+        1000: 'var(--spectrum-blue-1000)',
+        1100: 'var(--spectrum-blue-1100)',
+        1200: 'var(--spectrum-blue-1200)',
+        1300: 'var(--spectrum-blue-1300)',
+        1400: 'var(--spectrum-blue-1400)'
       },
       green: {
-        100: "var(--spectrum-green-100)",
-        200: "var(--spectrum-green-200)",
-        300: "var(--spectrum-green-300)",
-        400: "var(--spectrum-green-400)",
-        500: "var(--spectrum-green-500)",
-        600: "var(--spectrum-green-600)",
-        700: "var(--spectrum-green-700)",
-        800: "var(--spectrum-green-800)",
-        900: "var(--spectrum-green-900)",
-        1000: "var(--spectrum-green-1000)",
-        1100: "var(--spectrum-green-1100)",
-        1200: "var(--spectrum-green-1200)",
-        1300: "var(--spectrum-green-1300)",
-        1400: "var(--spectrum-green-1400)",
+        100: 'var(--spectrum-green-100)',
+        200: 'var(--spectrum-green-200)',
+        300: 'var(--spectrum-green-300)',
+        400: 'var(--spectrum-green-400)',
+        500: 'var(--spectrum-green-500)',
+        600: 'var(--spectrum-green-600)',
+        700: 'var(--spectrum-green-700)',
+        800: 'var(--spectrum-green-800)',
+        900: 'var(--spectrum-green-900)',
+        1000: 'var(--spectrum-green-1000)',
+        1100: 'var(--spectrum-green-1100)',
+        1200: 'var(--spectrum-green-1200)',
+        1300: 'var(--spectrum-green-1300)',
+        1400: 'var(--spectrum-green-1400)'
       },
       orange: {
-        100: "var(--spectrum-orange-100)",
-        200: "var(--spectrum-orange-200)",
-        300: "var(--spectrum-orange-300)",
-        400: "var(--spectrum-orange-400)",
-        500: "var(--spectrum-orange-500)",
-        600: "var(--spectrum-orange-600)",
-        700: "var(--spectrum-orange-700)",
-        800: "var(--spectrum-orange-800)",
-        900: "var(--spectrum-orange-900)",
-        1000: "var(--spectrum-orange-1000)",
-        1100: "var(--spectrum-orange-1100)",
-        1200: "var(--spectrum-orange-1200)",
-        1300: "var(--spectrum-orange-1300)",
-        1400: "var(--spectrum-orange-1400)",
+        100: 'var(--spectrum-orange-100)',
+        200: 'var(--spectrum-orange-200)',
+        300: 'var(--spectrum-orange-300)',
+        400: 'var(--spectrum-orange-400)',
+        500: 'var(--spectrum-orange-500)',
+        600: 'var(--spectrum-orange-600)',
+        700: 'var(--spectrum-orange-700)',
+        800: 'var(--spectrum-orange-800)',
+        900: 'var(--spectrum-orange-900)',
+        1000: 'var(--spectrum-orange-1000)',
+        1100: 'var(--spectrum-orange-1100)',
+        1200: 'var(--spectrum-orange-1200)',
+        1300: 'var(--spectrum-orange-1300)',
+        1400: 'var(--spectrum-orange-1400)'
       },
       red: {
-        100: "var(--spectrum-red-100)",
-        200: "var(--spectrum-red-200)",
-        300: "var(--spectrum-red-300)",
-        400: "var(--spectrum-red-400)",
-        500: "var(--spectrum-red-500)",
-        600: "var(--spectrum-red-600)",
-        700: "var(--spectrum-red-700)",
-        800: "var(--spectrum-red-800)",
-        900: "var(--spectrum-red-900)",
-        1000: "var(--spectrum-red-1000)",
-        1100: "var(--spectrum-red-1100)",
-        1200: "var(--spectrum-red-1200)",
-        1300: "var(--spectrum-red-1300)",
-        1400: "var(--spectrum-red-1400)",
+        100: 'var(--spectrum-red-100)',
+        200: 'var(--spectrum-red-200)',
+        300: 'var(--spectrum-red-300)',
+        400: 'var(--spectrum-red-400)',
+        500: 'var(--spectrum-red-500)',
+        600: 'var(--spectrum-red-600)',
+        700: 'var(--spectrum-red-700)',
+        800: 'var(--spectrum-red-800)',
+        900: 'var(--spectrum-red-900)',
+        1000: 'var(--spectrum-red-1000)',
+        1100: 'var(--spectrum-red-1100)',
+        1200: 'var(--spectrum-red-1200)',
+        1300: 'var(--spectrum-red-1300)',
+        1400: 'var(--spectrum-red-1400)'
       },
       celery: {
-        100: "var(--spectrum-celery-100)",
-        200: "var(--spectrum-celery-200)",
-        300: "var(--spectrum-celery-300)",
-        400: "var(--spectrum-celery-400)",
-        500: "var(--spectrum-celery-500)",
-        600: "var(--spectrum-celery-600)",
-        700: "var(--spectrum-celery-700)",
-        800: "var(--spectrum-celery-800)",
-        900: "var(--spectrum-celery-900)",
-        1000: "var(--spectrum-celery-1000)",
-        1100: "var(--spectrum-celery-1100)",
-        1200: "var(--spectrum-celery-1200)",
-        1300: "var(--spectrum-celery-1300)",
-        1400: "var(--spectrum-celery-1400)",
+        100: 'var(--spectrum-celery-100)',
+        200: 'var(--spectrum-celery-200)',
+        300: 'var(--spectrum-celery-300)',
+        400: 'var(--spectrum-celery-400)',
+        500: 'var(--spectrum-celery-500)',
+        600: 'var(--spectrum-celery-600)',
+        700: 'var(--spectrum-celery-700)',
+        800: 'var(--spectrum-celery-800)',
+        900: 'var(--spectrum-celery-900)',
+        1000: 'var(--spectrum-celery-1000)',
+        1100: 'var(--spectrum-celery-1100)',
+        1200: 'var(--spectrum-celery-1200)',
+        1300: 'var(--spectrum-celery-1300)',
+        1400: 'var(--spectrum-celery-1400)'
       },
       chartreuse: {
-        100: "var(--spectrum-chartreuse-100)",
-        200: "var(--spectrum-chartreuse-200)",
-        300: "var(--spectrum-chartreuse-300)",
-        400: "var(--spectrum-chartreuse-400)",
-        500: "var(--spectrum-chartreuse-500)",
-        600: "var(--spectrum-chartreuse-600)",
-        700: "var(--spectrum-chartreuse-700)",
-        800: "var(--spectrum-chartreuse-800)",
-        900: "var(--spectrum-chartreuse-900)",
-        1000: "var(--spectrum-chartreuse-1000)",
-        1100: "var(--spectrum-chartreuse-1100)",
-        1200: "var(--spectrum-chartreuse-1200)",
-        1300: "var(--spectrum-chartreuse-1300)",
-        1400: "var(--spectrum-chartreuse-1400)",
+        100: 'var(--spectrum-chartreuse-100)',
+        200: 'var(--spectrum-chartreuse-200)',
+        300: 'var(--spectrum-chartreuse-300)',
+        400: 'var(--spectrum-chartreuse-400)',
+        500: 'var(--spectrum-chartreuse-500)',
+        600: 'var(--spectrum-chartreuse-600)',
+        700: 'var(--spectrum-chartreuse-700)',
+        800: 'var(--spectrum-chartreuse-800)',
+        900: 'var(--spectrum-chartreuse-900)',
+        1000: 'var(--spectrum-chartreuse-1000)',
+        1100: 'var(--spectrum-chartreuse-1100)',
+        1200: 'var(--spectrum-chartreuse-1200)',
+        1300: 'var(--spectrum-chartreuse-1300)',
+        1400: 'var(--spectrum-chartreuse-1400)'
       },
       cyan: {
-        100: "var(--spectrum-cyan-100)",
-        200: "var(--spectrum-cyan-200)",
-        300: "var(--spectrum-cyan-300)",
-        400: "var(--spectrum-cyan-400)",
-        500: "var(--spectrum-cyan-500)",
-        600: "var(--spectrum-cyan-600)",
-        700: "var(--spectrum-cyan-700)",
-        800: "var(--spectrum-cyan-800)",
-        900: "var(--spectrum-cyan-900)",
-        1000: "var(--spectrum-cyan-1000)",
-        1100: "var(--spectrum-cyan-1100)",
-        1200: "var(--spectrum-cyan-1200)",
-        1300: "var(--spectrum-cyan-1300)",
-        1400: "var(--spectrum-cyan-1400)",
+        100: 'var(--spectrum-cyan-100)',
+        200: 'var(--spectrum-cyan-200)',
+        300: 'var(--spectrum-cyan-300)',
+        400: 'var(--spectrum-cyan-400)',
+        500: 'var(--spectrum-cyan-500)',
+        600: 'var(--spectrum-cyan-600)',
+        700: 'var(--spectrum-cyan-700)',
+        800: 'var(--spectrum-cyan-800)',
+        900: 'var(--spectrum-cyan-900)',
+        1000: 'var(--spectrum-cyan-1000)',
+        1100: 'var(--spectrum-cyan-1100)',
+        1200: 'var(--spectrum-cyan-1200)',
+        1300: 'var(--spectrum-cyan-1300)',
+        1400: 'var(--spectrum-cyan-1400)'
       },
       fuchsia: {
-        100: "var(--spectrum-fuchsia-100)",
-        200: "var(--spectrum-fuchsia-200)",
-        300: "var(--spectrum-fuchsia-300)",
-        400: "var(--spectrum-fuchsia-400)",
-        500: "var(--spectrum-fuchsia-500)",
-        600: "var(--spectrum-fuchsia-600)",
-        700: "var(--spectrum-fuchsia-700)",
-        800: "var(--spectrum-fuchsia-800)",
-        900: "var(--spectrum-fuchsia-900)",
-        1000: "var(--spectrum-fuchsia-1000)",
-        1100: "var(--spectrum-fuchsia-1100)",
-        1200: "var(--spectrum-fuchsia-1200)",
-        1300: "var(--spectrum-fuchsia-1300)",
-        1400: "var(--spectrum-fuchsia-1400)",
+        100: 'var(--spectrum-fuchsia-100)',
+        200: 'var(--spectrum-fuchsia-200)',
+        300: 'var(--spectrum-fuchsia-300)',
+        400: 'var(--spectrum-fuchsia-400)',
+        500: 'var(--spectrum-fuchsia-500)',
+        600: 'var(--spectrum-fuchsia-600)',
+        700: 'var(--spectrum-fuchsia-700)',
+        800: 'var(--spectrum-fuchsia-800)',
+        900: 'var(--spectrum-fuchsia-900)',
+        1000: 'var(--spectrum-fuchsia-1000)',
+        1100: 'var(--spectrum-fuchsia-1100)',
+        1200: 'var(--spectrum-fuchsia-1200)',
+        1300: 'var(--spectrum-fuchsia-1300)',
+        1400: 'var(--spectrum-fuchsia-1400)'
       },
       indigo: {
-        100: "var(--spectrum-indigo-100)",
-        200: "var(--spectrum-indigo-200)",
-        300: "var(--spectrum-indigo-300)",
-        400: "var(--spectrum-indigo-400)",
-        500: "var(--spectrum-indigo-500)",
-        600: "var(--spectrum-indigo-600)",
-        700: "var(--spectrum-indigo-700)",
-        800: "var(--spectrum-indigo-800)",
-        900: "var(--spectrum-indigo-900)",
-        1000: "var(--spectrum-indigo-1000)",
-        1100: "var(--spectrum-indigo-1100)",
-        1200: "var(--spectrum-indigo-1200)",
-        1300: "var(--spectrum-indigo-1300)",
-        1400: "var(--spectrum-indigo-1400)",
+        100: 'var(--spectrum-indigo-100)',
+        200: 'var(--spectrum-indigo-200)',
+        300: 'var(--spectrum-indigo-300)',
+        400: 'var(--spectrum-indigo-400)',
+        500: 'var(--spectrum-indigo-500)',
+        600: 'var(--spectrum-indigo-600)',
+        700: 'var(--spectrum-indigo-700)',
+        800: 'var(--spectrum-indigo-800)',
+        900: 'var(--spectrum-indigo-900)',
+        1000: 'var(--spectrum-indigo-1000)',
+        1100: 'var(--spectrum-indigo-1100)',
+        1200: 'var(--spectrum-indigo-1200)',
+        1300: 'var(--spectrum-indigo-1300)',
+        1400: 'var(--spectrum-indigo-1400)'
       },
       magenta: {
-        100: "var(--spectrum-magenta-100)",
-        200: "var(--spectrum-magenta-200)",
-        300: "var(--spectrum-magenta-300)",
-        400: "var(--spectrum-magenta-400)",
-        500: "var(--spectrum-magenta-500)",
-        600: "var(--spectrum-magenta-600)",
-        700: "var(--spectrum-magenta-700)",
-        800: "var(--spectrum-magenta-800)",
-        900: "var(--spectrum-magenta-900)",
-        1000: "var(--spectrum-magenta-1000)",
-        1100: "var(--spectrum-magenta-1100)",
-        1200: "var(--spectrum-magenta-1200)",
-        1300: "var(--spectrum-magenta-1300)",
-        1400: "var(--spectrum-magenta-1400)",
+        100: 'var(--spectrum-magenta-100)',
+        200: 'var(--spectrum-magenta-200)',
+        300: 'var(--spectrum-magenta-300)',
+        400: 'var(--spectrum-magenta-400)',
+        500: 'var(--spectrum-magenta-500)',
+        600: 'var(--spectrum-magenta-600)',
+        700: 'var(--spectrum-magenta-700)',
+        800: 'var(--spectrum-magenta-800)',
+        900: 'var(--spectrum-magenta-900)',
+        1000: 'var(--spectrum-magenta-1000)',
+        1100: 'var(--spectrum-magenta-1100)',
+        1200: 'var(--spectrum-magenta-1200)',
+        1300: 'var(--spectrum-magenta-1300)',
+        1400: 'var(--spectrum-magenta-1400)'
       },
       purple: {
-        100: "var(--spectrum-purple-100)",
-        200: "var(--spectrum-purple-200)",
-        300: "var(--spectrum-purple-300)",
-        400: "var(--spectrum-purple-400)",
-        500: "var(--spectrum-purple-500)",
-        600: "var(--spectrum-purple-600)",
-        700: "var(--spectrum-purple-700)",
-        800: "var(--spectrum-purple-800)",
-        900: "var(--spectrum-purple-900)",
-        1000: "var(--spectrum-purple-1000)",
-        1100: "var(--spectrum-purple-1100)",
-        1200: "var(--spectrum-purple-1200)",
-        1300: "var(--spectrum-purple-1300)",
-        1400: "var(--spectrum-purple-1400)",
+        100: 'var(--spectrum-purple-100)',
+        200: 'var(--spectrum-purple-200)',
+        300: 'var(--spectrum-purple-300)',
+        400: 'var(--spectrum-purple-400)',
+        500: 'var(--spectrum-purple-500)',
+        600: 'var(--spectrum-purple-600)',
+        700: 'var(--spectrum-purple-700)',
+        800: 'var(--spectrum-purple-800)',
+        900: 'var(--spectrum-purple-900)',
+        1000: 'var(--spectrum-purple-1000)',
+        1100: 'var(--spectrum-purple-1100)',
+        1200: 'var(--spectrum-purple-1200)',
+        1300: 'var(--spectrum-purple-1300)',
+        1400: 'var(--spectrum-purple-1400)'
       },
       seafoam: {
-        100: "var(--spectrum-seafoam-100)",
-        200: "var(--spectrum-seafoam-200)",
-        300: "var(--spectrum-seafoam-300)",
-        400: "var(--spectrum-seafoam-400)",
-        500: "var(--spectrum-seafoam-500)",
-        600: "var(--spectrum-seafoam-600)",
-        700: "var(--spectrum-seafoam-700)",
-        800: "var(--spectrum-seafoam-800)",
-        900: "var(--spectrum-seafoam-900)",
-        1000: "var(--spectrum-seafoam-1000)",
-        1100: "var(--spectrum-seafoam-1100)",
-        1200: "var(--spectrum-seafoam-1200)",
-        1300: "var(--spectrum-seafoam-1300)",
-        1400: "var(--spectrum-seafoam-1400)",
+        100: 'var(--spectrum-seafoam-100)',
+        200: 'var(--spectrum-seafoam-200)',
+        300: 'var(--spectrum-seafoam-300)',
+        400: 'var(--spectrum-seafoam-400)',
+        500: 'var(--spectrum-seafoam-500)',
+        600: 'var(--spectrum-seafoam-600)',
+        700: 'var(--spectrum-seafoam-700)',
+        800: 'var(--spectrum-seafoam-800)',
+        900: 'var(--spectrum-seafoam-900)',
+        1000: 'var(--spectrum-seafoam-1000)',
+        1100: 'var(--spectrum-seafoam-1100)',
+        1200: 'var(--spectrum-seafoam-1200)',
+        1300: 'var(--spectrum-seafoam-1300)',
+        1400: 'var(--spectrum-seafoam-1400)'
       },
       yellow: {
-        100: "var(--spectrum-yellow-100)",
-        200: "var(--spectrum-yellow-200)",
-        300: "var(--spectrum-yellow-300)",
-        400: "var(--spectrum-yellow-400)",
-        500: "var(--spectrum-yellow-500)",
-        600: "var(--spectrum-yellow-600)",
-        700: "var(--spectrum-yellow-700)",
-        800: "var(--spectrum-yellow-800)",
-        900: "var(--spectrum-yellow-900)",
-        1000: "var(--spectrum-yellow-1000)",
-        1100: "var(--spectrum-yellow-1100)",
-        1200: "var(--spectrum-yellow-1200)",
-        1300: "var(--spectrum-yellow-1300)",
-        1400: "var(--spectrum-yellow-1400)",
+        100: 'var(--spectrum-yellow-100)',
+        200: 'var(--spectrum-yellow-200)',
+        300: 'var(--spectrum-yellow-300)',
+        400: 'var(--spectrum-yellow-400)',
+        500: 'var(--spectrum-yellow-500)',
+        600: 'var(--spectrum-yellow-600)',
+        700: 'var(--spectrum-yellow-700)',
+        800: 'var(--spectrum-yellow-800)',
+        900: 'var(--spectrum-yellow-900)',
+        1000: 'var(--spectrum-yellow-1000)',
+        1100: 'var(--spectrum-yellow-1100)',
+        1200: 'var(--spectrum-yellow-1200)',
+        1300: 'var(--spectrum-yellow-1300)',
+        1400: 'var(--spectrum-yellow-1400)'
       },
       negative: {
-        DEFAULT: "var(--spectrum-red-900)",
-        background: "var(--spectrum-negative-background-color-default)",
-        hover: "var(--spectrum-red-1000)",
-        dark: "var(--spectrum-red-1000)",
-        border: "var(--spectrum-red-800)",
-        icon: "var(--spectrum-negative-visual-color)",
-        status: "var(--spectrum-negative-visual-color)",
-        textLarge: "var(--spectrum-red-900)",
-        textSmall: "var(--spectrum-red-900)",
-        down: "var(--spectrum-red-1100)",
-        focus: "var(--spectrum-red-1100)",
+        DEFAULT: 'var(--spectrum-red-900)',
+        background: 'var(--spectrum-negative-background-color-default)',
+        hover: 'var(--spectrum-red-1000)',
+        dark: 'var(--spectrum-red-1000)',
+        border: 'var(--spectrum-red-800)',
+        icon: 'var(--spectrum-negative-visual-color)',
+        status: 'var(--spectrum-negative-visual-color)',
+        textLarge: 'var(--spectrum-red-900)',
+        textSmall: 'var(--spectrum-red-900)',
+        down: 'var(--spectrum-red-1100)',
+        focus: 'var(--spectrum-red-1100)'
       },
       notice: {
-        DEFAULT: "var(--spectrum-orange-700)",
-        background: "var(--spectrum-orange-800)",
-        hover: "var(--spectrum-orange-600)",
-        dark: "var(--spectrum-orange-800)",
-        border: "var(--spectrum-orange-600)",
-        icon: "var(--spectrum-notice-visual-color)",
-        status: "var(--spectrum-notice-visual-color)",
-        textLarge: "var(--spectrum-orange-700)",
-        textSmall: "var(--spectrum-orange-800)",
-        down: "var(--spectrum-orange-900)",
-        focus: "var(--spectrum-orange-600)",
+        DEFAULT: 'var(--spectrum-orange-700)',
+        background: 'var(--spectrum-orange-800)',
+        hover: 'var(--spectrum-orange-600)',
+        dark: 'var(--spectrum-orange-800)',
+        border: 'var(--spectrum-orange-600)',
+        icon: 'var(--spectrum-notice-visual-color)',
+        status: 'var(--spectrum-notice-visual-color)',
+        textLarge: 'var(--spectrum-orange-700)',
+        textSmall: 'var(--spectrum-orange-800)',
+        down: 'var(--spectrum-orange-900)',
+        focus: 'var(--spectrum-orange-600)'
       },
       positive: {
-        DEFAULT: "var(--spectrum-green-900)",
-        background: "var(--spectrum-positive-background-color-default)",
+        DEFAULT: 'var(--spectrum-green-900)',
+        background: 'var(--spectrum-positive-background-color-default)',
         // hover: "var(--spectrum-green-1000)",
-        dark: "var(--spectrum-green-1000)",
-        border: "var(--spectrum-green-800)",
-        icon: "var(--spectrum-positive-visual-color)",
-        status: "var(--spectrum-positive-visual-color)",
-        textLarge: "var(--spectrum-green-900)",
-        textSmall: "var(--spectrum-green-1000)",
-        down: "var(--spectrum-green-1100)",
-        focus: "var(--spectrum-green-800)",
+        dark: 'var(--spectrum-green-1000)',
+        border: 'var(--spectrum-green-800)',
+        icon: 'var(--spectrum-positive-visual-color)',
+        status: 'var(--spectrum-positive-visual-color)',
+        textLarge: 'var(--spectrum-green-900)',
+        textSmall: 'var(--spectrum-green-1000)',
+        down: 'var(--spectrum-green-1100)',
+        focus: 'var(--spectrum-green-800)'
       },
       informative: {
-        DEFAULT: "var(--spectrum-blue-900)",
-        background: "var(--spectrum-informative-background-color-default)",
+        DEFAULT: 'var(--spectrum-blue-900)',
+        background: 'var(--spectrum-informative-background-color-default)',
         // hover: "var(--spectrum-blue-1000)",
-        dark: "var(--spectrum-blue-1000)",
-        border: "var(--spectrum-blue-800)",
-        icon: "var(--spectrum-informative-visual-color)",
-        status: "var(--spectrum-informative-visual-color)",
-        textLarge: "var(--spectrum-blue-900)",
-        textSmall: "var(--spectrum-blue-1000)",
-        down: "var(--spectrum-blue-1100)",
-        focus: "var(--spectrum-blue-800)",
+        dark: 'var(--spectrum-blue-1000)',
+        border: 'var(--spectrum-blue-800)',
+        icon: 'var(--spectrum-informative-visual-color)',
+        status: 'var(--spectrum-informative-visual-color)',
+        textLarge: 'var(--spectrum-blue-900)',
+        textSmall: 'var(--spectrum-blue-1000)',
+        down: 'var(--spectrum-blue-1100)',
+        focus: 'var(--spectrum-blue-800)'
       },
       cta: {
         background: {
-          DEFAULT: "var(--spectrum-accent-background-color-default)",
-          hover: "var(--spectrum-accent-background-color-hover)",
-          down: "var(--spectrum-accent-background-color-down)",
-          keyFocus: "var(--spectrum-accent-background-color-key-focus)",
-        },
+          DEFAULT: 'var(--spectrum-accent-background-color-default)',
+          hover: 'var(--spectrum-accent-background-color-hover)',
+          down: 'var(--spectrum-accent-background-color-down)',
+          keyFocus: 'var(--spectrum-accent-background-color-key-focus)'
+        }
       },
       accent: {
-        100: "var(--spectrum-blue-100)",
-        200: "var(--spectrum-blue-200)",
-        300: "var(--spectrum-blue-300)",
-        400: "var(--spectrum-blue-400)",
-        500: "var(--spectrum-blue-500)",
-        600: "var(--spectrum-blue-600)",
-        700: "var(--spectrum-blue-700)",
-        800: "var(--spectrum-blue-800)",
-        900: "var(--spectrum-blue-900)",
-        1000: "var(--spectrum-blue-1000)",
-        1100: "var(--spectrum-blue-1100)",
-        1200: "var(--spectrum-blue-1200)",
-        1300: "var(--spectrum-blue-1300)",
-        1400: "var(--spectrum-blue-1400)",
+        100: 'var(--spectrum-blue-100)',
+        200: 'var(--spectrum-blue-200)',
+        300: 'var(--spectrum-blue-300)',
+        400: 'var(--spectrum-blue-400)',
+        500: 'var(--spectrum-blue-500)',
+        600: 'var(--spectrum-blue-600)',
+        700: 'var(--spectrum-blue-700)',
+        800: 'var(--spectrum-blue-800)',
+        900: 'var(--spectrum-blue-900)',
+        1000: 'var(--spectrum-blue-1000)',
+        1100: 'var(--spectrum-blue-1100)',
+        1200: 'var(--spectrum-blue-1200)',
+        1300: 'var(--spectrum-blue-1300)',
+        1400: 'var(--spectrum-blue-1400)'
       },
       background: {
-        DEFAULT: "var(--spectrum-alias-background-color-default)",
-        disabled: "var(--spectrum-alias-background-color-disabled)",
-        transparent: "var(--spectrum-alias-background-color-transparent)",
+        DEFAULT: 'var(--spectrum-alias-background-color-default)',
+        disabled: 'var(--spectrum-alias-background-color-disabled)',
+        transparent: 'var(--spectrum-alias-background-color-transparent)'
       },
       text: {
-        DEFAULT: "var(--spectrum-alias-text-color)",
-        hover: "var(--spectrum-alias-text-color-hover)",
-        down: "var(--spectrum-alias-text-color-down)",
-        "key-focus": "var(--spectrum-alias-text-color-key-focus)",
-        "mouse-focus": "var(--spectrum-alias-text-color-mouse-focus)",
-        disabled: "var(--spectrum-alias-text-color-disabled)",
-        invalid: "var(--spectrum-alias-text-color-invalid)",
-        selected: "var(--spectrum-alias-text-color-selected)",
-        "selected-neutral": "var(--spectrum-alias-text-color-selected-neutral)",
+        DEFAULT: 'var(--spectrum-alias-text-color)',
+        hover: 'var(--spectrum-alias-text-color-hover)',
+        down: 'var(--spectrum-alias-text-color-down)',
+        'key-focus': 'var(--spectrum-alias-text-color-key-focus)',
+        'mouse-focus': 'var(--spectrum-alias-text-color-mouse-focus)',
+        disabled: 'var(--spectrum-alias-text-color-disabled)',
+        invalid: 'var(--spectrum-alias-text-color-invalid)',
+        selected: 'var(--spectrum-alias-text-color-selected)',
+        'selected-neutral': 'var(--spectrum-alias-text-color-selected-neutral)'
       },
       border: {
-        DEFAULT: "var(--spectrum-alias-border-color)",
-        hover: "var(--spectrum-alias-border-color-hover)",
-        down: "var(--spectrum-alias-border-color-down)",
-        focus: "var(--spectrum-alias-border-color-focus)",
-        "mouse-focus": "var(--spectrum-alias-border-color-mouse-focus)",
-        disabled: "var(--spectrum-alias-border-color-disabled)",
-        extralight: "var(--spectrum-alias-border-color-extralight)",
-        light: "var(--spectrum-alias-border-color-light)",
-        mid: "var(--spectrum-alias-border-color-mid)",
-        dark: "var(--spectrum-alias-border-color-dark)",
-        transparent: "var(--spectrum-alias-border-color-transparent)",
-        "translucent-dark":
-          "var(--spectrum-alias-border-color-translucent-dark)",
-        "translucent-darker":
-          "var(--spectrum-alias-border-color-transparent-darker)",
+        DEFAULT: 'var(--spectrum-alias-border-color)',
+        hover: 'var(--spectrum-alias-border-color-hover)',
+        down: 'var(--spectrum-alias-border-color-down)',
+        focus: 'var(--spectrum-alias-border-color-focus)',
+        'mouse-focus': 'var(--spectrum-alias-border-color-mouse-focus)',
+        disabled: 'var(--spectrum-alias-border-color-disabled)',
+        extralight: 'var(--spectrum-alias-border-color-extralight)',
+        light: 'var(--spectrum-alias-border-color-light)',
+        mid: 'var(--spectrum-alias-border-color-mid)',
+        dark: 'var(--spectrum-alias-border-color-dark)',
+        transparent: 'var(--spectrum-alias-border-color-transparent)',
+        'translucent-dark': 'var(--spectrum-alias-border-color-translucent-dark)',
+        'translucent-darker': 'var(--spectrum-alias-border-color-transparent-darker)'
       },
       focus: {
-        DEFAULT: "var(--spectrum-alias-focus-color)",
+        DEFAULT: 'var(--spectrum-alias-focus-color)'
       },
-      "focus-ring": {
-        DEFAULT: "var(--spectrum-alias-focus-ring-color)",
+      'focus-ring': {
+        DEFAULT: 'var(--spectrum-alias-focus-ring-color)'
       },
       icon: {
-        DEFAULT: "var(--spectrum-alias-icon-color)",
-        "over-background": "var(--spectrum-alias-icon-color-over-background)",
-        hover: "var(--spectrum-alias-icon-color-hover)",
-        down: "var(--spectrum-alias-icon-color-down)",
-        focus: "var(--spectrum-alias-icon-color-focus)",
-        disabled: "var(--spectrum-alias-icon-color-disabled)",
-        "selected-neutral": "var(--spectrum-alias-icon-color-selected-neutral)",
-        selected: "var(--spectrum-alias-icon-color-selected)",
-        "selected-hover": "var(--spectrum-alias-icon-color-selected-hover)",
-        "selected-down": "var(--spectrum-alias-icon-color-selected-down)",
-        "selected-focus": "var(--spectrum-alias-icon-color-selected-focus)",
-        error: "var(--spectrum-alias-icon-color-error)",
-      },
+        DEFAULT: 'var(--spectrum-alias-icon-color)',
+        'over-background': 'var(--spectrum-alias-icon-color-over-background)',
+        hover: 'var(--spectrum-alias-icon-color-hover)',
+        down: 'var(--spectrum-alias-icon-color-down)',
+        focus: 'var(--spectrum-alias-icon-color-focus)',
+        disabled: 'var(--spectrum-alias-icon-color-disabled)',
+        'selected-neutral': 'var(--spectrum-alias-icon-color-selected-neutral)',
+        selected: 'var(--spectrum-alias-icon-color-selected)',
+        'selected-hover': 'var(--spectrum-alias-icon-color-selected-hover)',
+        'selected-down': 'var(--spectrum-alias-icon-color-selected-down)',
+        'selected-focus': 'var(--spectrum-alias-icon-color-selected-focus)',
+        error: 'var(--spectrum-alias-icon-color-error)'
+      }
     },
     /** https://spectrum.adobe.com/page/states/#Keyboard-focus */
     ringColor: {
-      DEFAULT: "var(--spectrum-alias-focus-ring-color)",
+      DEFAULT: 'var(--spectrum-alias-focus-ring-color)'
     },
     ringOpacity: {
-      DEFAULT: "1",
+      DEFAULT: '1'
     },
     ringWidth: {
-      DEFAULT: "var(--spectrum-alias-focus-ring-size)",
+      DEFAULT: 'var(--spectrum-alias-focus-ring-size)',
       /** For use when next to existing blue border. */
-      half: "calc(var(--spectrum-alias-focus-ring-size) / 2)",
+      half: 'calc(var(--spectrum-alias-focus-ring-size) / 2)'
     },
     /** https://spectrum.adobe.com/page/object-styles/#Drop-shadow */
     dropShadow: {
       DEFAULT:
-        "0 var(--spectrum-alias-dropshadow-offset-y) var(--spectrum-alias-dropshadow-blur) var(--spectrum-alias-dropshadow-color)",
+        '0 var(--spectrum-alias-dropshadow-offset-y) var(--spectrum-alias-dropshadow-blur) var(--spectrum-alias-dropshadow-color)'
     },
     /** https://spectrum.adobe.com/page/object-styles/#Border-width */
     borderWidth: {
-      DEFAULT: "var(--spectrum-alias-border-size-thin)",
-      none: "0",
-      thin: "var(--spectrum-alias-border-size-thin)",
-      thick: "var(--spectrum-alias-border-size-thick)",
-      thicker: "var(--spectrum-alias-border-size-thicker)",
-      thickest: "var(--spectrum-alias-border-size-thickest)",
+      DEFAULT: 'var(--spectrum-alias-border-size-thin)',
+      none: '0',
+      thin: 'var(--spectrum-alias-border-size-thin)',
+      thick: 'var(--spectrum-alias-border-size-thick)',
+      thicker: 'var(--spectrum-alias-border-size-thicker)',
+      thickest: 'var(--spectrum-alias-border-size-thickest)'
     },
     /** https://spectrum.adobe.com/page/object-styles/#Rounding */
     borderRadius: {
-      DEFAULT: "var(--spectrum-alias-border-radius-regular)",
-      xsmall: "var(--spectrum-alias-border-radius-xsmall)",
-      small: "var(--spectrum-alias-border-radius-small)",
-      regular: "var(--spectrum-alias-border-radius-regular)",
-      medium: "var(--spectrum-alias-border-radius-medium)",
-      large: "var(--spectrum-alias-border-radius-large)",
-      full: "9999px",
+      DEFAULT: 'var(--spectrum-alias-border-radius-regular)',
+      xsmall: 'var(--spectrum-alias-border-radius-xsmall)',
+      small: 'var(--spectrum-alias-border-radius-small)',
+      regular: 'var(--spectrum-alias-border-radius-regular)',
+      medium: 'var(--spectrum-alias-border-radius-medium)',
+      large: 'var(--spectrum-alias-border-radius-large)',
+      full: '9999px'
     },
     /** https://spectrum.adobe.com/page/typography/#Font-sizes */
     fontSize: {
-      DEFAULT: "var(--spectrum-alias-font-size-default)",
-      xs: "var(--spectrum-global-dimension-font-size-50)",
-      sm: "var(--spectrum-global-dimension-font-size-75)",
-      base: "var(--spectrum-alias-font-size-default)",
-      lg: "var(--spectrum-global-dimension-font-size-200)",
-      xl: "var(--spectrum-global-dimension-font-size-300)",
-      "2xl": "var(--spectrum-global-dimension-font-size-400)",
-      "3xl": "var(--spectrum-global-dimension-font-size-500)",
-      "4xl": "var(--spectrum-global-dimension-font-size-600)",
-      "5xl": "var(--spectrum-global-dimension-font-size-700)",
-      "6xl": "var(--spectrum-global-dimension-font-size-800)",
-      "7xl": "var(--spectrum-global-dimension-font-size-900)",
-      "8xl": "var(--spectrum-global-dimension-font-size-1000)",
-      "9xl": "var(--spectrum-global-dimension-font-size-1100)",
-      "10xl": "var(--spectrum-global-dimension-font-size-1200)",
-      "11xl": "var(--spectrum-global-dimension-font-size-1300)",
+      DEFAULT: 'var(--spectrum-alias-font-size-default)',
+      xs: 'var(--spectrum-global-dimension-font-size-50)',
+      sm: 'var(--spectrum-global-dimension-font-size-75)',
+      base: 'var(--spectrum-alias-font-size-default)',
+      lg: 'var(--spectrum-global-dimension-font-size-200)',
+      xl: 'var(--spectrum-global-dimension-font-size-300)',
+      '2xl': 'var(--spectrum-global-dimension-font-size-400)',
+      '3xl': 'var(--spectrum-global-dimension-font-size-500)',
+      '4xl': 'var(--spectrum-global-dimension-font-size-600)',
+      '5xl': 'var(--spectrum-global-dimension-font-size-700)',
+      '6xl': 'var(--spectrum-global-dimension-font-size-800)',
+      '7xl': 'var(--spectrum-global-dimension-font-size-900)',
+      '8xl': 'var(--spectrum-global-dimension-font-size-1000)',
+      '9xl': 'var(--spectrum-global-dimension-font-size-1100)',
+      '10xl': 'var(--spectrum-global-dimension-font-size-1200)',
+      '11xl': 'var(--spectrum-global-dimension-font-size-1300)'
     },
     fontWeight: {
-      DEFAULT: "var(--spectrum-global-font-weight-regular)",
-      thin: "var(--spectrum-global-font-weight-thin)",
-      "ultra-light": "var(--spectrum-global-font-weight-ultra-light)",
-      light: "var(--spectrum-global-font-weight-light)",
-      regular: "var(--spectrum-global-font-weight-regular)",
-      medium: "var(--spectrum-global-font-weight-medium)",
-      semibold: "var(--spectrum-global-font-weight-semi-bold)",
-      bold: "var(--spectrum-global-font-weight-bold)",
-      "extra-bold": "var(--spectrum-global-font-weight-extra-bold)",
-      black: "var(--spectrum-global-font-weight-black)",
+      DEFAULT: 'var(--spectrum-global-font-weight-regular)',
+      thin: 'var(--spectrum-global-font-weight-thin)',
+      'ultra-light': 'var(--spectrum-global-font-weight-ultra-light)',
+      light: 'var(--spectrum-global-font-weight-light)',
+      regular: 'var(--spectrum-global-font-weight-regular)',
+      medium: 'var(--spectrum-global-font-weight-medium)',
+      semibold: 'var(--spectrum-global-font-weight-semi-bold)',
+      bold: 'var(--spectrum-global-font-weight-bold)',
+      'extra-bold': 'var(--spectrum-global-font-weight-extra-bold)',
+      black: 'var(--spectrum-global-font-weight-black)'
     },
     letterSpacing: {
-      DEFAULT: "var(--spectrum-global-font-letter-spacing-medium)",
-      none: "var(--spectrum-global-font-letter-spacing-none)",
-      small: "var(--spectrum-global-font-letter-spacing-small)",
-      hand: "var(--spectrum-global-font-letter-spacing-han)",
-      medium: "var(--spectrum-global-font-letter-spacing-medium)",
+      DEFAULT: 'var(--spectrum-global-font-letter-spacing-medium)',
+      none: 'var(--spectrum-global-font-letter-spacing-none)',
+      small: 'var(--spectrum-global-font-letter-spacing-small)',
+      hand: 'var(--spectrum-global-font-letter-spacing-han)',
+      medium: 'var(--spectrum-global-font-letter-spacing-medium)'
     },
     lineHeight: {
-      DEFAULT: "var(--spectrum-global-font-line-height-medium)",
-      small: "var(--spectrum-global-font-line-height-small)",
-      medium: "var(--spectrum-global-font-line-height-medium)",
-      large: "var(--spectrum-global-font-line-height-large)",
+      DEFAULT: 'var(--spectrum-global-font-line-height-medium)',
+      small: 'var(--spectrum-global-font-line-height-small)',
+      medium: 'var(--spectrum-global-font-line-height-medium)',
+      large: 'var(--spectrum-global-font-line-height-large)'
     },
     /** https://spectrum.adobe.com/page/motion/ */
     transitionTimingFunction: {
-      "ease-in-out": "cubic-bezier(.45, 0, .40, 1)",
-      "ease-in": "cubic-bezier(.50, 0, 1, 1)",
-      "ease-out": "cubic-bezier(0, 0, 0.40, 1)",
-      linear: "cubic-bezier(0, 0, 1, 1)",
+      'ease-in-out': 'cubic-bezier(.45, 0, .40, 1)',
+      'ease-in': 'cubic-bezier(.50, 0, 1, 1)',
+      'ease-out': 'cubic-bezier(0, 0, 0.40, 1)',
+      linear: 'cubic-bezier(0, 0, 1, 1)'
     },
     transitionDuration: {
-      none: "var(--spectrum-global-animation-duration-0)",
-      0: "var(--spectrum-global-animation-duration-0)",
-      100: "var(--spectrum-global-animation-duration-100)",
-      200: "var(--spectrum-global-animation-duration-200)",
-      300: "var(--spectrum-global-animation-duration-300)",
-      400: "var(--spectrum-global-animation-duration-400)",
-      500: "var(--spectrum-global-animation-duration-500)",
-      600: "var(--spectrum-global-animation-duration-600)",
-      700: "var(--spectrum-global-animation-duration-700)",
-      800: "var(--spectrum-global-animation-duration-800)",
-      900: "var(--spectrum-global-animation-duration-900)",
-      1000: "var(--spectrum-global-animation-duration-1000)",
-      2000: "var(--spectrum-global-animation-duration-2000)",
-      4000: "var(--spectrum-global-animation-duration-4000)",
+      none: 'var(--spectrum-global-animation-duration-0)',
+      0: 'var(--spectrum-global-animation-duration-0)',
+      100: 'var(--spectrum-global-animation-duration-100)',
+      200: 'var(--spectrum-global-animation-duration-200)',
+      300: 'var(--spectrum-global-animation-duration-300)',
+      400: 'var(--spectrum-global-animation-duration-400)',
+      500: 'var(--spectrum-global-animation-duration-500)',
+      600: 'var(--spectrum-global-animation-duration-600)',
+      700: 'var(--spectrum-global-animation-duration-700)',
+      800: 'var(--spectrum-global-animation-duration-800)',
+      900: 'var(--spectrum-global-animation-duration-900)',
+      1000: 'var(--spectrum-global-animation-duration-1000)',
+      2000: 'var(--spectrum-global-animation-duration-2000)',
+      4000: 'var(--spectrum-global-animation-duration-4000)'
     },
     spacing: {
-      0: "var(--spectrum-global-dimension-size-0)",
-      10: "var(--spectrum-global-dimension-size-10)",
-      25: "var(--spectrum-global-dimension-size-25)",
-      40: "var(--spectrum-global-dimension-size-40)",
-      50: "var(--spectrum-global-dimension-size-50)",
-      65: "var(--spectrum-global-dimension-size-65)",
-      75: "var(--spectrum-global-dimension-size-75)",
-      85: "var(--spectrum-global-dimension-size-85)",
-      100: "var(--spectrum-global-dimension-size-100)",
-      115: "var(--spectrum-global-dimension-size-115)",
-      125: "var(--spectrum-global-dimension-size-125)",
-      130: "var(--spectrum-global-dimension-size-130)",
-      150: "var(--spectrum-global-dimension-size-150)",
-      160: "var(--spectrum-global-dimension-size-160)",
-      175: "var(--spectrum-global-dimension-size-175)",
-      200: "var(--spectrum-global-dimension-size-200)",
-      225: "var(--spectrum-global-dimension-size-225)",
-      250: "var(--spectrum-global-dimension-size-250)",
-      275: "var(--spectrum-global-dimension-size-275)",
-      300: "var(--spectrum-global-dimension-size-300)",
-      325: "var(--spectrum-global-dimension-size-325)",
-      350: "var(--spectrum-global-dimension-size-350)",
-      400: "var(--spectrum-global-dimension-size-400)",
-      450: "var(--spectrum-global-dimension-size-450)",
-      500: "var(--spectrum-global-dimension-size-500)",
-      550: "var(--spectrum-global-dimension-size-550)",
-      600: "var(--spectrum-global-dimension-size-600)",
-      675: "var(--spectrum-global-dimension-size-675)",
-      700: "var(--spectrum-global-dimension-size-700)",
-      800: "var(--spectrum-global-dimension-size-800)",
-      900: "var(--spectrum-global-dimension-size-900)",
-      1000: "var(--spectrum-global-dimension-size-1000)",
-      1200: "var(--spectrum-global-dimension-size-1200)",
-      1250: "var(--spectrum-global-dimension-size-1250)",
-      1600: "var(--spectrum-global-dimension-size-1600)",
-      1700: "var(--spectrum-global-dimension-size-1700)",
-      2000: "var(--spectrum-global-dimension-size-2000)",
-      2400: "var(--spectrum-global-dimension-size-2400)",
-      3000: "var(--spectrum-global-dimension-size-3000)",
-      3400: "var(--spectrum-global-dimension-size-3400)",
-      3600: "var( --spectrum-global-dimension-size-3600)",
-      4600: "var(--spectrum-global-dimension-size-4600)",
-      5000: "var(--spectrum-global-dimension-size-5000)",
-      6000: "var(--spectrum-global-dimension-size-6000)",
+      0: 'var(--spectrum-global-dimension-size-0)',
+      10: 'var(--spectrum-global-dimension-size-10)',
+      25: 'var(--spectrum-global-dimension-size-25)',
+      40: 'var(--spectrum-global-dimension-size-40)',
+      50: 'var(--spectrum-global-dimension-size-50)',
+      65: 'var(--spectrum-global-dimension-size-65)',
+      75: 'var(--spectrum-global-dimension-size-75)',
+      85: 'var(--spectrum-global-dimension-size-85)',
+      100: 'var(--spectrum-global-dimension-size-100)',
+      115: 'var(--spectrum-global-dimension-size-115)',
+      125: 'var(--spectrum-global-dimension-size-125)',
+      130: 'var(--spectrum-global-dimension-size-130)',
+      150: 'var(--spectrum-global-dimension-size-150)',
+      160: 'var(--spectrum-global-dimension-size-160)',
+      175: 'var(--spectrum-global-dimension-size-175)',
+      200: 'var(--spectrum-global-dimension-size-200)',
+      225: 'var(--spectrum-global-dimension-size-225)',
+      250: 'var(--spectrum-global-dimension-size-250)',
+      275: 'var(--spectrum-global-dimension-size-275)',
+      300: 'var(--spectrum-global-dimension-size-300)',
+      325: 'var(--spectrum-global-dimension-size-325)',
+      350: 'var(--spectrum-global-dimension-size-350)',
+      400: 'var(--spectrum-global-dimension-size-400)',
+      450: 'var(--spectrum-global-dimension-size-450)',
+      500: 'var(--spectrum-global-dimension-size-500)',
+      550: 'var(--spectrum-global-dimension-size-550)',
+      600: 'var(--spectrum-global-dimension-size-600)',
+      675: 'var(--spectrum-global-dimension-size-675)',
+      700: 'var(--spectrum-global-dimension-size-700)',
+      800: 'var(--spectrum-global-dimension-size-800)',
+      900: 'var(--spectrum-global-dimension-size-900)',
+      1000: 'var(--spectrum-global-dimension-size-1000)',
+      1200: 'var(--spectrum-global-dimension-size-1200)',
+      1250: 'var(--spectrum-global-dimension-size-1250)',
+      1600: 'var(--spectrum-global-dimension-size-1600)',
+      1700: 'var(--spectrum-global-dimension-size-1700)',
+      2000: 'var(--spectrum-global-dimension-size-2000)',
+      2400: 'var(--spectrum-global-dimension-size-2400)',
+      3000: 'var(--spectrum-global-dimension-size-3000)',
+      3400: 'var(--spectrum-global-dimension-size-3400)',
+      3600: 'var( --spectrum-global-dimension-size-3600)',
+      4600: 'var(--spectrum-global-dimension-size-4600)',
+      5000: 'var(--spectrum-global-dimension-size-5000)',
+      6000: 'var(--spectrum-global-dimension-size-6000)'
     },
     opacity: {
-      100: "var(--spectrum-global-color-opacity-100)",
-      90: "var(--spectrum-global-color-opacity-90)",
-      80: "var(--spectrum-global-color-opacity-80)",
-      60: "var(--spectrum-global-color-opacity-60)",
-      50: "var(--spectrum-global-color-opacity-50)",
-      42: "var(--spectrum-global-color-opacity-42)",
-      40: "var(--spectrum-global-color-opacity-40)",
-      30: "var(--spectrum-global-color-opacity-30)",
-      25: "var(--spectrum-global-color-opacity-25)",
-      20: "var(--spectrum-global-color-opacity-20)",
-      15: "var(--spectrum-global-color-opacity-15)",
-      10: "var(--spectrum-global-color-opacity-10)",
-      8: "var(--spectrum-global-color-opacity-8)",
-      7: "var(--spectrum-global-color-opacity-7)",
-      6: "var(--spectrum-global-color-opacity-6)",
-      5: "var(--spectrum-global-color-opacity-5)",
-      4: "var(--spectrum-global-color-opacity-4)",
-    },
+      100: 'var(--spectrum-global-color-opacity-100)',
+      90: 'var(--spectrum-global-color-opacity-90)',
+      80: 'var(--spectrum-global-color-opacity-80)',
+      60: 'var(--spectrum-global-color-opacity-60)',
+      50: 'var(--spectrum-global-color-opacity-50)',
+      42: 'var(--spectrum-global-color-opacity-42)',
+      40: 'var(--spectrum-global-color-opacity-40)',
+      30: 'var(--spectrum-global-color-opacity-30)',
+      25: 'var(--spectrum-global-color-opacity-25)',
+      20: 'var(--spectrum-global-color-opacity-20)',
+      15: 'var(--spectrum-global-color-opacity-15)',
+      10: 'var(--spectrum-global-color-opacity-10)',
+      8: 'var(--spectrum-global-color-opacity-8)',
+      7: 'var(--spectrum-global-color-opacity-7)',
+      6: 'var(--spectrum-global-color-opacity-6)',
+      5: 'var(--spectrum-global-color-opacity-5)',
+      4: 'var(--spectrum-global-color-opacity-4)'
+    }
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require('tailwindcss-animate')]
 };
diff --git a/examples/rac-spectrum-tailwind/src/style.css b/examples/rac-spectrum-tailwind/src/style.css
index a6d617bf484..b79ee418652 100644
--- a/examples/rac-spectrum-tailwind/src/style.css
+++ b/examples/rac-spectrum-tailwind/src/style.css
@@ -1,4 +1,4 @@
-@import 'tailwindcss' source("./");
+@import 'tailwindcss' source('./');
 
 @config '../tailwind.config.js';
 
diff --git a/examples/rac-spectrum-tailwind/tailwind.config.js b/examples/rac-spectrum-tailwind/tailwind.config.js
index ab992a8a66b..55b4bafd485 100644
--- a/examples/rac-spectrum-tailwind/tailwind.config.js
+++ b/examples/rac-spectrum-tailwind/tailwind.config.js
@@ -1,12 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{html,js,ts,jsx,tsx}",
-  ],
-  presets: [
-    require('./src/spectrum-preset.js')
-  ],
-  plugins: [
-    require('../../packages/tailwindcss-react-aria-components/src/index.js')
-  ],
-}
+  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+  presets: [require('./src/spectrum-preset.js')],
+  plugins: [require('../../packages/tailwindcss-react-aria-components/src/index.js')]
+};
diff --git a/examples/rac-spectrum-tailwind/tsconfig.json b/examples/rac-spectrum-tailwind/tsconfig.json
index 66c175a102c..c437c1fd98c 100644
--- a/examples/rac-spectrum-tailwind/tsconfig.json
+++ b/examples/rac-spectrum-tailwind/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -19,7 +15,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
diff --git a/examples/remix/app/entry.server.tsx b/examples/remix/app/entry.server.tsx
index 536fbd41885..39729a88b75 100644
--- a/examples/remix/app/entry.server.tsx
+++ b/examples/remix/app/entry.server.tsx
@@ -1,9 +1,9 @@
-import { PassThrough } from 'node:stream';
-import type { EntryContext } from '@remix-run/node';
-import { createReadableStreamFromReadable } from '@remix-run/node';
-import { RemixServer } from '@remix-run/react';
+import {PassThrough} from 'node:stream';
+import type {EntryContext} from '@remix-run/node';
+import {createReadableStreamFromReadable} from '@remix-run/node';
+import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
-import { renderToPipeableStream } from 'react-dom/server';
+import {renderToPipeableStream} from 'react-dom/server';
 import {getLocalizationScript} from '@adobe/react-spectrum/i18n';
 
 const ABORT_DELAY = 5000;
@@ -12,20 +12,14 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  remixContext: EntryContext
 ) {
-  let callbackName = isbot(request.headers.get('user-agent'))
-    ? 'onAllReady'
-    : 'onShellReady';
+  let callbackName = isbot(request.headers.get('user-agent')) ? 'onAllReady' : 'onShellReady';
 
   return new Promise((resolve, reject) => {
     let shellRendered = false;
-    const { pipe, abort } = renderToPipeableStream(
-      ,
+    const {pipe, abort} = renderToPipeableStream(
+      ,
       {
         bootstrapScriptContent: getLocalizationScript('en'),
         [callbackName]() {
@@ -37,7 +31,7 @@ export default function handleRequest(
           resolve(
             new Response(stream, {
               headers: responseHeaders,
-              status: responseStatusCode,
+              status: responseStatusCode
             })
           );
 
@@ -49,7 +43,7 @@ export default function handleRequest(
         onError(error: unknown) {
           responseStatusCode = 500;
           console.error(error);
-        },
+        }
       }
     );
 
diff --git a/examples/remix/app/root.tsx b/examples/remix/app/root.tsx
index 860c52a5250..9b6bdbe0211 100644
--- a/examples/remix/app/root.tsx
+++ b/examples/remix/app/root.tsx
@@ -13,7 +13,7 @@ import {Provider, defaultTheme} from '@adobe/react-spectrum';
 
 declare module '@adobe/react-spectrum' {
   interface RouterConfig {
-    routerOptions: NavigateOptions
+    routerOptions: NavigateOptions;
   }
 }
 
@@ -41,7 +41,7 @@ export default function App() {
         {/* https://remix.run/docs/en/main/guides/envvars */}
         
       
         
-          
+          areas={['header', 'content']}
+          columns={['1fr']}
+          rows={['size-200', 'auto']}
+          gap="size-100">
+          
              setTheme(otherTheme)}
-            >
+              onPress={() => setTheme(otherTheme)}>
               {themeIcons[otherTheme]}
             
           
diff --git a/examples/rsp-next-ts/pages/_document.tsx b/examples/rsp-next-ts/pages/_document.tsx
index b96c963de6c..678cfa166c4 100644
--- a/examples/rsp-next-ts/pages/_document.tsx
+++ b/examples/rsp-next-ts/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import {Html, Head, Main, NextScript} from 'next/document';
 import {LocalizedStringProvider} from '@adobe/react-spectrum/i18n';
 
 export default function Document(props: any) {
@@ -11,5 +11,5 @@ export default function Document(props: any) {
         
       
     
-  )
+  );
 }
diff --git a/examples/rsp-next-ts/pages/api/hello.ts b/examples/rsp-next-ts/pages/api/hello.ts
index f8bcc7e5cae..4c4b0a90507 100644
--- a/examples/rsp-next-ts/pages/api/hello.ts
+++ b/examples/rsp-next-ts/pages/api/hello.ts
@@ -1,13 +1,10 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type {NextApiRequest, NextApiResponse} from 'next';
 
 type Data = {
-  name: string
-}
+  name: string;
+};
 
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  res.status(200).json({ name: 'John Doe' })
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).json({name: 'John Doe'});
 }
diff --git a/examples/rsp-next-ts/pages/index.tsx b/examples/rsp-next-ts/pages/index.tsx
index 51edad1361a..002ded9d77b 100644
--- a/examples/rsp-next-ts/pages/index.tsx
+++ b/examples/rsp-next-ts/pages/index.tsx
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import styles from "../styles/Home.module.css";
-import React, { useState } from "react";
+import Head from 'next/head';
+import styles from '../styles/Home.module.css';
+import React, {useState} from 'react';
 import {
   ActionMenu,
   Item,
@@ -87,23 +87,31 @@ import {
   TreeViewItemContent,
   ToastQueue,
   SubmenuTrigger
-} from "@adobe/react-spectrum";
-import {AutocompleteExample} from "../components/AutocompleteExample";
-import Edit from "@spectrum-icons/workflow/Edit";
-import NotFound from "@spectrum-icons/illustrations/NotFound";
-import Section from "../components/Section";
-import ReorderableListView from "../components/ReorderableListView";
+} from '@adobe/react-spectrum';
+import {AutocompleteExample} from '../components/AutocompleteExample';
+import Edit from '@spectrum-icons/workflow/Edit';
+import NotFound from '@spectrum-icons/illustrations/NotFound';
+import Section from '../components/Section';
+import ReorderableListView from '../components/ReorderableListView';
 
 import FileTxt from '@spectrum-icons/workflow/FileTxt';
 import Folder from '@spectrum-icons/workflow/Folder';
 
 let nestedItems = [
-  {foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
-    {foo: 'Lvl 2 Foo 1', bar: 'Lvl 2 Bar 1', baz: 'Lvl 2 Baz 1', childRows: [
-      {foo: 'Lvl 3 Foo 1', bar: 'Lvl 3 Bar 1', baz: 'Lvl 3 Baz 1'}
-    ]},
-    {foo: 'Lvl 2 Foo 2', bar: 'Lvl 2 Bar 2', baz: 'Lvl 2 Baz 2'}
-  ]}
+  {
+    foo: 'Lvl 1 Foo 1',
+    bar: 'Lvl 1 Bar 1',
+    baz: 'Lvl 1 Baz 1',
+    childRows: [
+      {
+        foo: 'Lvl 2 Foo 1',
+        bar: 'Lvl 2 Bar 1',
+        baz: 'Lvl 2 Baz 1',
+        childRows: [{foo: 'Lvl 3 Foo 1', bar: 'Lvl 3 Bar 1', baz: 'Lvl 3 Baz 1'}]
+      },
+      {foo: 'Lvl 2 Foo 2', bar: 'Lvl 2 Bar 2', baz: 'Lvl 2 Baz 2'}
+    ]
+  }
 ];
 
 let columns = [
@@ -125,7 +133,7 @@ export default function Home() {
 
       
      
         
-          React Spectrum +{" "}
+          React Spectrum +{' '}
           
             Next.js
           
@@ -159,8 +167,7 @@ export default function Home() {
             
+              maxWidth="size-6000">
               Adobe Photoshop
               Adobe InDesign
               Adobe AfterEffects
@@ -170,18 +177,18 @@ export default function Home() {
             
             
               Menu
-               ToastQueue.positive(key.toString())}>
+               ToastQueue.positive(key.toString())}>
                 Cut
                 Copy
                 Paste
                 Replace
                 
                   Share
-                   ToastQueue.positive(key.toString())}>
+                   ToastQueue.positive(key.toString())}>
                     Copy Link
                     
                       Email
-                       ToastQueue.positive(key.toString())}>
+                       ToastQueue.positive(key.toString())}>
                         Email as Attachment
                         Email as Link
                       
@@ -195,16 +202,15 @@ export default function Home() {
             
               Menu Trigger
               
-                Link to /foo
+                
+                  Link to /foo
+                
                 Cut
                 Copy
                 Paste
               
             
-            
+            
               
                 Name
                 Type
@@ -233,18 +239,22 @@ export default function Home() {
                 
               
             
-            
+            
               
                 {column => {column.name}}
               
               
-                {(item: any) =>
-                  (
-                    {(key) => {
+                {(item: any) => (
+                  
+                    {key => {
                       return {item[key.toString()]};
                     }}
-                  )
-                }
+                  
+                )}
               
             
             
@@ -347,10 +357,7 @@ export default function Home() {
               March 2020 Assets
             
 
-            
+            
               The missing link.
             
             Foo
@@ -362,9 +369,7 @@ export default function Home() {
                 Empire
               
               
-                
-                  Arma virumque cano, Troiae qui primus ab oris.
-                
+                Arma virumque cano, Troiae qui primus ab oris.
                 Senatus Populusque Romanus.
                 Alea jacta est.
               
@@ -373,17 +378,13 @@ export default function Home() {
             
      Accordion
      
             
               
-                
-                  Files
-                
+                Files
                 
                   
      Files content
      
                       
                     
               
-                
-                  People
-                
+                People
                 
                   
      People content
      
                       
@@ -402,13 +403,8 @@ export default function Home() {
           
      
             
               Save
-              
-                You are running low on disk space. Delete unnecessary files to
-                free up space.
+              
+                You are running low on disk space. Delete unnecessary files to free up space.
               
             
 
@@ -416,22 +412,16 @@ export default function Home() {
               Need help?
               
                 
-                  If you are having issues accessing your account, contact our
-                  customer support team for help.
+                  If you are having issues accessing your account, contact our customer support team
+                  for help.
                 
               
             
 
-             setIsDialogOpen(true)}>
-              Show Dialog
-            
+             setIsDialogOpen(true)}>Show Dialog
              setIsDialogOpen(false)}>
               {isDialogOpen && (
-                
+                
                   Are you sure you want to delete this item?
                 
               )}
@@ -439,7 +429,7 @@ export default function Home() {
 
             
               Check connectivity
-              {(close) => (
+              {close => (
                 
                   Internet Speed Test
                   
      Connection status: Connected
      
@@ -497,7 +487,7 @@ export default function Home() {
           
      
 
           
      
-            
+            
 
             
           
      
@@ -527,7 +517,10 @@ export default function Home() {
             
             
               Payment Information
-              Enter your billing address, shipping address, and payment method to complete your purchase.
+              
+                Enter your billing address, shipping address, and payment method to complete your
+                purchase.
+              
             
           
 
@@ -560,18 +553,11 @@ export default function Home() {
 
             Paste
 
-            
+            
               
             
 
-            
-              Better a little which is well done, than a great deal imperfectly.
-            
+            Better a little which is well done, than a great deal imperfectly.
           
         
       
      
diff --git a/examples/rsp-next-ts/styles/globals.css b/examples/rsp-next-ts/styles/globals.css
index e5e2dcc23ba..51a2a4eaacd 100644
--- a/examples/rsp-next-ts/styles/globals.css
+++ b/examples/rsp-next-ts/styles/globals.css
@@ -2,8 +2,18 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
 }
 
 a {
diff --git a/examples/rsp-next-ts/test/index.test.js b/examples/rsp-next-ts/test/index.test.js
index d78e7dbac5a..e27f057c422 100644
--- a/examples/rsp-next-ts/test/index.test.js
+++ b/examples/rsp-next-ts/test/index.test.js
@@ -4,6 +4,10 @@ import {render} from '@testing-library/react';
 
 describe('smoke test', () => {
   it('should render', () => {
-    render();
+    render(
+      
+        
+      
+    );
   });
 });
diff --git a/examples/rsp-next-ts/typings.d.ts b/examples/rsp-next-ts/typings.d.ts
index 1ee54e47133..670529edeb8 100644
--- a/examples/rsp-next-ts/typings.d.ts
+++ b/examples/rsp-next-ts/typings.d.ts
@@ -1 +1 @@
-declare module "*.modules.css";
+declare module '*.modules.css';
diff --git a/examples/rsp-webpack-4/package.json b/examples/rsp-webpack-4/package.json
index f5314e2045d..e69da1f3e61 100644
--- a/examples/rsp-webpack-4/package.json
+++ b/examples/rsp-webpack-4/package.json
@@ -1,9 +1,12 @@
 {
   "name": "rsp-cra-18-webpack-4",
   "version": "1.0.0",
+  "private": true,
   "description": "test esm with webpack 4",
+  "workspaces": [
+    "../../packages/*/*"
+  ],
   "main": "src/index.jsx",
-  "packageManager": "yarn@4.2.2",
   "scripts": {
     "build": "webpack --mode production",
     "start": "webpack-dev-server --mode development --open",
@@ -12,10 +15,6 @@
     "postinstall": "patch-package",
     "prepareForProd": "node ./scripts/prepareForProd.mjs"
   },
-  "private": true,
-  "workspaces": [
-    "../../packages/*/*"
-  ],
   "dependencies": {
     "@adobe/react-spectrum": "latest",
     "@react-spectrum/provider": "latest",
@@ -23,7 +22,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "NOTE": "Do not update Jest. The old version is used for testing.",
   "devDependencies": {
     "@babel/cli": "^7.24.3",
     "@babel/core": "^7.24.3",
@@ -40,5 +38,7 @@
   },
   "resolutions": {
     "terser-webpack-plugin": "4.2.3"
-  }
+  },
+  "packageManager": "yarn@4.2.2",
+  "NOTE": "Do not update Jest. The old version is used for testing."
 }
diff --git a/examples/rsp-webpack-4/scripts/prepareForProd.mjs b/examples/rsp-webpack-4/scripts/prepareForProd.mjs
index 9c8cc445dcf..435142fb87b 100644
--- a/examples/rsp-webpack-4/scripts/prepareForProd.mjs
+++ b/examples/rsp-webpack-4/scripts/prepareForProd.mjs
@@ -1,4 +1,3 @@
-
 import fs from 'node:fs';
 
 let pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
diff --git a/examples/rsp-webpack-4/src/App.css b/examples/rsp-webpack-4/src/App.css
index b6b369d5d05..2e747c9a723 100644
--- a/examples/rsp-webpack-4/src/App.css
+++ b/examples/rsp-webpack-4/src/App.css
@@ -1,13 +1,13 @@
-body{
+body {
   height: 100%;
 }
 
-.no-bullets{
+.no-bullets {
   list-style-type: none;
   padding: 0px;
 }
 
-#root{
+#root {
   padding: 0;
   margin: 0;
   height: 100%;
@@ -17,6 +17,6 @@ html {
   height: 100%;
 }
 
-.content-padding{
+.content-padding {
   padding: 50px;
-}
\ No newline at end of file
+}
diff --git a/examples/rsp-webpack-4/src/App.js b/examples/rsp-webpack-4/src/App.js
index ed65587e902..5b6093e93d9 100644
--- a/examples/rsp-webpack-4/src/App.js
+++ b/examples/rsp-webpack-4/src/App.js
@@ -1,7 +1,21 @@
 import './App.css';
-import {Provider, defaultTheme, Item, TagGroup, Cell, Column, InlineAlert, Row, TableBody, TableHeader, TableView, Content, Heading} from '@adobe/react-spectrum';
+import {
+  Provider,
+  defaultTheme,
+  Item,
+  TagGroup,
+  Cell,
+  Column,
+  InlineAlert,
+  Row,
+  TableBody,
+  TableHeader,
+  TableView,
+  Content,
+  Heading
+} from '@adobe/react-spectrum';
 import Lighting from './Lighting';
-import {useState} from 'react'
+import {useState} from 'react';
 import BodyContent from './BodyContent';
 import {enableTableNestedRows} from 'react-stately/private/flags/flags';
 
@@ -12,12 +26,20 @@ let columns = [
 ];
 
 let nestedItems = [
-  {foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
-    {foo: 'Lvl 2 Foo 1', bar: 'Lvl 2 Bar 1', baz: 'Lvl 2 Baz 1', childRows: [
-      {foo: 'Lvl 3 Foo 1', bar: 'Lvl 3 Bar 1', baz: 'Lvl 3 Baz 1'}
-    ]},
-    {foo: 'Lvl 2 Foo 2', bar: 'Lvl 2 Bar 2', baz: 'Lvl 2 Baz 2'}
-  ]}
+  {
+    foo: 'Lvl 1 Foo 1',
+    bar: 'Lvl 1 Bar 1',
+    baz: 'Lvl 1 Baz 1',
+    childRows: [
+      {
+        foo: 'Lvl 2 Foo 1',
+        bar: 'Lvl 2 Bar 1',
+        baz: 'Lvl 2 Baz 1',
+        childRows: [{foo: 'Lvl 3 Foo 1', bar: 'Lvl 3 Bar 1', baz: 'Lvl 3 Baz 1'}]
+      },
+      {foo: 'Lvl 2 Foo 2', bar: 'Lvl 2 Bar 2', baz: 'Lvl 2 Baz 2'}
+    ]
+  }
 ];
 
 function App() {
@@ -25,9 +47,7 @@ function App() {
   enableTableNestedRows();
 
   return (
-    
+    
       
      
         
         
@@ -37,23 +57,28 @@ function App() {
           Shopping
         
         
-        
-          
-            {column => {column.name}}
-          
+        
+          {column => {column.name}}
           
-            {(item) =>
-              (
-                {(key) => {
+            {item => (
+              
+                {key => {
                   return {item[key]};
                 }}
-              )
-            }
+              
+            )}
           
         
         
           Payment Information
-          Enter your billing address, shipping address, and payment method to complete your purchase.
+          
+            Enter your billing address, shipping address, and payment method to complete your
+            purchase.
+          
         
       
      
           
diff --git a/examples/rsp-webpack-4/src/BodyContent.js b/examples/rsp-webpack-4/src/BodyContent.js
index 8b7581a696d..4b110892e62 100644
--- a/examples/rsp-webpack-4/src/BodyContent.js
+++ b/examples/rsp-webpack-4/src/BodyContent.js
@@ -1,11 +1,9 @@
-import {useState, useRef} from "react";
-import {Item, TabList, TabPanels, Tabs} from '@adobe/react-spectrum'
+import {useState, useRef} from 'react';
+import {Item, TabList, TabPanels, Tabs} from '@adobe/react-spectrum';
 import TodoList from './TodoList';
 import JournalList from './JournalList';
 
-
-function BodyContent(){
-
+function BodyContent() {
   //states for the To-Do list
   const [list, setList] = useState([]);
   const [value, setValue] = useState('');
@@ -19,60 +17,55 @@ function BodyContent(){
   const countJournals = useRef(0);
 
   const options = [
-    {id: "Bad", name: "Bad"},
-    {id: "Okay", name: "Okay"},
-    {id: "Good", name: "Good"},
-    {id: "Great", name: "Great"}
-  ]
+    {id: 'Bad', name: 'Bad'},
+    {id: 'Okay', name: 'Okay'},
+    {id: 'Good', name: 'Good'},
+    {id: 'Great', name: 'Great'}
+  ];
 
   //functions for the To-Do list
-  function handleSubmitToDo(e){
-    e.preventDefault()
+  function handleSubmitToDo(e) {
+    e.preventDefault();
 
-    if (value.length > 0){
-        setList(prevListArray => {
-            return [
-                ...prevListArray,
-                {id: count.current, task: value}]
-        })
+    if (value.length > 0) {
+      setList(prevListArray => {
+        return [...prevListArray, {id: count.current, task: value}];
+      });
 
-        count.current = count.current + 1;
+      count.current = count.current + 1;
     }
-    setValue(""); //clears text field on submit
+    setValue(''); //clears text field on submit
   }
 
-  function updateCompleted(complete){
+  function updateCompleted(complete) {
     setCompleted(prevListArray => {
-        return [
-            ...prevListArray,
-            {id: prevListArray.length, task: complete}]
+      return [...prevListArray, {id: prevListArray.length, task: complete}];
     });
   }
 
-  function clearCompleted(){
-      setCompleted(() => {
-          return [];
-      })
+  function clearCompleted() {
+    setCompleted(() => {
+      return [];
+    });
   }
 
   //functions for journal entries
-  function handleSubmitJournals(e){
-      e.preventDefault()
+  function handleSubmitJournals(e) {
+    e.preventDefault();
 
-      countJournals.current = countJournals.current + 1; //used to determine key for each item in the entryList array
+    countJournals.current = countJournals.current + 1; //used to determine key for each item in the entryList array
 
-      setEntryList(prevListArray => {
-          return [
-              ...prevListArray,
-              {rate: rating, description: description, id: countJournals.current}
-          ]
-      })
+    setEntryList(prevListArray => {
+      return [
+        ...prevListArray,
+        {rate: rating, description: description, id: countJournals.current}
+      ];
+    });
 
-      setValue('') //clears the text area when submitted
+    setValue(''); //clears the text area when submitted
   }
 
-  return(
-
+  return (
     
       
         To-do List
@@ -80,27 +73,31 @@ function BodyContent(){
       
       
         
-          
+          
         
         
-            
+          
         
       
     
-  )
+  );
 }
 
 export default BodyContent;
diff --git a/examples/rsp-webpack-4/src/Completed.js b/examples/rsp-webpack-4/src/Completed.js
index d36268fb0f5..d37371e9420 100644
--- a/examples/rsp-webpack-4/src/Completed.js
+++ b/examples/rsp-webpack-4/src/Completed.js
@@ -1,37 +1,37 @@
 import Delete from '@spectrum-icons/workflow/Delete';
-import {AlertDialog, DialogTrigger, ActionButton} from '@adobe/react-spectrum'
-import {Checkbox} from '@adobe/react-spectrum'
-import {Flex} from '@adobe/react-spectrum'
+import {AlertDialog, DialogTrigger, ActionButton} from '@adobe/react-spectrum';
+import {Checkbox} from '@adobe/react-spectrum';
+import {Flex} from '@adobe/react-spectrum';
 
-function Completed(props){
+function Completed(props) {
+  const elements = props.completed.map(item => (
+    
+      {item.task}
+    
+  ));
 
-    const elements = props.completed.map(item => (
-        {item.task}
-    ))
+  let alertCancel = () => alert('Cancel button pressed.');
 
-    let alertCancel = () => alert('Cancel button pressed.');
-
-    return (
-        
-            {elements}
-            
-                
-                    
-                
-                
-                    Are you sure you want to delete the completed tasks?
-                
-            
-        
-
-    )
+  return (
+    
+      {elements}
+      
+        
+          
+        
+        
+          Are you sure you want to delete the completed tasks?
+        
+      
+    
+  );
 }
 
 export default Completed;
diff --git a/examples/rsp-webpack-4/src/JournalEntries.js b/examples/rsp-webpack-4/src/JournalEntries.js
index b76dea74452..38a9ea12718 100644
--- a/examples/rsp-webpack-4/src/JournalEntries.js
+++ b/examples/rsp-webpack-4/src/JournalEntries.js
@@ -1,23 +1,19 @@
-import {Flex, Divider} from '@adobe/react-spectrum'
+import {Flex, Divider} from '@adobe/react-spectrum';
 
-function JournalEntries(props){
+function JournalEntries(props) {
+  const element = props.list.map(item => (
+    
    • 
+      
+      
      Your day was: {item.rate} 
      
+      
      {item.description}
      
+    
      • 
+  ));
 
-    const element = props.list.map(item => (
-        
    • 
-            
-            
      Your day was: {item.rate} 
      
-            
      {item.description}
      
-        
      • 
-
-    ))
-
-    return (
-        
-            
        
-                {element}
-            
      
-              
-    )
+  return (
+    
+      
        {element}
      
+          
+  );
 }
 
 export default JournalEntries;
diff --git a/examples/rsp-webpack-4/src/JournalList.js b/examples/rsp-webpack-4/src/JournalList.js
index 9e5b2cf546d..9880382b8f8 100644
--- a/examples/rsp-webpack-4/src/JournalList.js
+++ b/examples/rsp-webpack-4/src/JournalList.js
@@ -1,32 +1,35 @@
 import AddCircle from '@spectrum-icons/workflow/AddCircle';
-import {Flex, Text, Button, Form, TextArea, Picker, Item, Divider} from '@adobe/react-spectrum'
-import JournalEntries from './JournalEntries'
+import {Flex, Text, Button, Form, TextArea, Picker, Item, Divider} from '@adobe/react-spectrum';
+import JournalEntries from './JournalEntries';
 
-function JournalList(props){
-    return(
-        <>
-            
      
-                
-                     props.setRating(selected)}
-                    >
-                        {(item) => {item.name}}
-                   
-