{"ast":null,"code":"var _jsxFileName = \"/Users/nishan/Desktop/oss/responsive-breakpoints/example/src/App.tsx\";\nimport * as React from 'react';\nimport View from \"react-native-web/dist/exports/View\";\nimport { useResponsiveQuery } from \"/Users/nishan/Desktop/oss/responsive-breakpoints/src/index\";\nexport default function App() {\n  var _useResponsiveQuery = useResponsiveQuery({\n    query: [{\n      minWidth: 400,\n      style: {\n        backgroundColor: 'black'\n      }\n    }, {\n      maxWidth: 800,\n      style: {\n        backgroundColor: 'blue'\n      }\n    }]\n  }),\n      dataSet = _useResponsiveQuery.dataSet;\n\n  var _useResponsiveQuery2 = useResponsiveQuery({\n    query: [{\n      maxWidth: 800,\n      style: {\n        backgroundColor: 'blue'\n      }\n    }, {\n      minWidth: 400,\n      style: {\n        backgroundColor: 'black'\n      }\n    }]\n  }),\n      dataSet2 = _useResponsiveQuery2.dataSet;\n\n  return React.createElement(React.Fragment, null, React.createElement(View, {\n    dataSet: dataSet,\n    style: {\n      height: 100,\n      width: 100\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 36,\n      columnNumber: 7\n    }\n  }), React.createElement(View, {\n    dataSet: dataSet2,\n    style: {\n      height: 100,\n      width: 100\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 41,\n      columnNumber: 7\n    }\n  }));\n}","map":{"version":3,"sources":["/Users/nishan/Desktop/oss/responsive-breakpoints/example/src/App.tsx"],"names":["React","useResponsiveQuery","App","query","minWidth","style","backgroundColor","maxWidth","dataSet","dataSet2","height","width"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;;AAGA,SAASC,kBAAT;AAEA,eAAe,SAASC,GAAT,GAAe;AAC5B,4BAAoBD,kBAAkB,CAAC;AACrCE,IAAAA,KAAK,EAAE,CACL;AACEC,MAAAA,QAAQ,EAAE,GADZ;AAEEC,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE;AAAnB;AAFT,KADK,EAKL;AACEC,MAAAA,QAAQ,EAAE,GADZ;AAEEF,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE;AAAnB;AAFT,KALK;AAD8B,GAAD,CAAtC;AAAA,MAAQE,OAAR,uBAAQA,OAAR;;AAaA,6BAA8BP,kBAAkB,CAAC;AAC/CE,IAAAA,KAAK,EAAE,CACL;AACEI,MAAAA,QAAQ,EAAE,GADZ;AAEEF,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE;AAAnB;AAFT,KADK,EAKL;AACEF,MAAAA,QAAQ,EAAE,GADZ;AAEEC,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE;AAAnB;AAFT,KALK;AADwC,GAAD,CAAhD;AAAA,MAAiBG,QAAjB,wBAAQD,OAAR;;AAcA,SACE,0CACE,oBAAC,IAAD;AAEE,IAAA,OAAO,EAAEA,OAFX;AAGE,IAAA,KAAK,EAAE;AAAEE,MAAAA,MAAM,EAAE,GAAV;AAAeC,MAAAA,KAAK,EAAE;AAAtB,KAHT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAME,oBAAC,IAAD;AAEE,IAAA,OAAO,EAAEF,QAFX;AAGE,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE,GAAV;AAAeC,MAAAA,KAAK,EAAE;AAAtB,KAHT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IANF,CADF;AAcD","sourcesContent":["import * as React from 'react';\n\nimport { View } from 'react-native';\nimport { useResponsiveQuery } from 'react-native-responsive-query';\n\nexport default function App() {\n  const { dataSet } = useResponsiveQuery({\n    query: [\n      {\n        minWidth: 400,\n        style: { backgroundColor: 'black' },\n      },\n      {\n        maxWidth: 800,\n        style: { backgroundColor: 'blue' },\n      },\n    ],\n  });\n\n  const { dataSet: dataSet2 } = useResponsiveQuery({\n    query: [\n      {\n        maxWidth: 800,\n        style: { backgroundColor: 'blue' },\n      },\n      {\n        minWidth: 400,\n        style: { backgroundColor: 'black' },\n      },\n    ],\n  });\n\n  // Both the views will be styled exactly same\n  return (\n    <>\n      <View\n        //@ts-ignore - web only prop\n        dataSet={dataSet}\n        style={{ height: 100, width: 100 }}\n      />\n      <View\n        //@ts-ignore - web only prop\n        dataSet={dataSet2}\n        style={{ height: 100, width: 100 }}\n      />\n    </>\n  );\n}\n"]},"metadata":{},"sourceType":"module"}