[pull] main from adobe:main

.chromatic-fc/.parcelrc-v3

@@ -0,0 +1,41 @@
+{
+  "extends": ["../parcel-v3/.parcelrc-icons", "@parcel/config-default"],
+  "resolvers": ["@parcel/resolver-glob", "..."],
+  "transformers": {
+    "docs:*": ["@parcel/transformer-ts-doc"],
+    "*.stories.{ts,tsx,js,mjs,jsm,jsx,es6,cjs}": [
+      "@parcel/transformer-storybook-v3",
+      "..."
+    ],
+    "packages/**/intl/**/*.json": ["parcel-transformer-intl"],
+    "packages/@adobe/**/*.css": [
+      "../parcel-v3/PostCSSTransformer.mjs",
+      {
+        "plugin": "@parcel/transformer-css",
+        "config": {
+          "cssModules": true,
+          "pseudoClasses": {
+            "focusVisible": "focus-ring",
+            "hover": "is-hovered"
+          }
+        }
+      }
+    ],
+    "raw:*": ["@parcel/transformer-raw"]
+  },
+  "bundler": {
+    "plugin": "@parcel/bundler-default",
+    "config": {
+      "manualSharedBundles": [
+        {
+          "assets": [
+            "packages/@react-spectrum/s2/**",
+            "packages/dev/s2-docs/src/**",
+            "packages/dev/s2-docs/pages/s2/**/*.{mdx,tsx,ts,js}"
+          ],
+          "types": ["css"]
+        }
+      ]
+    }
+  }
+}

.chromatic-fc/main.mjs

@@ -5,7 +5,7 @@ export default {
   },
   stories: [
     '../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}',
-    '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
+    '../packages/@react-spectrum/s2/chromatic/*.stories.{js,jsx,mjs,ts,tsx}'
   ],
   addons:
     process.env.NODE_ENV === 'production' ? [] : ['storybook/actions', '@storybook/addon-a11y'],

.chromatic/.parcelrc-v3

@@ -0,0 +1,41 @@
+{
+  "extends": ["../parcel-v3/.parcelrc-icons", "@parcel/config-default"],
+  "resolvers": ["@parcel/resolver-glob", "..."],
+  "transformers": {
+    "docs:*": ["@parcel/transformer-ts-doc"],
+    "*.stories.{ts,tsx,js,mjs,jsm,jsx,es6,cjs}": [
+      "@parcel/transformer-storybook-v3",
+      "..."
+    ],
+    "packages/**/intl/**/*.json": ["parcel-transformer-intl"],
+    "packages/@adobe/**/*.css": [
+      "../parcel-v3/PostCSSTransformer.mjs",
+      {
+        "plugin": "@parcel/transformer-css",
+        "config": {
+          "cssModules": true,
+          "pseudoClasses": {
+            "focusVisible": "focus-ring",
+            "hover": "is-hovered"
+          }
+        }
+      }
+    ],
+    "raw:*": ["@parcel/transformer-raw"]
+  },
+  "bundler": {
+    "plugin": "@parcel/bundler-default",
+    "config": {
+      "manualSharedBundles": [
+        {
+          "assets": [
+            "packages/@react-spectrum/s2/**",
+            "packages/dev/s2-docs/src/**",
+            "packages/dev/s2-docs/pages/s2/**/*.{mdx,tsx,ts,js}"
+          ],
+          "types": ["css"]
+        }
+      ]
+    }
+  }
+}

.chromatic/main.mjs

@@ -4,8 +4,8 @@ export default {
     options: {}
   },
   stories: [
-    '../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)',
-    '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
+    '../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'],

.circleci/config.yml

@@ -22,32 +22,30 @@ executors:
     docker:
       - image: cimg/node:24.14.1
     resource_class: medium.gen2
-    environment:
+    environment: &global-environment
       CACHE_VERSION: v1
+      # PARCEL_V3: '1'
     working_directory: ~/react-spectrum
 
   rsp-large:
     docker:
       - image: cimg/node:24.14.1
     resource_class: large.gen2
-    environment:
-      CACHE_VERSION: v1
+    environment: *global-environment
     working_directory: ~/react-spectrum
 
   rsp-xlarge:
     docker:
       - image: cimg/node:24.14.1
     resource_class: xlarge.gen2
-    environment:
-      CACHE_VERSION: v1
+    environment: *global-environment
     working_directory: ~/react-spectrum
 
   rsp-2xlarge:
     docker:
       - image: cimg/node:24.14.1
     resource_class: 2xlarge.gen2
-    environment:
-      CACHE_VERSION: v1
+    environment: *global-environment
     working_directory: ~/react-spectrum
 
 commands:
@@ -563,7 +561,7 @@ jobs:
 
       - run:
           name: build s2 storybook
-          command: yarn build:storybook-s2
+          command: make storybook-s2
 
       - persist_to_workspace:
           root: dist

.storybook-s2/.parcelrc

@@ -8,7 +8,6 @@
     // Disable PostCSS from running over style macro output
     "*.css": ["@parcel/transformer-css"],
     "*.svg": ["@parcel/transformer-svg-react"],
-    "*.{mdx,md}": ["parcel-transformer-mdx-storybook"],
     "raw:*": ["@parcel/transformer-raw"]
   }
 }

.storybook-s2/.parcelrc-v3

@@ -0,0 +1,29 @@
+{
+  "extends": ["../parcel-v3/.parcelrc-icons", "@parcel/config-default"],
+  "resolvers": ["@parcel/resolver-glob", "..."],
+  "transformers": {
+    "docs:*": ["@parcel/transformer-ts-doc"],
+    "*.stories.{ts,tsx,js,mjs,jsm,jsx,es6,cjs}": [
+      "@parcel/transformer-storybook-v3",
+      "..."
+    ],
+    "packages/**/intl/**/*.json": ["parcel-transformer-intl"],
+    "*.css": ["@parcel/transformer-css"],
+    "raw:*": ["@parcel/transformer-raw"]
+  },
+  "bundler": {
+    "plugin": "@parcel/bundler-default",
+    "config": {
+      "manualSharedBundles": [
+        {
+          "assets": [
+            "packages/@react-spectrum/s2/**",
+            "packages/dev/s2-docs/src/**",
+            "packages/dev/s2-docs/pages/s2/**/*.{mdx,tsx,ts,js}"
+          ],
+          "types": ["css"]
+        }
+      ]
+    }
+  }
+}

.storybook-s2/docs/Icons.jsx

@@ -20,7 +20,7 @@ export function Icons() {
         <P>See below for a full list of available icons. Click to copy import statement.</P>
         <div className={style({display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 48})}>
           {Object.keys(icons).map(icon => {
-            let Icon = icons[icon].default;
+            let Icon = icons[icon].default || icons[icon];
             let name = icon.replace(/^S2_Icon_(.*?)(Size\d+)?_2.*/, '$1');
             let importName = name.replace(/^(\d)/, '_$1');
             return (

.storybook-s2/docs/Illustrations.jsx

@@ -1,5 +1,5 @@
-import linearIllustrations from '@react-spectrum/s2/spectrum-illustrations/linear/*.tsx';
-import gradientIllustrations from '@react-spectrum/s2/spectrum-illustrations/gradient/*/*.tsx';
+import linearIllustrations from '../../packages/@react-spectrum/s2/spectrum-illustrations/linear/*.tsx';
+import gradientIllustrations from '../../packages/@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 {ActionButton, Radio, RadioGroup} from '@react-spectrum/s2';
@@ -48,7 +48,8 @@ export function Illustrations() {
             marginTop: 32
           })}>
           {Object.keys(gradientIllustrations[gradientStyle]).map(icon => {
-            let Illustration = gradientIllustrations[gradientStyle][icon].default;
+            let Illustration = gradientIllustrations[gradientStyle][icon];
+            Illustration = Illustration.default || Illustration;
             return (
               <div
                 key={icon}
@@ -100,7 +101,8 @@ export function Illustrations() {
             marginTop: 48
           })}>
           {Object.keys(linearIllustrations).map(icon => {
-            let Illustration = linearIllustrations[icon].default;
+            let Illustration = linearIllustrations[icon];
+            Illustration = Illustration.default || Illustration;
             return (
               <div
                 key={icon}

.storybook-s2/docs/MDXLayout.jsx

@@ -1,7 +1,7 @@
 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';
+import {cloneElement} from 'react';
 
 const mdxComponents = {
   h1: ({children}) => <h1 className={style({font: 'heading-2xl'})}>{children}</h1>,
@@ -23,7 +23,7 @@ export function MDXLayout({children}) {
   return (
     <div className={'sb-unstyled ' + style({marginX: 'auto'})}>
       <main className={style({marginX: 48})}>
-        <MDXProvider components={mdxComponents}>{children}</MDXProvider>
+        {cloneElement(children, {components: mdxComponents})}
       </main>
     </div>
   );

.storybook-s2/docs/Release Notes.mdx

@@ -239,7 +239,7 @@ added to help you generate a properly optimized output when using the bundler of
 ### 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
+- [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

.storybook-s2/docs/highlight.js

@@ -1,38 +1,39 @@
-const treeSitter = require('tree-sitter-highlight');
-const tokens = require('@adobe/spectrum-tokens/dist/json/variables.json');
+// const treeSitter = require('tree-sitter-highlight');
+// const tokens = require('@adobe/spectrum-tokens/dist/json/variables.json');
 
 function colorToken(name) {
   let token = tokens[name];
   return `light-dark(${token.sets.light.value}, ${token.sets.dark.value})`;
 }
 
 exports.highlight = function (code, lang = 'JSX') {
-  this.addAsset({
-    type: 'css',
-    content: `
-.keyword {
-  color: ${colorToken('magenta-1000')}
-}
-.string {
-  color: ${colorToken('green-1000')}
-}
-.number {
-  color: ${colorToken('pink-1000')}
-}
-.property, .attribute {
-  color: ${colorToken('indigo-1000')}
-}
-.function, .tag, .constructor {
-  color: ${colorToken('red-1000')}
-}
-.comment {
-  color: ${colorToken('gray-700')}
-}
-.variable {
-  color: ${colorToken('fuchsia-1000')}
-}
-`
-  });
+  return code;
+  //   this.addAsset({
+  //     type: 'css',
+  //     content: `
+  // .keyword {
+  //   color: ${colorToken('magenta-1000')}
+  // }
+  // .string {
+  //   color: ${colorToken('green-1000')}
+  // }
+  // .number {
+  //   color: ${colorToken('pink-1000')}
+  // }
+  // .property, .attribute {
+  //   color: ${colorToken('indigo-1000')}
+  // }
+  // .function, .tag, .constructor {
+  //   color: ${colorToken('red-1000')}
+  // }
+  // .comment {
+  //   color: ${colorToken('gray-700')}
+  // }
+  // .variable {
+  //   color: ${colorToken('fuchsia-1000')}
+  // }
+  // `
+  //   });
 
-  return treeSitter.highlight(code, treeSitter.Language[lang]);
+  //   return treeSitter.highlight(code, treeSitter.Language[lang]);
 };

.storybook-s2/main.ts

@@ -20,8 +20,8 @@ const localAddon = (rel: string) => fileURLToPath(import.meta.resolve(rel));
 const config: StorybookConfig = {
   stories: [
     './docs/*.mdx',
-    '../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)',
-    '../packages/@react-spectrum/ai/stories/*.stories.@(js|jsx|mjs|ts|tsx)'
+    '../packages/@react-spectrum/s2/stories/*.stories.{js,jsx,mjs,ts,tsx}',
+    '../packages/@react-spectrum/ai/stories/*.stories.{js,jsx,mjs,ts,tsx}'
   ],
   addons: [
     localAddon('./custom-addons/provider/preset.ts'),