{"ast":null,"code":"var _this = this,\n    _jsxFileName = \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/theme/Custom/CustomizingComponents.tsx\";\n\nimport React from 'react';\nimport { NativeBaseProvider, themeTools, extendTheme } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nimport { Content } from \"./Content\";\nexport var Example = function Example() {\n  var theme = extendTheme({\n    colors: {\n      custom: {\n        100: '#f7c',\n        200: '#333',\n        300: '#1ac'\n      },\n      amber: {\n        400: '#4B5563',\n        500: '#E7E5E4'\n      }\n    },\n    config: {\n      initialColorMode: 'dark'\n    },\n    components: {\n      Button: {\n        defaultProps: {\n          colorScheme: 'primary'\n        }\n      },\n      Checkbox: {\n        defaultProps: {\n          size: 'lg',\n          colorScheme: 'amber'\n        }\n      },\n      Avatar: {\n        baseStyle: {\n          borderRadius: 'md'\n        }\n      },\n      Heading: {\n        baseStyle: function baseStyle(props) {\n          return {\n            color: themeTools.mode('coolGray.800', 'warmGray.50')(props),\n            fontWeight: 'normal'\n          };\n        }\n      }\n    }\n  });\n  return React.createElement(NativeBaseProvider, {\n    theme: theme\n  }, React.createElement(Content, null));\n};","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/theme/Custom/CustomizingComponents.tsx"],"names":["React","NativeBaseProvider","themeTools","extendTheme","Content","Example","theme","colors","custom","amber","config","initialColorMode","components","Button","defaultProps","colorScheme","Checkbox","size","Avatar","baseStyle","borderRadius","Heading","props","color","mode","fontWeight"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,kBAAT,EAA6BC,UAA7B,EAAyCC,WAAzC;AACA,SAASC,OAAT;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,MAAMC,KAAK,GAAGH,WAAW,CAAC;AACxBI,IAAAA,MAAM,EAAE;AAENC,MAAAA,MAAM,EAAE;AACN,aAAK,MADC;AAEN,aAAK,MAFC;AAGN,aAAK;AAHC,OAFF;AAONC,MAAAA,KAAK,EAAE;AACL,aAAK,SADA;AAEL,aAAK;AAFA;AAPD,KADgB;AAaxBC,IAAAA,MAAM,EAAE;AAENC,MAAAA,gBAAgB,EAAE;AAFZ,KAbgB;AAiBxBC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAE;AAENC,QAAAA,YAAY,EAAE;AACZC,UAAAA,WAAW,EAAE;AADD;AAFR,OADE;AAOVC,MAAAA,QAAQ,EAAE;AACRF,QAAAA,YAAY,EAAE;AACZG,UAAAA,IAAI,EAAE,IADM;AAEZF,UAAAA,WAAW,EAAE;AAFD;AADN,OAPA;AAaVG,MAAAA,MAAM,EAAE;AACNC,QAAAA,SAAS,EAAE;AACTC,UAAAA,YAAY,EAAE;AADL;AADL,OAbE;AAkBVC,MAAAA,OAAO,EAAE;AAEPF,QAAAA,SAAS,EAAE,mBAACG,KAAD,EAAgB;AACzB,iBAAO;AACLC,YAAAA,KAAK,EAAErB,UAAU,CAACsB,IAAX,CAAgB,cAAhB,EAAgC,aAAhC,EAA+CF,KAA/C,CADF;AAELG,YAAAA,UAAU,EAAE;AAFP,WAAP;AAID;AAPM;AAlBC;AAjBY,GAAD,CAAzB;AA8CA,SACE,oBAAC,kBAAD;AAAoB,IAAA,KAAK,EAAEnB;AAA3B,KACE,oBAAC,OAAD,OADF,CADF;AAKD,CApDM","sourcesContent":["import React from 'react';\nimport { NativeBaseProvider, themeTools, extendTheme } from 'native-base';\nimport { Content } from './Content';\n\nexport const Example = () => {\n  const theme = extendTheme({\n    colors: {\n      // Add new color\n      custom: {\n        100: '#f7c',\n        200: '#333',\n        300: '#1ac',\n      },\n      amber: {\n        400: '#4B5563',\n        500: '#E7E5E4',\n      },\n    },\n    config: {\n      // Changing initialColorMode to 'dark'\n      initialColorMode: 'dark',\n    },\n    components: {\n      Button: {\n        // Can simply pass default props to change default behaviour of components.\n        defaultProps: {\n          colorScheme: 'primary',\n        },\n      },\n      Checkbox: {\n        defaultProps: {\n          size: 'lg',\n          colorScheme: 'amber',\n        },\n      },\n      Avatar: {\n        baseStyle: {\n          borderRadius: 'md',\n        },\n      },\n      Heading: {\n        // Can pass also function, giving you access themeingTools\n        baseStyle: (props: any) => {\n          return {\n            color: themeTools.mode('coolGray.800', 'warmGray.50')(props),\n            fontWeight: 'normal',\n          };\n        },\n      },\n    },\n  });\n  return (\n    <NativeBaseProvider theme={theme}>\n      <Content />\n    </NativeBaseProvider>\n  );\n};\n"]},"metadata":{},"sourceType":"module"}