{"_id":"styled-components-breakpoint","_rev":"35-4b6de3e99c64ad9404dd891c9d4380a9","name":"styled-components-breakpoint","description":"Utility functions for creating breakpoints in `styled-components` 💅.","dist-tags":{"latest":"3.0.0-preview.20","next":"2.1.1"},"versions":{"1.0.0-preview.1":{"name":"styled-components-breakpoint","version":"1.0.0-preview.1","description":"Utility function for using breakpoints with `styled-components`.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"files":["index.js"],"peerDependencies":{"styled-components":"^1 || ^2"},"license":"MIT","gitHead":"89e91f73230552eee01ea281de68fd705ecfdd3b","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@1.0.0-preview.1","scripts":{},"_shasum":"f8f835e522668a16214b0533df1a2521f1635d96","_from":".","_npmVersion":"3.10.5","_nodeVersion":"4.4.7","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"shasum":"f8f835e522668a16214b0533df1a2521f1635d96","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-1.0.0-preview.1.tgz","integrity":"sha512-yhwrziTdNK2NRwycCCZ20vNwERSBXMWcNMxU3ik23uWN+6MTgfVMvwaNHSsdcwPAcdSXcgJooziY0kkKMJKRcg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm2lT2awZ8hamJekrW1F+zm/YjphPIY8eZV19/+UFnvQIgZYJ49jSafg+XpbezHLcrMHhnGEpQOnCknvpuXwu7/cY="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/styled-components-breakpoint-1.0.0-preview.1.tgz_1486499092619_0.017455343389883637"},"directories":{}},"1.0.0-preview.2":{"name":"styled-components-breakpoint","version":"1.0.0-preview.2","description":"Utility function for using breakpoints with `styled-components`.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"main":"dist/index.js","files":["dist/index.js"],"peerDependencies":{"styled-components":"^1 || ^2.0.0-1"},"devDependencies":{"babel-cli":"^6.22.2","babel-preset-es2015":"^6.22.0"},"scripts":{"build":"rm -rf ./dist && mkdir -p ./dist && babel index.js --out-file ./dist/index.js","prepublish":"npm run build"},"license":"MIT","gitHead":"f3f7640a97526a9c9caf5d90aaa8512e3aa9ea5e","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@1.0.0-preview.2","_shasum":"353a8ecd7d1098c64b8d66c13653b1d2bc88a771","_from":".","_npmVersion":"3.10.5","_nodeVersion":"4.4.7","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"shasum":"353a8ecd7d1098c64b8d66c13653b1d2bc88a771","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-1.0.0-preview.2.tgz","integrity":"sha512-Fg7DI/t++jDHbDAsd/4r0rUyayrfs2yXmPHXDVeKyE5Rq+Lp/QULOU3zWsxH+cC/dhlZkQHTYK4Wx+b8GAA4Zw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzyRQMlTUTcaWZAHt6v9tAc4gw0+LW0OYBnh3uUdetBwIhALr2GbmNmBGZy3mKWEIg04USU9yQFn2zzohFGprY4Shd"}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/styled-components-breakpoint-1.0.0-preview.2.tgz_1486501105483_0.7943273487035185"},"directories":{}},"1.0.0-preview.3":{"name":"styled-components-breakpoint","version":"1.0.0-preview.3","description":"Utility function for using breakpoints with `styled-components`.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"main":"dist/index.js","files":["dist"],"peerDependencies":{"styled-components":"^1 || ^2.0.0-3"},"devDependencies":{"babel-cli":"^6.22.2","babel-preset-es2015":"^6.22.0","react":"^15.4.2","react-dom":"^15.4.2","styled-components":"^2.0.0-3"},"scripts":{"build":"rm -rf ./dist && mkdir -p ./dist && babel ./src --out-dir ./dist","prepublish":"npm run build"},"license":"MIT","gitHead":"4f27fd9297a77f4a04ca14a8da3552a19039843f","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@1.0.0-preview.3","_shasum":"c1b5f75988d4fd0bec53f0e8b1a475cf21c6f3ad","_from":".","_npmVersion":"3.10.5","_nodeVersion":"4.4.7","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"shasum":"c1b5f75988d4fd0bec53f0e8b1a475cf21c6f3ad","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-1.0.0-preview.3.tgz","integrity":"sha512-F4OunvpCA8E60LEWej97dGAKkWjMvizFR44OYL35+qDrgBHX6uLsiXeKJVOm3ffCPCUxMlZ0vpLHRZly1mlJTg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUvwCUhZTkZj0FvZkii+GwYb8Sy36p8mUKG9XkwomoiQIgRnLOvKUoUzOjZDsXlfFMtWC0dbPy7fy9Q7qmeWuuOC4="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/styled-components-breakpoint-1.0.0-preview.3.tgz_1486510201023_0.2728813551366329"},"directories":{}},"1.0.0":{"name":"styled-components-breakpoint","version":"1.0.0","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"main":"dist/index.js","files":["dist"],"peerDependencies":{"styled-components":"^1 || ^2.0.0-3"},"devDependencies":{"babel-cli":"^6.22.2","babel-preset-es2015":"^6.22.0","react":"^15.4.2","react-dom":"^15.4.2","styled-components":"^2.0.0-3"},"scripts":{"build":"rm -rf ./dist && mkdir -p ./dist && babel ./src --out-dir ./dist","prepublish":"npm run build"},"license":"MIT","gitHead":"6dfa33674629db20f7876afebe77bbccbb02d6be","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@1.0.0","_shasum":"7f14a8924db13445d38710d65b37aa1534138f87","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.3","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"shasum":"7f14a8924db13445d38710d65b37aa1534138f87","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-1.0.0.tgz","integrity":"sha512-xAQKa48OaoR+2XyRDeH8nr/WuRsHubrVAnpt3jH0ckLWTpWWTA/1etPGYptFkwcOk0MAekyMAfqFdGYq9zNL7w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICX2/7rLW+Bnev2ebbigp9sewXlDNHKB9Hbn9UT6qmh3AiAgW4D9zy0PLz3Nou0cVjYnEO2NaRf0Pd9lIvZ36gDdJg=="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint-1.0.0.tgz_1495294133362_0.2557771897409111"},"directories":{}},"1.0.1":{"name":"styled-components-breakpoint","version":"1.0.1","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"main":"dist/index.js","files":["dist"],"peerDependencies":{"styled-components":"^1 || ^2.0.0-3"},"devDependencies":{"babel-cli":"^6.22.2","babel-preset-es2015":"^6.22.0","react":"^15.4.2","react-dom":"^15.4.2","styled-components":"^2.0.0-3"},"scripts":{"build":"rm -rf ./dist && mkdir -p ./dist && babel ./src --out-dir ./dist","prepublish":"npm run build"},"license":"MIT","gitHead":"db4741e5418094dfb2f7f6530aa76874e786ea86","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@1.0.1","_shasum":"51fb474d9449e228b6f3f2cd232631ec65c149bc","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.3","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"shasum":"51fb474d9449e228b6f3f2cd232631ec65c149bc","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-1.0.1.tgz","integrity":"sha512-IXRRquJ814OYwB3WYd6kAF87DBph//MdZ4oeTGeciAUTL8aexcf1uknmp06i8ErYOR4JnWUqOUEA9I4YJRIOfA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYTQh7aXYjuWzT4oxKztZ/szC5J0vhHnAc5h4W6QRzLgIgUJfSH3tk+YcdmvFUYX1vXSZWkmc4pEOx0W/a8H0EzGE="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint-1.0.1.tgz_1495294414335_0.13650612882338464"},"directories":{}},"1.0.2":{"name":"styled-components-breakpoint","version":"1.0.2","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"main":"dist/index.js","files":["dist"],"peerDependencies":{"styled-components":">= 1 < 4"},"devDependencies":{"babel-cli":"^6.22.2","babel-preset-env":"^1.6.1","react":"^16.2.0","react-dom":"^16.2.0","styled-components":"^3.1.5"},"scripts":{"build":"rm -rf ./dist && mkdir -p ./dist && babel ./src --out-dir ./dist","prepublish":"npm run build"},"license":"MIT","gitHead":"0c583c2806ac8f8d52d1ed664042dedb6a595654","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@1.0.2","_npmVersion":"5.3.0","_nodeVersion":"8.5.0","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"integrity":"sha512-P4+DKyQAtK8PQ+rKUDjpnNirr/xfGulPsDVoN+T9QZ4EH+mSjyvRnjJX1+ZY0sbwmtk2KDJuYVu+0A8wby63qQ==","shasum":"ffdd2d7488dd409c2112112c3a5ff4ae1e2fd9c6","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-1.0.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDG/TPrZ3Cv2obGZG+bvGt4RBnM/jN7Z1lxAzoD9PgAGwIhAOQo8DaOouHg8GXp7WM+zvXcGyfDxk8BJa9p/YgEwzbJ"}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint-1.0.2.tgz_1517490731840_0.39680325821973383"},"directories":{}},"2.0.0":{"name":"styled-components-breakpoint","repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"version":"2.0.0","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"main":"dist/cjs/index.js","jsnext:main":"dist/esm/index.js","files":["dist/cjs","dist/esm"],"peerDependencies":{"styled-components":">= 1 < 4"},"devDependencies":{"@tradie/react-component-scripts":"^1.0.0-alpha.a573b72a","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.1","gh-pages":"^1.1.0","jest-styled-components":"^4.11.0-1","react":"^16.2.0","react-create-component-from-tag-prop":"^1.3.1","react-dom":"^16.2.0","styled-components":"^3.1.6"},"scripts":{"clean":"tradie clean","build":"tradie lint","lint":"tradie build","watch":"tradie build --watch","dev":"tradie dev","test":"tradie test","deploy":"gh-pages -d \"./dist/example\"","prepublishOnly":"yarn run clean && yarn run build && yarn run test","postpublish":"yarn run deploy"},"license":"MIT","gitHead":"906d0686090ea3ed688e553fc2c1fda9638aee70","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@2.0.0","_npmVersion":"5.3.0","_nodeVersion":"8.5.0","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"integrity":"sha512-iBQb4vVH7M8pC5e/QRF+e/UkGcLDENXqQmMrgPT2ZxN24p4VIzDGM2UauI8xFDHlzAi/vQ0eqmLgKS8G0m0TGQ==","shasum":"79272e2d21e90bb4ba70120185520279a7f70f90","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-2.0.0.tgz","fileCount":3,"unpackedSize":8309,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGNSiSDwa11FMPnSC0kRwUa3P1gLDyo98t4Su6qhYQX+AiEA8/SJEwiaElse2tBSeFDcqXurzAG59IyEBSn+sUkRxQ0="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_2.0.0_1518440793877_0.036437772371577415"},"_hasShrinkwrap":false},"2.0.1":{"name":"styled-components-breakpoint","repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"version":"2.0.1","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"main":"dist/cjs/index.js","jsnext:main":"dist/esm/index.js","files":["dist/cjs","dist/esm"],"peerDependencies":{"styled-components":">= 1 < 4"},"devDependencies":{"@tradie/react-component-scripts":"^1.0.0-alpha.a573b72a","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.1","gh-pages":"^1.1.0","jest-styled-components":"^4.11.0-1","react":"^16.2.0","react-create-component-from-tag-prop":"^1.3.1","react-dom":"^16.2.0","styled-components":"^3.1.6"},"scripts":{"clean":"tradie clean","lint":"tradie lint","build":"tradie build","watch":"tradie build --watch","dev":"tradie dev","test":"tradie test","deploy":"gh-pages -d \"./dist/example\"","prepublishOnly":"yarn run clean && yarn run build && yarn run test","postpublish":"yarn run deploy"},"license":"MIT","gitHead":"be4d71c47ff9186d76f28fc659c65c26eb626cdd","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@2.0.1","_npmVersion":"5.3.0","_nodeVersion":"8.5.0","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"integrity":"sha512-iD4syPw5Mf/btkWS1WQAMbWrrlWB6DYgXqO9d7BmpQvUiIB/qfXe/554jw2BK74G5AWr3j1nF+9/2Z7tqiA33w==","shasum":"c514e8f36416ab0f2084e5a36022dde96d63ec90","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-2.0.1.tgz","fileCount":9,"unpackedSize":26998,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDo5gEnToQVI1eYVMipwi0rfcSES4dsppmanCg9wgEAswIhAPKsxdbS3zpPIUtjl5SHCxzJYOOAHoLlJCWM68fRxpxI"}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_2.0.1_1518443091985_0.5550484087498853"},"_hasShrinkwrap":false},"2.0.2":{"name":"styled-components-breakpoint","repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"version":"2.0.2","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"main":"dist/cjs/index.js","jsnext:main":"dist/esm/index.js","files":["dist/cjs","dist/esm"],"peerDependencies":{"styled-components":">= 1 < 4"},"devDependencies":{"@tradie/react-component-scripts":"^1.0.0-alpha.a573b72a","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.1","gh-pages":"^1.1.0","jest-styled-components":"^4.11.0-1","react":"^16.2.0","react-create-component-from-tag-prop":"^1.3.1","react-dom":"^16.2.0","styled-components":"^3.1.6"},"scripts":{"clean":"tradie clean","lint":"tradie lint","build":"tradie build","watch":"tradie build --watch","dev":"tradie dev","test":"tradie test","deploy":"gh-pages -d \"./dist/example\"","prepublishOnly":"yarn run clean && yarn run build && yarn run test","postpublish":"yarn run deploy"},"license":"MIT","gitHead":"3722b666775073bce2e7a56f76654fb04642cd79","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@2.0.2","_npmVersion":"5.3.0","_nodeVersion":"8.5.0","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"integrity":"sha512-N4HxBqTaFmdY/6AdgF9WX+ENTvSQ5/E23u0y9Krt8VmfzeTwaBipCkrdKwRIzLYO41x9Xn1S/Xevw2XZEUV2Qw==","shasum":"c55dbab794e9ff3a4f813349e2b35727a9364b09","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-2.0.2.tgz","fileCount":9,"unpackedSize":27640,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJJiC41m6ddBFJnVC7418KUJD4UMHhdmFudqfIEYHZ4AiEA5syS2oDtx2Wwhvv/f7srObimNeU4VfVBMFPMA2K22ho="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_2.0.2_1518701529054_0.4432661258322108"},"_hasShrinkwrap":false},"2.1.0":{"name":"styled-components-breakpoint","repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"version":"2.1.0","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","jsnext:main":"dist/esm/index.js","files":["dist/cjs","dist/esm"],"peerDependencies":{"styled-components":">= 1 < 4"},"devDependencies":{"@tradie/react-component-scripts":"^1.0.0-alpha.a573b72a","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.1","gh-pages":"^1.1.0","husky":"^0.14.3","jest-styled-components":"^4.11.0-1","react":"^16.2.0","react-create-component-from-tag-prop":"^1.3.1","react-dom":"^16.2.0","styled-components":"^3.1.6"},"scripts":{"clean":"tradie clean","lint":"tradie lint","build":"tradie build","watch":"tradie build --watch","dev":"tradie dev","test":"tradie test","deploy":"gh-pages -d \"./dist/example\"","prepublishOnly":"yarn run clean && yarn run build && yarn run test","postpublish":"yarn run deploy","precommit":"yarn run test"},"license":"MIT","gitHead":"e0de57e20b61cbda6bf34a5d2fa67edfef912804","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@2.1.0","_npmVersion":"6.1.0","_nodeVersion":"10.3.0","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"integrity":"sha512-zqHn8FHHGJD3t8wLdjqQcB3sJruPKnok6YjVTcJCilGDRXS9r1pxX0n/SE2p9CqcwB6GRDTJYwDTZBXVgUUxDQ==","shasum":"839370362c1e084a23d1155286c9a8a1f2af853f","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-2.1.0.tgz","fileCount":9,"unpackedSize":28056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOhh4CRA9TVsSAnZWagAAzQcP/2aR9nu2wB2XDh2uwbLt\n78owBY4opCX9pDGWDhXLE58ZGLodIIafHNDD8jaca9e29vOm+vtLuBrNgr/u\noKfTwYeOVz2gI5UdF4+j64Ug2uZ7A7rPFu6qTCj/2zIJTEkbc6rWPPW56cUC\n6/LkLzAJDs18PTJnIBhkplHBty5J/LdNALawJ1SC4DJZ5qRUq3WYegkABE+e\nV3vsL2WKfhjpa+ooLE1tMQfIlHT3lczSMixuokyLIr+10As+eJmeSO7cPxK9\nTkWtpw1kqwOxisx8NVXeN71rOqKvpltnA16NkWSQaXTgcvKx/Jv+sYRqsziY\ng4U4zsTpl6fkxMK0tGvm26pRUpavQKcmoLZM5LtRj3ETRIkipEqMU6YoQf7P\nSkfL35FWOddGGeZvqSwpw9pd80tgPSAQ4sTKy511tb9W9yhkgIOm9g1XqT6r\nfios3tbh/GLe0ZZYi6jKWoapynXEkcObJ1hhdiGMSQOHaN81DwZq9oVpUTV2\nItrojiqJzm7D4lU6eM53DhXTbnqYAgY9aW7QSicVKSXrGteq3G7C42ggz9uw\n6ZSjrXa9mR14gW8G88W5wVjstMxXd/9zYL3sR8CUQ3XA02r7v36DMQGnFDce\nM+R+X4mYWuZ6qZUGLzJLaYPR2lbQrFWE72ydFSHqa8oLtPc0aAOkAe/KhgsW\nCx9u\r\n=M7DM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICC/FeSnFXpU7li62uY5plvEhWPXG1MYXUFzWWFzqR0vAiAa7qNK/8FN1gDp/iQJE4nTWqHrkPO5M40H0PGI9sP2gA=="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_2.1.0_1530534008808_0.7503888004700898"},"_hasShrinkwrap":false},"2.1.1":{"name":"styled-components-breakpoint","repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"version":"2.1.1","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","jsnext:main":"dist/esm/index.js","peerDependencies":{"styled-components":">= 1"},"devDependencies":{"@tradie/react-component-scripts":"^1.0.0-alpha.a573b72a","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.1","gh-pages":"^1.1.0","husky":"^0.14.3","jest-styled-components":"^4.11.0-1","react":"^16.2.0","react-create-component-from-tag-prop":"^1.3.1","react-dom":"^16.2.0","styled-components":"^3.1.6"},"scripts":{"clean":"tradie clean","lint":"tradie lint","build":"tradie build","watch":"tradie build --watch","dev":"tradie dev","test":"tradie test","deploy":"gh-pages -d \"./dist/example\"","prepublishOnly":"yarn run clean && yarn run build && yarn run test","postpublish":"yarn run deploy","precommit":"yarn run test"},"license":"MIT","gitHead":"13ab2b469dd59b77c53bc38bf356cbec905053d3","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@2.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"jameslnewell","email":"james@digitaledgeit.com.au"},"dist":{"integrity":"sha512-PkS7p3MkPJx/v930Q3MPJU8llfFJTxk8o009jl0p+OUFmVb2AlHmVclX1MBHSXk8sZYGoVTTVIPDuZCELi7QIg==","shasum":"37c1b92b0e96c1bbc5d293724d7a114daaa15fca","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-2.1.1.tgz","fileCount":9,"unpackedSize":28052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb1vhDCRA9TVsSAnZWagAALjEP/0G5GhqSfn27sEw8gVCV\ncQD0y1mImaTAvGsr4SgErKs3BwTMo+G0WUtjp/lFS1amLPomz0yyVwoXdBKn\njpJxWasDBgkap7r6DHJ7NlX2ErgJE/MfaDFUvy9+bT6xG83lxOc3yEi6xc/1\nIDtQ6mpSuNkt5hFQdPIyJiYIlBF1qHLEuG5GLRKwSTTFCNXXiD4+TWpgp/3P\nS1euyDjMLrKFREpv5EDo8mZHkjPCILMujX9VUjHB09WUHjsUWoAXr33CmILp\niq+HsGwLTtGoftOkQ4YmwbveOD948J76W1a+duJJw/EmAiF+UPlOLlxugmfy\nkcdncD8yicUDagYPv1FDD4Xu/4gfafWk5Lr5I5xIgLPtniw6hKry9gGda/Du\nPaAPg66GRR97DbLsCOO5dOwGvBQwbVqAz2Zyh0vTyPzc7dAHnli98HT2PEG5\nlnzYDIjEmGgqXrWu990mp2kxb7KutDSp2nAruYC59QjP/RIqukhlZhN6X0QM\nebOLOjuVRvNQcREdTzUaYhVPGDdZadSlnZLb4mnO+J0/hVwOVnb3x3Gr0kGF\nYkEJow2iF1SAuzTT+Er7IoYS5QC4DG0zPBIGEhsA5Fq817iKwnBH5g8HJD1A\noRM28eI1vgW0/uN7eG5KAxT8zyaH4064XCSE03imxKV5//AUoheCzPAcunU7\ngXWH\r\n=w531\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5wwqZypA3gWur5NwhLusv+l01wWFADS+5127p40dLuQIgYGa7aQ5rlIlvZeMTLZzNwdTlHZmDUqvybmCgL/YFyzU="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_2.1.1_1540814915151_0.7639131922063678"},"_hasShrinkwrap":false},"3.0.0-preview.1":{"name":"styled-components-breakpoint","version":"3.0.0-preview.1","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json","check":"yarn run check:linting && yarn run check:types","build":"microbundle build && parcel build example/src/index.html","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","dependencies":{"@jameslnewell/jest-preset-test":"^4.0.0"},"readme":"# styled-components-breakpoint\n\n   [](https://travis-ci.org/jameslnewell/styled-components-breakpoint)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> Have a look 👀 at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n`Heading.js`: Create a component using some breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n`App.js`: Configure the breakpoints\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nexport const Heading = styled.h1`\n ${({size}) => map(size, s => `font-size: ${sizes[s]};`)}\n`;\n\n// font-size will remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### defaults\n\nIf you don't provide any breakpoints, the default breakpoints that are used by the `breakpoint()` and `map()` functions are are:\n\n```js\nexport const defaults = {\n // targeting all devices\n mobile: 0,\n\n // targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode)\n tablet: 737,\n\n // targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode)\n desktop: 1195,\n};\n```\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"a810a9229cd595e9bf6fbb2460c75dfd484d6ad4","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.1","_nodeVersion":"12.9.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-3rkExoZgQ/CIBrHp46STrQGwpr97tESXXjZSPE1lfaZaBRZlNnqDCj2/9mmmIq9ZwbU5EnasZrp80rJFX3Fiiw==","shasum":"efa55033e04222a79fdefe83b97e3faa92168709","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.1.tgz","fileCount":29,"unpackedSize":685949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkfC3CRA9TVsSAnZWagAA6TsQAJ6xO70zJcUNEH5lW92I\n+9+I3F+X+K22tfsVVfiCmxvsHDfMvZlNcOtrmZhsZboV5aK1pejF+pA9i7z+\nVmCfWyh4qs8NkhiezYT86TkUlQgWundwOYTgCXjMMWMtgzs1zaTMrIhfkPc4\njbP4dAjmbzYjlkjUoOst1xYxOdpq8273smyV28NdVOYolw0QA1SMaCfZIGER\nhgpN7M4rb0BaWD+TGfsIh86pKJ8Q/ERMFocNI2v6SUy7VGiPNhVrHeGAPYh9\nKPWRTFnSiTR2c8wPhKvn75tZ1gcixPZcaP8VWp0dmLmaK+X5eHhKAB675dU+\n7MXeI0tCv1RIaW58akwLCOont2CieYOAaZQZuqsxun74NI1ISyO1dwhxUKZP\nbC9qK33zvw2/ydcNYbsWt6D0KCkUztmx61iG8g4XIlEFtgGd9gw2fcI+d6TM\n2n2BTx8E0h2ggmqdoyrzNKtLzXoa1jsgxHoodVjO5iodi09lc5pDSASgUJa8\njbDPb+xu2RWOOxO8X3s54bMpbMNGHUTk8qIDMWMz4Yc6dZYCdhk4tNEI5DIb\n5Ll1E19afp6RKkfCUFPWzAaS35mGvuWfHTSOSKhTwNlID5rWRi9kbBATBSvT\nrWeWAWra+FUVyrvUD+wBsPaxl22Pv7iGLiPaf//01L8mqsUcB+sCQj8FhiQ7\n5jqj\r\n=jUfl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUDD4ZFphUaQgLmXMhOzeObcC4/pVjP3L4mUgOUzM0gAiEAssRok3N8SjBzo0Zdr0sShXgVqkYNWVfgMWl7H6XbZ/g="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.1_1569845430914_0.8799747566867013"},"_hasShrinkwrap":false},"3.0.0-preview.2":{"name":"styled-components-breakpoint","version":"3.0.0-preview.2","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs","build:example":"parcel build example/src/index.html --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","dependencies":{"@jameslnewell/jest-preset-test":"^4.0.0"},"readme":"# styled-components-breakpoint\n\n   [](https://travis-ci.org/jameslnewell/styled-components-breakpoint)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> Have a look 👀 at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n`Heading.js`: Create a component using some breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n`App.js`: Configure the breakpoints\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nexport const Heading = styled.h1`\n ${({size}) => map(size, s => `font-size: ${sizes[s]};`)}\n`;\n\n// font-size will remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### defaults\n\nIf you don't provide any breakpoints, the default breakpoints that are used by the `breakpoint()` and `map()` functions are are:\n\n```js\nexport const defaults = {\n // targeting all devices\n mobile: 0,\n\n // targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode)\n tablet: 737,\n\n // targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode)\n desktop: 1195,\n};\n```\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"a810a9229cd595e9bf6fbb2460c75dfd484d6ad4","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.2","_nodeVersion":"12.9.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-FI80IbLmzyyHsR0bdGhao14rLw9zKiNDVcMbda2r94al24ghiF/YoAWqbhjJ0ZF/n/0EnYoG/TEX/3frQAQuuQ==","shasum":"cadf3744edbbf15da4d11db217576676c0518908","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.2.tgz","fileCount":24,"unpackedSize":34287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkga2CRA9TVsSAnZWagAASAMP/jFM2Dye+/peD5Xgucbx\nb+GFdXPcFNsTT7j1bWCvOZzNDgHgE+W227egn2xojvScDATje+yegTitGEX9\nziz4cvNDJQCKTAJVWovprLtFmFdK21Mq1BGNmmMpqbjclJC2H2gDcPfVXFhC\nCvDpz66xW99acIqEUj22XJvxcHdOTv+rA8hQX3ckEoSYGde98IgmbRMSipMZ\nUJ1kVFsWqkn3BaO5rF8aV4jJj7XmRM+dMPLdIGRWRcC2jM56lDj5UytFju4k\n9ThoeQ1qUTgwQMJAbDfSpqtLK4iTT9kAH1iTxlFdakYqS/PP14BVeIsJ5Gir\n+2K0sllGwYo9oKEm7MKsg70Ygkxx3Rdo14xdeMg8/i9Gkkig3M5YYlQGQKd8\ncRWGuZkuegfSA01/CSElmJ3sCfttfuT/mjQ4PEwBg1zaD78C+j6YtvTJllam\nXUDHg+uu/HTqscLf6osTq2Pq6j6wPN0xILVYa/F5WjGiNceSy0obMPttArSz\nGfkKCXy6Od//9U4bl5KBwz1oywgY9vWyP2TcVzyprRyThW7LYQdrS5N2NjXz\niw5/lTP2waUQbyPwzkU65A/vah1f9xpmW+PmhcJHVO+P2hMML0kUVKhWCge7\n9O7+mwbff9IkK0tsvZu2jS93lNbg++4LYLZAbFQgwxF1rUYpzhOyGiUwHc44\nuTgP\r\n=LUFh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBlKdu7XYm1PTlKzH30QanEug62WRo3fgUH3btSlFDhUAiEAksCSBaXItyDdBwfVu5u5iJXIyrbt01Nu36IyFEsNRXc="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.2_1569851062072_0.9620134782623744"},"_hasShrinkwrap":false},"3.0.0-preview.3":{"name":"styled-components-breakpoint","version":"3.0.0-preview.3","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs","build:example":"parcel build example/src/index.html --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","gitHead":"a810a9229cd595e9bf6fbb2460c75dfd484d6ad4","readme":"# styled-components-breakpoint\n\n   [](https://travis-ci.org/jameslnewell/styled-components-breakpoint)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> Have a look 👀 at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n`Heading.js`: Create a component using some breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n`App.js`: Configure the breakpoints\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nexport const Heading = styled.h1`\n ${({size}) => map(size, s => `font-size: ${sizes[s]};`)}\n`;\n\n// font-size will remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### defaults\n\nIf you don't provide any breakpoints, the default breakpoints that are used by the `breakpoint()` and `map()` functions are are:\n\n```js\nexport const defaults = {\n // targeting all devices\n mobile: 0,\n\n // targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode)\n tablet: 737,\n\n // targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode)\n desktop: 1195,\n};\n```\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.3","_nodeVersion":"12.9.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-tmqPm9hDn7UIIFlxs++9f6A8AyFkvwiNpaAuOjlCUrx8SbsFxIv62P6qGMcfAzCWgnP1RZ3G+zUwHatxNP8P3g==","shasum":"b1ae783e30eabd612d9bb3b96965abe3f7498ecd","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.3.tgz","fileCount":24,"unpackedSize":34263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkgxTCRA9TVsSAnZWagAAiv8P/0j2ALR3rjL9bg6469By\nEUTcFcPz2+s2OGxi6oWQbejr2H36PgG9e8dESByMwBsiGsgiErL7gwqKsH9e\n/3r6OFEYbBED6tuAcCMSAwaMxx+I7zJ5KRGE7IViUO43EJxk/DkoPL/LH2Zr\n8uOo4tKGDbWBkSwx4qvHWb2jtojTZ5ejD1NvKEyFyK1afz73eHkzr5ssqUot\nScQVlqlxEGakdrsNywzlQUmvCj2h1BCRFTuDxr8UtvW7idCAEv5cWY6mNYeX\n4Un29ztLu3KnPYGAJ9LUmedE75te/jo5s3bmTUi4VvISXBh7SlKC8lETqJCZ\nhyHkxKZf4EhL0Tr5aEDJH2Ha2qAbk0VEEpQu7HDwzmH5hzLKTa4qOYpwJHou\n9ABmteRkPAhva0J/Yfja2cN95XTi6tbY8/3wdaBumKFjhy9iLzLDr4IoqMEu\nZjSepXLLkmlJa689QqD7+u/7GuBll7sKlN1HAZCf73TDT4AJJ0Nff8AbnFB5\nGs2+XIWNSiDiVTrYo04/JIqOZVm66AVgQiZmbDO28RzZUYY5cKpjc5z41+qS\n282+Tcd7IAos3Kvet95Ap5f9zAyp8HHVsac3ZGM9zS7H6FP8lMJRSwe+uxeY\nID2af+RWczzRzG5T/4syhSeYlJFXWtgLFSepUqO4e/qdw7Nq+/2nDozudpFB\nzxD4\r\n=TDLE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKh978FlJ1Gjn84s92ih1o/BrX68/UphyNB1UxuAO6SAIgZSrnVaBuxnWtBYF3sAvQD8Dbbl7XVC6oC3SeV2n0GRo="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.3_1569852499202_0.2333382675436193"},"_hasShrinkwrap":false},"3.0.0-preview.5":{"name":"styled-components-breakpoint","version":"3.0.0-preview.5","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [](https://travis-ci.org/jameslnewell/styled-components-breakpoint)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> Have a look 👀 at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n`Heading.js`: Create a component using some breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n`App.js`: Configure the breakpoints\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nexport const Heading = styled.h1`\n ${({size}) => map(size, s => `font-size: ${sizes[s]};`)}\n`;\n\n// font-size will remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### defaults\n\nIf you don't provide any breakpoints, the default breakpoints that are used by the `breakpoint()` and `map()` functions are are:\n\n```js\nexport const defaults = {\n // targeting all devices\n mobile: 0,\n\n // targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode)\n tablet: 737,\n\n // targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode)\n desktop: 1195,\n};\n```\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"85b6e377d1fe083f89cda0b42c3130824907b6c5","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.5","_nodeVersion":"12.9.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-JHCEAO+5XT5AKHrolCpmb/ej6SV/xeSAMxpCNNvnUK3Jo+DOBVSkCVGahVj4rGrdkgpGxSKbByXySx2nQqkhCg==","shasum":"f081e7b27a62faf16526e1c05fbae31fb947df87","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.5.tgz","fileCount":20,"unpackedSize":31004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkhwUCRA9TVsSAnZWagAAbAwP/AuG/Bgy5cKiAvBDm/3c\ndQ0qYxSWX/Ga7QvUKqrCaQYvDqfhLz9TLLQP4PVr06rqjGvF8+5UyXaJBh6F\njkqcrtxXvvV1QjVMbTUIOIOaFzBBFmcr7cPcTDzeH0oSa36AkGkpeDe7xCIb\nW2rkLNnlSOyT8vFvZO9y8z3P2BraZnbsOf1BI5pRvS+Y613S/KoLlINKatFc\n9Q3ohTQSfk+6I+ifPuMcQL9GWHQbpO/62ZoS9DscnsAdPqry4bvdIhEn53kv\nFChzFI/qWb7lyCQwOtIjq+h6xmho/n1i/CLO9AqpoYPiKa5MHSGhNXtWh3HK\nzaEvv2a8p2eGjzl+qGlRzJVA5mroqOtRjJOiA0PIAKpqIIOwo3NZkgXjsvNC\n4wZjX/RDEmc/g6gArhf+812kYMwAo0rRLhe2g3YKdG2ZaV5k7kpmQu3qxDs+\nE+Ddl778sVD7zEnKKqkGNsVL/ycWqBr1jFZdsgXoDHRh6T5ZbeK+nDT0/6VS\nGisYHUdtQBO6bM8eScOqmG5/JhTHEdvgraa+o7JaeU1qNMHagObW4vkb4ThS\nQjNhvnCDcbMaPtFZdPDJ2MQU4/SNxWpmrQY6+MrI6VuXNS2q4MQFctezwqR4\npM4LaqODk2vQOgmXA9Pn9udsEKw1mlaPhk69IylZHgXM7Bobiyz+3osvy5i8\nYHPV\r\n=EhYy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHScqRjvIj0IEcCsI+7X2ulPhyp1ywpatxIwZSPY+U1AiEA9gZi6m6FTx0T7b170k+GyjraxoGcQRSgJAtB885b544="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.5_1569856531673_0.9260412090599903"},"_hasShrinkwrap":false},"3.0.0-preview.6":{"name":"styled-components-breakpoint","version":"3.0.0-preview.6","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [](https://travis-ci.org/jameslnewell/styled-components-breakpoint)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> Have a look 👀 at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n`Heading.js`: Create a component using some breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n`App.js`: Configure the breakpoints\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nexport const Heading = styled.h1`\n ${({size}) => map(size, s => `font-size: ${sizes[s]};`)}\n`;\n\n// font-size will remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### defaults\n\nIf you don't provide any breakpoints, the default breakpoints that are used by the `breakpoint()` and `map()` functions are are:\n\n```js\nexport const defaults = {\n // targeting all devices\n mobile: 0,\n\n // targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode)\n tablet: 737,\n\n // targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode)\n desktop: 1195,\n};\n```\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"72335243b41db06129d15abe406da9c221e5bf6c","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.6","_nodeVersion":"12.9.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-Ng2KnYES3gAJDfEbUrJDnIOADLEND+XsdOqWNFhBgkmZ7dwTWtPGRRkU4KEEo7bjBvH8DuPJQh5j3c2Rq5ozDw==","shasum":"a8d74dd7063adc4130da8f5ebd683395ba15c878","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.6.tgz","fileCount":20,"unpackedSize":31095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdki0DCRA9TVsSAnZWagAAR3AQAIFyrsa6z8sEE7ARX0xz\n+Y7h3x3AOrUFifGU49ELyNVxANOXn/HMWsI3nZvFedSOz/4ZQe/BT3/It3tj\nt9BrEzdeHexiAMHDBmn+lgiCgH6kVvMI+t53+U9NC+nHsfBZeRZr5r7+SdPS\nxmZiyBNmXIA+VC9Fiyx/A9pQuxC6s1pOGmJdZQEps1LIeGYhyFm8nOPXXwZi\nXwLLORRBaM52dZsU9iQCkVAiXa06xasjuSjQn75M5mIZkB9FVuxtz6yfZJeT\nAJuVxQqtZhITv1JfIAPqf7rFoP6Dbv8PFoWJea8+sDvllyDsSLpLpG8+esvX\nKEikZUvR/k/H1wL4Z3WafgyFql9CZw2y7KC+EqAIyMDL8WBoMzccRXr29fdi\ng916H7lp93WuF9nIloPlnkr0Fco9TRADOOBzkEh+PLWYHZq/wEBWXBrZBYZb\n5TGOyJUiC0efA7TeW77F3ICoin4sS7AVYfanTsr9BdV7mTOPgJC1NNXmkiRG\nxySor5O13Pr9C2SQcxPe87f5VrZfiiRZ06EfbJ3JSAUj2X5dXMbkBRyB487o\noZV7MMvmdcUCvwBepE/vIBJcpLf6j7rmDXMsalFydyD8/aPc9ITCALkU3G6R\nqNBZOscx/POmlKojDDCEW8xIEshD+gmOtvpDOjzk2UlfOEmYNLMMTFZayunn\nPckP\r\n=o7BC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDf880SaLbJLuS0AEUW97G9QMCsuG166GUQUTwyeqdJAiB/z0+om2FG+WokGTm6pXsFyz0D18VXuwzW4LglxkLTKw=="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.6_1569860866710_0.6644390547336738"},"_hasShrinkwrap":false},"3.0.0-preview.7":{"name":"styled-components-breakpoint","version":"3.0.0-preview.7","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [](https://travis-ci.org/jameslnewell/styled-components-breakpoint)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> Have a look 👀 at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n`Heading.js`: Create a component using some breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n`App.js`: Configure the breakpoints\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nexport const Heading = styled.h1`\n ${({size}) => map(size, s => `font-size: ${sizes[s]};`)}\n`;\n\n// font-size will remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### defaults\n\nIf you don't provide any breakpoints, the default breakpoints that are used by the `breakpoint()` and `map()` functions are are:\n\n```js\nexport const defaults = {\n // targeting all devices\n mobile: 0,\n\n // targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode)\n tablet: 737,\n\n // targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode)\n desktop: 1195,\n};\n```\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"c8049cb25315828d12ece416588f37ddb1bcc7fc","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.7","_nodeVersion":"12.9.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-ExQZdsp0EU7KHaARUt/V6qc6/x9JblR4YOsdMcC59HPvf30XSkIy70qk9lo+Hfxwd39epHjU8LjyrQyBgzSwCg==","shasum":"3b4de176d5df9dc1d8450f0161962df4ba453a91","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.7.tgz","fileCount":20,"unpackedSize":31233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkoMeCRA9TVsSAnZWagAA8cwQAITSG/tf7cuNxPB0vhyI\numQ3Xy2mg0oy64bQmpqNFSuTEmSLwiXYJor1M4KNrQZ8vWhF3NSbByVXZHDs\nb/kkbT00o6wB9/XSausceAp7gvfDNCAmCfvhOzw+WF9bZaFJsIyowNky8GN0\n08kQBf1wQjRv9wLa12f+KCqZcMZo+R8TgbvQhVWlz8b9P3MSusSpmeVWeR6L\nNL+qGapHGNdBfK6FvsGWEW8W1I+92Pk25G3jxsdKSYVyVehIIrh+07YwDWae\nf+tD+BkTWJI10nYDX9m4YfGXWUwvkUphNipVdQAb/+VU/4zg/EBa1vXuzBia\nR+ybCXvKNz0gDB+37HnVnzAitkKfGb+RehbMJyB5o1YjoWOq1z7K/NuwM+Ol\nqfecKcvdt9iBpMWnLmZh354svldp+fz70jAK6VEH4mvZ3gmOzqzz+uTWukB4\n9CLXSIOBaRZvbr2E0dQ0bioJfY3LW5Wue09/xUN25yAUjPJiUisgTtYubNux\nQrJEYeTAZUnohQtNghRJ9H4YeR3Qnnbu0vWwY6xt+FwpxwkXVcQtvLKENy0W\n5HBF9ffYrDR/D5vVlLMuIWONMhQoHFztY1LP/QJozsdSnw+Av1dBSf4NfULP\ngZjcvV6ICSxVzYtezJl7+jrpkWKyQD9sKHU+mBz91/OULDhrj8ldUhPe0B7+\nTME7\r\n=4XPK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFsupFRaqsTl7f6q4QRaBh17BQytGdp/JHwP7OeXMHgAiEArLAQurHEa9gnjzfhdO0X/cYRfRwT0+DrtIg/23rPdZE="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.7_1569882907774_0.052206782596337264"},"_hasShrinkwrap":false},"3.0.0-preview.8":{"name":"styled-components-breakpoint","version":"3.0.0-preview.8","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using themable breakpoints\n\n`App.js`: Configure the breakpoints\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n### Using static breakpoints\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nexport const breakpoints = {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n};\n\nexport const breakpoint = createBreakpoint(breakpoints);\nexport const map = createMap(breakpoints);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {breakpoint} from './breakpoints';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default Breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"329c0f58cb21a2e696d455acc88e457e93cb9dd8","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.8","_nodeVersion":"12.9.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-HDNB8o+Bp3S1vpITVRGn9363TeQraoPS0HyB7E+9A+tNlD2rIKFSAua0f5xXItxgSm0ZPGwPWyg46Fbnn9LEVQ==","shasum":"e8eeb9c8526cb32b0f33ef7d933f8458a32e24af","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.8.tgz","fileCount":21,"unpackedSize":36050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdks9OCRA9TVsSAnZWagAAguIP/08hiiMZD5z6XwTaEtnS\ntwmbProurJVTw6nqKBdXFDJ7aWbEWB6wjuyy6xeEadN2zPEUk7SXtqJFCMRi\n64kI+suRAs4PRzXBBCeXuHvKNN2pxkkijpTkCakNgOhGeRUt+JKwQ/fywmma\nK7gI6ianvmniPWmSNMxBt6lAHWAueVC1U7PoGGxi4Q1XBjnOZ7WaoGdkATUM\n0dGztmSdO0yYNfwLoz2Xw72HuGvqICSB34p4v0+wwgu+EjdD+wIDYQegHmmp\nCOezvPvbtrcWx6Mp0uhR53xoCUfNGYwPbs5w/8I71iozEpt8uEJI14gJQu6o\nME5HSFVErRs7YmoDLEPOi0L1BoQsuvOGC+KBvkLxFE3uVBSeKUo9F+oHRGzm\ngt0IG5EDgQXedUc7ueSqqfFOSolcuTNKYb3ty4X4P2/V0ActKQQfsn1RKoyf\nKitO+xL1D79TsKeT141rPkMEqU8/iagQNKIV0+9JydDSq/oVUcZloxFktiG3\npXK8atGuC/aC1HadRKFCDJFO3Q5TbHNWhePI7LZ8S0lM99/+16CdQmNHeK6H\n+tcY6FnWyTC7wsQnQy8tjuizgDv6xcf3C2mQEG6iE7+FzTFtH2tOCXAS3eRd\nIHMEyWxRieLlO1D6XxjmbOpLSOZrceZcxiom6/1KmyzVUxCbfZwMh0x6FCIB\nL7Nl\r\n=KpKP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGqFwKx8b9wALNX+heEN1xIAeebU4349W8EuxjFoGp/AiEA2g02SDxB8fZ2jSwPgMhkl41zJIyQ6qDWF1nyGz73PWM="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.8_1569902413985_0.9379345779302655"},"_hasShrinkwrap":false},"3.0.0-preview.9":{"name":"styled-components-breakpoint","version":"3.0.0-preview.9","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using themable breakpoints\n\n`App.js`: Configure the breakpoints (or just use the defaults)\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n### Using static breakpoints\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nexport const breakpoints = {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n};\n\nexport const breakpoint = createBreakpoint(breakpoints);\nexport const map = createMap(breakpoints);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {breakpoint} from './breakpoints';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default Breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"3ae0e266c60d9871bec5c4a39fd005a8d6eaaad1","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.9","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-gDrMPKW8S9UYiBGEyG/ZnrcUZqoFV5MCpUhl1Qq/vnlTH+cy5froMbB06+zvO/qx/MJTAQ0+yf8bVJM/Sil4jg==","shasum":"8f4f72515037e8aa3ef3b2d4a39db5eacc34dc2d","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.9.tgz","fileCount":21,"unpackedSize":37483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlIdqCRA9TVsSAnZWagAABikP+wYgYS1bT47+Kqe0zUGi\nUNCCWsvSLdfRiVahAgzMpYdfJOxQbZDPR4WKCdaFkKoQFkn7Wv9KWdgZcsZC\n6PC7aXAHhYt+zwU2ht5J7kHsEVqWZE4u35hlimTh65KQ/kYQ9WAZTRG1ckg7\nd9/dcrf/ekt9XL1PnmoBxgRfD9oa4nOAO4wYAFcToG1a0TbNNBXQJZUs1xQX\nfKnINg4mepuI20UgyuX489aShrRieJNKdfCdAAo/PXr0CllJz78H0qCT3k85\n8o6bQYujPtnGaUc8I4N5q15+xWcaXmM7Duo80SBG+fMSAa8i7WLV0YprqHD0\n9+hcf2ahz9BHJ6ZahfH+gBAibsHFdjj7X0t7jmAyro4ZOQ2hqfaXkyNMxb3w\ndD5Q+tQQ/T66mUVOC+GVmFODuSHDZ9jSHTXO2eVGLPCpBTfi6xhTU/B9jELw\nHdXuEy9qwVcxbI6f0bnDRxKUU0FGzdAiTb6e2XCc851eys1cUU/8ZUUK7Izv\nfRZxzEcn3ThFb9hDkWdMn2sE9hZ/x3vxiqZdK15GoJVQ4Xw+5NxC64wLbfpj\n2YzvgdpJrenf47v8NyAc5J0PNFlp0Hzw1QHt7rTe/lwnsk9trbj1co8ynt3P\naZe0pjk47oBUMCrcZfZ90Um2Fti0ADT2QaNrk0g7Wy2LT1rThyQRFMsv74go\nadIk\r\n=Wof1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxVOGxNFRyU5pemEA5QT/+d97gCyqzVMtHPVtrG63YjAiEA4Q0smA8AEfp/BwJ/SDix6acgw92Lx7wzDMRB1x9y5XY="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.9_1570015081792_0.16962457358830507"},"_hasShrinkwrap":false},"3.0.0-preview.10":{"name":"styled-components-breakpoint","version":"3.0.0-preview.10","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using themable breakpoints\n\n`App.js`: Configure the breakpoints (or just use the defaults)\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n### Using static breakpoints\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nexport const breakpoints = {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n};\n\nexport const breakpoint = createBreakpoint(breakpoints);\nexport const map = createMap(breakpoints);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {breakpoint} from './breakpoints';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default Breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"ea97d5bf8b39e0a0b4a3b3dbc410090e1bac7a9b","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.10","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-iGxvADBhBQSv2hqa9pUuRn5yI85N7+EVUJYUdSii3KcXq36xK5UogocyjQSU143JzkaInHvt6IGHyKfZjFghhQ==","shasum":"bf49cb73c31f245178a0b68aa66b607d9db6b7ff","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.10.tgz","fileCount":21,"unpackedSize":39654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlKXVCRA9TVsSAnZWagAAAsoP/AkWZ4+msSMlabOm0Z5R\nMeQDYbNUOamUZdM+uZ3Na8Z+jI7taQ0eyPfaDHw7fnY5j9y5+/SifsJgfYlX\nxDlxb967H+1ijQdVKbbkhxv5PXPHT2c/55UAzZufFmZErdmhGkts8PXqpNFG\n56JGEWlGCRz/9lFdNDMo4+40TPux4FsT7Dff3lWO5g3DjJoJf3vR4li+vrZ/\n8QN/TPSZyDZXK7YQ9/wJADqMc4GT/GhyzGEL3Xpghq1Q0Q4ChEvfQEGcB4h2\ngufe3f7z6YbLSYd4gSFuEqMyMSZuJNfSV6i60SlgSi3MgC6pvRGDMxJIAmVK\n5jnWRAcyNfsnrwuqrtD32RyQEdCpmF/J1G97JzqR3k0UQBzNsqwoR9dVxRlT\nxOnxtLoBeV7BZuPzfpnOBZKS7A4l+y/pO8vFIjEY4jv4fh3zADcoFUNsEqt+\nz98H95cf0LazyU7F5tmehvUGx0M1Wl63bFRlqd4B3MYonz+OSHyZNhZlaSLh\nWm4p5XTpJlwDHY3ymPVdj247LUNc/Tuhk5HOtrdNp9QlGOMcysvLpZEEzH/v\nrZ1xy1+npDuEZYpMcDpw3MysvYSaNSXX+yyDfNkWY+q0BEzli63flzv6gGSo\nNOQixJSjmuA0KtU+W3k9rXjfRFup1H8oKDpLYijJkbIV542y9J//mmgedIxF\nVs8m\r\n=yn6J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFrkGvjEgENTBNCY639LKazpQA/N4HaAcB0IA7x3rbygIgaYcNjJWkEGk3gDgxU9aLpxzID9CcW6LO63dU//4ISIE="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.10_1570022868816_0.33300177682659915"},"_hasShrinkwrap":false},"3.0.0-preview.11":{"name":"styled-components-breakpoint","version":"3.0.0-preview.11","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using themable breakpoints\n\n`App.js`: Configure the breakpoints (or just use the defaults)\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n### Using static breakpoints\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nexport const breakpoints = {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n};\n\nexport const breakpoint = createBreakpoint(breakpoints);\nexport const map = createMap(breakpoints);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {breakpoint} from './breakpoints';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default Breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"ea97d5bf8b39e0a0b4a3b3dbc410090e1bac7a9b","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.11","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-Ys6lyAiMKCYvIeTic1IQh2mEupWizdQCb+XIhau/TNDeoN2P7UuYZUdgfYMBU1F34tU0SjzXxJ2pY52RfKvS8g==","shasum":"00b257df89b444e4b8a95683473ebcbed77ab635","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.11.tgz","fileCount":21,"unpackedSize":39962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlLPhCRA9TVsSAnZWagAAYrAP/RoKP9S44vna3G+iuc+L\n/ZHqNBAbN45R8WwhJrMW/i3RHR/PzGdYueBIWzwabIQmsR+/oAA6Ry/Vl2Op\nRUDo8zjS8eELTyMykNpJCUns+3+h6hhFJXPGiDEUGw8Lq1al3bjF4JIclLVq\noTYLTqVzjf4BDia98vvhW9829Lq59xgj7i3ovRZNt2xsPJSOcf1Txf1wxhDT\nvtwUebd6LRhLrFzvKPidINlKhpiZuU2H38mmE6Y0VXr7Tpv3sWFCQO2hPmyw\nbgtevpNHX/uxgkhhq3K4aL9mEcSNxe/39OKo9PFRpCefHUcoqOySRVRazXME\n2riE4vkdtMf5mruq7D9MWm9z3ugFlsd/tpD0Vj/07qYHlPEZYBbXXoBW19OJ\nzsjcUCYs9VjzzKvKU1bGgv+MEe6H+4nLZOpe/AlpDguwaT+0JKf2ZGrbuN5f\n5mOV1XsKsXhzhCCrTm1RtCiVkChb4PY5MrPhDJSOlCpJowqvX9sW09eDVbWS\nobyhpNkOtCg35lVXDh9tVE1R6xVMQdLwuv0HQ9L79IimZoas8HM7yIKgRVeX\nlH1iv2GJ0n8ASQ81jXxtvwu/lZ9OZrNRmCMZ/la6FQnvYtuc2inJCOa25u9+\nxdEQJ+sMRDkboMVQdLCERAFN1qULwVIewNaOFJyCouC7MR5PN/OtCifhiKQq\n5WOc\r\n=hnZA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4sKh8ae0ZjZwS9JQSTwOXjwq/HNvWa4clfKgRM5acpAiAhYqyGa4MEEHVypgCVPX2zzuaNGvgPNfULeILwbYK37g=="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.11_1570026465131_0.6924918984949089"},"_hasShrinkwrap":false},"3.0.0-preview.12":{"name":"styled-components-breakpoint","version":"3.0.0-preview.12","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using themable breakpoints\n\n`App.js`: Configure the breakpoints (or just use the defaults)\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n### Using static breakpoints\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nexport const breakpoints = {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n};\n\nexport const breakpoint = createBreakpoint(breakpoints);\nexport const map = createMap(breakpoints);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {breakpoint} from './breakpoints';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default Breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"e3c83815524fbe14cce30c762670aae4e074964d","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.12","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-LC//GAWaoJ1THrCKiXrmGrLI8U8NH4E84u0IeF2/uH7poqBNF3olsQ9GPNEbI1HocGHD8FlXRje0NO0T5zCydw==","shasum":"49e48e25c84cbe83d35aa0b258b41a07d75be73e","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.12.tgz","fileCount":21,"unpackedSize":40095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlLfrCRA9TVsSAnZWagAAHU0QAIh+pLi2v0nt6GRkov0E\nqJzHCreYqHnkH8qlpi+2+ZM/TEDhJN8bPAHhlLgBks5OhrKOKX+i8KeVpJa5\nZo4ZN+KL0WBJSJ9hbe35v+zPsWcZzFnnhi9nw9AA2WvH1+gp6LT6pl+ktWE+\nMOl4IfbqWvUYkv2mBDaJg3qtVRS/l6KsFinCw7/fcdVhfXKBHJeEDFhjVB93\np5M50/ilwRutCTAgvFmKjIZw3DLcnx+tj2vtarAHBZdpg0sZBE+Pq/u7pFPf\nCWnk8pJjXZ6MuHQ/2S19zAAkzoqET7pLb6YLJkD+EX5pS3Bc8G8hBq1xqOxO\nB7NrUFmo1JKC3ZaEGWYxVAgRD7i05gCFXRxdYB4vUFNuus713xauJtyujw3j\nObUF85+6v8CEf/gZ/hvBXRouu9HfBr3bSBdNUKar/Q39nJygiQS1GdNolLMP\ngxT9DCn1njh86zRqvUYL9S1Gg9CZdm8SAtuxJikxwtETO+/mxsUHn7xG7oZf\n6JQgdzjyxnDDEXG+hRwUxXLzxk3OkUFW5VKzMwviZxXgmcY6SDKT+jojFcvS\n+Zy20E//y8ktRiu8FdN7LeRppoCj+LmkT2XfKRthkKP7PZVWscpokcOcMfd6\nfa4gmcmlsYYpeD16ZlWG5+wHR0+LjlpD0HGsOYGQ5x301dvcE0jw+b/IjeEa\netsI\r\n=0ff2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDu+OdDcP3mI2lTLeoUrk4p3+OqPUWvjpjZfc4nwR3TbwIhAMlMAtxh5ur4TpXBAip5bOuIeQ8X3WzRREv0EiclcQVO"}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.12_1570027499009_0.09988998652750825"},"_hasShrinkwrap":false},"3.0.0-preview.13":{"name":"styled-components-breakpoint","version":"3.0.0-preview.13","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html --out-dir example/dist","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using themable breakpoints\n\n`App.js`: Configure the breakpoints (or just use the defaults)\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\nimport {Heading} from './Heading';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n \n Hello World!\n ,\n document.getElementById('app'),\n);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n### Using static breakpoints\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nexport const breakpoints = {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n};\n\nexport const breakpoint = createBreakpoint(breakpoints);\nexport const map = createMap(breakpoints);\n```\n\n`Heading.js`: Create a component using the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {breakpoint} from './breakpoints';\n\nexport const Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the `styled-components` theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default Breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n\n## How to\n\n### Using Typescript\n\n[Follow the `styled-components` documentation for setting up a theme](https://www.styled-components.com/docs/api#typescript). Be sure to include some breakpoints in the type definition!\n\n1. Create the declaration file:\n\n `styled.d.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n declare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n }\n ```\n\n2. Create the theme:\n\n `theme.ts`\n\n ```tsx\n import {DefaultTheme} from 'styled-components';\n\n export const theme: DefaultTheme = {\n breakpoints: {\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n },\n };\n ```\n\n3. Use the theme in your application:\n\n `App.js`\n\n ```jsx\n import React from 'react';\n import ReactDOM from 'react-dom';\n import {ThemeProvider} from 'styled-components';\n import {theme} from './theme';\n\n ReactDOM.render(\n \n {/* other components go here */}\n ,\n document.getElementById('app'),\n );\n ```\n","readmeFilename":"README.md","gitHead":"120ecc717d9091b2dfa05b503a80d68eee497b37","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.13","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-Fn9CoIzsN97MOVtG9wnNq/EFlncYQvq7C23tk/V88Byn0fZ5m7RTehQwK1I2aDZVg9h49osTx17mq2gGSW7WNg==","shasum":"de6a9ac1c3b03c8f42c3f55f2bbca4c5a3c1ed33","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.13.tgz","fileCount":21,"unpackedSize":40473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm/8ZCRA9TVsSAnZWagAAe7cP/0G12cBOkSjqP10F2OiX\nL3DoaN/7uMh5dEvY9EyaY9hLLEa8LOysBGazPsy/JcYqINUTy1RUGvXv4o6T\nYbVIk8EU5fD6tqDIcij4oK3hCIk3svBfWR+ts3b2XNui+Vu91V2jLgVolIhH\ndSMSAttLRBmsJcfSUmBUgzp9kVzbxaS5Ja2hSo+dsQXR/fbMNaT9p+YrRYeb\nizmvXAIcjp8BEvoWH3TwAOOgu/r5rlaCUy9DQZOzc7se6F4gZ9Ly2QCJm728\nUy3z0RMweh0C8Fy7K3ggklEw7QiPVQ2rdKQfd9J+VdcSaQvIkGlilwb5Zidn\nUKRBdbzRw8V5iJJPy5qBLdG1zl//0JKMOwZh2cirhDmntAp5ZK9i4llfvcx/\nq7AmDPD9slsWcF+4wVBHjaFs4tU2RmPugYoCiiw5dvx6zwSQ9f1KoGwZN2kE\ncOvEaN2GUgMcHAdph65Rqt3ugvJLGPiiacABJ8a398nYMXEy2jia+KSJwDAh\neJOxNV32MQgAE130yFNIPxxUtXz2rPrcFtANBF0Vdn/jkVX6b5g8bPWnhExY\n7LoIHcwIGvYHlqix21mOj9wvNXoQg/y2tWTPGVQFcx0fAEzf2TJuQICPz8Pq\nUA7V5Aoy60RofSE74puXdc8K/lQecVD646HnXixyYxr8VQOR/7muNH0snqke\nZ9KR\r\n=CU34\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdlDIZsL6f5EUZ95I1Ns/SlsV1xr9XHXPTT9PSVLFJGAiBjgcnESwdlUibA13ED9YvO4NLqHVU/8oi5aUEObD2x4g=="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.13_1570504472837_0.6451701321472463"},"_hasShrinkwrap":false},"3.0.0-preview.14":{"name":"styled-components-breakpoint","version":"3.0.0-preview.14","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html --out-dir example/dist","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using the themable mixins\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint, {map} from 'styled-components-breakpoint';\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({mobile: 'red', desktop: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n### Using custom breakpoints for the themable mixins\n\nThe themable breakpoints can be customised using `ThemeProvider`. For example, to use the same breakpoints as [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints), you can do so like this:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n {/* ... */},\n document.getElementById('app'),\n);\n```\n\nIf you're using Typescript, you'll also need to define the breakpoints and spacings on the theme.\n\n`styled.d.ts`\n\n```tsx\nimport {DefaultTheme} from 'styled-components';\n\ndeclare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n}\n```\n\n### Using the mixin factories\n\nIf your breakpoints and spacings don't need to be themable then you can use the static mixin factories.\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nconst breakpoints = {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n};\n\nconst breakpoint = createBreakpoint(breakpoints);\nconst map = createMap(breakpoints);\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({md: 'red', xl: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n","readmeFilename":"README.md","gitHead":"dfaf0a230bdd05f0f1835d550b50c36bb03c2dfb","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.14","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-IgX4y7X+vaPOBclvZ4pe6jbIjpldW5Q6H1WTR+uAX4gumyIFIQJY0vn9m7BmDwc64lB2QKIwhLlONDIzu3NoMw==","shasum":"a80265b5dc2ccc95167625c74ccb728adc77ca35","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.14.tgz","fileCount":21,"unpackedSize":39800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdndoWCRA9TVsSAnZWagAAutAP/1UyVh3zWp8oGo/Kq5h/\n1+YtLmnjHrBqp4dt/rcgUGhxP1M0SBALItINKz/PigfhDz7zJW/qNyyHthhD\nncvMG4tHnWBGu6trvhkqlZ3tZ2eqyXqCRVf2Ahxmhjk11reIwq8I7SltxVD3\ncBhUv5LA+UNhKeXGk7Vt7fyoIoBjLHcrr+B01K5W+FOsWvG2AYunww1GisrG\n1+BNeJ9DUrCnhDWa57FTo/8yfzXENXqtFotwz8htPoKtpAxvyz8C+XYoCI+e\njBpVH27BJ/n3UD6eyVvUwgGOx2n2/kSW0j9OVpgZXavOYGKPkudQ+x6yYEmx\n9wRhHsyY4JezZUI9dSDx92vQLyhd4q5IKBQLoJ4dysr7Q9ZVkxHEoivN8jsU\n16MLn+v/0bg3km6NjGDdLtAdIyYxubwH2JancZcclaki9ySTvNMNkhVOG9wk\nx8QL/W8h8P86It4YMnYpEtJ4Dmvfebv0kPeWo91gzGZOIoDN82pODYYo3zTN\nIbg/5JV7rgs7FOMyp9X2Xhcl23guv7MbvEH7tpp69H0EFMYYi0YzuR0JqxRI\nrxdf2rhhtio8cBqzszs9Q7tk5dlcC62OVpnizv9lQn1Ghmcp388bYVX3F8Jr\nJw1SCNxrmjnmEYaurErvHwsETlMmJXItZ4xDNzcs9yAUkFXVpM2fkx8Vf6xC\nWAnh\r\n=U/R9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnURhBoUcqn279lvfSvrPHDixOnyBztzV8boDBjYPReAIhANUWrZyAh21qqyUdlPPiVk1P+A3IoCAaRuXmxaHxrHyT"}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.14_1570626069334_0.5230222970001301"},"_hasShrinkwrap":false},"3.0.0-preview.15":{"name":"styled-components-breakpoint","version":"3.0.0-preview.15","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html --out-dir example/dist","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using the themable mixins\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint, {map} from 'styled-components-breakpoint';\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({mobile: 'red', desktop: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n### Using custom breakpoints for the themable mixins\n\nThe themable breakpoints can be customised using `ThemeProvider`. For example, to use the same breakpoints as [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints), you can do so like this:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n {/* ... */},\n document.getElementById('app'),\n);\n```\n\nIf you're using Typescript, you'll also need to define the breakpoints and spacings on the theme.\n\n`styled.d.ts`\n\n```tsx\nimport {DefaultTheme} from 'styled-components';\n\ndeclare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n}\n```\n\n### Using the mixin factories\n\nIf your breakpoints and spacings don't need to be themable then you can use the static mixin factories.\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nconst breakpoints = {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n};\n\nconst breakpoint = createBreakpoint(breakpoints);\nconst map = createMap(breakpoints);\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({md: 'red', xl: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n","readmeFilename":"README.md","gitHead":"476e06e55cf14b5fc7eaf5e6482ef0a816f264de","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.15","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-s9qZ0tmmAsFKJCLE0/PzCUIheEihqEhPsnAil4L16e9bXej005XX+qvcXlM4qDqb8Nq4B1j99c41IcxrpZ4P8Q==","shasum":"8503295866a47334c75d48b51502a76c7b6496db","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.15.tgz","fileCount":21,"unpackedSize":39810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnef8CRA9TVsSAnZWagAAurQP/2W/+T/xfZm7/BZyLtJO\nmSsKHzJbYAOM8X+C+KXFkqr7IDxQtMBXBcIVnVQJ+swG9awCpwu9zejQ3edz\nvDcdVXNu4qUdrh+fUvJXFeeP/f7M7AvIYnbhHEeKzFpvN1LbpqmkJGJN64mh\n/Ct7wBOZ56pN+Bd9j8yq6UURcyJP6rGX66EGv2dPWY1kUMwIe5TSfEyJo1m7\nLXWunWntUZCLvA0/9/sYXq7BABFS8SU1SEecd4Gh0tOlRVLmStlfuiH14P37\nZE4n9CfP4FdH5YMDwFzlBNUIFjy/c33L8v5o8qDSnj4v66eQhhiFZESnPMIQ\nPKJpiZMLqcQE9VX9NmZIlL7B6Lv3Q5U7wjMIlnAx3haWvaaqCzQ2bIjJnSGK\nmOjtrGJ+YtV3JQCuyew9IR7Xg1jmnox4wTqAkPWiXZVPGVTanFxFDOZfUitI\nxHiuvRB592GFKv7uIqBsFyVz6tE9MKJd/P76MwCoVZt63TzNpGzlbMN8DVl3\nodWYjSS/+qI2S8Ia6/AW7DiikHky6LZFV7wEbZU9aSEUis+YHI3Y3pJzrOcO\nr0LgT9/p5u0ccN0QZU2PLRAkQhaoRKmvNelz6jWACQjv83j9nztKQI0EgYgx\nW/5G4ZI6Zv9qkQmiSI5bZc6n+KahjVOZ5Lz9FgCV1+WZmRFeFCuF08omZqXi\nvDPz\r\n=9rmo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDs8cHcc5onrur8JMdALhe9qv49u/gXvmE1V0UMklM5kwIgHwY1eoZ6SzzCTGpHeseNXrr1k9Ha0aTK0Cc3w7pLaRk="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.15_1570629628008_0.3715789251342594"},"_hasShrinkwrap":false},"3.0.0-preview.17":{"name":"styled-components-breakpoint","version":"3.0.0-preview.17","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html --out-dir example/dist","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using the themable mixins\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint, {map} from 'styled-components-breakpoint';\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({mobile: 'red', desktop: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n### Using custom breakpoints for the themable mixins\n\nThe themable breakpoints can be customised using `ThemeProvider`. For example, to use the same breakpoints as [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints), you can do so like this:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n {/* ... */},\n document.getElementById('app'),\n);\n```\n\nIf you're using Typescript, you'll also need to define the breakpoints and spacings on the theme.\n\n`styled.d.ts`\n\n```tsx\nimport {DefaultTheme} from 'styled-components';\n\ndeclare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n}\n```\n\n### Using the mixin factories\n\nIf your breakpoints and spacings don't need to be themable then you can use the static mixin factories.\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nconst breakpoints = {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n};\n\nconst breakpoint = createBreakpoint(breakpoints);\nconst map = createMap(breakpoints);\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({md: 'red', xl: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n","readmeFilename":"README.md","gitHead":"4114b97fc7ec9766ad1254be6977922c5273a306","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.17","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-qfvKdDnZL9Toi0n+wXzNocw04Ny9KQOUwP2cq4RWEWBhsN3nVtI5qhKF3sccjdBC5OMBeFoyR7HHOaK8qpQBaQ==","shasum":"5f7a37684ed4bf86ce22015cb5b7a855bfea1799","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.17.tgz","fileCount":21,"unpackedSize":39819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnlEHCRA9TVsSAnZWagAA5bcQAKCZeT8MCQxW5aaUsA0M\n06/13+VKgeZ6vidTe932xuqdDKqahwp2FcHUDdyUF3ZW3Qe2Z9xrkXFNEeXi\n6jYGy8G7oLVYMroBGY4cL+UIuoYD6fuvhw1WCsxKNju7BJv0mX7YiGkUXYbB\nfZn1l/Fmxjslp/EwVXW/GWrW0IJcd6KnllMy5gPI5chbzXcQ2TwYj3TAttka\nPQN1zJEup5AqulKraVB6LlONAuxHcwF2FVODdTwRDkuYt5BUD+ZFQ/YQDg/G\nQ5J3FacWQ9XP5SQXbanD9WaP3x0GTtJ/D+oNxCK8ptMAZy05BCCxeIWSoEn2\nySSOyA0LN9rnjS9uLpOY+S0JkKmqswTq3eIIRmt7BmQ3rOn4cQZA6HmQChv7\ne/AV06s/cpMkm5k+9pEPjUqo4sz9QwXozyjw7V2QDI+h9FcKQTjZ+mgU6zmd\n/NMeboIvrmDjTE0ayW0ShRaIr8jXZd5TjqoFcsJKmU/3OomDTbMJZnWPzArx\nNv1BUXmcjj/RmgAJMmV4CIkVdjCvbv7kVR5d9h9JrRMCUFoegP9vhmI6anvJ\nnrpClrWgADB44+RQ3XFXCyOxEOSMFEOGG1fPcxHiIWwI5/HpAEeHYqASuDxC\nWwfVn0+100umody9HUP2NUElupe6NWreW4S254K7imjr5C6NUu52INIfESxR\nlovK\r\n=9EQp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChFZJqr7P+k4G0qvHJG2zznn0VGT+qkFTsyCIBQodzrgIhAOtaZXKv+Kcy+TQDTjgTmf/OVCHUv+9KOm3ujIPO+5ME"}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.17_1570656518798_0.3370798312535199"},"_hasShrinkwrap":false},"3.0.0-preview.18":{"name":"styled-components-breakpoint","version":"3.0.0-preview.18","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html --out-dir example/dist","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using the themable mixins\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint, {map} from 'styled-components-breakpoint';\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({mobile: 'red', desktop: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n### Using custom breakpoints for the themable mixins\n\nThe themable breakpoints can be customised using `ThemeProvider`. For example, to use the same breakpoints as [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints), you can do so like this:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n {/* ... */},\n document.getElementById('app'),\n);\n```\n\nIf you're using Typescript, you'll also need to define the breakpoints and spacings on the theme.\n\n`styled.d.ts`\n\n```tsx\nimport {DefaultTheme} from 'styled-components';\n\ndeclare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n}\n```\n\n### Using the mixin factories\n\nIf your breakpoints and spacings don't need to be themable then you can use the static mixin factories.\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nconst breakpoints = {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n};\n\nconst breakpoint = createBreakpoint(breakpoints);\nconst map = createMap(breakpoints);\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({md: 'red', xl: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n","readmeFilename":"README.md","gitHead":"3c77e18d14712231787c739964e7b441c32cc309","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.18","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-ul2SBUyguK6HlrdCk6c8d5671IMmv5Zn6fnta5FvgaXzEi95UsBSLE3h1pRkk84eU5mX5FN1CdK60scKlv+pTg==","shasum":"9062e5fd0c3ba126871c6aab5ed7b3d0217bae2d","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.18.tgz","fileCount":21,"unpackedSize":39819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsOzHCRA9TVsSAnZWagAAaMYP/1osFS7ln1/D5YeMW1nR\nIOWlsKfHGPah7bkeqpUo0Hju95ZHAX1vduBFvTg5s0gIJCXU3ShESANTBVgm\nucTr/x191glhYoMzDejqEOnYAFSMyyej2HLQTz91K0pUhGyWjyVgO/8CGcQP\nWwA46ID2Hrgliz2O1JVT7m/CldY3WZqqFSgKfiDBY0oPogB+cvu7eA/PDtN9\nvIcleCv1PqQslRGPpEp8G3K626QrKyn1kW2oBnzQ1pDdzf5vMUAyqgeK04DD\nWljJ7XsHqvBiN4DxYK1ptjfJrHRz8ErjqN4R1fxtaMuZgh7otuSUhunKoLsc\nrbX5V+p0t+f14rNNI94L8z3Wfr/wt5oZWJf54wh/VTg0VJUA2kotVhC2Apc7\nDpmh0uDc+i5TZduHYIDA7C/TU927Na0VrdnzlVC49/UWUkThVvhxSFf/H6v6\noAu35OBhwrcYPiy/cWb0lUsMj9+9JS/dmMEBK1lFe1idJif86vdJNFgRGoO4\nTIrSZtwu71Disdwq23ap5jTFOfd8kq999YAYLc8grZ5G3c12AFdJK0LlLkB0\nzAuN89jwxH1g/ZdI3n/rH8eezbAX8DFkuMYNATTxJuJaXfjDHe20oyAKMunx\nSJGWI8rJdrILoepkmRN7XAWXyiF5E5T3i0WxZfnLXp+b34fLoaYwSjU3qSqm\nctqx\r\n=WihP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9sqgFAZZJtct2FXQlYcp2Ertug5m2eaUL81vZdWZh+AiAxAj4vIhw8dG3I0prSzDu2EnCJx2UZthKnvK32pmBxYw=="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.18_1571876038073_0.6848365912183159"},"_hasShrinkwrap":false},"3.0.0-preview.19":{"name":"styled-components-breakpoint","version":"3.0.0-preview.19","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html --out-dir example/dist","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using the themable mixins\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint, {map} from 'styled-components-breakpoint';\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({mobile: 'red', desktop: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n### Using custom breakpoints for the themable mixins\n\nThe themable breakpoints can be customised using `ThemeProvider`. For example, to use the same breakpoints as [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints), you can do so like this:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n {/* ... */},\n document.getElementById('app'),\n);\n```\n\nIf you're using Typescript, you'll also need to define the breakpoints and spacings on the theme.\n\n`styled.d.ts`\n\n```tsx\nimport {DefaultTheme} from 'styled-components';\n\ndeclare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n}\n```\n\n### Using the mixin factories\n\nIf your breakpoints and spacings don't need to be themable then you can use the static mixin factories.\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nconst breakpoints = {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n};\n\nconst breakpoint = createBreakpoint(breakpoints);\nconst map = createMap(breakpoints);\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({md: 'red', xl: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n","readmeFilename":"README.md","gitHead":"43a4557eecc8ed9ef1ef401837512e0931ad64aa","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.19","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-fjpss6ZgrPJd0PNqmYBblUizczFyU7JLclRVcO00j6ges5nah88OjZDL/JRcVXGz4cUX8dhG9JZgV4oPaNBC+A==","shasum":"1fd744417ebee79ea9384b58c34e6909821ceb03","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.19.tgz","fileCount":21,"unpackedSize":40124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsSOiCRA9TVsSAnZWagAAo5EQAJpOFwqSF8ny0IyoY1mH\nlosgsMes6ayLXGj0CEVflmaF9eYhdkEEFo3tpL1q1FiztNZp/36g/+quy6Ae\nrEKkFN7DD686NCCUO4Njhlahj7z/Oln38/jR3RksdDSbrJJlf/0UZzOJg0ny\nqR2rBO+oAFvCREltd42r94dam+Jh1Lrorf8r6nhn1PYtsfYM0n5eevtPsktU\nIf0kO86lyKB6huUf7kJVG6KsqB4KA6u4oVOlukiRodKadRZMpXzJacK7ug38\nN8+lo/qMnCAQ7IN+8kV5v5XW048+FmSC/PnuM6gD10Lcg6lowQQ20KAWyvNZ\nUG4qCMc+aHjjDMSzrTCulIatDo9QxO6PgPJOD39f9hzANpDlZcfhojVU3v8V\nEb2ns0WfncvGlENQixlOzM67uJ6agepCDxoZLsI95MJpMSaoW4rvPOy9HNkt\nL+YKOhi/aI+DiA3tqnc7DLNqmfkFec7T+DRuoJew7kN4FeYPjpAG8vtL5Vvy\nYjPEgT35+0eYdZFM1eh+TT9YE4a9dmIpe1INfQB3NpI/LIK48yFI0KlrfeSP\n8KgRtArKI3kRagqw58N7q1QaQPS3v26K/nPF5ZF2mUMxNct5KpbGFAtFb7Y8\n3hblwCwvjbZ1CjInGZ4GVEZTmLyWYcCC2iejgyEpDnWBsaiWEOZyXSuEQ7NT\nhDDS\r\n=16of\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8EfWG9KDB2jWNOckFXcIWMBWe/Se+OFlGMaoqrczGhwIhAJ+TE7RGmdz08C3k7Nxqmjtsws8gVG7EK6G0NJ9Ld9ud"}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.19_1571890082587_0.8295286940346673"},"_hasShrinkwrap":false},"3.0.0-preview.20":{"name":"styled-components-breakpoint","version":"3.0.0-preview.20","description":"Utility functions for creating breakpoints in `styled-components` 💅.","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"source":"src/index.ts","main":"dist/index.js","module":"dist/index.m.js","types":"dist/index.d.ts","peerDependencies":{"@types/styled-components":"^4.1.19","styled-components":">= 1 <= 4"},"devDependencies":{"@jameslnewell/editor-config":"^1.0.1","@jameslnewell/eslint-config":"^0.12.0","@jameslnewell/prettier-config":"^1.0.1","@jameslnewell/typescript-config":"^3.0.0","@jameslnewell/jest-preset-test":"^4.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/styled-components":"^4.1.19","eslint":"^6.3.0","gh-pages":"^2.1.1","husky":"^3.0.5","jest":"^24.9.0","jest-styled-components":"^6.3.3","lint-staged":"^9.2.5","microbundle":"^0.11.0","parcel-bundler":"^1.12.3","prettier":"^1.18.2","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","typescript":"^3.6.2"},"scripts":{"clean":"rm -rf dist .cache .rts2_cache* example/dist example.cache","check:linting":"eslint --fix --ext .ts,.js,.jsx src","check:types":"tsc --noEmit --project tsconfig.json && tsc --noEmit --project example/tsconfig.json","check":"yarn run check:linting && yarn run check:types","build:bundle":"microbundle build -f es,cjs --tsconfig tsconfig.build.json","build:example":"parcel build example/src/index.html --public-url /styled-components-breakpoint --out-dir example/dist","build":"yarn run build:bundle && yarn run build:example","test":"jest","deploy":"gh-pages -d example/dist","start":"parcel example/src/index.html --out-dir example/dist","prepublishOnly":"yarn run clean && yarn run check && yarn run build && yarn run test && yarn run deploy"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{md,json,js,jsx,ts,tsx}":["prettier --write","git add"]},"license":"MIT","gitHead":"2204a873760e6e95c3d368143ec41c04e321b2e2","bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","_id":"styled-components-breakpoint@3.0.0-preview.20","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-rZ+Upo9lJfzK4xXRZxlvAsT90jaONa5VtoNT18fXaMLd+J75vCD1MU4/pwT/Y5Jw4rzGztMtZpelVC6P+AuNeA==","shasum":"877e88a00c0cf66976f610a1d347839a1a0b6d70","tarball":"https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.20.tgz","fileCount":21,"unpackedSize":41031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxJ0lCRA9TVsSAnZWagAAknQP/0tSVPESa2ROXJ4bADVc\ns2tyNALocNf/eU/xqHQlaLiCQ3rgxHfIGcAsaBF70/Wnj5ERxCXoxmE3m7Jh\nhaGvn2xjAs1LmtFoAXqK4/SznXWFeUJ2LlkVyXXs+TTfYahWkQZ7rv3swwV3\nQh6L/pBCxTQP9O0AXGvHxXsskNKgm/pXnIGqPXx/3ndGs9x3ShJSH+EUZ6Sn\n4gWDBCXqA7DeU0a+ydheCzymtAqUjP7AAmUYWag1Ad5+5F2mYOdYfTmqAkMQ\nLGZaDbbixjlk3CJJsX+4LrEb1oflRpleHi0ji2CFW25Ul29RafCJ7SVKcNNt\nBNyA47iU85IhA4ANyXV7VeYqvYTA4/vchnlY6WYZTy9/VBq+lSfZupf1X9lW\nU0nMYzXybji1NpLw4cUOlXF8y+JqGcFI8izCf2ZKrsBGxML51MPs8Ufv0OqE\nQv4y3XRwoI6T9BG1z83pVlUpt8D+n+gqdbcWU97xZUfPOP2Au7Pgjt3AXex6\ncDe9N0dgwT2RyOx8q9ZbfaXA82r2x/iejt6rt9/4uGWeSHQ+hrQJTRXKI5cj\nvlPqMSQ1PdTgKbYkpZ79fIo80Y98KldyPJftMed0zbfRtVRvccm71eZCdOIy\nsR5q4LHrS+iJxNgaRf9xbOUZypKm5N96/IfdkJL7zq71GXHLsJuEgbaw2W/i\nLKiM\r\n=xZZp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUTIHmxNMo/PYFEy9Yy+mkywvWWijArFJ5Qqg1H9TmeAiEAugK9o5fqKGgKzjgikphNHc6M28i6rodxouYWhm7HD80="}]},"maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"_npmUser":{"name":"jameslnewell","email":"james@jameslnewell.dev"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components-breakpoint_3.0.0-preview.20_1573166372286_0.17946546405324826"},"_hasShrinkwrap":false}},"readme":"# styled-components-breakpoint\n\n   [![Build Status]](https://github.com/jameslnewell/styled-components-breakpoint/actions)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n> 🕸 [Website](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n> 📘 [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n> 👀 Have a look at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\nNPM:\n\n```\nnpm install styled-components-breakpoint\n```\n\nYarn:\n\n```bash\nyarn add styled-components-breakpoint\n```\n\n## Usage\n\n### Using the themable mixins\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint, {map} from 'styled-components-breakpoint';\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({mobile: 'red', desktop: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n### Using custom breakpoints for the themable mixins\n\nThe themable breakpoints can be customised using `ThemeProvider`. For example, to use the same breakpoints as [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints), you can do so like this:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ThemeProvider} from 'styled-components';\n\nconst theme = {\n breakpoints: {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n },\n};\n\nReactDOM.render(\n {/* ... */},\n document.getElementById('app'),\n);\n```\n\nIf you're using Typescript, you'll also need to define the breakpoints and spacings on the theme.\n\n`styled.d.ts`\n\n```tsx\nimport {DefaultTheme} from 'styled-components';\n\ndeclare module 'styled-components' {\n export interface DefaultTheme {\n breakpoints: {\n [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;\n };\n }\n}\n```\n\n### Using the mixin factories\n\nIf your breakpoints and spacings don't need to be themable then you can use the static mixin factories.\n\n`breakpoints.js`: Configure the breakpoints\n\n```jsx\nimport styled from 'styled-components';\nimport {createBreakpoint, createMap} from 'styled-components-breakpoint';\n\nconst breakpoints = {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n};\n\nconst breakpoint = createBreakpoint(breakpoints);\nconst map = createMap(breakpoints);\n\nconst Heading = styled.h1`\n color: #444;\n font-family: sans-serif;\n font-size: 12px;\n\n ${breakpoint('md')`\n font-size: 16px;\n `}\n\n ${breakpoint('xl')`\n font-size: 24px;\n `}\n\n ${map({md: 'red', xl: 'green'}, color => `color: ${color};`)}\n\n`;\n```\n\n## API\n\n### breakpoint(a, b)\n\nGenerate a media query using using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `a` - Required - The breakpoint name at which the style applies.\n- `b` - Optional - The breakpoint name at which the style stops applying.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nexport const Heading = styled.h1`\n font-size: 12px;\n ${breakpoint('tablet')`\n font-size: 16px;\n `}\n ${breakpoint('desktop')`\n font-size: 24px;\n `}\n`;\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog;\n```\n\n### map(valueOrValues, mapValueToStyle)\n\nMap a set of values to a set of media queries using the set of breakpoints defined in the theme.\n\n**Parameters:**\n\n- `valueOrValues` - Required - The value or a map of values to style at each breakpoint.\n- `mapValueToStyle` - Required - The function used to map a value to style.\n\n**Example:**\n\n```jsx\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst sizes = {\n sm: '12px',\n md: '16px',\n lg: '20px',\n}\n\nconst fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);\n\nexport const Heading = styled.h1`\n ${fontSize}\n`;\n\n// font-size will always remain the same size\nThe quick brown fox jumps over the lazy dog\n\n// font-size will increase/decrease with the window size\nThe quick brown fox jumps over the lazy dog\n```\n\n### createBreakpoint(breakpoints)\n\nCreate a `breakpoint(a, b)` function to generate a media query using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createBreakpoint} from 'styled-components-breakpoint';\n\nexport const breakpoint = createBreakpoint({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n### createMap(breakpoints)\n\nCreate a `map(valueOrValues, mapValueToStyle)` function to map a set of values to a set of media queries using a set of pre-defined breakpoints.\n\n**Parameters:**\n\n- `breakpoints` - Required - A set of breakpoints.\n\n**Example:**\n\n```js\nimport {createMap} from 'styled-components-breakpoint';\n\nexport const map = createMap({\n xs: 0,\n sm: 300,\n md: 600,\n lg: 900,\n xl: 1200,\n});\n```\n\n## Default breakpoints\n\nIf you don't provide any breakpoints, the default breakpoints used by the `breakpoint()` and `map()` functions are:\n\n| Breakpoint | Size | Description |\n| ---------- | ---------------------- | ------------------------------------------------------------------------------------------- |\n| `mobile` | `0px` (`0em`) | Targeting all devices |\n| `tablet` | `737px` (`46.0625em`) | Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode) |\n| `desktop` | `1195px` (`74.6875em`) | Targeting devices that are LARGER than the 11\" iPad Pro (which is 1194px in landscape mode) |\n\n## FAQ\n\n### Q. How do I use CSS objects?\n\n```jsx\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nconst RainbowButton = styled.button(\n {\n color: 'white',\n backgroundColor: 'red',\n },\n breakpoint('tablet')({\n backgroundColor: 'blue',\n }),\n breakpoint('desktop')({\n backgroundColor: 'green',\n }),\n);\n\nI am RGB!;\n```\n","maintainers":[{"name":"jameslnewell","email":"james@digitaledgeit.com.au"}],"time":{"modified":"2022-06-27T01:31:19.137Z","created":"2017-02-07T20:24:54.369Z","1.0.0-preview.1":"2017-02-07T20:24:54.369Z","1.0.0-preview.2":"2017-02-07T20:58:27.308Z","1.0.0-preview.3":"2017-02-07T23:30:02.735Z","1.0.0":"2017-05-20T15:28:53.532Z","1.0.1":"2017-05-20T15:33:34.441Z","1.0.2":"2018-02-01T13:12:11.958Z","2.0.0":"2018-02-12T13:06:33.930Z","2.0.1":"2018-02-12T13:44:52.044Z","2.0.2":"2018-02-15T13:32:09.101Z","2.1.0":"2018-07-02T12:20:08.874Z","2.1.1":"2018-10-29T12:08:35.278Z","3.0.0-preview.1":"2019-09-30T12:10:31.083Z","3.0.0-preview.2":"2019-09-30T13:44:22.192Z","3.0.0-preview.3":"2019-09-30T14:08:19.318Z","3.0.0-preview.5":"2019-09-30T15:15:31.807Z","3.0.0-preview.6":"2019-09-30T16:27:46.915Z","3.0.0-preview.7":"2019-09-30T22:35:07.919Z","3.0.0-preview.8":"2019-10-01T04:00:14.157Z","3.0.0-preview.9":"2019-10-02T11:18:01.910Z","3.0.0-preview.10":"2019-10-02T13:27:48.955Z","3.0.0-preview.11":"2019-10-02T14:27:45.310Z","3.0.0-preview.12":"2019-10-02T14:44:59.134Z","3.0.0-preview.13":"2019-10-08T03:14:32.985Z","3.0.0-preview.14":"2019-10-09T13:01:09.534Z","3.0.0-preview.15":"2019-10-09T14:00:28.123Z","3.0.0-preview.17":"2019-10-09T21:28:38.899Z","3.0.0-preview.18":"2019-10-24T00:13:58.687Z","3.0.0-preview.19":"2019-10-24T04:08:02.681Z","3.0.0-preview.20":"2019-11-07T22:39:32.417Z"},"homepage":"https://github.com/jameslnewell/styled-components-breakpoint#readme","keywords":["react","styled-components","breakpoint","breakpoints","media","style","tablet","desktop"],"repository":{"type":"git","url":"git+https://github.com/jameslnewell/styled-components-breakpoint.git"},"bugs":{"url":"https://github.com/jameslnewell/styled-components-breakpoint/issues"},"license":"MIT","readmeFilename":"README.md"}