chore: Ai components followup (#10162)

* export CenterBaseline

* delete copied CenterBaseline

* delete files

* export centerbaseline

* update exports

* update components

* cleanup types

* fix format

Author: yihuiliao

packages/@react-spectrum/s2-ai/exports/MessageSource.ts

@@ -1,11 +1,4 @@
-export {
-  MessageSource,
-  MessageSourceContext,
-  SourceList,
-  SourceListItem,
-  NumberBadge,
-  NumberBadgeContext
-} from '../src/MessageSource';
+export {MessageSource, SourceList, SourceListItem, NumberBadge} from '../src/MessageSource';
 
 export type {
   MessageSourceProps,

packages/@react-spectrum/s2-ai/exports/MessageSuggestion.ts

@@ -1,6 +1 @@
-export {
-  MessageSuggestion,
-  MessageSuggestionContext,
-  MessageSuggestionList,
-  MessageSuggestionListContext
-} from '../src/MessageSuggestion';
+export {MessageSuggestion, MessageSuggestionList} from '../src/MessageSuggestion';

packages/@react-spectrum/s2-ai/exports/ResponseStatus.ts

@@ -1,9 +1,4 @@
-export {
-  ResponseStatus,
-  ResponseStatusContext,
-  ResponseStatusTitle,
-  ResponseStatusPanel
-} from '../src/ResponseStatus';
+export {ResponseStatus, ResponseStatusTitle, ResponseStatusPanel} from '../src/ResponseStatus';
 
 export type {
   ResponseStatusProps,

packages/@react-spectrum/s2-ai/exports/index.ts

@@ -1,11 +1,6 @@
 export {Attachment, AttachmentList} from '../src/AttachmentList';
 export {BasicHorizontalCard, HorizontalCard} from '../src/HorizontalCard';
 export {MessageFeedback} from '../src/MessageFeedback';
-export {
-  MessageSuggestion,
-  MessageSuggestionContext,
-  MessageSuggestionList,
-  MessageSuggestionListContext
-} from '../src/MessageSuggestion';
+export {MessageSuggestion, MessageSuggestionList} from '../src/MessageSuggestion';
 export {ResponseStatus, ResponseStatusPanel} from '../src/ResponseStatus';
 export {UserMessage} from '../src/UserMessage';

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

@@ -16,13 +16,23 @@ 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 {controlSize, getAllowedOverrides} from './style-utils-copy' with {type: 'macro'};
 import {forwardRef, useRef} from 'react';
 import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
 import {pressScale} from '@react-spectrum/s2/pressScale';
 import {Tag, TagGroup, TagList} from 'react-aria-components/TagGroup';
 import {useDOMRef} from './useDOMRef';
 
+const controlSizeM = {
+  default: 32,
+  size: {
+    XS: 20,
+    S: 24,
+    L: 40,
+    XL: 48
+  }
+} as const;
+
 const hoverBackground = {
   default: 'gray-200',
   isStaticColor: 'transparent-overlay-200'
@@ -34,43 +44,40 @@ const styles = style<{
   isFocusVisible: boolean;
   isPressed: boolean;
   size: 'S' | 'M' | 'L' | 'XL';
-}>(
-  {
-    ...focusRing(),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    size: controlSize(),
-    flexShrink: 0,
-    borderRadius: 'full',
-    padding: 0,
-    borderStyle: 'none',
-    transition: 'default',
-    backgroundColor: {
-      default: 'gray-200',
-      isHovered: hoverBackground,
-      isFocusVisible: hoverBackground,
-      isPressed: hoverBackground
-    },
-    '--iconPrimary': {
-      type: 'color',
-      value: {
-        default: baseColor('neutral'),
-        isDisabled: 'disabled',
-        forcedColors: {
-          default: 'ButtonText',
-          isDisabled: 'GrayText'
-        }
+}>({
+  ...focusRing(),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  size: controlSizeM,
+  flexShrink: 0,
+  borderRadius: 'full',
+  padding: 0,
+  borderStyle: 'none',
+  transition: 'default',
+  backgroundColor: {
+    default: 'gray-200',
+    isHovered: hoverBackground,
+    isFocusVisible: hoverBackground,
+    isPressed: hoverBackground
+  },
+  '--iconPrimary': {
+    type: 'color',
+    value: {
+      default: baseColor('neutral'),
+      isDisabled: 'disabled',
+      forcedColors: {
+        default: 'ButtonText',
+        isDisabled: 'GrayText'
       }
-    },
-    outlineColor: {
-      default: 'focus-ring',
-      forcedColors: 'Highlight'
-    },
-    disableTapHighlight: true
+    }
   },
-  getAllowedOverrides()
-);
+  outlineColor: {
+    default: 'focus-ring',
+    forcedColors: 'Highlight'
+  },
+  disableTapHighlight: true
+});
 
 const closeIconStyle = ({size = 'M'}) => {
   if (size === 'S') return iconStyle({size: 'XS'});
@@ -88,21 +95,21 @@ const CloseButton = function CloseButton(props) {
       ref={ref}
       slot="remove"
       style={pressScale(ref, {})}
-      className={renderProps => styles({...renderProps, size: props.size || 'M'}, props.styles)}>
+      className={renderProps =>
+        mergeStyles(styles({...renderProps, size: props.size || 'M'}), props.styles)
+      }>
       <Close styles={closeIconStyle({size: props.size ?? 'M'})} />
     </Button>
   );
 };
 
-let attachmentListStyles = style({}, getAllowedOverrides());
-
 export const AttachmentList = forwardRef(function AttachmentList(
   props: any,
   ref: DOMRef<HTMLDivElement>
 ) {
   let domRef = useDOMRef(ref);
   return (
-    <TagGroup {...props} className={attachmentListStyles(props.styles)} ref={domRef}>
+    <TagGroup {...props} className={props.styles} ref={domRef}>
       <TagList
         className={style({
           display: 'flex',