chore: add support for sx to components

Author: joshblack

packages/react/src/live-region/AriaAlert.tsx

@@ -1,25 +1,28 @@
 import React, {type ElementType} from 'react'
 import {Announce} from './Announce'
+import type {SxProp} from '../sx'
 
-export type AriaAlertProps<As extends ElementType> = React.PropsWithChildren<{
-  /**
-   * Customize the element type of the rendered container
-   */
-  as?: As
+export type AriaAlertProps<As extends ElementType> = React.PropsWithChildren<
+  {
+    /**
+     * Customize the element type of the rendered container
+     */
+    as?: As
 
-  /**
-   * Specify if the content of the element should be announced when this
-   * component is rendered and is not hidden
-   * @default true
-   */
-  announceOnShow?: boolean
+    /**
+     * Specify if the content of the element should be announced when this
+     * component is rendered and is not hidden
+     * @default true
+     */
+    announceOnShow?: boolean
 
-  /**
-   * Specify if the element is hidden
-   * @default false
-   */
-  hidden?: boolean
-}>
+    /**
+     * Specify if the element is hidden
+     * @default false
+     */
+    hidden?: boolean
+  } & SxProp
+>
 
 export function AriaAlert<As extends ElementType>({
   announceOnShow = true,

packages/react/src/live-region/AriaStatus.tsx

@@ -1,30 +1,33 @@
 import React, {type ElementType} from 'react'
 import {Announce} from './Announce'
+import type {SxProp} from '../sx'
 
-export type AriaStatusProps<As extends ElementType> = React.PropsWithChildren<{
-  /**
-   * Customize the element type of the rendered container
-   */
-  as?: As
+export type AriaStatusProps<As extends ElementType> = React.PropsWithChildren<
+  {
+    /**
+     * Customize the element type of the rendered container
+     */
+    as?: As
 
-  /**
-   * Specify if the content of the element should be announced when this
-   * component is rendered and is not hidden
-   * @default false
-   */
-  announceOnShow?: boolean
+    /**
+     * Specify if the content of the element should be announced when this
+     * component is rendered and is not hidden
+     * @default false
+     */
+    announceOnShow?: boolean
 
-  /**
-   * Specify if the element is hidden
-   * @default false
-   */
-  hidden?: boolean
+    /**
+     * Specify if the element is hidden
+     * @default false
+     */
+    hidden?: boolean
 
-  /**
-   * Provide a delay in milliseconds before the announcement is made
-   */
-  delayMs?: number
-}>
+    /**
+     * Provide a delay in milliseconds before the announcement is made
+     */
+    delayMs?: number
+  } & SxProp
+>
 
 export function AriaStatus<As extends ElementType>({
   announceOnShow = false,