{"ast":null,"code":"import React from 'react';\nimport { Box, Heading, AspectRatio, Image, Text, Center, HStack, Stack } 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 var Example = function Example() {\n  return _jsxs(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    children: [_jsxs(Box, {\n      children: [_jsx(AspectRatio, {\n        w: \"100%\",\n        ratio: 16 / 9,\n        children: _jsx(Image, {\n          source: {\n            uri: 'https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg'\n          },\n          alt: \"image\"\n        })\n      }), _jsx(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        children: \"PHOTOS\"\n      })]\n    }), _jsxs(Stack, {\n      p: \"4\",\n      space: 3,\n      children: [_jsxs(Stack, {\n        space: 2,\n        children: [_jsx(Heading, {\n          size: \"md\",\n          ml: \"-1\",\n          children: \"The Garden City\"\n        }), _jsx(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          children: \"The Silicon Valley of India.\"\n        })]\n      }), _jsx(Text, {\n        fontWeight: \"400\",\n        children: \"Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\"\n      }), _jsx(HStack, {\n        alignItems: \"center\",\n        space: 4,\n        justifyContent: \"space-between\",\n        children: _jsx(HStack, {\n          alignItems: \"center\",\n          children: _jsx(Text, {\n            color: \"coolGray.600\",\n            _dark: {\n              color: 'warmGray.200'\n            },\n            fontWeight: \"400\",\n            children: \"6 mins ago\"\n          })\n        })\n      })]\n    })]\n  });\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,MAAC,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,KAXV;AAAA,eAaE,MAAC,GAAD;AAAA,iBACE,KAAC,WAAD;AAAa,QAAA,CAAC,EAAC,MAAf;AAAsB,QAAA,KAAK,EAAE,KAAK,CAAlC;AAAA,kBACE,KAAC,KAAD;AACE,UAAA,MAAM,EAAE;AACNG,YAAAA,GAAG,EACD;AAFI,WADV;AAKE,UAAA,GAAG,EAAC;AALN;AADF,QADF,EAUE,KAAC,MAAD;AACE,QAAA,EAAE,EAAC,YADL;AAEE,QAAA,KAAK,EAAE;AAAEC,UAAAA,EAAE,EAAE;AAAN,SAFT;AAGE,QAAA,KAAK,EAAE;AAAEC,UAAAA,KAAK,EAAE,aAAT;AAAwBC,UAAAA,UAAU,EAAE,KAApC;AAA2CC,UAAAA,QAAQ,EAAE;AAArD,SAHT;AAIE,QAAA,QAAQ,EAAC,UAJX;AAKE,QAAA,MAAM,EAAC,GALT;AAME,QAAA,EAAE,EAAC,GANL;AAOE,QAAA,EAAE,EAAC,KAPL;AAAA;AAAA,QAVF;AAAA,MAbF,EAmCE,MAAC,KAAD;AAAO,MAAA,CAAC,EAAC,GAAT;AAAa,MAAA,KAAK,EAAE,CAApB;AAAA,iBACE,MAAC,KAAD;AAAO,QAAA,KAAK,EAAE,CAAd;AAAA,mBACE,KAAC,OAAD;AAAS,UAAA,IAAI,EAAC,IAAd;AAAmB,UAAA,EAAE,EAAC,IAAtB;AAAA;AAAA,UADF,EAIE,KAAC,IAAD;AACE,UAAA,QAAQ,EAAC,IADX;AAEE,UAAA,MAAM,EAAE;AAAEF,YAAAA,KAAK,EAAE;AAAT,WAFV;AAGE,UAAA,KAAK,EAAE;AAAEA,YAAAA,KAAK,EAAE;AAAT,WAHT;AAIE,UAAA,UAAU,EAAC,KAJb;AAKE,UAAA,EAAE,EAAC,MALL;AAME,UAAA,EAAE,EAAC,IANL;AAAA;AAAA,UAJF;AAAA,QADF,EAgBE,KAAC,IAAD;AAAM,QAAA,UAAU,EAAC,KAAjB;AAAA;AAAA,QAhBF,EAoBE,KAAC,MAAD;AAAQ,QAAA,UAAU,EAAC,QAAnB;AAA4B,QAAA,KAAK,EAAE,CAAnC;AAAsC,QAAA,cAAc,EAAC,eAArD;AAAA,kBACE,KAAC,MAAD;AAAQ,UAAA,UAAU,EAAC,QAAnB;AAAA,oBACE,KAAC,IAAD;AACE,YAAA,KAAK,EAAC,cADR;AAEE,YAAA,KAAK,EAAE;AAAEA,cAAAA,KAAK,EAAE;AAAT,aAFT;AAGE,YAAA,UAAU,EAAC,KAHb;AAAA;AAAA;AADF;AADF,QApBF;AAAA,MAnCF;AAAA,IADF;AAsED,CAvEM","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\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  );\n};\n"]},"metadata":{},"sourceType":"module"}