{"ast":null,"code":"import React from 'react';\nimport { NativeBaseProvider, useColorMode, Text, Button, Center, Box, useColorModeValue } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\n\nfunction UseColorMode() {\n  var _useColorMode = useColorMode(),\n      toggleColorMode = _useColorMode.toggleColorMode;\n\n  return React.createElement(Center, null, React.createElement(Box, {\n    p: \"4\",\n    flex: \"1\",\n    bg: useColorModeValue('warmGray.50', 'coolGray.800'),\n    maxW: \"300\",\n    w: \"100%\",\n    mt: 10,\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: \"18px\"\n  }, useColorModeValue('Light', 'Dark'))), 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/useColorModeValue/Basic.tsx"],"names":["React","NativeBaseProvider","useColorMode","Text","Button","Center","Box","useColorModeValue","UseColorMode","toggleColorMode","Example"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACEC,kBADF,EAEEC,YAFF,EAGEC,IAHF,EAIEC,MAJF,EAKEC,MALF,EAMEC,GANF,EAOEC,iBAPF;;AAUA,SAASC,YAAT,GAAwB;AAAA,sBACMN,YAAY,EADlB;AAAA,MACdO,eADc,iBACdA,eADc;;AAEtB,SACE,oBAAC,MAAD,QACE,oBAAC,GAAD;AACE,IAAA,CAAC,EAAC,GADJ;AAEE,IAAA,IAAI,EAAC,GAFP;AAGE,IAAA,EAAE,EAAEF,iBAAiB,CAAC,aAAD,EAAgB,cAAhB,CAHvB;AAIE,IAAA,IAAI,EAAC,KAJP;AAKE,IAAA,CAAC,EAAC,MALJ;AAME,IAAA,EAAE,EAAE,EANN;AAOE,IAAA,QAAQ;AAPV,KASE,oBAAC,IAAD;AAAM,IAAA,QAAQ,EAAC,IAAf;AAAoB,IAAA,OAAO,EAAC,MAA5B;AAAmC,IAAA,EAAE,EAAE;AAAvC,iCAC2B,GAD3B,EAEE,oBAAC,IAAD;AAAM,IAAA,IAAI,MAAV;AAAW,IAAA,QAAQ,EAAC;AAApB,KACGA,iBAAiB,CAAC,OAAD,EAAU,MAAV,CADpB,CAFF,CATF,EAeE,oBAAC,MAAD;AAAQ,IAAA,OAAO,EAAEE,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  useColorModeValue,\n} from 'native-base';\n\nfunction UseColorMode() {\n  const { toggleColorMode } = useColorMode();\n  return (\n    <Center>\n      <Box\n        p=\"4\"\n        flex=\"1\"\n        bg={useColorModeValue('warmGray.50', 'coolGray.800')}\n        maxW=\"300\"\n        w=\"100%\"\n        mt={10}\n        safeArea\n      >\n        <Text fontSize=\"lg\" display=\"flex\" mb={20}>\n          The active color mode is{' '}\n          <Text bold fontSize=\"18px\">\n            {useColorModeValue('Light', 'Dark')}\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"}