[pull] main from adobe:main

.chromatic-fc/.parcelrc

@@ -7,6 +7,6 @@
     "packages/**/intl/**/*.json": ["parcel-transformer-intl"],
     // Disable PostCSS from running over style macro output
     "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
-    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"]
+    "packages/@react-spectrum/{s2,ai}/**/*.svg": ["@parcel/transformer-svg-react"]
   }
 }

.chromatic/.parcelrc

@@ -7,6 +7,6 @@
     "packages/**/intl/**/*.json": ["parcel-transformer-intl"],
     // Disable PostCSS from running over style macro output
     "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
-    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"]
+    "packages/@react-spectrum/{s2,ai}/**/*.svg": ["@parcel/transformer-svg-react"]
   }
 }

packages/@react-spectrum/ai/src/AttachmentList.tsx

@@ -18,13 +18,17 @@ import {
   forwardRefType,
   GlobalDOMAttributes
 } from '@react-types/shared';
-import {baseColor, focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {
+  baseColor,
+  focusRing,
+  iconStyle,
+  style
+} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {BasicHorizontalCard} from './HorizontalCard';
 import {Button} from 'react-aria-components/Button';
 import {CardProps} from '@react-spectrum/s2/Card';
-import Close from '@react-spectrum/s2/icons/Close';
+import Cross from '../ui-icons/Cross';
 import {forwardRef, ReactNode, useRef} from 'react';
-import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {ImageContext} from '@react-spectrum/s2/Image';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -86,32 +90,25 @@ const styles = style<{
     isFocusVisible: hoverBackground,
     isPressed: hoverBackground
   },
-  '--iconPrimary': {
-    type: 'color',
-    value: {
-      default: baseColor('neutral'),
-      isDisabled: 'disabled',
-      forcedColors: {
-        default: 'ButtonText',
-        isDisabled: 'GrayText'
-      }
+  color: {
+    default: baseColor('neutral'),
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'ButtonText',
+      isDisabled: 'GrayText'
     }
   },
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  },
   outlineColor: {
     default: 'focus-ring',
     forcedColors: 'Highlight'
   },
   disableTapHighlight: true
 });
 
-const closeIconStyle = ({size = 'M'}) => {
-  if (size === 'S') return iconStyle({size: 'XS'});
-  else if (size === 'M') return iconStyle({size: 'S'});
-  else if (size === 'L') return iconStyle({size: 'M'});
-  else if (size === 'XL') return iconStyle({size: 'L'});
-  else return iconStyle({size: 'S'});
-};
-
 const CloseButton = function CloseButton(props) {
   let ref = useRef(null);
   // oxlint-disable react/react-compiler
@@ -124,7 +121,7 @@ const CloseButton = function CloseButton(props) {
       className={renderProps =>
         mergeStyles(styles({...renderProps, size: props.size || 'M'}), props.styles)
       }>
-      <Close styles={closeIconStyle({size: props.size ?? 'M'})} />
+      <Cross size="M" />
     </Button>
   );
   // oxlint-enable react/react-compiler

packages/@react-spectrum/ai/src/ResponseStatus.tsx

@@ -14,15 +14,14 @@ import {AriaLabelingProps, DOMProps, DOMRef, GlobalDOMAttributes} from '@react-t
 import {
   baseColor,
   focusRing,
-  iconStyle,
   lightDark,
   space,
   style
 } from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Button} from 'react-aria-components/Button';
 import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
-import ChevronRight from '@react-spectrum/s2/icons/ChevronRight';
+import Chevron from '../ui-icons/Chevron';
 import CloseCircle from '@react-spectrum/s2/icons/CloseCircle';
 import {
   DisclosureStateContext,
@@ -411,18 +410,3 @@ export const ResponseStatusPanel = forwardRef(function ResponseStatusPanel(
     </RACDisclosurePanel>
   );
 });
-
-// Ideally I would use iconStyle but since it must be fully evaluated at compile time — passing a runtime variable (size prop) to it is not allowed.
-// TODO: Should iconStyle also return a runtime function?
-function Chevron({size}) {
-  switch (size) {
-    case 'S':
-      return <ChevronRight styles={iconStyle({size: 'S'})} />;
-    case 'M':
-      return <ChevronRight styles={iconStyle({size: 'M'})} />;
-    case 'L':
-      return <ChevronRight styles={iconStyle({size: 'L'})} />;
-    case 'XL':
-      return <ChevronRight styles={iconStyle({size: 'XL'})} />;
-  }
-}

packages/@react-spectrum/ai/ui-icons/Chevron.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import Chevron_L from './S2_ChevronSize200.svg';
+import Chevron_M from './S2_ChevronSize100.svg';
+import Chevron_S from './S2_ChevronSize75.svg';
+import Chevron_XL from './S2_ChevronSize300.svg';
+import Chevron_XS from './S2_ChevronSize50.svg';
+import Chevron_XXL from './S2_ChevronSize400.svg';
+import {ReactNode, SVGProps} from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16,
+      XS: 6,
+      S: 10
+    }
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16,
+      XS: 6,
+      S: 10
+    }
+  }
+});
+
+export default function Chevron(
+  props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XS' | 'S'}
+): ReactNode {
+  let {size = 'M', ...otherProps} = props;
+  switch (size) {
+    case 'M':
+      return (
+        <Chevron_M {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'L':
+      return (
+        <Chevron_L {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'XL':
+      return (
+        <Chevron_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'XXL':
+      return (
+        <Chevron_XXL {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'XS':
+      return (
+        <Chevron_XS {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'S':
+      return (
+        <Chevron_S {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+  }
+}

packages/@react-spectrum/ai/ui-icons/Cross.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import Cross_L from './S2_CrossSize200.svg';
+import Cross_M from './S2_CrossSize100.svg';
+import Cross_S from './S2_CrossSize75.svg';
+import Cross_XL from './S2_CrossSize300.svg';
+import Cross_XXL from './S2_CrossSize400.svg';
+import Cross_XXXL from './S2_CrossSize500.svg';
+import Cross_XXXXL from './S2_CrossSize600.svg';
+import {ReactNode, SVGProps} from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 8,
+      L: 10,
+      XL: 12,
+      XXL: 12,
+      XXXL: 14,
+      XXXXL: 16,
+      S: 8
+    }
+  },
+  height: {
+    size: {
+      M: 8,
+      L: 10,
+      XL: 12,
+      XXL: 12,
+      XXXL: 14,
+      XXXXL: 16,
+      S: 8
+    }
+  }
+});
+
+export default function Cross(
+  props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XXXL' | 'XXXXL' | 'S'}
+): ReactNode {
+  let {size = 'M', ...otherProps} = props;
+  switch (size) {
+    case 'M':
+      return <Cross_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
+    case 'L':
+      return <Cross_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
+    case 'XL':
+      return <Cross_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
+    case 'XXL':
+      return (
+        <Cross_XXL {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'XXXL':
+      return (
+        <Cross_XXXL {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'XXXXL':
+      return (
+        <Cross_XXXXL {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'S':
+      return <Cross_S {...otherProps} className={(otherProps.className || '') + styles({size})} />;
+  }
+}