{"ast":null,"code":"import React from 'react';\nimport { Box } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nexport var Example = function Example() {\n  return React.createElement(React.Fragment, null, React.createElement(Box, {\n    height: {\n      base: '75%',\n      md: '50%',\n      xl: '25%'\n    },\n    bg: \"teal.400\",\n    width: ['75%', '50%', '25%', '15%']\n  }), React.createElement(Box, {\n    fontSize: ['sm', 'md', 'lg', 'xl']\n  }, \"Font Size\"), React.createElement(Box, {\n    mt: [2, 4, 6, 8],\n    width: \"100%\",\n    height: \"24px\",\n    bg: \"green.400\"\n  }), React.createElement(Box, {\n    bg: \"red.200\",\n    p: [2, 4, 6, 8]\n  }, \"Padding\"));\n};","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/theme/Responsive/More.tsx"],"names":["React","Box","Example","base","md","xl"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,SACE,0CACE,oBAAC,GAAD;AACE,IAAA,MAAM,EAAE;AACNC,MAAAA,IAAI,EAAE,KADA;AAENC,MAAAA,EAAE,EAAE,KAFE;AAGNC,MAAAA,EAAE,EAAE;AAHE,KADV;AAME,IAAA,EAAE,EAAC,UANL;AAOE,IAAA,KAAK,EAAE,CACL,KADK,EAEL,KAFK,EAGL,KAHK,EAIL,KAJK;AAPT,IADF,EAgBE,oBAAC,GAAD;AAAK,IAAA,QAAQ,EAAE,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB;AAAf,iBAhBF,EAkBE,oBAAC,GAAD;AAAK,IAAA,EAAE,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,CAAT;AAAuB,IAAA,KAAK,EAAC,MAA7B;AAAoC,IAAA,MAAM,EAAC,MAA3C;AAAkD,IAAA,EAAE,EAAC;AAArD,IAlBF,EAoBE,oBAAC,GAAD;AAAK,IAAA,EAAE,EAAC,SAAR;AAAkB,IAAA,CAAC,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV;AAArB,eApBF,CADF;AA0BD,CA3BM","sourcesContent":["import React from 'react';\nimport { Box } from 'native-base';\nexport const Example = () => {\n  return (\n    <>\n      <Box\n        height={{\n          base: '75%', // 0-768px\n          md: '50%', // 768px-1280,\n          xl: '25%', // 1280px+\n        }}\n        bg=\"teal.400\"\n        width={[\n          '75%', // 0-480px\n          '50%', // 480px-768px\n          '25%', // 768px-992px\n          '15%', // 992px+\n        ]}\n      />\n      {/* responsive font size */}\n      <Box fontSize={['sm', 'md', 'lg', 'xl']}>Font Size</Box>\n      {/* responsive margin */}\n      <Box mt={[2, 4, 6, 8]} width=\"100%\" height=\"24px\" bg=\"green.400\" />\n      {/* responsive padding */}\n      <Box bg=\"red.200\" p={[2, 4, 6, 8]}>\n        Padding\n      </Box>\n    </>\n  );\n};\n"]},"metadata":{},"sourceType":"module"}