Flex sx prop don't take a function

[rtturner]

Describe the bug
Derived styles do not get applied on Flex

To Reproduce
Changing version to 0.14.0-develop.23 will properly render styles. This bug exists in latest version as well.

https://codesandbox.io/p/sandbox/q6kmfx

// From sandbox
<Box sx={{ backgroundColor: "blue", color: "white" }}>
  Box with css object styling
</Box>
<Box sx={() => ({ backgroundColor: "blue", color: "white" })}>
  Box with derived styling
</Box>

<Flex sx={{ backgroundColor: "green", color: "white" }}>
  Flex with css object styling
</Flex>

// Expect this to function identical to Box
// Break occurs in 0.14.0-develop.24 and is still relevant in latest
// Use fork to test fix - https://github.com/rtturner/theme-ui/blob/flex-derived-styles/packages/components/src/Flex.tsx
<Flex sx={() => ({ backgroundColor: "red", color: "white" })}>
  Flex with derived styling
</Flex>

Expected behavior
Passing a function to Flex's sx prop should apply styles

Additional context
Found this closed issue #2369 reporting the original problem. Seems it was chalked up to be another dependency causing the issue but I am able to replicate.

If I swap out Flex usage for Box then the derived styles are applied correctly.

I believe this is due to the spreading of sx within Flex

breaking commit
develop branch

Adjusting sx to account for function definition fixes the issue for me

# Fix - components/src/Flex.tsx

export const Flex: ForwardRef<HTMLElement, FlexProps> = React.forwardRef(
  function Flex(props: FlexProps, ref) {
    const { sx } = props;
    return (
      <Box
        ref={ref}
        {...props}
        sx={theme => ({
          display: 'flex',
          ...(typeof sx === "function" ? sx(theme) : sx),
        }}
      />
    )
  }
)```

[rtturner]

#2535 with proposed fix