Merge branch 'develop' into stable

Author: hasparus

examples/next/package.json

@@ -17,7 +17,7 @@
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^14.0.4",
     "@theme-ui/css": "workspace:^",
-    "next": "^14.0.4",
+    "next": "^15.1.2",
     "react": "^18.1.0",
     "react-dom": "^18",
     "theme-ui": "workspace:^"

packages/components/src/Flex.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import { Theme } from '@theme-ui/core'
+
 import { Box, BoxOwnProps, BoxProps } from './Box'
 import { ForwardRef } from './types'
 
@@ -11,14 +13,15 @@ export type FlexProps = BoxProps
  */
 export const Flex: ForwardRef<HTMLElement, FlexProps> = React.forwardRef(
   function Flex(props: FlexProps, ref) {
+    const { sx } = props
     return (
       <Box
         ref={ref}
         {...props}
-        sx={{
+        sx={(theme: Theme) => ({
           display: 'flex',
-          ...props.sx,
-        }}
+          ...(typeof sx === 'function' ? sx(theme) : sx),
+        })}
       />
     )
   }