{"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\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function Example() {\n  return _jsx(Box, {\n    flex: \"1\",\n    safeAreaTop: true,\n    children: _jsx(ScrollView, {\n      children: _jsxs(VStack, {\n        space: 2.5,\n        w: \"100%\",\n        px: \"3\",\n        children: [_jsx(Heading, {\n          size: \"md\",\n          children: \"row\"\n        }), _jsxs(Flex, {\n          direction: \"row\",\n          mb: \"2.5\",\n          mt: \"1.5\",\n          children: [_jsx(Center, {\n            size: \"16\",\n            bg: \"primary.100\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"100\"\n          }), _jsx(Center, {\n            size: \"16\",\n            bg: \"primary.200\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"200\"\n          }), _jsx(Center, {\n            bg: \"primary.300\",\n            size: \"16\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"300\"\n          }), _jsx(Center, {\n            size: \"16\",\n            bg: \"primary.400\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"400\"\n          })]\n        }), _jsx(Divider, {}), _jsx(Heading, {\n          size: \"md\",\n          children: \"column\"\n        }), _jsxs(Flex, {\n          direction: \"column\",\n          mb: \"2.5\",\n          mt: \"1.5\",\n          children: [_jsx(Center, {\n            size: \"16\",\n            bg: \"primary.100\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"100\"\n          }), _jsx(Center, {\n            size: \"16\",\n            bg: \"primary.200\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"200\"\n          }), _jsx(Center, {\n            bg: \"primary.300\",\n            size: \"16\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"300\"\n          }), _jsx(Center, {\n            size: \"16\",\n            bg: \"primary.400\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"400\"\n          })]\n        }), _jsx(Divider, {}), _jsx(Heading, {\n          size: \"md\",\n          children: \"row-reverse\"\n        }), _jsxs(Flex, {\n          direction: \"row-reverse\",\n          mb: \"2.5\",\n          mt: \"1.5\",\n          children: [_jsx(Center, {\n            size: \"16\",\n            bg: \"primary.100\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"100\"\n          }), _jsx(Center, {\n            size: \"16\",\n            bg: \"primary.200\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"200\"\n          }), _jsx(Center, {\n            bg: \"primary.300\",\n            size: \"16\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"300\"\n          }), _jsx(Center, {\n            size: \"16\",\n            bg: \"primary.400\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"400\"\n          })]\n        }), _jsx(Divider, {}), _jsx(Heading, {\n          size: \"md\",\n          children: \"column-reverse\"\n        }), _jsxs(Flex, {\n          direction: \"column-reverse\",\n          mb: \"2.5\",\n          mt: \"1.5\",\n          children: [_jsx(Center, {\n            size: \"16\",\n            bg: \"primary.100\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"100\"\n          }), _jsx(Center, {\n            size: \"16\",\n            bg: \"primary.200\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"200\"\n          }), _jsx(Center, {\n            bg: \"primary.300\",\n            size: \"16\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"300\"\n          }), _jsx(Center, {\n            size: \"16\",\n            bg: \"primary.400\",\n            _text: {\n              color: 'coolGray.800'\n            },\n            children: \"400\"\n          })]\n        }), _jsx(Divider, {})]\n      })\n    })\n  });\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"}