{"ast":null,"code":"import React from 'react';\nimport { NativeBaseProvider, useColorMode, Text, Button, Center, Box } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\n\nfunction UseColorMode() {\n  var _useColorMode = useColorMode(),\n      colorMode = _useColorMode.colorMode,\n      toggleColorMode = _useColorMode.toggleColorMode;\n\n  return React.createElement(Center, null, React.createElement(Box, {\n    p: \"4\",\n    flex: \"1\",\n    maxW: \"300\",\n    mt: 10,\n    w: \"100%\",\n    bg: colorMode === 'dark' ? 'coolGray.800' : 'warmGray.50',\n    safeArea: true\n  }, React.createElement(Text, {\n    fontSize: \"lg\",\n    display: \"flex\",\n    mb: \"20\"\n  }, \"The active color mode is\", ' ', React.createElement(Text, {\n    bold: true,\n    fontSize: \"lg\"\n  }, colorMode)), React.createElement(Button, {\n    onPress: toggleColorMode,\n    h: 10\n  }, \"Toggle\")));\n}\n\nexport var Example = function Example() {\n  return React.createElement(NativeBaseProvider, null, React.createElement(UseColorMode, null));\n};","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/hooks/useColorMode/Basic.tsx"],"names":["React","NativeBaseProvider","useColorMode","Text","Button","Center","Box","UseColorMode","colorMode","toggleColorMode","Example"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACEC,kBADF,EAEEC,YAFF,EAGEC,IAHF,EAIEC,MAJF,EAKEC,MALF,EAMEC,GANF;;AASA,SAASC,YAAT,GAAwB;AAAA,sBACiBL,YAAY,EAD7B;AAAA,MACdM,SADc,iBACdA,SADc;AAAA,MACHC,eADG,iBACHA,eADG;;AAEtB,SACE,oBAAC,MAAD,QACE,oBAAC,GAAD;AACE,IAAA,CAAC,EAAC,GADJ;AAEE,IAAA,IAAI,EAAC,GAFP;AAGE,IAAA,IAAI,EAAC,KAHP;AAIE,IAAA,EAAE,EAAE,EAJN;AAKE,IAAA,CAAC,EAAC,MALJ;AAME,IAAA,EAAE,EAAED,SAAS,KAAK,MAAd,GAAuB,cAAvB,GAAwC,aAN9C;AAOE,IAAA,QAAQ;AAPV,KASE,oBAAC,IAAD;AAAM,IAAA,QAAQ,EAAC,IAAf;AAAoB,IAAA,OAAO,EAAC,MAA5B;AAAmC,IAAA,EAAE,EAAC;AAAtC,iCAC2B,GAD3B,EAEE,oBAAC,IAAD;AAAM,IAAA,IAAI,MAAV;AAAW,IAAA,QAAQ,EAAC;AAApB,KACGA,SADH,CAFF,CATF,EAeE,oBAAC,MAAD;AAAQ,IAAA,OAAO,EAAEC,eAAjB;AAAkC,IAAA,CAAC,EAAE;AAArC,cAfF,CADF,CADF;AAuBD;;AAED,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,SACE,oBAAC,kBAAD,QACE,oBAAC,YAAD,OADF,CADF;AAKD,CANM","sourcesContent":["import React from 'react';\nimport {\n  NativeBaseProvider,\n  useColorMode,\n  Text,\n  Button,\n  Center,\n  Box,\n} from 'native-base';\n\nfunction UseColorMode() {\n  const { colorMode, toggleColorMode } = useColorMode();\n  return (\n    <Center>\n      <Box\n        p=\"4\"\n        flex=\"1\"\n        maxW=\"300\"\n        mt={10}\n        w=\"100%\"\n        bg={colorMode === 'dark' ? 'coolGray.800' : 'warmGray.50'}\n        safeArea\n      >\n        <Text fontSize=\"lg\" display=\"flex\" mb=\"20\">\n          The active color mode is{' '}\n          <Text bold fontSize=\"lg\">\n            {colorMode}\n          </Text>\n        </Text>\n        <Button onPress={toggleColorMode} h={10}>\n          Toggle\n        </Button>\n      </Box>\n    </Center>\n  );\n}\n\nexport const Example = () => {\n  return (\n    <NativeBaseProvider>\n      <UseColorMode />\n    </NativeBaseProvider>\n  );\n};\n"]},"metadata":{},"sourceType":"module"}