{"ast":null,"code":"import 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  }, React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.100\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"100\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.200\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"200\"), React.createElement(Center, {\n    bg: \"primary.300\",\n    size: \"16\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"300\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.400\",\n    _text: {\n      color: 'coolGray.800'\n    }\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  }, React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.100\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"100\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.200\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"200\"), React.createElement(Center, {\n    bg: \"primary.300\",\n    size: \"16\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"300\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.400\",\n    _text: {\n      color: 'coolGray.800'\n    }\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  }, React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.100\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"100\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.200\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"200\"), React.createElement(Center, {\n    bg: \"primary.300\",\n    size: \"16\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"300\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.400\",\n    _text: {\n      color: 'coolGray.800'\n    }\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  }, React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.100\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"100\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.200\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"200\"), React.createElement(Center, {\n    bg: \"primary.300\",\n    size: \"16\",\n    _text: {\n      color: 'coolGray.800'\n    }\n  }, \"300\"), React.createElement(Center, {\n    size: \"16\",\n    bg: \"primary.400\",\n    _text: {\n      color: 'coolGray.800'\n    }\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 direction=\"row\" mb=\"2.5\" mt=\"1.5\">\n            <Center\n              size=\"16\"\n              bg=\"primary.100\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              100\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.200\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              200\n            </Center>\n            <Center\n              bg=\"primary.300\"\n              size=\"16\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              300\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.400\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              400\n            </Center>\n          </Flex>\n          <Divider />\n          {/* flexDirection -> column */}\n          <Heading size=\"md\">column</Heading>\n\n          <Flex direction=\"column\" mb=\"2.5\" mt=\"1.5\">\n            <Center\n              size=\"16\"\n              bg=\"primary.100\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              100\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.200\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              200\n            </Center>\n            <Center\n              bg=\"primary.300\"\n              size=\"16\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              300\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.400\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              400\n            </Center>\n          </Flex>\n          <Divider />\n          {/* flexDirection -> row-reverse */}\n          <Heading size=\"md\">row-reverse</Heading>\n          <Flex direction=\"row-reverse\" mb=\"2.5\" mt=\"1.5\">\n            <Center\n              size=\"16\"\n              bg=\"primary.100\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              100\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.200\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              200\n            </Center>\n            <Center\n              bg=\"primary.300\"\n              size=\"16\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              300\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.400\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              400\n            </Center>\n          </Flex>\n          <Divider />\n          {/* flexDirection -> column-reverse */}\n          <Heading size=\"md\">column-reverse</Heading>\n          <Flex direction=\"column-reverse\" mb=\"2.5\" mt=\"1.5\">\n            <Center\n              size=\"16\"\n              bg=\"primary.100\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              100\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.200\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              200\n            </Center>\n            <Center\n              bg=\"primary.300\"\n              size=\"16\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              300\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.400\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              400\n            </Center>\n          </Flex>\n          <Divider />\n        </VStack>\n      </ScrollView>\n    </Box>\n  );\n}\n"]},"metadata":{},"sourceType":"module"}