Revert "Remove support for sx from BaseStyles component"

e2e/components/BaseStyles.test.ts

@@ -11,6 +11,14 @@ const stories = [
     id: 'behaviors-basestyles-dev--with-style-props',
     title: 'Dev With Style Props',
   },
+  {
+    id: 'behaviors-basestyles-dev--with-sx-props',
+    title: 'Dev With Sx Props',
+  },
+  {
+    id: 'behaviors-basestyles-dev--with-system-props',
+    title: 'Dev With System Props',
+  },
 ] as const
 
 test.describe('BaseStyles', () => {

packages/react/src/BaseStyles.dev.stories.tsx

@@ -9,6 +9,25 @@ export default {
 
 export const Default = () => 'Hello'
 
+export const WithSxProps = () => (
+  <BaseStyles
+    sx={{
+      color: 'red',
+      backgroundColor: 'blue',
+      fontFamily: 'Arial',
+      lineHeight: '1.5',
+    }}
+  >
+    Hello
+  </BaseStyles>
+)
+
+export const WithSystemProps = () => (
+  <BaseStyles color="red" backgroundColor="blue" fontFamily="Arial" fontSize="14px" lineHeight="1.5" display="flex">
+    Hello
+  </BaseStyles>
+)
+
 export const WithStyleProps = () => (
   <BaseStyles
     style={{

packages/react/src/BaseStyles.tsx

@@ -3,10 +3,12 @@ import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
 import type {SystemCommonProps, SystemTypographyProps} from './constants'
 import {useTheme} from './ThemeProvider'
+import type {SxProp} from './sx'
 
 import classes from './BaseStyles.module.css'
 
 import 'focus-visible'
+import {BoxWithFallback} from './internal/components/BoxWithFallback'
 
 export type BaseStylesProps = PropsWithChildren & {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15,7 +17,8 @@ export type BaseStylesProps = PropsWithChildren & {
   style?: CSSProperties
   color?: string // Fixes `color` ts-error
 } & SystemTypographyProps &
-  SystemCommonProps
+  SystemCommonProps &
+  SxProp
 
 function BaseStyles({
   children,
@@ -37,7 +40,8 @@ function BaseStyles({
   }
 
   return (
-    <Component
+    <BoxWithFallback
+      as={Component}
       className={newClassName}
       data-portal-root
       /**
@@ -55,7 +59,7 @@ function BaseStyles({
       {...rest}
     >
       {children}
-    </Component>
+    </BoxWithFallback>
   )
 }
 

packages/react/src/__tests__/BaseStyles.test.tsx

@@ -23,6 +23,19 @@ describe('BaseStyles', () => {
     } as Partial<CSSStyleDeclaration>)
   })
 
+  it('respects system props', () => {
+    const {container} = render(
+      <BaseStyles display="contents" whiteSpace="pre-wrap" mr="2">
+        Hello
+      </BaseStyles>,
+    )
+
+    expect(container.children[0]).toHaveStyle({
+      display: 'contents',
+      'margin-right': '8px',
+    } as Partial<CSSStyleDeclaration>)
+  })
+
   it('accepts className and style props', () => {
     const styles = {
       style: {margin: '10px'},