{"ast":null,"code":"var _this = this,\n    _jsxFileName = \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/primitives/Box/composition.tsx\";\n\nimport React from 'react';\nimport { Box, Heading, AspectRatio, Image, Text, Center, HStack, Stack } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nexport var Example = function Example() {\n  return React.createElement(Box, {\n    alignItems: \"center\"\n  }, React.createElement(Box, {\n    maxW: \"80\",\n    rounded: \"lg\",\n    overflow: \"hidden\",\n    borderColor: \"coolGray.200\",\n    borderWidth: \"1\",\n    _dark: {\n      borderColor: 'coolGray.600',\n      backgroundColor: 'gray.700'\n    },\n    _web: {\n      shadow: 2,\n      borderWidth: 0\n    },\n    _light: {\n      backgroundColor: 'gray.50'\n    }\n  }, React.createElement(Box, null, React.createElement(AspectRatio, {\n    w: \"100%\",\n    ratio: 16 / 9\n  }, React.createElement(Image, {\n    source: {\n      uri: 'https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg'\n    },\n    alt: \"image\"\n  })), React.createElement(Center, {\n    bg: \"violet.500\",\n    _dark: {\n      bg: 'violet.400'\n    },\n    _text: {\n      color: 'warmGray.50',\n      fontWeight: '700',\n      fontSize: 'xs'\n    },\n    position: \"absolute\",\n    bottom: \"0\",\n    px: \"3\",\n    py: \"1.5\"\n  }, \"PHOTOS\")), React.createElement(Stack, {\n    p: \"4\",\n    space: 3\n  }, React.createElement(Stack, {\n    space: 2\n  }, React.createElement(Heading, {\n    size: \"md\",\n    ml: \"-1\"\n  }, \"The Garden City\"), React.createElement(Text, {\n    fontSize: \"xs\",\n    _light: {\n      color: 'violet.500'\n    },\n    _dark: {\n      color: 'violet.400'\n    },\n    fontWeight: \"500\",\n    ml: \"-0.5\",\n    mt: \"-1\"\n  }, \"The Silicon Valley of India.\")), React.createElement(Text, {\n    fontWeight: \"400\"\n  }, \"Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\"), React.createElement(HStack, {\n    alignItems: \"center\",\n    space: 4,\n    justifyContent: \"space-between\"\n  }, React.createElement(HStack, {\n    alignItems: \"center\"\n  }, React.createElement(Text, {\n    color: \"coolGray.600\",\n    _dark: {\n      color: 'warmGray.200'\n    },\n    fontWeight: \"400\"\n  }, \"6 mins ago\"))))));\n};","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/primitives/Box/composition.tsx"],"names":["React","Box","Heading","AspectRatio","Image","Text","Center","HStack","Stack","Example","borderColor","backgroundColor","shadow","borderWidth","uri","bg","color","fontWeight","fontSize"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACEC,GADF,EAEEC,OAFF,EAGEC,WAHF,EAIEC,KAJF,EAKEC,IALF,EAMEC,MANF,EAOEC,MAPF,EAQEC,KARF;AAWA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,SACE,oBAAC,GAAD;AAAK,IAAA,UAAU,EAAC;AAAhB,KACE,oBAAC,GAAD;AACE,IAAA,IAAI,EAAC,IADP;AAEE,IAAA,OAAO,EAAC,IAFV;AAGE,IAAA,QAAQ,EAAC,QAHX;AAIE,IAAA,WAAW,EAAC,cAJd;AAKE,IAAA,WAAW,EAAC,GALd;AAME,IAAA,KAAK,EAAE;AAAEC,MAAAA,WAAW,EAAE,cAAf;AAA+BC,MAAAA,eAAe,EAAE;AAAhD,KANT;AAOE,IAAA,IAAI,EAAE;AACJC,MAAAA,MAAM,EAAE,CADJ;AAEJC,MAAAA,WAAW,EAAE;AAFT,KAPR;AAWE,IAAA,MAAM,EAAE;AAAEF,MAAAA,eAAe,EAAE;AAAnB;AAXV,KAaE,oBAAC,GAAD,QACE,oBAAC,WAAD;AAAa,IAAA,CAAC,EAAC,MAAf;AAAsB,IAAA,KAAK,EAAE,KAAK;AAAlC,KACE,oBAAC,KAAD;AACE,IAAA,MAAM,EAAE;AACNG,MAAAA,GAAG,EACD;AAFI,KADV;AAKE,IAAA,GAAG,EAAC;AALN,IADF,CADF,EAUE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,YADL;AAEE,IAAA,KAAK,EAAE;AAAEC,MAAAA,EAAE,EAAE;AAAN,KAFT;AAGE,IAAA,KAAK,EAAE;AAAEC,MAAAA,KAAK,EAAE,aAAT;AAAwBC,MAAAA,UAAU,EAAE,KAApC;AAA2CC,MAAAA,QAAQ,EAAE;AAArD,KAHT;AAIE,IAAA,QAAQ,EAAC,UAJX;AAKE,IAAA,MAAM,EAAC,GALT;AAME,IAAA,EAAE,EAAC,GANL;AAOE,IAAA,EAAE,EAAC;AAPL,cAVF,CAbF,EAmCE,oBAAC,KAAD;AAAO,IAAA,CAAC,EAAC,GAAT;AAAa,IAAA,KAAK,EAAE;AAApB,KACE,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAE;AAAd,KACE,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,IAAd;AAAmB,IAAA,EAAE,EAAC;AAAtB,uBADF,EAIE,oBAAC,IAAD;AACE,IAAA,QAAQ,EAAC,IADX;AAEE,IAAA,MAAM,EAAE;AAAEF,MAAAA,KAAK,EAAE;AAAT,KAFV;AAGE,IAAA,KAAK,EAAE;AAAEA,MAAAA,KAAK,EAAE;AAAT,KAHT;AAIE,IAAA,UAAU,EAAC,KAJb;AAKE,IAAA,EAAE,EAAC,MALL;AAME,IAAA,EAAE,EAAC;AANL,oCAJF,CADF,EAgBE,oBAAC,IAAD;AAAM,IAAA,UAAU,EAAC;AAAjB,0IAhBF,EAoBE,oBAAC,MAAD;AAAQ,IAAA,UAAU,EAAC,QAAnB;AAA4B,IAAA,KAAK,EAAE,CAAnC;AAAsC,IAAA,cAAc,EAAC;AAArD,KACE,oBAAC,MAAD;AAAQ,IAAA,UAAU,EAAC;AAAnB,KACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAC,cADR;AAEE,IAAA,KAAK,EAAE;AAAEA,MAAAA,KAAK,EAAE;AAAT,KAFT;AAGE,IAAA,UAAU,EAAC;AAHb,kBADF,CADF,CApBF,CAnCF,CADF,CADF;AAwED,CAzEM","sourcesContent":["import React from 'react';\nimport {\n  Box,\n  Heading,\n  AspectRatio,\n  Image,\n  Text,\n  Center,\n  HStack,\n  Stack,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Box\n        maxW=\"80\"\n        rounded=\"lg\"\n        overflow=\"hidden\"\n        borderColor=\"coolGray.200\"\n        borderWidth=\"1\"\n        _dark={{ borderColor: 'coolGray.600', backgroundColor: 'gray.700' }}\n        _web={{\n          shadow: 2,\n          borderWidth: 0,\n        }}\n        _light={{ backgroundColor: 'gray.50' }}\n      >\n        <Box>\n          <AspectRatio w=\"100%\" ratio={16 / 9}>\n            <Image\n              source={{\n                uri:\n                  'https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg',\n              }}\n              alt=\"image\"\n            />\n          </AspectRatio>\n          <Center\n            bg=\"violet.500\"\n            _dark={{ bg: 'violet.400' }}\n            _text={{ color: 'warmGray.50', fontWeight: '700', fontSize: 'xs' }}\n            position=\"absolute\"\n            bottom=\"0\"\n            px=\"3\"\n            py=\"1.5\"\n          >\n            PHOTOS\n          </Center>\n        </Box>\n        <Stack p=\"4\" space={3}>\n          <Stack space={2}>\n            <Heading size=\"md\" ml=\"-1\">\n              The Garden City\n            </Heading>\n            <Text\n              fontSize=\"xs\"\n              _light={{ color: 'violet.500' }}\n              _dark={{ color: 'violet.400' }}\n              fontWeight=\"500\"\n              ml=\"-0.5\"\n              mt=\"-1\"\n            >\n              The Silicon Valley of India.\n            </Text>\n          </Stack>\n          <Text fontWeight=\"400\">\n            Bengaluru (also called Bangalore) is the center of India's high-tech\n            industry. The city is also known for its parks and nightlife.\n          </Text>\n          <HStack alignItems=\"center\" space={4} justifyContent=\"space-between\">\n            <HStack alignItems=\"center\">\n              <Text\n                color=\"coolGray.600\"\n                _dark={{ color: 'warmGray.200' }}\n                fontWeight=\"400\"\n              >\n                6 mins ago\n              </Text>\n            </HStack>\n          </HStack>\n        </Stack>\n      </Box>\n    </Box>\n  );\n};\n"]},"metadata":{},"sourceType":"module"}