{"ast":null,"code":"var _jsxFileName = \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/primitives/Flex/basic.tsx\";\nimport React from 'react';\nimport { Flex, Center, Heading, ScrollView, VStack, Divider, Box } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nexport function Example() {\n  return React.createElement(Box, {\n    flex: \"1\",\n    safeAreaTop: true\n  }, React.createElement(ScrollView, null, React.createElement(VStack, {\n    space: 2.5,\n    w: \"100%\",\n    px: \"3\"\n  }, React.createElement(Heading, {\n    size: \"md\"\n  }, \"row\"), React.createElement(Flex, {\n    direction: \"row\",\n    mb: \"2.5\",\n    mt: \"1.5\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.100\"\n  }, \"100\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.200\"\n  }, \"200\"), React.createElement(Center, {\n    bg: \"primary.300\",\n    size: \"16\"\n  }, \"300\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.400\"\n  }, \"400\")), React.createElement(Divider, null), React.createElement(Heading, {\n    size: \"md\"\n  }, \"column\"), React.createElement(Flex, {\n    direction: \"column\",\n    mb: \"2.5\",\n    mt: \"1.5\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.100\"\n  }, \"100\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.200\"\n  }, \"200\"), React.createElement(Center, {\n    bg: \"primary.300\",\n    size: \"16\"\n  }, \"300\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.400\"\n  }, \"400\")), React.createElement(Divider, null), React.createElement(Heading, {\n    size: \"md\"\n  }, \"row-reverse\"), React.createElement(Flex, {\n    direction: \"row-reverse\",\n    mb: \"2.5\",\n    mt: \"1.5\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.100\"\n  }, \"100\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.200\"\n  }, \"200\"), React.createElement(Center, {\n    bg: \"primary.300\",\n    size: \"16\"\n  }, \"300\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.400\"\n  }, \"400\")), React.createElement(Divider, null), React.createElement(Heading, {\n    size: \"md\"\n  }, \"column-reverse\"), React.createElement(Flex, {\n    direction: \"column-reverse\",\n    mb: \"2.5\",\n    mt: \"1.5\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.100\"\n  }, \"100\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.200\"\n  }, \"200\"), React.createElement(Center, {\n    bg: \"primary.300\",\n    size: \"16\"\n  }, \"300\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.400\"\n  }, \"400\")), React.createElement(Divider, null))));\n}","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/primitives/Flex/basic.tsx"],"names":["React","Flex","Center","Heading","ScrollView","VStack","Divider","Box","Example","color"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  Flex,\n  Center,\n  Heading,\n  ScrollView,\n  VStack,\n  Divider,\n  Box,\n} from 'native-base';\n\nexport function Example() {\n  return (\n    <Box flex=\"1\" safeAreaTop>\n      <ScrollView>\n        <VStack space={2.5} w=\"100%\" px=\"3\">\n          {/* flexDirection -> row */}\n          <Heading size=\"md\">row</Heading>\n          <Flex\n            direction=\"row\"\n            mb=\"2.5\"\n            mt=\"1.5\"\n            _text={{\n              color: 'coolGray.800',\n            }}\n          >\n            <Center size=\"16\" bg=\"primary.100\">\n              100\n            </Center>\n            <Center size=\"16\" bg=\"primary.200\">\n              200\n            </Center>\n            <Center bg=\"primary.300\" size=\"16\">\n              300\n            </Center>\n            <Center size=\"16\" bg=\"primary.400\">\n              400\n            </Center>\n          </Flex>\n          <Divider />\n          {/* flexDirection -> column */}\n          <Heading size=\"md\">column</Heading>\n\n          <Flex\n            direction=\"column\"\n            mb=\"2.5\"\n            mt=\"1.5\"\n            _text={{\n              color: 'coolGray.800',\n            }}\n          >\n            <Center size=\"16\" bg=\"primary.100\">\n              100\n            </Center>\n            <Center size=\"16\" bg=\"primary.200\">\n              200\n            </Center>\n            <Center bg=\"primary.300\" size=\"16\">\n              300\n            </Center>\n            <Center size=\"16\" bg=\"primary.400\">\n              400\n            </Center>\n          </Flex>\n          <Divider />\n          {/* flexDirection -> row-reverse */}\n          <Heading size=\"md\">row-reverse</Heading>\n          <Flex\n            direction=\"row-reverse\"\n            mb=\"2.5\"\n            mt=\"1.5\"\n            _text={{\n              color: 'coolGray.800',\n            }}\n          >\n            <Center size=\"16\" bg=\"primary.100\">\n              100\n            </Center>\n            <Center size=\"16\" bg=\"primary.200\">\n              200\n            </Center>\n            <Center bg=\"primary.300\" size=\"16\">\n              300\n            </Center>\n            <Center size=\"16\" bg=\"primary.400\">\n              400\n            </Center>\n          </Flex>\n          <Divider />\n          {/* flexDirection -> column-reverse */}\n          <Heading size=\"md\">column-reverse</Heading>\n          <Flex\n            direction=\"column-reverse\"\n            mb=\"2.5\"\n            mt=\"1.5\"\n            _text={{\n              color: 'coolGray.800',\n            }}\n          >\n            <Center size=\"16\" bg=\"primary.100\">\n              100\n            </Center>\n            <Center size=\"16\" bg=\"primary.200\">\n              200\n            </Center>\n            <Center bg=\"primary.300\" size=\"16\">\n              300\n            </Center>\n            <Center size=\"16\" bg=\"primary.400\">\n              400\n            </Center>\n          </Flex>\n          <Divider />\n        </VStack>\n      </ScrollView>\n    </Box>\n  );\n}\n"]},"metadata":{},"sourceType":"module"}