feat: Update PromptField attachment design

[devongovett]

Updates the Attachment component to match the latest designs. There is a new background effect, errors and loading states replace the preview, and there are new icons for various file types. This is all in a new AttachmentPreview component, which replaces putting an Image inside Attachment directly.

Also slightly increased the opacity of the pixel loader icon.

[devongovett]

Goal is for this to eventually be a reusable style macro for custom containers using this style, so I pulled it out as a constant for now. Will work on that more next week.

[snowystinger]

haha, we're going to be so overloaded on the name "container", that's already a layout template set of tokens as well

[devongovett]

oh idk what the name will be yet

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

## API Changes

@react-spectrum/ai

/@react-spectrum/ai:AttachmentPreview

+AttachmentPreview {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  alt?: string
+  crossOrigin?: 'anonymous' | 'use-credentials'
+  decoding?: 'async' | 'auto' | 'sync'
+  fetchPriority?: 'high' | 'low' | 'auto'
+  group?: ImageGroup
+  height?: number
+  itemProp?: string
+  loading?: 'eager' | 'lazy'
+  mimeType: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  renderError?: () => ReactNode
+  slot?: string | null
+  src?: string | Array<ImageSource>
+  styles?: StyleString
+  width?: number
+}

/@react-spectrum/ai:AttachmentPreviewProps

+AttachmentPreviewProps {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  alt?: string
+  crossOrigin?: 'anonymous' | 'use-credentials'
+  decoding?: 'async' | 'auto' | 'sync'
+  fetchPriority?: 'high' | 'low' | 'auto'
+  group?: ImageGroup
+  height?: number
+  itemProp?: string
+  loading?: 'eager' | 'lazy'
+  mimeType: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  renderError?: () => ReactNode
+  slot?: string | null
+  src?: string | Array<ImageSource>
+  styles?: StyleString
+  width?: number
+}

---

[rspbot]

Agent Skills Changes

Modified (8)

• react-aria/agent-skills/index.json $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/agent-skills/react-aria.tar.gz
• react-aria/agent-skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/index.json $\color{green}{+3}$ $\color{red}{-3}$
• s2/agent-skills/migrate-react-spectrum-v3-to-s2.tar.gz
• s2/agent-skills/react-spectrum-s2.tar.gz
• s2/agent-skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/spectrum-audit.tar.gz

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/d5bf4e1b6d75f8f8b0b42c12ae15715fb1e9d3b1/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/d5bf4e1b6d75f8f8b0b42c12ae15715fb1e9d3b1/

[LFDanLu]

feedback for design perhaps, this looks to be the same values as what is in figma from what I can tell but the border feels really hard to see when compared to before, specifically in light mode.