[BUG] Incorrect default flex direction in Flex component

[synuns]

Bug Description

The Flex component's default direction prop is not properly set to 'row', causing unexpected layout behavior. The current implementation shows incorrect flex direction when no direction prop is provided.

Steps to Reproduce

Context: Using the Flex component in a story without specifying the direction prop

Actual Result

When no direction prop is provided, the flex direction is not defaulting to 'row' as expected, despite the CSS specification that 'row' should be the default flex direction.

Expected Result

The Flex component should:

• Default to 'row' direction when no direction prop is provided
• Maintain consistent behavior with standard CSS flex container defaults
• Properly display child elements in a horizontal layout by default

Screenshots and Logs

export const Justify: Story = {
  render: () => (
    <Flex direction="column" gap="2rem">
      <Flex justify="flex-start" gap="1rem">
        <Box style={{ minWidth: '150px', height: '30px' }} />
        <Box style={{ minWidth: '150px', height: '30px' }}>flex-start</Box>
        <Box style={{ minWidth: '150px', height: '30px' }} />
      </Flex>
      <Flex justify="center" gap="1rem">
        <Box style={{ width: '150px', height: '30px' }} />
        <Box style={{ width: '150px', height: '30px' }}>center</Box>
        <Box style={{ width: '150px', height: '30px' }} />
      </Flex>
      <Flex justify="flex-end" gap="1rem">
        <Box style={{ width: '150px', height: '30px' }} />
        <Box style={{ width: '150px', height: '30px' }}>flex-end</Box>
        <Box style={{ width: '150px', height: '30px' }} />
      </Flex>
      <Flex justify="space-between" gap="1rem">
        <Box style={{ width: '150px', height: '30px' }} />
        <Box style={{ width: '150px', height: '30px' }}>space-between</Box>
        <Box style={{ width: '150px', height: '30px' }} />
      </Flex>
      <Flex justify="space-around" gap="1rem">
        <Box style={{ width: '150px', height: '30px' }} />
        <Box style={{ width: '150px', height: '30px' }}>space-around</Box>
        <Box style={{ width: '150px', height: '30px' }} />
      </Flex>
      <Flex justify="space-evenly" gap="1rem">
        <Box style={{ width: '150px', height: '30px' }} />
        <Box style={{ width: '150px', height: '30px' }}>space-evenly</Box>
        <Box style={{ width: '150px', height: '30px' }} />
      </Flex>
    </Flex>
  ),
};