{"_id":"@chakra-ui/popper","_rev":"168-37b4855b6e2314dcfba90a87de91bf1f","name":"@chakra-ui/popper","dist-tags":{"canary":"1.0.0-next.0","pr":"0.0.0-pr-202215132532","next":"3.0.0-next.3","dev":"0.0.0-dev-20230718132637","latest":"3.1.0"},"versions":{"1.0.0-next.0":{"name":"@chakra-ui/popper","version":"1.0.0-next.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-next.0","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"258cc41e1a946603c230b322291615bd3043bf48","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-next.0.tgz","fileCount":27,"integrity":"sha512-0XroNzzs7EkDc9dL+1OrRghwdqJMLqcnRpbvcx7oStFnuD6oIv2ujZ9RG3qmsY/XYjTNa1wr9zbDCZxR5VyjsA==","signatures":[{"sig":"MEUCIQCI5Y8aqjor2Gg3ih3jSrnwBbQbpre9eOlMQbJUyTvLrAIgFZAMDNIOlDUh4a303Z7kJdIBwoYtdUsFElaxy856Ok0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7nTJCRA9TVsSAnZWagAA8I0QAJL7Uvd1YYtKVHf31KI4\nfgyYHbIXx3S+PH4mkKmTNSAji4tYynHKCzhcnil86qjMJSGtSMgMiQDNEmsn\nZqjhKQoPleeqt6tiScCVhub9fjhW7m7q5FXFjerZOoH9o9NC2kP77YF0mDDB\nhqk9EiJztSznNwjbMbzET45UdoetICqBa/VyFyJGAeQXRzwHbNdr15zJT/SD\n6/tAYzOrFF/ambLU3594v2GLRPjGkE6pjMc9EZGAFIlzQSc2v3vGfwiMGugd\nBVPES1kn8Jcu7bLjffKzaVnHLM/eRDa2uqcFv9gXMImgorXS4lyX4Sbq1W3Z\n2ymHEBW1/9sFLcyL1BDazC9SCInR1i28t/CKjaQev6FX8S78epDlBOZ+//2L\nxABSmhn9YFIWkdzk7jciYsjoVFEhazC5SguKwQ1NzBvanjIjdN+dfe1cjMDa\nTMOWeP1+IcevoROQ7NbcbYB+4k/RXRoNLfYko8ZlWezVZVFNuG0L3W3cQkHz\ngWY0a8N/zSiRWe83UOqc2kTMjrmNv35DiQqzT7eMCC32BMnHOUq8HqRVD0iO\nE51jKZGPVp8nuzz1ad3lfI0CuhZjTWeDIJi5q5V4viiEnmamj4KGl0x+T3RI\nlZyBodoYizDBFZEBy5KriPkJDupavFYrL9/BoOB0/eL2Ynt3zF60cYW08uQv\nOxUo\r\n=Njil\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"ce6fe489afaddba502a2611f1fb1dcedb991325b","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.3.0+x64 (darwin)","description":"A React component and hooks wrapper for popper.js","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@popperjs/core":"2.4.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-next.0_1592685768749_0.6788184164020035","host":"s3://npm-registry-packages"}},"1.0.0-next.1":{"name":"@chakra-ui/popper","version":"1.0.0-next.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-next.1","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3bf1ec511cb73e000039403aed11dfd825de44df","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-next.1.tgz","fileCount":28,"integrity":"sha512-l35hwLf9p2ePdhsh+6pzb1V9TuDt7myzwW3clwfdxDhGtmCWNb6y9SDKkfneHHWFePBfaFosCjxjyGbTfoJUSg==","signatures":[{"sig":"MEUCIQDmixVVlc9k1wLclXw0wTzIt4Kt5/EHuZIRrB8gcE2KuwIgLr1EMYgqhaDj3QBNoiqHkhhDj723u030s6R6+6ssxqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7yszCRA9TVsSAnZWagAAsusP/36SLYk0OVyYOr1GzUNV\nlOX8AJ59++Nsgoga0efz0svk3fUdcRwFqpjW/csAvavw1DrdpCNn01726iX9\nOGJZRfGWFbt4wA6LoFC6T9ka20LdE5PJr9ymWnNSnmO0Vwc8x0xiAHbX1wvG\nKIUnL/MXRn0UGOaoFQpYNdBLZ1y+TMlz2ywtvfHgzhPdr4bsbCkjX0AMQsLz\nyWAfbSinsK8mnsOyIfc50ZQ9n0PBLpIeiMCYt9Q/bi2Ryk+yAxemmgyeJgX9\naczq9XXfX10uTZY5KHdPQen+OVHdjXaY5GqSy1TqpzNtN7HdlUmKj5Z5NJpw\nj8mE1Av8F8oMY9BQbINh6UKcbtwCkg88zd00RDAvo3SWEWY37IPv0KJ6OnXd\njKjQpKAGKEjTQs6i/QJmJ7xoEd2y81mWT2Sq0cMsUR7BzUGpTroJDz+s8X7U\nTCYqdde1aFIsimOEOzMeBjxXDpQQMMoOX7fQU4bBsnSYYRMn0JjQK6bNbqpP\n/fWbsylAqVvF71UdV7Lxqk0/4rIztAzdby071Z0hojC+Mh2TT/DFHDid/Vqj\nml+eJtDozQ/j1Gw7Vr+FlsaEX/ZMP34KRKJPJFd6SV2Frs2eKS7M+u6TP+nR\n+rFqZvWytxvnueFmOqJxrntVk6Vy9DV05FmU0sjlnso+CZxZ0lRFblyC9+vQ\nF/Z5\r\n=vOUa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"cabbf345518d70d446bf95410872f1a0c947ccd5","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.3.0+x64 (darwin)","description":"A React component and hooks wrapper for popper.js","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@popperjs/core":"2.4.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-next.1_1592732467436_0.4844628891969567","host":"s3://npm-registry-packages"}},"1.0.0-next.2":{"name":"@chakra-ui/popper","version":"1.0.0-next.2","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-next.2","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"570ed48893ec136519978c3c4b0e663daa44143d","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-next.2.tgz","fileCount":28,"integrity":"sha512-9lg0YiH231AA0j/VH8qR8grKLVn35IzJSJcX+Dym9QdA1emRE6If2gvEXgqL5T4AcYN9HiCxOFH9Mij4xoyf1A==","signatures":[{"sig":"MEQCIBpdy1/nEC6NT8wHgi6fdpVELI8a1KRJd6GDYupoIatzAiARUnuk6ujCbAULOjp/5xxgi4xB38K6D5CkT1WJi3qHVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8M/WCRA9TVsSAnZWagAAZTYP/iE+6xn7rbwyjiDGhxL0\nFb5/ivCZ6TN5EF/0awIkjIvotHRcHuNf+jXeJz1jcaj3ZfULLEPIPB+j8y+l\ny5DCz1GkaXer2XVZ4HdkNqFa6QTBWDohr3FPKZ890RqQv5UH6bZ5G973FtpN\nbTivXyUym/LdGn/9GrB0syKC3Y+Kllki3SmVIiJRz2O6QZQY2JEfPYqTF7KY\nMq6LoJdKEbzL3WSnVGGgfSBTbwQFnsIZ2cwlc4lUlRE38+swFYcfPnRTGr2z\nJ0tzh3Q870znr1g31GQjk9KhJ7X8a3KuiSG4qYb9d2GnzmmD8Lr5lC2BY/Z9\n0hr5qSypTUf+AHu54eQT+zcexsCrUvpBtbT1DliQZCwHGf+yrHYM0jMFM/i/\n5a4RvIkwg8JZGOi3w1w5gmIr1UrWGxmGSMttNFtw3rj1Z5A8Jx9vVpgusX0M\ne0QAnsrYkxa6UNKvfIMuL7fkFzPLOHQJFpMoOOczL+vG3ZP8TixJxiyYT1s8\n9DN5LFBtKuIcx4WafzN7639oZacq687KJ9X5WJa5/FP65MLcZT0eeNTjarqa\njRjeKAGB02zoFuIig0X7VLOldlB+2bSJIcRIgshxTHlUcok3xz6cOw/YRKKL\naWzj50b2XbUNqTqDjSFExNEbziHjfn49i+gVuCM4qJspEbiPrAF/cBSvT+yO\n4NIc\r\n=OJXP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"c5b51e43e9dff400f8bba7da7ffd135f5d33628b","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.3.0+x64 (darwin)","description":"A React component and hooks wrapper for popper.js","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@popperjs/core":"2.4.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-next.2_1592840150111_0.4245059906687667","host":"s3://npm-registry-packages"}},"1.0.0-next.3":{"name":"@chakra-ui/popper","version":"1.0.0-next.3","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-next.3","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"83b2b1b9313b19854756424bfd055e8dd94a964e","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-next.3.tgz","fileCount":32,"integrity":"sha512-FXH6PJjlWt2F9OfB1XYDkg1DHH4UkIudb+1DGjE1vdl3RtZixi/uyvIMajZ7JWPrEv5aJxsDq6XwSugptXLglw==","signatures":[{"sig":"MEYCIQDTpMD9Q9eVsgFDOuSPhHRNrzt60zwD6J0kkm6ZZoO6JgIhAPqNDN9yPnwzh7yuIN4YzwdA26KsAd0NYDPDObYt4Zqy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+Ma+CRA9TVsSAnZWagAAXiQP/A772nv+aEpLonn6SZjC\no1VItDlau2CV+6K+jfFQuYqqw2Nqd/w7aVLBHhHiTDZcPClr25zxy7wKbBz3\n71rfX+SFogCpbgoF3q4eVly8rc2kC4G55oeDXjWuglLE70+N6FFAV5WeLzp/\nUvXJEuWYWffXbRU01U7Bbsp7b84jtMLw7hexpOx8qJENxu7K/DI3bf+EnKhj\ngd4xt6bgVW2E03n/OH89/T2VGvqGiEXsqX10BEhiQf56zBzVFbB6jLvLZ8HR\nASylMYQxWygxzYa5Dui6QFUpWm0XueFh2j+9Td4tyHNzaa1LOCiK0Z9ekdzB\nocI1Uhmn4tem+HQ1n5LrkhctyynW2BnjD5h8Zd+m09UVRmzFYpx+E2cxixG9\ndn2TLCnCeH8G05uqKOLhT3m9U/WGx/gzHvUc/980get/ziXLO4TdBzaAwUJP\nKVrA4f1tk55Z43AzzZHA5+YlQYM+NoSypqysCJK+3mxZSJAXEmYWutDGyIrV\nbToJYU6gJP+oE6GkBzj/e31/kcAdYZlfrHkifmTwKnJkeGHTZMpiRYdwWUfY\nEG8EvB4lNXr7mv/ojE1IhBqYJ4+tetflSUYr7gJQF9Q57su9sjP57UoqTDm1\nE/TNklgxqQtpL/jcZ7bzViw8hojkKhvMif+TXH1TxYa8yYldgOax/6zj3KdJ\nIiET\r\n=XUfn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"d31ba9c35993985f49da4885dd47ab8dab49cdd1","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@popperjs/core":"2.4.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-next.3_1593362110212_0.6654119849478228","host":"s3://npm-registry-packages"}},"1.0.0-next.4":{"name":"@chakra-ui/popper","version":"1.0.0-next.4","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-next.4","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"32c9a128bd0892aa81da5b390e1db02efc54a59f","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-next.4.tgz","fileCount":32,"integrity":"sha512-xv51neorY7/aDwCRWoG20KI/af4wIfWDjW3vYhQj3ztivv14LxccYfSoS2nFnW6I0TZyyvv+StUnx30AOFPQTA==","signatures":[{"sig":"MEYCIQD2rAUWvRIsLwGHY+BkPa3qkBpn4iXm7iU3j1ECy7ckmgIhAIgCQ2gYtzUATbj0Kg0fUZ3HsSyv3Rd7KbVZZy0j27eN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/MrWCRA9TVsSAnZWagAAjTcQAI8M5AxFsETu9SgKxKYL\nuEk9jL6P77DtwAWmmEbTfsFYa7GZQBu43sRH/91d6lBfVPgnjDIw2xizhXFB\nixWgBNt3JsfULCPJ4GwWq5yEXyZZl6olc2zsLhYPa8tLBTCn+X67DphxhoLo\nIEbx71H+d5smjiCxzVx0x0t3ZXOjMaLDGljoqK8MPMKct8dTelMzG9/rDgDO\nCe9rbHoHbho9QEGrn2Iw8T7TaXbzCYAR8UdZC782L11WauYrN3YVy+0yYJJx\nceCYv4kGB+F8J4qf2cQ8gTftqSi3VjaQgOLGK0hXy+6HX9MHNvOn9ztjGj2A\n2ZVuDT8Af05XsQWDLxxIJnu3psqtuwYIKzP6uRdE+tGG1fbxtuPFdZ6Msidn\n3HJc3zk4OAC7m+99zAP0EwtDB5rFjytGG+biW8bXAPv8PymuikTXgo4wkZeM\nQ8poXEbW2zXFhrFnNGZFHbIsER8DkUKgX9QW/WygvTbUozXiXqmBqffukbpY\n59FqEjA2iMKEQV8cRzZXDeRgjY6xwf5kQ4V/u5q+XI2rmY9BzRBAKpmvBrdg\n7BlLRwaHHpMLxj4s0IwruHTVEdly4H4aLRQMmuD/j/t8BaibMbUxVTaKlBZc\nYuvw5hGspbjAjc4zBtYrIuPszZtwDY+Dpr3NkQ4ZZR+mvZo5UvrlgNNVDXrD\ngZ4B\r\n=Pf+V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n","gitHead":"cdd5eac1db90ba33a07c009fb8dbcc4453d6ec01","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@popperjs/core":"2.4.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-next.4_1593625301937_0.02532811405134816","host":"s3://npm-registry-packages"}},"1.0.0-next.5":{"name":"@chakra-ui/popper","version":"1.0.0-next.5","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-next.5","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"52fbf57f2fc9c20874dfdfd7b7e285f95c11c60b","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-next.5.tgz","fileCount":32,"integrity":"sha512-NXUcjQZex8Vs6RgH6qjwsiUsMKxWO1jEgPsrSC0jgGAiSYe+ZIxJhWU/xgwan9K7XEYKEOooB8HXAxA4s8woOQ==","signatures":[{"sig":"MEYCIQCGFAcQtMY3YvfEMhTb4svBzVn9t88m11I+xvCw4lTq7gIhAI1VimICbYlJFUbEeh/Id0fwC6fEBb0qkVuxAwDGJoo9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDtZqCRA9TVsSAnZWagAA6HoP/RC6gyWFvv2UQGe/4btZ\nVBQqac9F/hGNocilCo14/+Tdvyc++oP9d7FHzHB0Bz8+SGQz5+pF8AGp/4/F\n09G4qd7UVYurHRIW3g3HdQvyWAgN7WCV5OUzjwUD26ijh33q7319PtsDycXG\nB1K5G4ahuFgiUjHHUm5Polulnxv/csGIrYGDDdTQbpiwbfzUNEoQfVODE8+1\nPx0vNfNQacoSdq69SJ+/gC0NG4IMb0Eqi92pldDAr1p3s35a3W0p/W2P9zD0\nLOmBGIS2j1fB6aidsT3DCfYdVTSO5MSryDiy7j/jji81W/UO6VvSkp+rGxZ+\n+jIKQ1NaOXI+UFdviwfnpEwNy+iv/5AZfAw12U+bPBMhtnlQxKXX7EObRPjk\ni8r0a7kHDtdzSRNUkSKlmFMOoPRdhgAtoxmqFGWBSakV57LgP8E1MXaVyItk\nJSmebxqN5J0aMYqQKtvEs/oGw8/WyADKy0A2ze/4FiH3FAKd3kc2JKP0O6CQ\nAX4G9blbaEQkSu4SctcISPOr0WCOkPQVRn0ZOWodss+tSIyVOjfdD15qAWHC\noer6EIZBVe6+n/YodjJr27LVlBhik1TNg32w/kMmnl5VLMeuR4dzGn8v5X+z\nHbNkldGE8ic2HoR7W71DntlQWkJSeb95PsROMpC3Ng7TU/DuHKMMEzfCHmTq\n6WEn\r\n=iYvf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n","gitHead":"24eec5d796d81b6fafbcfa7231fb2cb15e6d5a29","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"with-heart","email":"mark@chanchan.io"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.11.1+x64 (darwin)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.11.1","dependencies":{"@popperjs/core":"2.4.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-next.5_1594807913973_0.0391253448792408","host":"s3://npm-registry-packages"}},"1.0.0-next.6":{"name":"@chakra-ui/popper","version":"1.0.0-next.6","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-next.6","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d27f065b1006ee34ea4372c57ec3765939a44676","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-next.6.tgz","fileCount":24,"integrity":"sha512-PGrXPWgbmKSCAOGvGZ4IsBmsAPTQVa/VVSyt2Ngb7FLMIFtHIqWdcmj8jZraeLP2v1gy6lZ4hBO2jPuzAJKnWg==","signatures":[{"sig":"MEUCIQCxADXA3vBKlS3yC4m5KWDHOTCxZ6uKdbAQVijJ3AO9CQIgHEddIXcx3MHAz5HdLY62Js1H65QL/ZnzWC+uY/hUDYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDyIWCRA9TVsSAnZWagAA02gQAIQbzPT+zcGwF1IoW7kq\nDPyIOgJ6HqB2ddIA0RhE+nw86sbjNHGoLdsXo5HBri4YJBOwS2iJmgEV6Egr\nW39o1B59XK+l1kBvl4PP6n4j2ej/zAYQOgKsaH2VytNI2kUv0muWswtMz7Tr\nGLIpPFZ6mYqa9rYQpdxaBNVSR7Z3OdgEo56uMNd88nkaV2RrFJ1xPx5ccz+k\nN41g/vKI3oNFtA8iNSz7eCT+3apDnsHO4FkJAmE/iNWyms5tTXOqt2eQaurd\nwkA99eL4QF4t0pCk0pohSDk+TQ2/If4RjF+BUOJUZnv6kpRTQZQgNU/wCWU0\nASM08muWPGRztJzSUhhGvHQC/lyxCSmBa0mph2Ew/s3uyZrX5vFxyYHpF/j5\nGr3ViHQlSmIC0oEJuxwaqRFrmh4GmYKYU7upaKv2Qf0KIInHlK73cpQW3AhY\nmE2hSstP3xcX/MFqQx/Siy5kvDNCGWgTrFozeUfPMJifHwdX/3z+S0DEJ3gc\nv1nUUHMsBq8nC75moFigjZxW1UF6XI8vKM67gzvM6giRYoTKTZ8BURh7E4I+\nJGXO/ITqvSuqWctkuK7EreL+nnSWl0auWzB1S+r3ECcOIxbn9T83eqEUUuNm\nIHhby5EborYsuYJjF5l2QyT68h4heH28rdC7bS2r0Yv4citZWLnVVRTYUPWn\n1Whj\r\n=ewlB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n","gitHead":"72eeca4ba3fc6e7d8845b0d283a03cb6ec384a50","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@popperjs/core":"2.4.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-next.6_1594827285589_0.3899484324531297","host":"s3://npm-registry-packages"}},"1.0.0-next.7":{"name":"@chakra-ui/popper","version":"1.0.0-next.7","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-next.7","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0754eeee73ffbb8acf4c7b06b1619cc704f602f5","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-next.7.tgz","fileCount":24,"integrity":"sha512-jIPFc4i4HUFPFIY8vfoMDo5QjozkVD49jXAJHKRf++j0wffR7HfNHd6lsHKGJXmojd0hekfp6uUNl2lN/2lmkg==","signatures":[{"sig":"MEQCICINdyUMQ5CyeDQpqlpQvuT/Aq+BdvMep2e3FEFv6hSjAiBt17rdN86D3waJUC4R1YuMWbt9rOp2sYrc5kyy2l26GQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHX0hCRA9TVsSAnZWagAA3MIQAKBqRmJQ/41EYYk+crmo\nc9J6LMbz2owcln/kxFm/4W4TqEXYidlRuETFj3TSX+WJxFpq0RM/Zw/Xiivm\n0zrSo8PTQyxiG+MQJS6JnU2ZCWg7RxYd+lINPt8BrJTeOccSKkepLB+Tr+8d\n+xl+1DIGf77cvTceyfKykDRiK82O1MPFF2BHSirkh6q1NViLsMTSVRnQmsvT\nnjGJKWpT/CbQ/skCkyhqRLKh3XxVestJTy54Sy5dN/FtPV30UOzOWJUeRWIv\nb/mbVPYLlpDhocVIVH0QL46ODeGvJhTmID+Y6xjKBNQ7xCRLwgfaUIBGmRym\nAhukpYaE14Im1VukdFSmYZG1NWZCFA1h4XPT6anTIpcoMKEuWDR2Zay8vLfo\nauTxr9UOzZCXpfLHlaMF14K2iUzBS7doBVrgKpgKnBAXanmpBpBPphKGQS3Y\nlIheSf4tPJnGDJyks8uyZZT9/rkPHrrmaw49I/FC3U/tJPoo/t6k/uPYpy2x\nC5tz4Rjtel4Oq3gBrsg1zj0KSe8Q4oy6Aw1Cr2zZY6HeljjmShhtJ2ExOPd+\nsR3ho0nZab2PYbGRSE+I6LrGeuVbFa8OyF7OQfeuPmmWkfdxhIkKoV5TxiJ7\ngIIQ1L++q2rLO8oYYPDl79YmImeGbzEH7mpOIFot4JH/QN33L+wxlWork2JN\nZUl6\r\n=/Dp4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n","gitHead":"3dcabd8c7e21b32ae1b61485588f70370c4e626f","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@popperjs/core":"2.4.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-next.7_1595768097331_0.19886161125333812","host":"s3://npm-registry-packages"}},"1.0.0-rc.0":{"name":"@chakra-ui/popper","version":"1.0.0-rc.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-rc.0","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0761726302a1a1f7fe569ff60c10d3585e0bbeaa","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-rc.0.tgz","fileCount":24,"integrity":"sha512-o80hlHVGIAkGJTBeJMyzsK2mNC0UDG6OrZptvKgMK8BDn/BF5lXGdLcQEvIRMfFhQkkIeVBLADcZxUJstKlj/g==","signatures":[{"sig":"MEQCIEP5+QJs2/HEYf4vUmdyejYfE77ww1I+8ANNtBLJmHEFAiB0Rv2uOBWbQ7hcW1MdhhvlWqTPrEBBj7kUhU5ih/8+gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHafeCRA9TVsSAnZWagAAueEQAJh7H10/BD8II8AaiwS6\nTwQFHincSrghusPEI/FZ8KOXOFkkVNV4APfkoVporsxKHV0T0r2DSFEwdkg+\nPTjjkrBRA69tBkRAwJLdcNI4wF/UVXm/n5nf3Wl5q7ThHQrbsGEySt6f0Tcu\nSdO33FEGIAdR7J7Fbci8LQ/OG1ZDT5Rta8ts2w9FKBlvxzHgWtDbjncmDI4Y\n5diglvzgWkTRMTnsY57nq/n4r3rNnTHfuZqhzP7RHQNP27BCPWCdTJCqTszR\nOD9cSBgeBhCV8jwn6JpMs/xWPa18rJWaXXgzjz2RVU5Hbfz9xXZ/W92ZmMVB\nv2Uss3BmsarSVtBBC8oAUyoJjF4RxNBjDHMiu5bdeUEsRjV/TsZf7bqUphOE\nOALrXfzx2LCH9fwIpoIQxuhmw5FFpIlwLNQwG3p6dIa4n9sYPi41YyqlScsp\n7EmsSbIcnqrJljFnF8dil8L2Qj1w4K+pRfVAEURCJ9NQXWBeEwwAjAel5mAB\ndcIGGFtLOtwUU1SfOxTOOnUnVILVNdGZRZMgkzqLhk9RBRG6Mhc/2DvvJy1R\n/qc8+fHrnCI6/Kw5wLDI1h5r4cFxHXHqjCD7CAk9uKVm5irKdKOD49L2ybrq\nEgHn9WWvIbmxwYhUZO5kiIeb1a9oUzWtIhY0GPDxcesohNWLaGWG/nL8JxQC\nF0Dq\r\n=MMqf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n","gitHead":"60392008d42867da38211687e2491f02da9975a9","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@popperjs/core":"2.4.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-rc.0_1595779038515_0.14360495610387036","host":"s3://npm-registry-packages"}},"1.0.0-rc.1":{"name":"@chakra-ui/popper","version":"1.0.0-rc.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-rc.1","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"dc7c1e77bf79042bda8e84c99ce9415e230aba53","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-rc.1.tgz","fileCount":24,"integrity":"sha512-+2daofjBu9+Bw9Pfk5FJpX3cr+lbKA3PedKiNUBoNh0TjgB6A4qCopIOrC9968zqONTmj/jAwPjPz9D2joxmTg==","signatures":[{"sig":"MEUCIFTBI4/Iy67CWgQmw1eBRhcFbg4p/Z3wB2cvTzGFeMVrAiEAgIcuCimFWl6gELnEgfr6smOIQokbChhdP+0i/t+RmOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHKwCRA9TVsSAnZWagAADKwP/jLBDDXeveKCylFeYt2u\nxehMjil3dvo5V6ttbdIyPO1YgZw9f0m1y2W1RnnjpZyHsKsbfSfGnHnThDMm\nlxo+U8yAtUla2HxfW8DUpX5/1XiS1O96JQAmhQkwXMNWdatlSxZojAcyY1M8\nnoWr2+RLpyaw0LN+vG8tWvbkF+LFvrgEx9xtbAiLyzHv3GokSWaKNinTMXXj\nVCVvwh8B47nAzppAJG2kgSeJDgcOsa65tnOeYQrO9ivsLPV/E/Ggf+9VNLPh\nVEXr+mAAynLMYqbnOBsgTYsLxrspSXgdLl3/IcwZv8ODjvrWthehZEMB0dXj\n2Vb+qdmablCtMIbnWqeL5ry4gJzigZQ7GlVG5awOTXosSYX5BSbJ9JwzyfOj\n2Vbn+0wG3yABXUDaycxPox1jCjGi4uUA0Z0j4m0o9+NRqTrBcyh6LYlzN/x1\nhyCaYamxXxDVJ1vhMP/unqF4lEes8MFZSCFi0M8MVxt1c2hxZ2W4DE+xO11O\nf5oQBcqMD1mBGXEUOVp5VLCpGjjkW9zghtLDw5Wk19GOMq6W7twRYYx+1ar2\nTNZJ8z6RWbmWCHiPvwOT4B1lD/irVD9alUwPThLD6uxwRoLtqneAUaEO6L/M\n0XnYC1x5BTTh88rmUNnn8tmN0lc/eiASNnjoPgY4hyYfa2C9cbJdiZCYbp/I\nxLRO\r\n=g+yT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n","gitHead":"e0470c73a9f6be24525dc5458d6fb157096b5ae3","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"with-heart","email":"mark@chanchan.io"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.11.1+x64 (darwin)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.11.1","dependencies":{"@popperjs/core":"2.4.4","react-fast-compare":"3.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-rc.1_1596748463844_0.33922659128665256","host":"s3://npm-registry-packages"}},"1.0.0-rc.2":{"name":"@chakra-ui/popper","version":"1.0.0-rc.2","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-rc.2","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ce82947c0f4799caea6e208ebff6f848238fdb8b","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-rc.2.tgz","fileCount":24,"integrity":"sha512-oug2uDYtXZqZO9kvwwZul7meP75lcQuE5Nn7XkUeX5Sd/nAtum1KI4ofW0kNjMCGGFzOvgYlqc4e2PGvPNl4Fw==","signatures":[{"sig":"MEQCIES/KsF5wZgpFXs8yhQlCwJPzt2OeW+txdm9VXWfyW5iAiBwEwRpTdWJzYWirQBq9ltr4OJb7ObyK54sqjMb0nx7Tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfL96RCRA9TVsSAnZWagAAt70P/3fMtqTGfasGyGt4o7oO\n/1akD5AJgt+Tq9sRJPf/W8bzgUEXiIF4Z7egFyUts0Bjlz8FJntSpJAFZztR\ntFw1l254onNvzAjIFOYeS9frEYhozVP0Dr6ZI1j863zG7RVzo2OguIyyI2T9\nygLc97hWOlkKgtJLFu2vuf9C/dqQAA2x7ohQGyCcvIm2Q5e2Xg1zObL3sdQ4\nJB9ySf2KAF7CGT1KrWsEzWnxh9LDXIjbH5zgel31YpLjBhUigFTy7fuh3pHS\ncHldPf4LKN2qATKcqQnl5wBoce+PkFEYHEFRUHpPcB2NA6WxdczeCR1HsNwE\nXrDabTdZmkqboT9GNqWShEnnEgJtBe31bZEhJKLRKsgRFW+yKGWW8lZTzTkK\nZNuZF3RPLzS6VWO1zJZdmqM8Ye1/tTE5m6CZfu9fMcURCZcJMgYi9zVV5inY\nND66qbn0zK8G084noLo/Vb1ZAka+7F7G+7jAtPhHVrGloiiM6sKWn1bqkwTc\nPZCN9il4PAM7eywp+VCfjJ3Yd5Flnl4l4lIxiiXALQQtOUcKjF+cBW1zuS8a\n7CQmhAq4BTos+edKE3GwG1D6/dTqJsYNvsbwzxfQi/qY/gYk28SThdIbp2n+\nfExEW0N8mKNC+BXVD0xn+mhNnJX1+wyWB3K/4wBTdAIvIcBl6+uLUXJ6iZSN\nrbN3\r\n=WJ+2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n","gitHead":"c0a55ae7279887996fd2cbfb410476c86793e1bc","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"@popperjs/core":"2.4.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-rc.2_1596972689147_0.9602173844791013","host":"s3://npm-registry-packages"}},"1.0.0-rc.3":{"name":"@chakra-ui/popper","version":"1.0.0-rc.3","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-rc.3","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c571ed9f06ab6611380da6d123e57302219bb7a9","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-rc.3.tgz","fileCount":24,"integrity":"sha512-PDPbGOFFA1g/Vut/Lnb3pcCTY4Bt2OKFAR+1HC7F7oAunCVBT2tWWbOI20+gUup/sGPpwiMZUNusAdbVeH3jfQ==","signatures":[{"sig":"MEYCIQCre4HqwlkxChp9kwL+KcGkGpqVVC0KzdLeYwUFgkHZHAIhANq1+hjPUGNK93vJhju1ozL8vqpT3DmlBHMlREmXUVc6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":291729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfS8TSCRA9TVsSAnZWagAASCIP/2g4k+Ufi9nqeXJPCttb\nLGcdTCPGOyZcq6xusFmr66JhQd5vPtVWYBG5LkHeGc+6ZduyYzPL1GpmE8MB\nTFAT/B1NVzSXuQ6jsCF17TP9evks2R2AwwX7CurafZBP+nPHSTbTOO6W7IEH\nqOhRNTRrSYR1E2FhxX7SwhaFt2hrLRrN6WAm3G870dz6sBbsQtHw9y/yGx7z\ncdHZgzG5sZdeO+GHSCSmJ8qvZqjccHXCxdR9/mKn9uQGP3hp3BE2KEeabEec\ncd451OLfJs+G2EetdReuCuZpSZyWrBZp/40lfrnvh+rGgvXD7ouwjNTxCad8\nLdd02j3RSPhoTKzA+qSEpeHsL2Jzb32JI9BhksPw9FHc3Tp71i67hQOMar1U\nyQ4plugJGcDfaSNpJjmesam3HPNGzQfoHN5FdPSgdvj9iSZ3hROojecD6XNf\nicPlpSFpcvKIOA56QDhrzUStupYYBgFeHU2mAo7I1pX5cEz6Y+zw0OUZFVTC\nanTByF1GzmPgP/qbncAM1M46JN1nmBuJ6IBVJPaheU3tvGDInq4XTruknz/o\nqrsyxDn5udtCIU7obfONNksAMwA85/k4d15xG/+Z1vjxYHjq15Uj40uvpiue\nZdVNHqAcO+qsLnA1CtyDXp3J9OZxsJ46ihzV3eTuIeSXlklXDwS4RnuFsbdO\na1IG\r\n=acTZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n","gitHead":"a0b689f3a2b1589d58e4d9b0c8a9bbd02ed90f6e","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"@popperjs/core":"2.4.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-rc.3_1598801106299_0.7930163387987472","host":"s3://npm-registry-packages"}},"1.0.0-rc.4":{"name":"@chakra-ui/popper","version":"1.0.0-rc.4","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-rc.4","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d1e8c70887f065b31b969d0c243bc43367ac44e3","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-rc.4.tgz","fileCount":24,"integrity":"sha512-B2ahNRpEUctivEi+AGdZDmResCnyVvxxBwACB5/i+VswL54twhTN/MbOCzPPxcsRXjmxJj2Bz7IhbEL6Ees5hA==","signatures":[{"sig":"MEUCIQCwRbx57nQ8z2jlHHvqhDJnMAGF0q0wptum7Qr9/h2QcwIgfUUXBoZLAaUlw3b1xTiGsXfSbcCK6cRR1++Mg8iBbYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":292133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbfmrCRA9TVsSAnZWagAARxkQAI+X1o4AD50VrK6KvhEE\nZ5bgXFZ+HnmkDOJBXWDyAomFjprMxqSXcYjLbS57SRxvsgvYLjMtSEMaFDJ3\nfvNNIVoyAisB6g7nB3KPq8dFUHKF5Rl3AjBGh7C79mrFGgk+AnWK03vDLIl0\n2NuFTyFQ8OuN2lOljLx89cbytfKNtFi4qReolUcZ+sd7mTj3kKQ9+sZkeMTm\n6iZPueAHlMRLGLNW/xUUxsqBL9cS1NXtuiH9pKKAq4t1w1vKOdHloloWNQmX\npZ4eHjm32jLzPvzTNjsk/H0gw71UktbRkZjbVKSDciUoc1EJUuMymJWrhu2M\nCMR8BRPF8jvx79Jm5G7oI539ROEl6vJY8SxCtN5SxroYsCuzqbg/RhNVqVqI\n6su1EtikEbwZq86RhQ0miPATvp6kLoBBf1UIHrYURQV+y2mLQS0uS0fBFxLQ\n92+VNzjWr7PvTTBVonK8J6+r2Y0oZo5gnIxsuNUdlN5B257/kRC2QC2OI6Rh\nqduY7TCSKJsBJYU5vc2/Mi/RLCX9+uxueVt+PHGB7f1039EXHL2vXZjSnM2L\nHo46s/QJNi49VblI/+qZZlHH76W3ez2aDOraz94Wuaj7FSNRS4vk65umrYii\no66cMMBaoTPhi5TZll0wf8djFpEmjwCGVHkgB2JCKh3Vvh7oqmIm8qFgTF7U\neuNz\r\n=cjip\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n","gitHead":"830b8587c572a4c20d6b56b256accd6686255819","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"@popperjs/core":"2.4.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-rc.4_1601042858848_0.9598840267704078","host":"s3://npm-registry-packages"}},"1.0.0-rc.5":{"name":"@chakra-ui/popper","version":"1.0.0-rc.5","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-rc.5","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5e5ab0434921f045fcca98da761e20455510f141","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-rc.5.tgz","fileCount":24,"integrity":"sha512-5xBVBq33H2ZeTH7sOz5Map4ZAdCfT/5cXtCInncKXFwXS/ceQuezFOEvH7fhRW/fWK1ERBTnqW7ExAxJzmlj7A==","signatures":[{"sig":"MEYCIQDKtpHTX09kKlCYWmo1hidPHNA/wD3fm37YfemTrS7NKwIhAMb59VujNpPSosHYsnO1O1Zb3r0JNik73m/CdoSP0Nxw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":292223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcPWDCRA9TVsSAnZWagAA23AP/1CnV+QewBWhdW7K9RpU\nlFEpsBDV8PvZM9Pl/P5d5TAkLbAw41BSIu38aurThiBWckCjWg//EWB+IN04\ncXH6wAQ+qEl2wfP7t4wQF9BYseCGCvEMEYLPxGsL9i6+gqRT+lagM5m+I27b\nBQxQ6r1JWzz6GempILTKTtVyK9Ek3RZCppV+hP84U+Ow4SvwveFBouziXqRR\n1K3Q5RLneVaNY6ytiBw6YrdNN5vjB+yH7ZAvi1vmGk65gwVGvhsmLvQNU7q8\nl+PS5pz6zFQ+2B3LQws2hr8EyHgJ47/jiq1+FOVzTxI5zuv81ddFDUbT+HWK\nwsukODqVPzyA7z7ltmKeZ0PLzPfX8AE+sr8QTADzRFOGs1gNaKEbhmLb+hv7\nirROIEhc0VgVIIIpYkK94Z/AnvjQIoXUd/W0uK7gndojHybtO6ifUoj41E3J\nEhJAohVK0iiR3RDfPhU1q5zBZeP6qfff+lKWFik7+J2QqkncIDMKSaS673kO\n2oX3SrzipKpPbh6bfWnrOBJ5HGgujsivKOQcYzmTFTUF7CltfKKIjOAlrLCV\nr5y+bVbHlZaw+HBRqZbm3v6LqJvOfiEXu9tnfUbMNqIxiHcrxI5L0w4PXM7f\norASQD2S6yYRsw5fpyIRuuJg6mjU2kFL16haR0Y7w5dSQzpNekNrr1pgnWtY\nEgmu\r\n=NqKH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n","gitHead":"b5c8482b778b19f27ea1d6c8ab6d5ed39c664afa","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"@popperjs/core":"2.4.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-rc.5_1601238402929_0.8626203073578629","host":"s3://npm-registry-packages"}},"1.0.0-rc.6":{"name":"@chakra-ui/popper","version":"1.0.0-rc.6","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-rc.6","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d756d19155b186da83a3bb18fe98e0490d39fa71","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-rc.6.tgz","fileCount":19,"integrity":"sha512-+fvyuRp0IeGtyUHRFFBfzyGDsZxkqMjcDdC0EszXy1rrdGPy+BZndQrCAG+5m7GwaBkODk/p9sxFb9NO0Zq4yA==","signatures":[{"sig":"MEUCIClbqE8jmZpJHIfvxn8O3DRSmEnr6yoL0GclWaEHQAlpAiEA8/Ju7KZXkl4faBDwflIh4kmVJjmWFrjrs88vpeyrj2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflZzqCRA9TVsSAnZWagAAX4QP/jitw1Co1vy3gA5d/wna\n5vrH+4eXWiIzcqdWXwSXD+J2dQiBIJGDZ8EVDsfv6qWS7synPd0H32HIAJzw\n9G4ZCNU/3sS7SoVBDNC0M3XIedGdtqRcJpKmGCW31jGkWxfgXDBRx96n1YWg\nEtBwdwRmSOWi2rQEr3fEX9GsyS5aIOFvbDtkv08SGhqO4VnMcKp5qYmyDYI+\nT5ERpZhxaiaXJ7X1DqU3kqV7MRsi2Xnz8cF2rlzLTvOccqo14Bb+jAJfUHuf\nLeAeob1ZgI6UQnPuFb55PfsXAYr9nVSsRKqIeATcFXVH9QaJT8hnsNau+877\n66IEAoM4ho+O+meX0mOkLwlWbIF7EyDDQi2O8zraTvYMk2ix22K/QiZK1WeZ\nOtE1C0lsQadtFZR81PcJU4IniBLeD09sVv+wXDT4nycRLNcxx1MTqwaDJBmW\nmRTMG3sRzMfaWqUn3rMl/NYw1T9zMFymAjwQOdbcQo2Q9vfnzdLIz5+guxZ0\nhSlAKsWUcMFdbBMuaAs4vpbGliwgc9A71Ph3Sl2Ux6hRUne3fXf5wSypVrtG\n3H14DSVQS6XB356PbtrQinxy+xO6SmSiO8/3Ep6Gk1nrNEj6k7pnGI7yx+N9\nfF8ak3915VwOntFgycg4RHJzuKEsbLoeGbWrAjlWPeq64CNEAsHBmiGU8snW\nGcqD\r\n=lRx+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nconst { popper, reference, arrow } = usePopper()\n```\n\n## Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popper, reference, arrow, transformOrigin } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popper, reference, arrow, transformOrigin } = usePopper({\n  placement: \"right-start\",\n  matchWidth: true,\n})\n```\n\n### Adding transition\n\nWhen add transitions to a popper component, it's usually advised to apply popper\nand transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...popper}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"e55b45840d1edc821ad0bb45632535333be5bb86","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"react-popper":"2.2.3","@popperjs/core":"2.4.4","@chakra-ui/utils":"1.0.0-rc.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x || 17.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-rc.6_1603640553541_0.34960485033156563","host":"s3://npm-registry-packages"}},"1.0.0-rc.7":{"name":"@chakra-ui/popper","version":"1.0.0-rc.7","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-rc.7","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bf5c2514b255d0d78a3bee6ed4a35108e765ded2","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-rc.7.tgz","fileCount":19,"integrity":"sha512-YarG13UVEB10gfEDfZdpSlxGdEjlhNsjGtd1CP6czRsw1Ksro4uNy5J79QIyBC88qB7/fq180XU+jiPh0tZ3bg==","signatures":[{"sig":"MEQCIA6kfXW14IRhG5XoXyZRYqOEKKOXIbmAJ6HRuQCu3ZVBAiA4B/HQCXgLT9/pZO0zHfeDdNMHiDMCN241AKnq8y/mQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflfBOCRA9TVsSAnZWagAAKpcP/30EaErhoZu/RouIxW2E\nQkVYTWjwHQFNxEyA6tWdelNUP7m0ZVaMIM1VYtllsoZ5xX0W4yCdnq1HxHBa\nWR2J5x2+JGyBWb6npM8odRK4GfQmedOByMGy1Yn0kzYgPKdpl6JCQFkyzcme\nDbIihwflvPHQbiRtvceDjudDcUwDyWFzVjJY35R0siYEyxSdVbu1EosFy1cV\nCxcmVxXsc1+u4GttDi4PnQkeXDCsvN/Ps467gmLxBqsUVTql9QSaz9lavPEx\nt25eGD7lFmdkngByvv2pnaAzYU1rcX7SfKsztXMt4hYBlVFbYkyzTU/Agvbi\nt0GZbq6iJNu1YCm7g3zcne3oU3fM3mp4slqen3kaUEQxK0H6tpPI1i8pDJQ/\nau3X5G2NMupF8E1ue24EZHBC6yed5vt/dvi+A1ZUh5+vtMU4GVBHe6JSWqIa\ns+P8S42kOF8x0Fnk4dkHRHCqgmdZMAXF/JQMUJzProqYmnTma996/YPG31ks\ngw6iu3z6tQtg3z/Yt9Qo4GGUExGl8QgRMJGyiqyLGeH3lquxiRdoT8EKsIrL\n/c0eMUsJrbCnpeMVSp6tLxNZFalhTpId2j/w7u2WD5EGs5M+NWi4OJX9tgmc\n6UUuyVxPYKzPlga1O4Yrnc2q1tKOqG4tMaQcGkpnAZWYYcDeWcC71JmsJyKN\nF1/6\r\n=ZWzX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nconst { popper, reference, arrow } = usePopper()\n```\n\n## Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popper, reference, arrow, transformOrigin } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popper, reference, arrow, transformOrigin } = usePopper({\n  placement: \"right-start\",\n  matchWidth: true,\n})\n```\n\n### Adding transition\n\nWhen add transitions to a popper component, it's usually advised to apply popper\nand transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...popper}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"6da531af61ae3780c764590cbee62297fb206e46","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"react-popper":"2.2.3","@popperjs/core":"2.4.4","@chakra-ui/utils":"1.0.0-rc.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x || 17.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-rc.7_1603661902411_0.07668179150098364","host":"s3://npm-registry-packages"}},"1.0.0-rc.8":{"name":"@chakra-ui/popper","version":"1.0.0-rc.8","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0-rc.8","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b388b5a07b02f62c2ac27e1c75acf663c5de4ab4","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0-rc.8.tgz","fileCount":24,"integrity":"sha512-MAqCdf6/vLaJZr+YnRr9b1iceOdViM6TUnNKejLVQBEVunWxFQAqAlTWnatmqcjNaYO/pcd95lQ71TVqQdKmIw==","signatures":[{"sig":"MEQCICeAiusheKwozsOrAxvrKwrEg2wRjIVMToQKlTFFiQZCAiASZ+mN380QBcAhGEQYCdvuN9sy4YXz725YGBQOUaBWvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyT5CRA9TVsSAnZWagAAgOAP/RqTh0aHwtA9NnuTDF2u\nelbnBoQMa5FDdOZEPS5qr05KsqYicBL8uCURP23fMJNbLbrk0E6UV6BJvfCY\nrdDimN4q8dURUSY+kfFLM3mxk74ZA4vUx9tyBSs5wM/xbNakxGJDumiqh0Te\nrOYZWpRZo9ST761VIRSXECDXPfEmSicgZFA2DJaqNTybL4BViBJ9giTF5kut\nrLyN4RfEmFO2LIH76p6qx9dT6krajXDfycUCefhy6dFEk4TGpibD9OyK57tC\nX0WqK73xfm9K8OFs5x6t3Pe3iOmUTiCVvw7X69TKRAYlZJZWB/Uc4k1Yqkc6\no5bQ0fnZEIqCedzbdF0UcnuKMbGJwmv4G42HO6lluODie//ygCS4ckE91apc\n+ZvtsntxWKUZKVEBxSkWckFthc5f6KAcwu2VBLYpKcIV1gdmqMa8oJQtZi+E\nEt6OHtMws3kWl6Z5ib/4ibPOEMPQRkCRB0P009esUhzUsNOoliQydMT1Q+dI\nspB/rF1zqUETz7+gAnr5VADkV7irYW2nuC9MVn0/lfW2U2JOyfhh/7cI9EY8\n02tC/mv7sj1Lgx5qaeaaj+eXY1o6sRVvPdRrtMg2eist5mXcVkcc2pgKYuhH\nopZKSWxN+CpVV0/XKCiUH4YHkvTPseW6RsUk8hzkbTiDhveFnIi+t7paccad\n5GiK\r\n=G1H6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nconst { popper, reference, arrow } = usePopper()\n```\n\n## Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popper, reference, arrow, transformOrigin } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popper, reference, arrow, transformOrigin } = usePopper({\n  placement: \"right-start\",\n  matchWidth: true,\n})\n```\n\n### Adding transition\n\nWhen add transitions to a popper component, it's usually advised to apply popper\nand transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...popper}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"de4cffb1638e8d10cd74515b0289d70eb94931be","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.0.0-rc.8","@chakra-ui/utils":"1.0.0-rc.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x || 17.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0-rc.8_1604003065345_0.06618569171380861","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@chakra-ui/popper","version":"1.0.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.0","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c9d86c3b97399079228897a1ea2355fbefb43a55","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.0.tgz","fileCount":24,"integrity":"sha512-J5SOb5RgO6RePKBYqQ0lA5xD3TLSl0wWpicfc1lq02RzfIlM/ZuJDrd0WMAgqLUPUM++yeuBKfPFXMtmcnTBgg==","signatures":[{"sig":"MEYCIQCfxDRuSEAbeGgt/tFDJQFpekC1neNwEtmW2Rgm6Qs9agIhAJYBZOzBLEqeiyUeCOcOOpg+VUP86UhSc/YoVI+PYL95","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":90637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrl35CRA9TVsSAnZWagAAaP4QAIWiVHwWf8CrhftjY2TX\nI/Oen3m+BYAD5pA9aoTf+a6afNF+2gf+9UCOmADI0R0nexZwJzDKuhtfpfVm\naAPWObEKBBZ++dFcqwQEi1dVSi+vdX1Smf57Co8gOXkDsqMOg5p5Hhh6Bi3t\n4XXEMyUe7G/G0DaGTv5Xl2asDHGdR8DreHEMtbOfYfKKRBAkPkmmXNu7qJnt\nGRrwWIgSZoO0G5D9SAnzfuZh/AjSMNnh8OCoGnE+lQWs6IA9C5O0kIdMYldn\nvFmzjRmk/kkx+aT1adMCSaxBzom88T7UpU0PpYCBFL20N5+kmXLZtnU2xTZm\nBvFN5ua42opMa1f2Ebg3Wy+F1YzmE8/uWaLgyymIznM+/6E2H8I26Sltid96\nmOKUkSBOcmBJ0A++BmvNNWP2uZZxEIwB24PiglvgjMJMRVj+IWJM245yawkK\n14t8PRhCCJmYvfdfB+n9ogKBpDGIDSRc8uhb8R6J0xRn2zEYcDh9o4+eVl6V\nBmgGo6Oa+n2WyEvGfMnvCyZglp3X3jk60xWegeSDENFQQqWRg5hFysl5PL69\nE9+TEi4HIVrRp9b2/omznlyzqfEGqGPwjoRGIQQig1ChaEZELnmNtRewVjf2\nGek2XmkkrVpZE76XvaU7RbLE0B01hWThD9F581+ZFF6w8gFrEs8EODs8DPDj\nIZhL\r\n=UYbJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"c98ca366cec7151fe7ea4e0b6f893088797c5398","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.0.0","@chakra-ui/utils":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"16.x || 17.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.0_1605262840528_0.23022652849314462","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@chakra-ui/popper","version":"1.0.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.1","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4d45ed1186c3db427d0c4dd4c43b303996e717c2","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.1.tgz","fileCount":23,"integrity":"sha512-2PJeVl9KgIQpmu2r6XKDumCELBeYdgugX1GSAXPK6lvd7tO+LiFhUl46W3k4qmzi79MmXQ3e/VLw158iTUDTeg==","signatures":[{"sig":"MEUCIEV0g4KuRgad9CAq3lw59K1PhQ0q0k5LqOOnlK4i1KMBAiEAj55yqA7I3eMNyfurMaIfZv8Z7yBY2XleEdl2FqMS/Ps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuB31CRA9TVsSAnZWagAAjysP/R9iiGXAx0z9ke3fL5sL\nTUJrEQwumf6Q7akRvxTZ+i6Wn58OUTLvJMWOVHlESPCUcfEy7870bHdl7lkB\ngGlvhSPdKSj3DUPTjcwOzjwUwJvjLgNBK59rjF4FSdD6p6+/LSdcpF4v9PFx\nISW9hVLAKBO6eKCKs0cu6kUSseI9I9dsd19kF4WgklXboA5uTZN6OLQhewLp\nQCzdJGCBGagDWyDP9Z1CdLVvQGTDVXiludC0Z1YtdaK7YvsyJsYCUwI3IVLL\nggZJjUchiusL/7z3TgZTqk99H7uep2/GOiRWJiz2ZjpFNNwUrwy8iyfcsooU\nAk0Ou2s+hV5xWvdSqGkpsmb+MtU5zyL16sVTQNzgH+AVJpKpuLxxkibJiYl/\nzHTqdRF3yDNYdWZByLNYOyaX6TnpvBzo4wyDsO4LI1uKRInY/rbmJpHab800\nSCZ45HAAvRj3ACoikazWpftcLnR6q8yjfCFTTRJtoUyQhSeml6e34ORcV1CH\nb6U+d3cOQWcH3gN2OCPFydwNzVM7KAG0ruerTOiY2cL1VtQ+zxU0ctDH1/mk\nCInvVOexffpjUy5Amru9ZKdXTe28NFog/J63erXOuM4DD3PBzhZyM1nDY8uL\nV6opownmviv6poxhN9l+oEdXVnhYWYtg6gHUDPthCeOD7Uci0m5SpJr6PLzJ\nz2TR\r\n=qRUJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.0.1","@chakra-ui/utils":"1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":"16.x || 17.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.1_1605901806038_0.6009551411973053","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@chakra-ui/popper","version":"1.0.2","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f5a9fed3bbf420e13bfd00c458cd6ae459739319","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.2.tgz","fileCount":23,"integrity":"sha512-a2cX8EA/P49C6WeEVDwH2m7hyX8leaa/U77w8oK2pizmWbExJfx2sBtFQjwVpbOXxavlQLBW5jGESDcpelccEA==","signatures":[{"sig":"MEUCIFjamlNKnS4qGuvmPtQMuxUxTR+UkBesLRs6LA5P1i1LAiEAuc4LjpAeHuqXqmUK3rscMl4XExEsvEdjCpuDGAoZLVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf29AOCRA9TVsSAnZWagAAnrgP/03+CK6MWExz4uo6nAU+\nN5dz3Z9Bzx4JwDLIIffyYNxe7BPBDkWaQs1AHf7EFqtY0iE4yK4ssMF0tRQE\nZyzQNDxPJJA2am7fIbsefxHCiQrvpPC+OcaJ3aKQ6pjwOIamW3iy7wadLQdR\notApO3IH7fY/kcmxkiSBuYCdF0BqPYwL8S3LZzUQYiR5mHqNG3nbiQ/3yXls\n2cQFijjOPUdVhPHufL7FZ2bkwhobvovuECb0HOBkjhiPkippbuX9u0JbXK0l\nSQICuWXun1tMFmYL4Mok5DQG7btE313ovp9FJaodSe4UwOT+i1153u6MfNs2\nTAYPT/Xdh5HMojV8W6Y+w/QI97RrStU2yYhKqop8c7TPOcb0YrRggMKiLBuc\niyq7GXJyTiXJys2vZPjD2XqXpWYYoXlpS6mWD8Njy01YkvOMHFNUDDocrzRU\nb8y+Z0RusmMikI02g61+kfdrAAPUkXkB2VG9vYUQ5CP04rVzl9ajpeFzS+Cm\njqPNdHdvvpDCgUTNTCT/wPIpHbRsj/XxqLfe27knJYIjgH9cwcQRoDQFZhqB\nhSKQOp1mE6oA39uLdJJmaOLOF15gggn11U5tutykaXqjsrfTMzsLgf9KO+N0\nFmbmXiTsxWXi5qw0xyJGstxiUCKLeParQPr/nii1H1uum8NRo2Y8strMTuDs\nYsdw\r\n=0TsD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.0.2","@chakra-ui/utils":"1.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":"16.x || 17.x"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.2_1608241166371_0.14513062450371184","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@chakra-ui/popper","version":"1.0.3","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.0.3","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3d902313370e5ea85840ec814eec23d059af3309","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.0.3.tgz","fileCount":23,"integrity":"sha512-G1Q3rZFOKU3tjVnkEulLVfeQM9VtpwP4EH/KxRGKBcbCrFWD6VgeyXMvQngy5VZZemhniF2dhriB30FL0vA7JA==","signatures":[{"sig":"MEUCIGzinLykgrgMiceVYu0PUy2wmEB1npe7o0VJRSLbMPDMAiEAzcghXi6gePqkC0aCZBYyCIJu9jupPoTbK4zCDRVyyCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":90302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/ISGCRA9TVsSAnZWagAAFKIP/2nTqEirTA+WpkTYyaix\ni/6Wj2mWsfB5ckhbESGrzuX/Ts9m9cPB/jiQK7gLGrm4aBcKjUs6rfvuTx/Q\nfcozfgnsKQjiEO0x8Q9bRwrDxPk74W6VwvUZLp4KANXaZTfbQus/C2f2a8kU\n1mDkvJbBMtQrBhGLCVU71sjC4ELyOCz+8dw48j7pqxDXFThZhJAprH3PdHjv\nZggkuJWtIdLxmqHQd0d80gAxlHJCjZPEouTz9XdiAG/lJxnORNNHJLGt0ziZ\nuslLdqrLXtqfHTlsC6Hx8NuNyCGxy2xll5JBMEaNO+fUCi9mjtZvueTpuSy7\n7OVSbNvfEXW1+5V7NWHWn8wzqbEpuuDx9DDzg6LDehmzZjGYfzz1s+3sq2+N\nESO6gds352dCMYHEhP3wVO9xbKbzKwBwSFxWOEoHE1m65MJS0Mt+/uc77Kkk\nH5DdlnW6UeAtTaNkwN7HahXIJbb0PVtrwH4On7c11N+dCimM1NrBf6W8EM6I\ne0Kiu4hhDBx4iOovQAzVcC6GpH0+kLIunVvv4VN4miXUnSosYMtLjZgaT+yy\nKKGXDxlTv4+jHWGMjQrx1MYK1QrOj14XXYhCukrIwefXT+GEpYEUCefwz59t\n02/Xkgk3RSOwb4xrGuCBu2o/+ZZ6q9w6tTBDtQmSPuJZRL8bgrfTtvnh7u22\nfgOF\r\n=mqnB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.1.0","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.0.3_1610384511519_0.9503948283138617","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@chakra-ui/popper","version":"1.1.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.1.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0ea091b6e0f84dc272a042e414f52f310baa513d","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.1.0.tgz","fileCount":23,"integrity":"sha512-20Oyp30TnoquvW9Kdw3h5xuGLlf/DYOuaYRYJ7coYrUCSKqnTOC4RbtM4n9C+4CE2I8JMRBHuyIthhGX9CRtcQ==","signatures":[{"sig":"MEYCIQCYI9xTYxafnXppXKWGsrgNJQrxp59kHS/fvtAahZy08QIhAIzojsSq0NdbPY6NtKXBYzAhMpOTKPvEpqEYjXBADeH8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":91684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBJNgCRA9TVsSAnZWagAAgO4P/j8d/RHyXs9eqIWZboh5\nPpi3AkSQrhLP1WFeTYIN4XS2BGQUcLOVqWQ55Z6dECdkUr3/6TrCEKsUTPuV\n86HGQavrAXQ1dTkI36JKe1lb8vFH0xemX+ERfEKvaADtSsZDoeHXRgLgvokj\nzEhbGRTs90mwzmEYAJ6qLEoBXQK9q74vBCQBcV5IrNRIfKPrs7ELzKA3UYAu\nbemnQGaK6feLyzMlfnCH1KJWyL9c+1OK7bn5YNuV1CQEMgD0SPJGsV0E8epm\npuShrlS/phIOKBG5DOHDWdzrICYfQ8vn5QP5PcFE63MIZSyuYy0gyHD/fSNH\nYuxUP3TkYaXO49bKa87RD8vZWUcUh9FD644Zqk50C9HAGsVBsG+hS+hpGRQ7\nxETmrK1MjQzyyDs9TxslK2LnsQqXCPbFlTK/h8o/zlTWm995odV5pP4mDoJ/\nJ5l9ChvEvlL9I5vYzn/FFcnYyJiwqsWEpFMU100gEusZwNImCjLvxjLSPWAD\noGOnawnMXWkvjfJO2kxNWQHddDDiuIZKZ3n7RJ2MQyetQpvd4VtzALdV8ypO\nNqusKcsP4WPuxP1W6CbMA6ykUx1m4KsTdEdgZFx4kJ+gRI6J1oVcVbllW3Gr\nu8XI+Qv3kzOkFGH4B6BdmhU9lwWYNzCu6mRlvyiP5/fOubQqH6CW0xdcqJYI\nDPgA\r\n=hfoX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.1.1","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.1.0_1610912608307_0.8028285739271539","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@chakra-ui/popper","version":"1.1.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.1.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fc4dcf0005740a752b63c8058246382592b6ad05","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.1.1.tgz","fileCount":23,"integrity":"sha512-o367Np+FpiSqAP2LSgQudqSkI4uGXYl5F9qzwwKtf6zjIIsGKMu/eI103Rw9HMczKSWTngJgLjrQhH7rOTAocA==","signatures":[{"sig":"MEUCIECrjqxO6SQeg3DrXYkae2R/uBadxh1eNuQ7QRiatBqQAiEA3aMWZdpMXeCr/NEERu7HdaXRtsRUFub7uUeoXK5rvRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":91870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDYutCRA9TVsSAnZWagAAXhsP/REDamujvX+ekoJwipgy\npMn3C+l37TBWCBl5ZKRyQbZXsXJbNy+ReiNOwW2wT1VDbvd/WNs+xW2lYxAz\nE/gTCQLTrT+ISFEX1m3XHim+4FDaH99JqVmdHePAzBoUtMAwKf26vaYFkNAG\nErnhjOrP96w1nXhKGL40gvNefImlQK19wF9RhOfljfcWNsVWoP3d4aFZuntg\neaq3ALYyfaMaGlfdKb3jR0pAv0Z8z3yLdHmbQZw34k2y+2U/V6lblaD6jKBD\nnf2i5IpKfoZ60HvIYthGSti11zBdrolV0WjfLQHAll9D3C4rCmSC9fVvT0xq\nVHx1wceDrbJ9JRj6qbrlTjptEEfMMxTDtvgxeJ0/zmEKr+njKbeKkIOC0Wef\n6ZI9GBKbsK7xa8dVe6P6X75L7zY2rIIPhTeGVHTthg1mfrbxAwfBgRbgiJDL\nPdjzHOnXlYAEsZLKdOJRDy3CZ8eoPRQGdAwNGkziCfF/VxFaJTrFwuSaTQt/\nu9IbAMpIw6j6rPtW+PtIAoYiRWcMmB4R4A7ZBWK1Z/3rglclVjyiLy48YIIO\nXTF7UUAnjLyA9yVNHygVx17LzpPmtFqrRkjYFWm/6KFJQ6vRDgVLyQyceLRr\nKIGmB7mRq6Gs7+9WMY3IHLFwCmEHyP9o/tAfQpW/jyALtEpwTIKSIHb90cK5\nuzAU\r\n=NVgy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.1.2","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.1.1_1611500460774_0.11278410146124451","host":"s3://npm-registry-packages"}},"1.1.2":{"name":"@chakra-ui/popper","version":"1.1.2","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.1.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a46a3e56b6ddaa00197d93ce0b4a540c9d8a23da","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.1.2.tgz","fileCount":23,"integrity":"sha512-8ZPMXUjNdVgqntpWc8sh8zNflko16tiJCLRcblm7MP7oxqqYFKO+2mnq+xRh/Afl8qSdbDh1F2S3mkYQP1AdQw==","signatures":[{"sig":"MEYCIQCOJdn8Kb7yC2dnSX7jzniZr2/a/+iaPaBsdrmSPUDYOQIhAOlYbBd7aNkBhneL+hqYqhFg0cSkOQPxLmdkutkccY/P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":92057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFdUnCRA9TVsSAnZWagAAB4AP/jQtC2aLq+J1YHt9GzXz\nnp9kFiFr520kK0R/FsLelheoXP/KwR9q5FpDvb95IeZRmBWIZshcfD328eMz\nNKt9cpy9UZjqv+X6M4VyNWATYUC7pi5cb+FXif67uf98QD9QRFwXIHYAH3mb\n4/wZfJBmb9KhdMp7L1El3TEEbKf3Nd/oHNV2AiVpz580ropzZgofon5bSHPG\nwSWj2zCgKnK10xfv34v8hdybGNZYrr363ubKVtKirBbsFEt+S3nkN4+0Ov8D\n4a3cI9c3hOpXystD/11jHpYujG9nuRsrPMAZXBCR9ZO/W0dNbGEIUWn0J4wG\nrAb2Uw7efm994+BTy+xiJSA0bqljyaYiAG6qBPOqEk/c5IJMsa+i5dbWbkNh\nNI+ZWIo8khCBi3HcPMeoB3aJwc10NtqBQ9vNMw6sAejWwR/Ep4OhQgcx0R8v\nkDluUFNZlHvBXLMrAamxjxw0COA2/rRjPXUh0MbSzSbyj/l3mSIlQsSKRqER\nWQwr4WQpw3wKEo0pz2b8sjPoe6NZYi0UDNvMdt5C+8Y8xrW5yZyrI0RHWBN3\ndVhNu8j3R6aBVNVnczsLieC18nib0bbbL4UobxIrtNlfsmHnG/phvZDGHfOD\nVR3N55GvqzFVPcIlz8b1s/a4YGd0vBIsDFPLGN0TeUbAOItB+8UY1AkDH/Kn\n4ap4\r\n=GY7j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.1.3","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.1.2_1612043558948_0.07300809249823725","host":"s3://npm-registry-packages"}},"1.1.3":{"name":"@chakra-ui/popper","version":"1.1.3","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.1.3","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"352a88102fdcdd16a2c2acd5c889aff9fc06f63c","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.1.3.tgz","fileCount":23,"integrity":"sha512-4Z73UJLki77aJG8RoeKdjIcqk/UbfmvSLMTqEhU/057OcjSugZZs0Qw3OZQZRNKTcdU1do8mo433THHYvnm/EQ==","signatures":[{"sig":"MEUCIQCRxaGSk5Co19he6mAO2R4zcUUNmunUAKR7WAOfECBhCQIgJ7HzJk2MD0xxjdWVLaO40ngCQgFm1a36+VVslqE8Udw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":92481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHoBNCRA9TVsSAnZWagAAkQ4P/2MUFRFCP8bMudGCfEpD\nSZWf5H9tpQ3B48Y3GTOuD1Njwh/8cMvolsEyKRW8tj7L3AmqIS5vzH8kolQ9\nsepbK01XWzN+pDGSQJxTda2ueb/CM5hesBWsxYuQhmbJuKaM1KmT50aWEITt\ngCHQzU9nsHGp38D4S3zy2RQOO3ESMGUksN8D0Qud5vExUTWWAQgDMsISLq2m\n2pwwaMAAgLMY3mqllZIW6zV1W+iR4LJ0WCFEfpuB/VSFPp0hPOKTbb0sn2Tm\nlGeRtELcxLi79mPNgQL7F6VCRFtJOyIkBAntmisYfV34Z3osh4mvgbENWSPM\nn4xa0i9897A2WdNzCUyE84PTTAAx/efCE9Pqdij7AgieKzN/J3sG1tHH0GS8\nzU/PqHmC7yupSkgtON3OvT94Aqk7EJB/YTlVsdnP2vG+j76lyaQiE4SQ8sSN\noecZywk772uP21gWSRjFfczAeIydDmP9KKpieNOq7sC9kn+Ibg9wIHwnN44r\n0cH58v57HxQXuXXcT5rvT5sEwS8HGUmcp802NiQQ5OnX5shI5zrc28jNGozp\nRsdTD0iYj4a49jZKOSu7OE5nE3iGK7+XGmUCEyy9EDE/tyx1C28ZIL22OaZ+\nl6/RULsHYux2SVntE1eAHvuOtpNsIB3hsjcG3w2ACKymW9e2tA2PwOok9g7T\n8jea\r\n=q7U4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.1.4","@chakra-ui/utils":"1.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.1.3_1612611661505_0.39075211994746084","host":"s3://npm-registry-packages"}},"1.1.4":{"name":"@chakra-ui/popper","version":"1.1.4","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.1.4","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6b44115dea192e9e23b270c32a77b19fcc10941a","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.1.4.tgz","fileCount":23,"integrity":"sha512-eAZ6i/+7jd/fjgqWwE4SuhkKFkkWYDw0A/rfV093FtInc0lHDOjzXBgp5GEEbl4pnoPSP2AYJq+5JJFCjW9zIA==","signatures":[{"sig":"MEYCIQD6Shko5rWIOpwVueK8vsbAcbEzV1ixIzSnjLV9aBVgPwIhAIva3asmb8FF7NHtfLrGEhoaaw97CEBEry5QPD+Wd4wZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":92919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKBCrCRA9TVsSAnZWagAAlmwP/RUV17YVtDdZpNZdhzu0\nwxwwczbybWy3U73Nv+7zW7pMkuwBAw+r56JuLHlBVMxh4xEIf9fdn2kj10BZ\nyUzln/iZCb61gdQ/B3hlnzMUkj1/BdhZvKBNTYF6+KWOk77qywu4AYXnFmd4\nX7gU/QZ4YcOdKzcLEBDNBsvZ/kXmUtXKOa3qmnPsdmDNbWxBk53Tn+zL4Jdz\nfThJkSjnoSKNV6FD6E0rUwxqyNFo0MqjYi1oviGSYAJZd6va37xKecvU1iMI\nyxOFYwyjwgoUqhhadJ4U5JQQ3chrSR+mL8TNoSbKK6aq7jurfX9Q1vxFWeZy\nxQU0LZbN5+NuSH8EOqk6dd3u0jNj1KEYMLOg5QkQ7CWwoXgluLkeJz/Uu1eZ\nqCU9IhLz1CADkn35BMA19J+LL+yRyX3TFvahHljLJ35flMebq+Z2smh3B2R5\nTQBa/JcmJp9k1IE3dH97UOsMy6pQsm1qlbfFR7kQRAdeDfDUKjoWShMawjPQ\nYLCntKwwtkuY2Z5tRXl0RRbFvdFsfy5VHVb7nqm9dMVLms4FsfBkpuYpEeZV\ndhF5buKMW4p0oAr8Nob4qDFydy4forLzpmdw0+TIrgF+oI9VaJpS6bWbQT4f\nkmrRfLSbPK4rzB8sRKt10ByuwlfgbpD7gvqj2q4qo24Z9XMD6+3eRICzuBy2\nW+9+\r\n=5VhB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.1.4","@chakra-ui/utils":"1.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.1.4_1613238443381_0.058182543812812515","host":"s3://npm-registry-packages"}},"1.1.5":{"name":"@chakra-ui/popper","version":"1.1.5","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@1.1.5","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0284969e5755a5faab27da446791b2bdef1ae0ac","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-1.1.5.tgz","fileCount":23,"integrity":"sha512-Z7NpOMoycnELII8TTEC1FmMqAIO69xJ8pyNL4lo/ifNyTngIuEQw4o40U7rfA4E7A6AM24WmlgwH0lxFOfOqqg==","signatures":[{"sig":"MEYCIQD9zWozcZWTZuHOc2GZ9RI8CHsfN+WAetjNC8WzeB4QHQIhAINqkdx8YbaFHda06XxBxSMSrPsL02XRQGxP4CBbhJJg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQo3nCRA9TVsSAnZWagAAQTQP/RAe1PauowD6O3mC/eZL\nuCQhRkgjGqSFvF2Tuh9AGcQbAUgfdpE+yZXtfNJeyxccqHCUbdMhwr39S+Uy\nznBEzP5eemKytMmj1REJ4A2O67WmVWsk7YZsH1Bv+zTQvxhzYof+zV70eV0F\ns0Gnjj/oFtHIvSq58ELW9c613y0ClyODMNkrz2bkbzwG/X1M4xyr2PwaB77X\nq5E8rl1IH45glgg3yhNaMpJ78dEgyRVIPlqFne5ASLzt0ek2d8L147A2QFv3\nakpg1j7+WVfedHgV/DEFr3cbEt+qAExj4+nU/IF1iYeQNg1152t9XZohmjpy\nx7xRw3FyaFn1YhuwDKyMu8EtwICsQaghATt9l7BxfH7liDowCuldR4UxpS+7\nAxR6F8m9HnCekW4nJw0r70W1/0ocgkskCLVSMWK4sAIJvmB+8DABtoGPehKR\n/hvT4nLwsdlDCFroAcgcIZjQ8QDV1asWYWpa3MnFtvTUbci9bDCoc96iUi4p\n7LaPHJx44CGStVfmXXthEtC+Rc6KXFvmMUTgFGUrNXlFjo36timgcJRaoryO\nJDp5mlO/14T7Itli7hq7AeX16JDSenKscbn5en8dWxTcool9U/sT6uo+YgkE\nk+k4xgc/MQPCnu7Pl/TDse2VVHbas2IWrZlj+vv6jljjivnhqd7ZhcwyZRDD\nDLuL\r\n=EuzX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"dequal":"2.0.2","@popperjs/core":"2.4.4","@chakra-ui/hooks":"1.1.5","@chakra-ui/utils":"1.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_1.1.5_1614974431968_0.6473238991728203","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@chakra-ui/popper","version":"2.0.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.0.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"48cf74a434cd4e292b9304b65ef8a391b149ddd9","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.0.0.tgz","fileCount":23,"integrity":"sha512-7qm1Zms9YOhtx48Zo8TvZ5pw0Uz91gK7D+2B2Lu9W3hNovDUA0/UuHcSnDf9iBZAQqwNkyYakXtJsYPOEdhbkw==","signatures":[{"sig":"MEUCIQC8pTthJfcoiy7TzRf/8l80KZDQH935rBMGtnFW/1UhYgIgNTed7eKjuFU43Bt+/308hdMNrkZW9g/dY91QicBVo5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVukfCRA9TVsSAnZWagAApOEP/0qQgl20BWGyi0LYzeaA\nG/wa8swLzo2rFRD0lqsI35/FEBMr7RqDvCmwTrUBa5E8AU09Wu1FGY9lPBU9\ny5t9pc/7NHz+hOdJofkKZCKUVsM4tVNstbPj/ShTAL1D8hkQ1ovMrqv2180l\nz/GwDcpbyNAB9IBpQJU56NHVV2iOWyAvFqK2EJ9TDd3q8Fw/ZnnSBUJ+WCWD\nawloB+hNptrgC8fuPss83UQjL1WAXYXI0dbmXHvX6qOrSelzLKidzTv+o8Ub\nFOczTCJQo9RRuI61iRVr5UnXZWXawGqgimASZ7UdbbQZAwxxBChHaXUJ30lP\nKeSGMkXfcG7HjEnhuP++8Y+DBO8dlBlROwcLefS2hLAcQm/EFY05VCmWq0UB\nwp01zC2LYAwNLKAk3d8opVX4RTnXXV6YaoLGsgfGlXSSpZ52imlXJgg3Lx3j\nJeayE1NPOuVTuSGfZcfBCDL2Yr2Z7ftZSu6/+Pm9uprQXEqJeBjb+2a5Bu+i\njIiCuGu/kHkDxK0HioAoFYrfwcMEtFJbBFGf7tJKjuX/90vXZrQT8CemxzBT\nI6jwewFbCCvkB/+dsQ1mPkwB3stiMLJl4ZoXuXZDbg1/bpSOl8Bcu2dmHc03\nyCQ0Gcc6O9nI7seS19ED9HJS6X83a2IOCnSWtct4A4NwaJ4PC6cJV77saviu\n5Z59\r\n=gZzN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@popperjs/core":"2.4.4","@chakra-ui/utils":"1.4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.0.0_1616308511221_0.8212058124039301","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@chakra-ui/popper","version":"2.0.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.0.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f4335c367647778674a1661607bcc0f370f91a58","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.0.1.tgz","fileCount":27,"integrity":"sha512-R2mVk6GKlDyda5o8JxsOGzkrP2HKA03gYd+hWSI7bK7EIypBbLArnS592Om1AnIrvLQWzyfCZOJXFFqTVzRa2w==","signatures":[{"sig":"MEUCIQCWBWFV/krLSq8Q2Hca7enVvA9zZL+13l3y2ixgL7F0qQIgUjDTGkO99RdJTKwhmKiGK9s2Sl04ynrxAIoIDh1WP4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYxjACRA9TVsSAnZWagAAswoP/0PTX/es/M9EiP5oONTb\nkqw0xWejGLbQp/mrhe7MY8Ykgop5B6ooaonOj54OFzScJIP+6nifWtt546pH\ndRJvBBRx1mPZrc7etwK0ODbVLgT2F8z0Wdj2hgPGAa/8QFLMYAq9YUlVqrng\nNjijrjGLAexjTvS/p07T98719YAuc4ZkkKX8EI4BtQcdhyySSJGYXlagiX6I\nUBzoCzNsfovoh67qFgLtk+VyUH4wEr/u23WGiMFW3F483aNiOs1IMZiHU3fA\nKsmnL400RdJqMFGaAL+AtPI7cOSMjKirzzPDgFmu+e8DcWRZZ9LCj9CdbYwZ\nr3r1LVaL1+qDSGGtZUmQLCLf8vtNRQFsdG9MLLmdhzRWSVMws2Y11AN5IfqF\nHEy4GB4AqoSYUHjGdrO5ydSaAkRadOkW1VHMhQek/mM08wb27Igvvu75pdLL\nvQnEXAMYRjKz+Al9wZUHhUwbAmWLf5UlNZlzfZI5YVoj6aPqyfWFXXz6knzW\nV/YhG8J+41+xXT3koOjX1tjjeCQS/55tXK9xEVIJtrhMYM9yg07u8KTiF8Bj\nVx1BRuBcC427eeZpmk3IocNVKb6KPRBcZJiZsGxD14P8+mlzg/+bTvnz+hsC\n1fa8sAgjNx6rps6Uu1XnjHh3Q1SP27GVkLG6iJ203988x4SEwngIcPe2myzo\nNZG3\r\n=+/hD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@popperjs/core":"2.4.4","@chakra-ui/utils":"1.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.0.1_1617107129270_0.15864821098743342","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@chakra-ui/popper","version":"2.1.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.1.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d213b63bca5937321b5acc005eaabfc72c04b4a4","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.1.0.tgz","fileCount":27,"integrity":"sha512-1irixePeBJvc2GTciHx1+WpJaD9xQ/6ZZ/x4A38Ppz+rCS20QWIpBwLeehg18XAJbikcUK59lHmwzgw5RAOu3g==","signatures":[{"sig":"MEUCIDd4Na/jJLqcKp7Jj3jv57R2smbDSECkR9PHTuBSje81AiEApgab0f1Iop8zhO5SXxN9ISD20TyqSfa7hFNJnvs44+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbcqsCRA9TVsSAnZWagAAp/EP/2b6vYBAutBEWznMPZIC\nvS3eAu+WB6+g6qT6DZ7eqkm41ypBlaZoQfwnxDeFhfOETv3gDlTUyGc1kz9d\nENxEDRCkpuJuw1vC3jjcln7pvRB38OTrLgYE9Uqyt02XiAoaZVVqKEBuxKZw\nlFVOjFhcLpfdYOu2qE6s4xQ6F6R9dP3hnfUfY2zIgv5tKklvfdUA7zKj9CZP\nxw6GR3olGq60QL6ObaO9K7RQkY3K3c5aXBm6wXWTq8JmgKFGpw/NTnl0xPVA\n0+ELTP4oz6+VWGIMbZmmiEsAOV1kGHo4pOgyAwY6wAtG4n38vGDmK+oennFj\nGWuVfvJx3fuCj9aB12eMyBAPMeSTb5T9TOD6qzDATAmtnme/yPDzYYjVyIeI\nPw/upiJFTsp3SXrYzn1B8EZoLzuUEMxj6PO4qD8GcPuF+0iM3F6ba+aErxDI\nqLc5jpGNBROO3a56XoUvl8Safx+Y7PajRQkFYibKM7HXuYPSAhb8CNFxz6Ba\nb2e4yqGK7IW/kY1z1sJydw3m/119xnSr+D8J2vJMtp+uCFiJDuDOG+TGF4we\n09yyPsGEGxmi3wHf/8mx6fxzZrxXO2jz48c9HF1LvzX+8KZQcLxPMrhkxj95\n/AriZVWmwo1/7JWl+LYcDNXyd3fF5v3/rv4fNLzzqWCW/WfQTMspfPoQ600B\nXTRE\r\n=aygq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@popperjs/core":"2.4.4","@chakra-ui/react-utils":"1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.1.0_1617808043887_0.3246684578940211","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@chakra-ui/popper","version":"2.1.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.1.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a820062edf3e60c54763572c0d9ecb226ed3a4a3","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.1.1.tgz","fileCount":27,"integrity":"sha512-wuWJREcjR3+0xAXm58aiNUprjdSaH44Gr84plfCvv84OcVsLQV3DAT48GIxOtIrztaHqsWpfImZ7L+hdItYr7g==","signatures":[{"sig":"MEUCIQCuYZVI7kZgqAwx1tjWI6inVdqM3yWFDMqL1KpItkuW/QIgd2nRU5AEBrMEkQ5fbIDdcVoxpUFY2rhiJ0oEZiOEJNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdhcyCRA9TVsSAnZWagAASDUP/34ctiEUvSbCrKn2ssUk\ng178L1RxOvUL39YBykBylucsWLFaPOcZ/P3HpIcUFZ2YiCm8sKOeo71f33lM\nyiodqhNGj2CUFtza/txPYgCC6Nq8368M5XEgdu+0fSI79pVzmLX/uW+WmfzB\nDMoLtiCu4a/PrTjgLmxFf9G6TJXp2DEruUXatvnjpgsVQHSQdOuNZDBjuh/+\njbZYgTm7ev1I3FK5McWwm64aDXOIuS4doicyFXGFARwxMTCvjHXad8/JSFl5\n4a50XVtlRT7ApZIsXFgFFUxejnzOHw6xmjQSQiepuUyp1miC/5q2sYnJz0VN\noOvPz+EA/cnUwait/tLKS/J4b5Wwnqw4lKyCvQxeZ+MU/HdSmWgZW9n+Eix3\nAkZ0/jIytJ8dFJnPw7TZMwXHMXsztC4i0R73t0i0KbvkdBBbxFl1hTsUmEt/\nTQeMJZoDBFGTJub+EoXZpAFFbA9Lb0NfYJFP48WkczKj7m2YARrxorOXOy8J\nCuPvptKBJr331kpsKyrGLNh1/KnDt6ilM8YFL5HA/w8m4fdadt2jLTcWsvKi\ndRatfwADOeke/2iexTnys95Jz1+p/wsAhv3C7jwqrypvIvlO+kZHPyUOEdjI\nu0IPh+bwK0tX/R3lauOzEsegMgBzkffp04wWM7AEAGXDhgFL8rS57PG/A5le\nGxy8\r\n=Xuxp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.22.0","dependencies":{"@popperjs/core":"2.4.4","@chakra-ui/react-utils":"1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.1.1_1618351922290_0.3426119845649498","host":"s3://npm-registry-packages"}},"2.1.2":{"name":"@chakra-ui/popper","version":"2.1.2","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.1.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a3948c338c0ff4948a659fad34dcbc3d2bf7ea31","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.1.2.tgz","fileCount":27,"integrity":"sha512-X0GlUwOlX4coDO+JOYR52HZt8HsWGZmwL8GWr+DmRZvjBfRl7zKv8cAd4urYz5zwAo9TQfMb5bitjM/HPl3MvA==","signatures":[{"sig":"MEUCIQDj56drbnuncIUL/3loEDRl0rKWKsiAW4/HTkej73NuZwIgJvbNBDb5m/gzkrqmWBpXCGxsolmzxTbgK2FK2JEmu6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwv9CRA9TVsSAnZWagAA6RoP/AihRHtfgWS9zo93Ts8v\nHdOkDDtYzWRsmzBmtgRNGD9JnvWpYr8qkS8Qt5n67iNrfZF7FlePjvGhizTi\nWXMRnuY6wE97kMRVSZfgxKNAMxPzXkz0hchuJIGXqJVA1I08q/Gl50knTnZ4\n02GP0FQnFtyiDpIkZYGjWkOESsJ4AE6H+nOlGTmj5makqQPzRv66u8ei2apm\nCB3Cgw+gbujkNa5h3am5k2BV8pAJk4BuSiCNhzEhZ/5XvDmOluWZWlWqBQ0C\nMc9/Fqnm816eCJaC8pUJqte3E3pNULazMnzdjXXf0yTQwzgmYQIV20m3bbvR\nnzqNLBMEPJeKsSl+sr2T2Q14ZG7mAy1QdazkKMwDT7NBcpKcVy35GSpkbK3I\nCefky12yfC9gX9x5qXbEf607oitJLdIbcz6G7z++66+K/CqJBKFLdEppGQzz\nnXyzTlIkMF4tesiyvRl1LB+xkeyXZn/1Q09CoIMdI0oXHpHqp/8wMHatV3ic\nD8WRuc0gEsOvKcRTuueOsqa8CaY0zef6peEo7uoAH5zIQB/m9ALxe5xrSX5i\nBSVWQsw8OwOmfjFBgmWDidiMi9qXI32E6ycjOWU6/xaIJn1Qj1jQ/uPmLZzh\nGo/c7/xmcvI2cSpEMhh6cPXCRuvulbhYS3BQDusQcvnpQxAZmgwW6E3NgQKg\n4Gqj\r\n=HNX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@popperjs/core":"2.4.4","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.1.2_1619201020947_0.47194550814348024","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"@chakra-ui/popper","version":"2.2.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.2.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"108ebf9e73ec7a157911bfcd325cc978c683838d","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.2.0.tgz","fileCount":27,"integrity":"sha512-gCwl39QSTnVDmkxEoXCIJFYC0Nv88msNyuoAaCpxE91SDsJaa69guSWUoDr0eJaEpzIcXG85nxdeo2gnysMG8Q==","signatures":[{"sig":"MEQCICnCUnw673d9a4VdmviYd5mK3OrJIrC6OutWcYfpk1Q6AiBSAjz5CJaeOImdxQs2Lq4gyP8/OgJwE7AOWOR0Ul2o7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrhZdCRA9TVsSAnZWagAAirYP/3a+vMVr3RlVxD4NUoea\nd6SzCBV5jwLmnHZRKXrfPVVRlMz5WKl7kbRaxeBMb52PsSpYm94mNN1TCX9V\n1DR7g5aAum8cK8cwcP/Z0dCCJtJyUXQpaC56a4GY18I4XELV+VODysXvQKUS\nSpy7HFewrer56Hg57rnNmTClcm31SchyWbfWAd2nv8Gp8Fl9dLb+eX5Ebm+S\nXGC2wDxbTv9r3saN6Cl1vNgFbKX5vwXK5X3bLLf/Lu+FSqQIr1FjsDf44w8P\nD4I1FWUDSso0Ob9O1lZfFm/PNprC14bmXxgn+3U4FeJXRBdjQjsQbhUdpMU3\nZiG+dDJeaF5f5LQNou9+qifawsmMArWRvEcDep/YWcWr94LGZ0cPrW/c2UkT\nirRtrSezqoX98IxBuLGxR4xcTTbY8XpxotlqapaH6cz7ElP3U9Fwu1E108R7\nIXOxOJAb5FsYIduoZRFJfgLXP46VfDAmzO6MbSZbaTTKbftzMk2RbTWpdM7+\nvKKPQtjWuuD9Xi/WkSWuLjUmSSAVJq+00vMnE/dh4Ngsqng9gkcH+JpQeip5\nX2SpRuy5DkMSnU6KvDTeCFDVfkcLaDbjRIH27mNk7JOp4OS2SzrplLlEs4MX\nodyl4jO/DRwFCrK1GhkxTNVIsYeE8VgCzcLOn7OdifaTdljk6sRJhcA6R9/U\n1XgW\r\n=581N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@popperjs/core":"2.4.4","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.2.0_1622021724699_0.2566215266114311","host":"s3://npm-registry-packages"}},"2.2.1":{"name":"@chakra-ui/popper","version":"2.2.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.2.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"51d49933ee837b396d78d9daaab1d9809afea982","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.2.1.tgz","fileCount":27,"integrity":"sha512-W0hMTBp2X62UooF3qPNmsEW0IJfz72gr2DN8nsCvHQrMiARB9s2jECEss6qEsB97tnmIG8k2TNee8IzTGLmMyA==","signatures":[{"sig":"MEQCICviof+cEpTBC0YKZqfK2U8ZR+jozy9nxD3tRZNXfhdyAiACZ9d764tdRXUbRqCHzwbBLOiUHIbt+eABSo60vfoLcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":108985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzNn0CRA9TVsSAnZWagAAiHcP/1K1xrRvzAjyW5qd89hs\nsFkyDpEu23q5+62re4ACapOX2I00jhTeMW6NefdF5pjJq/qlaK7gxUuAhrbc\nKEbvFrgvicBRcVY+k8MW1C4SFNzbPuGXe+oGcUg8Nd4UZeo0oyc0RtCLxNxY\nH51YsBFF6ASWdXgpsGZxTlL/Xi77RJ+9uy08REaT3Z8n0REkMY4gjpncbf00\n0qZc/xXOs4C3XdXbajb0t1R+xuHbPdZ00/iSHI3aVzz+uCd7WThf+EBJKVeH\nrv+YDzMZQGOIwOv+/KCQ4Kv6HcNhMiiXBrhEBQWMffyg5C8zTbWYbD+bkEAk\nE5wIBU8BZj7s4nRt+H1ImbZGqRbeYOIfDzqiifP3FebowqQY+NJdube4WBtb\ntAGfoVtY84EccTrtvZrcx108CN2BB8jrRwxgSlIPzeChkQkwzOt5koi6Mu2e\nIiwQrmgSPETHUSL7gwcgsDTpo3dXr7vL3YzgyznOzlfrq8cmlpWIeiqSdgJs\nlwOibuXigYuSpDqSZUuRZwQ+MKfbqO9ThnUwa/w3p7i42VvivQvLhwsv8LsU\nkPxV3+iiR31r516e6TuvGtirmWzL3sC/9xWIkperwmd49JzKSwD87OxbP6bz\nBLBroNeTpZwdgi2qNvg54JHdAfWm31Vx2UvlDcdO0qrhf1nIU+9MdoPkkl+3\n2DCW\r\n=wvPm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@popperjs/core":"2.4.4","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.2.1_1624037876135_0.7545246158701442","host":"s3://npm-registry-packages"}},"2.2.2-next.0":{"name":"@chakra-ui/popper","version":"2.2.2-next.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.2.2-next.0","maintainers":[{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a66077aaac2df20e0fc1cdb4f8e7b660570d6c19","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.2.2-next.0.tgz","fileCount":27,"integrity":"sha512-6kkfGyIOMZotG2KI+DGqqsW6ZbFIyT/MWEI+MSPLpy7JbCoaRoI6vPKn14g2K9srNPIar+fDVHw0ro/Lxc1OQA==","signatures":[{"sig":"MEYCIQClBqCQroX7DjWZSYv0y0OIiWrdMg96YQdMpLKv7xmuugIhAKQt5MWu+heHI+eoy7ySvIRp9vW1E0oieVe25Tyr9lEV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":109139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDFP4CRA9TVsSAnZWagAAGCQP/01KFCQJhinozATOWaFL\nliYwweBGFz6Jo4QqThMle7S+eBH8IguAshgaojd8+vPXtW4vmFqox+SzbRkX\nqDh8dz0ThZIEq0mZBG/MXc2AgD+5VmzNUJqyH+D18SOBFJtzSivtr631p3kT\nDp7AOrTBmvt0tjZAQWLgpISxPEabVWKT07USkzk35rZCz5Elc7/cDsIjlJ7n\nCUDH2C8YIXm95taqdDX8bp5OQbj7dQhfWfAZz03SG5fDWCtEfLZMaUY7/dir\n1nqAfM9B8i8/sRuUuJgf/K2iYmZzKw/R7aHZ6uGOCRhk1GUAw78HwvBrYuMQ\no/i+BYc9pmdqxXZ1chhtsnqMJeVlxAK6hHBLHWBBUUJqCyc4cBYlDqpNmLIl\nGQ/KDdmezmqgE9uZwn3ce/UsBsfdqcCR5ME5wUuVZNpzE+zp5closleaGCCD\n3AiuFLB9CVtWVf1hdLHHeQe1/56UsibDltEK+0hB+tF7oTrVRdBXKIQlC1ZD\ntA+Nb7RL7yvIQaLJsG7BXT6f75PTaG3ZdG8mTRelVFgCncDOsXgx+4M5skyI\nmSXtWhUuIKa+DDULG5R20Lf82Sj47esk6ot+tIPE49d1KY9mQDYY/QHNWec7\n9jDw7816KBckmLMUNSB1oKB4KSZ8kBV7K1diEBY9DEaNl4ZlYUHAu82XonVM\nnuek\r\n=8fxh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"6.14.14","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"@popperjs/core":"2.4.4","@chakra-ui/react-utils":"1.1.3-next.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.2.2-next.0_1628197880071_0.19911974759133466","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@chakra-ui/popper","version":"2.3.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.3.0","maintainers":[{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"df76c1b38f6345ed31fd8cac597f9990297e630a","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.3.0.tgz","fileCount":33,"integrity":"sha512-K3Bw4RqttnX6TegLCBcMIez3w8YJFhUyLIkGUH0g2OCGgOajwucryFjNpuWRwkH4xcQPHghS9OVPYxRYTB22xA==","signatures":[{"sig":"MEUCIQDs160b+nmp5mrQ2C2vSbet3Bg808ffrwn8NWW7UXCFdAIgRNJbLzP/jiwRnI/REOr0iS67u3Y2ca8j6jFTPN+m/y0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119091},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"6.14.15","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"@popperjs/core":"2.4.4","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.3.0_1632150789977_0.43621721111146927","host":"s3://npm-registry-packages"}},"2.3.1":{"name":"@chakra-ui/popper","version":"2.3.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.3.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0e1c5ec405c5953a075beadd4e40c8d08c67db97","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.3.1.tgz","fileCount":33,"integrity":"sha512-iRsJTWw27c7HN+304UxzT5tDssEsCKBsfXDL9cbgwyhs4D9GJQGqM3eJDHXvvd1DAf9WZuWzya3sjvl3YhPtPw==","signatures":[{"sig":"MEQCIEBOFF8X1hCoj1P9Qm2NnOSNtJue7P8J7iCuWQwUJ7yXAiBHKhykDbLbG94PkhQRBi2Gw6n/PJpC97zjH++kyt5hAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119468},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"6.14.15","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"@popperjs/core":"2.4.4","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.3.1_1635971579920_0.17258141241545433","host":"s3://npm-registry-packages"}},"2.4.0":{"name":"@chakra-ui/popper","version":"2.4.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.4.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6605cbdd3fad5bd0cf120d02c0177ebf2d34a704","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.4.0.tgz","fileCount":13,"integrity":"sha512-Iw6u8pedu+UOws7GGb7mLPjb4PRZqbXCMD30DlZUBcBSCtSYed/J26recqgY6TV48ZTPbLjpvJorTGY8gR+Vwg==","signatures":[{"sig":"MEQCIDRNlzu4SRIqZcyoPFVJ7PPn8ZjNQNtWYSGIVcdv6wxfAiASPbuuiAtj5QBnifeJsYuXNVNh7HfFkmWBTaf7RqqiEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":59021},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"6.14.15","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"1.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.4.0_1636649809077_0.3213468196282028","host":"s3://npm-registry-packages"}},"2.4.1":{"name":"@chakra-ui/popper","version":"2.4.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.4.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4e0c115a1722ca5ff0f5aae5c7509137fe82ef69","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.4.1.tgz","fileCount":23,"integrity":"sha512-cuwnwXx6RUXZGGynVOGG8fEIiMNBXUCy3UqWQD1eEd8200eWQobgNk4Z0YwzKuSzJwp0Auy+j5iKefi5FSkyog==","signatures":[{"sig":"MEQCIQCWzO9I0qPm5XFLcAT29stKvw/RPHwutl3kq42B/ZPqtgIfTwcKTqlPamUG6UT5gnggUaJ0iePt1sKvf7KHo7E7tA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89182},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"6.14.15","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.4.1_1636746694048_0.16053745386042162","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215125733":{"name":"@chakra-ui/popper","version":"0.0.0-pr-202215125733","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-pr-202215125733","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"38b97591aba99e43696334f951d2e9cd2f131fa5","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-pr-202215125733.tgz","fileCount":22,"integrity":"sha512-1lbB4tm9QgGWJXzogOZk1jlA9jBI4tInnTa1e6L1TSlIpM5h5GDbliVGBhZ4b3h5l8B4AVD5BYEBkpGYqzDGFA==","signatures":[{"sig":"MEQCIAG2JbpVypvYWk55CfLA5T7+jBCYFxnWMUMoHWdSTVWZAiAlTzu9n41ZoFDpWRGYSx55hsTKKS9Fy1MuiPbi3W013A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/nRnCRA9TVsSAnZWagAAQuYP/jNb0zJsAdwTeHKF2am1\nrHCnR5ze3K6ceUaMwPd3i292bkyreAv2OJrfOd2TB63Ffj6t2ez4SsQzFVoB\nx7Sr6jjQRpSiX2emkij2aBObtIsXYf4rbEYpGjyL3lxyVjsBR0zEHYDUeyZZ\nz3THZ/6SXxcorTaPbhqz4ZygMRoLZ3zgcz8ZQgJpz7iO8VyAIKp9PkANwE6H\ndfrIjmxzzKo3OosuXfvgENpZY2FEdnkWpS4zn3HchwaQvGdAAoVrb21f65TW\nTmkdjBdf1jCXxvYlj+LrDpeJVFMzassZLEcjaW9tXAV45Jaqp+PvG9c6Sh0I\nwlx7dEOotEr8r2pbma8jRrwS5lcnANUYVCsgc4X+lKLPmp7HAtvdGfgrIxsO\nJmvBPs8L2DQOmcYzlEchssd/pXbn33oXlRp5YUD0NlXunRzRqyIy2RvyJTma\nSO/UvvcMwaKkcVSnBlkIXinVYNokWVjQ92IT6eukm6blQko2TrdEP29WTiJh\nPOSNXepOSCbht7N0krcOiGy36qxAnsqP4fLAaL4As2rlzHUZNg1xeL0tjuWc\nPhvOWYYQDtwhanLVmXrNrxSHjuS25sDaFiH0wildKz/I8BUBO7JuAy5OTuP5\nt6C7V5w6TZ7pnpM1S545ARbnvbctqH4quGBFVpx6BYZ0EFKPEl64p5qeHiu0\nv/mD\r\n=wwVt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"5ec7ab0c37978861b0a67e7f31aaa4157f05cc4d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.1.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-pr-202215125733"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-pr-202215125733_1644065895155_0.5243851919592619","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215132532":{"name":"@chakra-ui/popper","version":"0.0.0-pr-202215132532","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-pr-202215132532","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c718d855dc08441ef9d79e5e56d10d20b351a504","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-pr-202215132532.tgz","fileCount":22,"integrity":"sha512-i9cWCwhFJNsjAEY4Z1wc4Xw/9hSiUWgjPPwXsLOSePTJlUpGKGuqPN3fVJxpIiSF9CmCsPydj1NUU1bLF48Lww==","signatures":[{"sig":"MEQCIDlvu48c44unLgfcmbeuN6za78uZVWSFt+CCVxMCnoGyAiAjRgT32sIss7vnM5sbRndYKuFXBG6EM0THLNZQ14nNVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/nrzCRA9TVsSAnZWagAANuEP/2FZEjLMqNj3tgyo2LHI\nhjkke3h3/r0SMo7PIOFDoTjkARuOotUHOaDBgEXhZCkWciJvRcSd71KWSh/e\n/Cpn07zxpMN5cDs25w2YRwio/7+wJ/jbCav5DouBoPeUQNREGiC0/5ex3iph\nwa7LvuiswYz3bs4iRTCNm7a4jZ2nfOVUTPb6KsDCyoL5NrWE900Kc9cU6Rab\n5qcc2UDlWu8l8gWqYnnIgE46npeAFmUAqkgap/O2uvPbPxklVz4XklUkj9G5\nmx9yRH7WSOZo9KzAdVIKKucXisR/nBkLnEON1h4UHDVTb+841+MQDiecVh22\njT22ijF9iXBIWRcYfcqQ3uvh1Gg9jmVlZuHsQIiDsVvE724K+hRuh+HHLnRj\nglzuxmcW38gRjXRk0a603aFqFMlDkp19utbNpns/cEEz2gTuve5tVuUFidk3\nXRKnxPsNMDXq3QOUpu9mkIy6gfas452sOJmq+2q4Bnrn0xF4GETY2x1fh411\nxcgSyruLEjPOp3+xZEkVFz9GIpDDcXLVr54hcoqolBX2ZrhEU1ykU0Vl8iAS\n1ifmbFggQ5iZYBaUHLCIwrE+OIqm9RCh4wxx5oBy7gxTjDxyOcK6BMsl6uGj\n1vDyMka02kT2pWOxmZuyeXQWeITzvWKOLqTUupx/iQzzM30McjfZhjvFqYeb\n6DGU\r\n=BkwW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"a503acabefcaea86cb7f40a6305830f09d2d6083","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.1.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-pr-202215132532"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-pr-202215132532_1644067571471_0.32686736900374","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221513279":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221513279","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221513279","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2c26b2fb1237b3718b6e5305252f5bfe8cae5120","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221513279.tgz","fileCount":22,"integrity":"sha512-iX8K5uDwOd/f+hmEFg36gKpGd/9jq6TmPgnB6FRVwEk1AHGxelN9RA0FzBSrJMxmRTv1PMkjOMcTAu0Bd8LDVQ==","signatures":[{"sig":"MEUCIQCrsQy1fmLZ5Iq+cmZ8K8eV8EBazNgxvOWZG/IT/wetCwIgPDXZ1hkVd2iHuhYj6cIqcI+1KcZD57eFtBFAyKuZFbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/ntbCRA9TVsSAnZWagAAA0gP/i4LOIrBgEvnrPcYCSc1\nlNN2GCqCN47HJIUH1YHrjeBdyiCLbldBLhBalpLhgGkCC2qJmvoRYnLz28x0\ngNZgQ7S5AmNVDs4+yhWGCyFEd3xdz5UVLMsVUzAl+0BaqvDcYbDjPmElsSlX\nAJWP4OzkMH7wnmaEyzaXzBnIBx6GQnWeGi+foMPnxmhLDG8u9wWAZ7UJ0EWl\nQNNOObff3CqL9zEyO38vrNb+05Uh/Ufr0R4C2v/Pa7XRfVnJLbMm/0ukzAAn\nilVs7eGitHAV4dLrG5ICfgfz0Py18PRRBNDviLQKtrDQ1csHlzOgK1+9ooju\nbUe7p5qy9WPUE3h/F3Oy2uwpJ1JcKPviafOR3k33ufXZFaVibi/hNOuF465M\ndZ9fktgSAzxGt7nZLj6hAkUMKn06K7/8DB+MM3EWxMt+A0wdOOrN15Q37W1I\nGx3GmQFM/FaBCmpPP0pbF27KhKg3QDTCRrwYH+K0Yz4mpTkiF+vi4QmA65u3\nu27/2RaOjwPHPxAnudb6Kkh8WlH363r6JPY8SjMSLDYg3jeaX0z8t8+TdzkP\n7XlUO5S7RyXSq57TjvtBi9CKJvL2Q9k59mdU1goSbOnuXv5mMmtLzNP6IYAQ\nb6QKurLd+iGcsWQULrzkpy4KcX7x1nFXiJyaME3p8VsYqunID59GOb9jI4mG\nq0e4\r\n=IB7d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"a503acabefcaea86cb7f40a6305830f09d2d6083","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.1.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20221513279"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221513279_1644067675318_0.33361759726232143","host":"s3://npm-registry-packages"}},"2.4.2":{"name":"@chakra-ui/popper","version":"2.4.2","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.4.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f906b1fa406d5bf89248d1c857088dd7a2e94084","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.4.2.tgz","fileCount":22,"integrity":"sha512-EMkiZShASubY/JfT2fbfkbJE+RUkJApNC1j8hYLApOTvHqBGY54iNRrexHGjm5oLr99Zdkg5jnb3DXIB9I9Zqw==","signatures":[{"sig":"MEYCIQCmw1LldesPg48cM8idT4hQseqrzUYp3NOBnLvI82FbQAIhAOQYJBu00XRo0xfYmj7jN3QvbJcN7ZRYDpLqtwT3mzUy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73609,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/n1cCRA9TVsSAnZWagAA6fYP/iCaJYlyVSuX/g7qfrBX\n+0aZmbi0mAGsscwHYX8C4KKVuOjXHf9kQ9Xs4aKsn6lfedfLeiAP6PoAumJj\nlwqFtrgJ48THhKBiirxCOf82qA7T4nhneeFumxHmQVHG8CqqY3AJMjw6nEXf\n/UBM5LRfBtDa3b7tFpRF46AsQ3LZM6XdbV71+uN67WJSD426kJFxvqcqEAZV\nSsDbPj6cR9onmdYfMyjic4eOWwtvp68+BtEQXAwE/UabeSuWTy1igYMdfCVm\nCnO29vs2/x/OYlh6A/FfKVZXAUS39t6efFIP+gAN8VAJhWDxt1rTGeI1Ybpr\nIuHXW7TqImOEB/TMERWSSrAX8eneDrCHOwBfAxwHhLjragK39YOY2ZYP/csJ\npjcUvDNqelhaG4iI0cJ8LnMeZX3Div/uCRuKukChckJaVoxbCaAy2Y3oZWaf\n/T0XhEkXECBD9p5lc5er+5bf4lfHn9NTbFrO/i/41ZVCefLDqC/1vTXWPMCR\nDtJRlnW/ozfsh2LddnnMYlQKjtiWRz0vZIznF38w1dXe0B96O1eJoh7ob8Td\nQOgtQEGiB1yHlCIP05c459giy10Yet++Bth9Cr5LfGUHA2M1276lG6hxQwc1\ntgbrSRFaJ0AnxiRVEcmAJ/jFG+UCvmTwdl1P4pNwWN6WmljfWfLbmo2DGe4w\nzKuh\r\n=lxQ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","gitHead":"5a6537a05fd2d5600b7ec51cce47e0a46d1cd069","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.1.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.4.2_1644068187926_0.7370492229650398","host":"s3://npm-registry-packages"}},"0.0.0-dev-202211720414":{"name":"@chakra-ui/popper","version":"0.0.0-dev-202211720414","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-202211720414","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"21cc402ce0b60c80b12f328241a9d72862f2580d","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-202211720414.tgz","fileCount":22,"integrity":"sha512-W0yp/f6JoIZpE9Y8FKZSMTTE305HvDooJPmOgzvw1vrVggvgRVHxjLV4lSGIONHOyHQsnGVqGNQCPG+Mv4u3DA==","signatures":[{"sig":"MEQCID2w+F2LspJMbJlfoJsUq0Vj9EHRebnV57PNUB8sttrbAiAf4xiOZvEOvd/7lDHmVNt3Xq7znoUSksAshQnDSQsOcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDqpgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1wg//VLrUNp2XCYdgrmhUHSAOD8U+IWq9cZXpFIi/wIWESI/Eq/sn\r\nexFCaUBzAryKi3w+nyeWTpJ7UAnt81ssk6+XbM4vYvYPfOLtdVGRPz3dsqPd\r\nuwUJqodqfJqca1piGEPouj0jSvHt830VqWKl45wdX3V0DW/QDDQDpB4zCgQm\r\nuiBDm4hjKXOWhRLIqFw+z93zzp8h3/s//yYgdnAeGi3A0obRnk/CAMiqMZaC\r\nE3f+Ts1EkglZzaHNnSyQBa2OI4u+2QSHQEoM+UuH63xEwgz4Zh6HI1pOse2J\r\nQ+CCnGBm8ewfuM34MCLwgEiaQIEX0Auy6he0LTt8az6cct2FZaixbKEa6p40\r\n1yWNIIwlgAw3D3rS0wWv4dknmiwQ1dcKSrK6I7zYbS8c7rEv7IkYECVDTjRD\r\n/Cgfxmtgw62iVr2Egey+K655FP9I1H9dJ3Lzi7xBY0MeH0md2ntUHIZA3gVL\r\nPUpnyI6BeIl/nOaAAd9HGLtzxoK+14/+T8pL8vcrQPMtH7a8fVT437SadpQ5\r\nYkQAsUVK5Y8jTUpedSvny1QoqNBY2b/aRxuT6QXsgyE7WK+SsQNxyK8h1g5e\r\nQRGbY8hyz2wAgLLoTULs/zkjSgizJNjhEyvoIzLNmLFFEbVAA51PHlilu3AU\r\nZDPMd5FD820cZ/alei8/9yMf/a0wy357V3w=\r\n=YZAf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"20b7a19ac5608ea52e63c0ecc7e680591d7f4366","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.3.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-202211720414"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-202211720414_1645128288099_0.6291631459839508","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117201925":{"name":"@chakra-ui/popper","version":"0.0.0-dev-2022117201925","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-2022117201925","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"211aab8105042fa84089f3d8da923f5106da31af","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-2022117201925.tgz","fileCount":22,"integrity":"sha512-myXt7UDqxSgQw6hk7pl9+tBWjLJXVbMq+zCeOVm5jeOO8IGJ2xQgMKJ5wiS0HXYF5dy1r3fet6XeNdnsIvQ1bg==","signatures":[{"sig":"MEUCIQDWIFCtW5mL366VsLgcffq245zgJPfLksvVNGCz9v3miwIgFxVuyWvSFFULNt5xKs2JUXq5XAFdLu9NmmAYDN90dGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDq36ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcBQ/+NpZBdXP7ODD/jm4/0fs3LnXOMcI1qRjARLJyX9VDxVFvbJpe\r\nXuV23Z61b/18gzGpUngW/4ZAVEPq6XURNEOQHB2+xGWyWesFAUkHOYb1fZNp\r\nAPbnKLL02MqSSakWLcEVBjLqhAOQRZ3C4TXwe6YOQuCb5fdIt1SDlEAtrbrA\r\nDaS3G3L41CnaPuPuhscH74hZtB8M53x7wusrlffNxsjFBK0/Bo7KWoNJz67b\r\nVf82THBIoJG8vSOm5WtYkIwCAxSKNewzifAGQJHgNQzEh06FefXG99jNLOuT\r\nukNILiz7RsZuMMXuq52pzbb9Y/FnRv/9UcRfgoLX2lifkPw1njfHte6g1BjJ\r\nU38qSQZ+xQrKBdKFplr3ac1eIXTS3YuzqZpvXQykqmfRIQia7+jgR9QvUSke\r\nMtQqdWxFCVcrUgX5paKUo4kdt2Gg7yv279YAMtwfds8h4SDemRoyHkaKZDZA\r\nGCGJl4erM7GWotd/NAQ8QmOs3e+8NBaGYadOdV6lSNxA2l5P0/dNUH94lSyi\r\nF1Etdi2eYJ1WwCoOl/6Fb+eD05oKoaJpBvi2HbR3GiMblME7VH5RwJik3Wzj\r\nnESR2Yjt+2WnD6cPjFTazhrDwsjCmguFphxMRLSqbg/bUqO9dc15DPxKukz5\r\nYU1kAj2sRkO0orU7Uc1gIMSEoM4ZB+6c/yA=\r\n=fwHT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"e5e0f255c95f5e41c3b17adbda28fd09f7251642","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.3.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-2022117201925"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-2022117201925_1645129210310_0.7826229074893349","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117203714":{"name":"@chakra-ui/popper","version":"0.0.0-dev-2022117203714","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-2022117203714","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0867cbb524782cd4515d27c68d3cbdbac29a380c","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-2022117203714.tgz","fileCount":22,"integrity":"sha512-02tHfbftyFa/HYDIE8Lzqu5Vcy9Ql+CFv5MOGQoiA+fsO08fGspuuU5mxwXdjnhMRr9yLCnUpqaSkYs+jHHdww==","signatures":[{"sig":"MEYCIQCc4GR/VPay6Q7o/xzmMrQXDE5QYOhx/9pnBk7bIE0JgQIhAOdx35cXEVMx4UUU2RN5HfCjJmh4a9UT+upQhgDh/WMf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDrIiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRZg/+KAQ2vux4dCpD6RrD9zsM/Jh/Qe8qdeFY6gJL/wkUj6v5yeO2\r\nyaj7lt++UBxmrGc+HDCQi/cuiB/Zw6O7pkKdrbBJJBOGqpTYtWvHcyWfwwiO\r\nsVI39/hrJSSGmD8Sx6RA8HHleXrPvPAG2Y/dtTCS/Fovy/fFx6BirJgbpmNY\r\ngXrk4HFrtVOuL3Kt2rrLiGuF/U/TDxQ1nrmz4q1816gPaV9LZ4W0IBoT6y5S\r\nOUK0puaCMr/9p+xciXzTf52raBiFlgSBLmyu1o0KOzmhbOqA+eFhB7W2pl+a\r\nUom4mH/y3QC9YS3do1OLDjMuGAvkxZTdgnJGFBBGR6Vi2Pr/+cOE1+Xk7A0C\r\n2ISXlPM/LTfhNEZDiouPzZDtmHYtSSby2r7fBH0HHlZRPkO3YMkypupE/rZ8\r\nDOxWPERkpsqx5UlQqAbqDhGIMqUsOBWJl6boYGwXQ7dQiCe6MIC21vIPSI72\r\ns+KFzIxCwUHnQEf0OdK6fFC6twuNyANpVKQNio3xJR9Y8Kl/zh+OQD8bcc5Y\r\n1syUhbDoxXCgVdg13jqXOrg6H/w1hDdsi8ObU3vJgV3j+2K9OVXnSE1zHKdJ\r\n0RQvwGmtKnwSU4rD+9Lcy0AzM6jmb4HgM1jY8y2x0YNYOzRbJXV+FnCE4XMG\r\n/i8x5YN6TFODYikge9O1Wm5UrxScNuI2pv0=\r\n=BFlK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"0542b8a53425093f18fd86d2b55220d3fa20253a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.3.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-2022117203714"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-2022117203714_1645130274628_0.7233677786335801","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212083710":{"name":"@chakra-ui/popper","version":"0.0.0-dev-202212083710","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-202212083710","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cdd94e32775bb6eb1ac428b4e3c4904c9cd81ce5","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-202212083710.tgz","fileCount":22,"integrity":"sha512-O1D738onSXMIx3svoMHARZu/4drguq4mXPoHyiIXYmSWFif2Tk7IwvYeUE/bEoCTmj3w9Ws/3yCDNRxPQRiXmA==","signatures":[{"sig":"MEUCIHE9h3/u8rsOgWyqymieDTal1pIZ9QwzSdoOmQuoLJkkAiEA40KhL0wF/vGf3jCADqdwCRZVv8Wjztkjo8ATFgIT6cc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEf3gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNpQ//ZqjyTVGK10Kjc11ftcY8eIFFLFMF5+z/RyuKD6RwTYj/SOjJ\r\n0m2kDFhATFjx6pRp/m0D5tdk0IT5sRUfAabO5fGIaon6jQd6w3ocPfbapOWE\r\n4zozw1ZqjvRTuxGGhP0iQKq5Cu2aeDK+X3URioRC8QbiYP4O3Ez51oopdP7/\r\ngXVaC4EhHHYqmfkQ+4gtMnZBT6sV1KSehMajTn36cFWhqJ/E6e6TqVR7c9jk\r\nVPhpBd87nXHud+jmE9Kaf3hq3YzQYc7gdlnP3CP8BmsEsM1m3xHV61z6mjW8\r\n9KT37c/nXWELKZX7q4QbHj5idCoanTcPkBF0Y+hGLqvqDQ68Rw2m26RQum9B\r\nD+2UFYQayt0lGZoYdkQrQ9cU4I2RCe/H8FTtK8x8ZYynISOtbEV+5Vh2LPJg\r\n6sE0kceSZ8qm3FPRAMsOCmrImSQ6jBOG0etwSGr5MVHolPxlHsPU0D7HYli+\r\npnNhyLmvGGznnh/nrH4QiwFTjNIbvBgOBr3HFCFHiUEUJMaFMvDkc42RK14n\r\nmylu8PCtrrBDy2qnJMBZ0wFER9ZFAVjZXJ+HQz8fLQwYrS1IgcgUptm2uz9Z\r\noS2QVsyqDKLHEpBF83FTrIGB8fWL1f05Yx6hahGuKcqlPT4UwolL0x02fg5h\r\nT3/7ftNnWMh0DfwXEWOcofSIuXzjmqbRDv4=\r\n=YNXt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"085bbccc59f9c00b57caab647fabb43939d97247","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.3.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-202212083710"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-202212083710_1645346272588_0.4823939347280468","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120113958":{"name":"@chakra-ui/popper","version":"0.0.0-dev-2022120113958","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-2022120113958","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"351ce195b431d88fdaac0db26572a74fed5482d0","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-2022120113958.tgz","fileCount":22,"integrity":"sha512-XlaPFfA9M0fv1/1UH5SuyTzz9Drv/TCx+I/gUhGUTKIHEsVPV2Wt+lKC4sjDD5mg/z/TRNVL2BNBLmpleUEiIQ==","signatures":[{"sig":"MEUCIQCQOuG7+zDpEKhPpzW69itZeGWiHE+D3TVCfa8L/x9JDgIgbAaMC6aLDZIExupp5Q8Qhuj2hv+yjyNdGMqyCe0Ni1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEii1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzfQ//XSuXQ48sZ21gI8WPGziAKINbtrO/UHny/dl0YptypKhZ3ylP\r\nM8IW+i2TQtwwyX1JXKeNuY9eMmH8tsX8tFr/KhRJCRV/a+alyNMtEZkcR2cH\r\n3Iy9J6kw25gtAgP2mvdQyic78t67zS2BfmpaF5s4fKow6x0alHhKmj8N15a9\r\n7jdEYlRPL0R5EmjuQXE3veU4cjQ2lAh6mG4Kt/b7EKzxkqND29oxF8h/QEjf\r\nk+bSRemw+9i/J1NTJrBy5cME5kz/NHb4cXTbOFiyZpJ9058NwteOGtO3O9xN\r\nRXTc55+v9v70LN7taQzdaHxr3gedSReAncRCH7mZLj/M+lnnLQpFrD6pE4UH\r\nyI4CRJspU3FzeYym4o82kzWMhrgoI1wQ4JTBy5CRTfV97Fat1an82kBhxqDe\r\nWTUProrZ0ELvgrOA1ZeZZe1QA88e9VJTp444jAitnRZG+i1mUQSG1o4/GFyy\r\nsyh/0vkQht4iBt83cxPZk+0dikWllqLGyxBBqkZEjMyf5Krql1zZcdelCCWW\r\nccxfofjBF0EVcKCm+MFceLkxFqnEF7LdMhj/E+tf2AwqNrWeF1Hnd8NKXnMu\r\nLZhVhLlK+KY2fyUl5XA7huClEH049wMp8sEikENXG45pGutQGMEQjU7d9tMb\r\n4jFqAQmZUw9RFNDVhRmN8I21A3cFlF14jyI=\r\n=wYj3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"99c92df9331e6a0c5667b77e5a605343efccc6b3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.3.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-2022120113958"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-2022120113958_1645357237011_0.5306379811028292","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120114012":{"name":"@chakra-ui/popper","version":"0.0.0-dev-2022120114012","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-2022120114012","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a213e140d531fb8543e7242be6e6d328006cd3e0","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-2022120114012.tgz","fileCount":22,"integrity":"sha512-yLjBryuNjLKgDbdPVAJrYEhyLbzab8afiqI0CtmzCP2RdaPhl7//trJN/Wjnscc/51FJhZjlL/L2CivVOJTVrw==","signatures":[{"sig":"MEYCIQD9ny74eSW52qWK5cD1GzVOOLTJwkXDMc1CWy2QgxbTUgIhANqVyyJYseyUiHKwxuOsvQMtUsGA+L08Yg7lyVNvmyAm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEii9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlCA/9HNog0XpVrBVug/V1g+QIHi+AQfZtWScFjrGG2w0IaLfWr0Ky\r\nzbwHB1wnPeRWqI4YTxHrYTYYEHpBXn47aA7mGQreU5CfoikhLIAEsWq8iSYe\r\nL6SiQaaEz8yNVaKWXsXQF97fsE1wRiS3isHlP1NhRo6EwO6LXPW+Rj44S+Es\r\nQUXkdM6E/g3DiXHjx7gub5OCYLDTNXXwJknXgb5KLdN37Wrrut2iJS2MdCQx\r\ng0LeFUb00G13My97G0RwyYhe1A4FQO9RT+B1bkVD2XR0cz46LA/PvuPNZ8GS\r\nC9mqBPM44p4v+VudA3Snx8UGODFyuIinwxL489/iNgOMAFnYdIPfmu28V/9B\r\nwT3JiiycFD8q/SgDrU9nWaWTBfwCAR83q5POw1VDphBgdsgs3/7ekaSQqmHG\r\nDOuoI+WXVx7yKbAoDravdVqgfF+UzpSuRlve07HtP7NmsdHFVvs/YNkPvtib\r\n4wypE9Daijp25Nr+qXdSnex73SRFjbEj0z4inTDjTnYtLO26u6HQ1qBJeEz5\r\nX7kdE0V+dEfYH3KJxDzsJheCM1/+THgZ033Cgv3S7Xidm3CL/JsneQFfsAVl\r\nUiUKFtBFWNqdAQN0O37tbHKAVuJEGcOvzaJOcCGJ4LQmPvf3uUBedRVqi5F1\r\n/MuGWUYszI4/FlFpaPVkvlpQfiLZ0ljbD3Y=\r\n=WJvK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"5aa79f81c71b1ac28d1ee18b4cc28c908b68cbfb","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.3.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-2022120114012"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-2022120114012_1645357245339_0.17622926208763467","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120114225":{"name":"@chakra-ui/popper","version":"0.0.0-dev-2022120114225","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-2022120114225","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"eafaef6678bc4c41ffd27b12728cc908742de8cb","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-2022120114225.tgz","fileCount":22,"integrity":"sha512-Jx6MGaxRfOW/yG2+wEJUA6UoASDBQVuITRX6OOEvPYUE/S4VX50qPhaYJpi9zzMQ5fp0WRvFNqKa6/YUlKvE5g==","signatures":[{"sig":"MEUCIQCnISG2qaEldfA5NrWZw/UR+ak0fqEaj2LZMBEas2PaaAIgF7dY5imsX50U8OSYtXx7ZXMIezVDVR8QYtiZkWwsNXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEilKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKUhAAmvb/3kQUfQfMjEgobVMlHb3eZIP6cowutr9uDJLynyadS8DH\r\nuBT/zLej1V7UXJEhb/MfqfQAZuQf58iZb8e88/5qFcJ87ooS/a3veyS4M0qU\r\nkYJsaTtQvGsWi93YAuUj1y6zqZBtDuW1GoEBEEPp9W7gy57Y66rOzoZ/1DeM\r\n+FFX3Ov5YQj9V1Kqip5EBrHdZH5zr6U1np6KOFUOTzbB+whx/BdrABxeLHQN\r\nwGaDrssCPWeR4i10PMI3wiANGtTuJNdgb7Ivi1FngUFFqAF0d8pPidcZ6KpT\r\n5giVGgztOobaqnFBNrp579IQWcS3qKGFcS658pVcQnTIQ+AuSgBJfhZbG/wx\r\n3v69apGPOSQPyI5D1MATd1SDgtcITJh5xvDYdB2/k4N5R2ivLMxBG7H0yV/z\r\nEcvfKhz00a2p5fG6LmGbWBrgSl6KfDr3bLwK2nIxIKZ6vX49tg9R7N/59jJV\r\nzROvaTQ+jEISkD/p7oIY1IHs7Rppg/CO72QvSkxSJ9/zO7l+7Pxp2lTtihxE\r\neWRA+JBg/+3vXUTXjoQIVRlNs2G216aPc2w9u/ZpOpj2oIDhqp7x1xm1kWGm\r\nf7le4vIF2hnpFCFKkJ3lPKWvreowHKyPMbSjXl4asl6gT1jQ+ZnS55i5F+D/\r\nl3qje5YJRG0cImALwCrMhgAOVlgxyjNV3b0=\r\n=3UhL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"b0da6e6665234c1584403f7f7251390c3a9433c8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.3.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-2022120114225"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-2022120114225_1645357386375_0.9138298656043506","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120123118":{"name":"@chakra-ui/popper","version":"0.0.0-dev-2022120123118","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-2022120123118","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b380cc41afe0305811269f00d338aefba7d804a5","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-2022120123118.tgz","fileCount":22,"integrity":"sha512-Hc64F5YF6sk6XM7+m4bIU8ygdqMuwFh4Kx8EmeCyDhv4wIwnmZuuOz17vFqTsq5Uw8lgV+BPXd/PGDD5nXy1sA==","signatures":[{"sig":"MEUCIGMyDe+fi4Q39VID2NAnVx6vBWQikvmVrxPjqFHgaFgEAiEAqow+SN5XRCvO4sbzJqai7dB3lzS5D4DR+neM9J2F6Q8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjTHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBLg/9FmyOeNBfsliMUXU1U/GfYvmljnj9QQodAZ7jHo9AaM3WCte9\r\nLzhQnFyHMDG08ese+H0iagbEeaEInG5o5dutm8pQLt2B0dzSEKAmlhh7OAMp\r\npvxHhjdCG3HTX/2z2EGNMQ6fk3IbCGgGmlperA/VVDaR8x2X2Cx9sRHO6+Np\r\n0CkrsG9GRI4dSsfG8K1Cax6Oal2vqyg/3hR6PDMJfIPNMV38+gg8Hj5+IU7B\r\nUj98DuAIzqkMw+JyARlWeWTwvTafBxV4M5uXPf0a+oroTLBXisgMO7WMQZhN\r\neYAqfIygYzkWB7h+CK1q+OvYulZhiSLlvtSbzmuT8b9L8FlVCpUd3eUqPTYJ\r\n3etnIipmtPoXAf5lomB45uqhX07GNXdtn3DuP5ITt6mL4YJvl9T6alJ7Un73\r\nudJg7AtlQP3qXgKnHpnx2DPe261sqCwhgltJbODevWdqXAOohD6nHwnpt6x4\r\nMACUZXaKUxnBeKRwoMvpCTpMKjLg3mvYzLDoWp0pANfMqeovkcCKCfxfgB1N\r\nhytF0U+r36vnfUYMpldi100l60blmTxQr6WpcZJVkReQg1nGKrt0hJZCJLkv\r\ngHtPo2OLfnzg49JbWpwjqte9FEd17+DIYH+fpnaGAXsxXQU5OxFxHzL5AKUM\r\n+5Q7tbyw1tSp8BTEGOrriSmzRSFVU9iq5Ys=\r\n=dqO2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from '@chakra-ui/layout'\nimport { Button } from '@chakra-ui/button'\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance between them.\nUseful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed` strategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: 'fixed',\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```jsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({\n    placement: \"bottom-start\",\n  })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"e1fe48cbe37324744cfe6184d785c093cda1125e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.3.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-2022120123118"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-2022120123118_1645360327398_0.5607573129505594","host":"s3://npm-registry-packages"}},"2.4.3":{"name":"@chakra-ui/popper","version":"2.4.3","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@2.4.3","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fcdc917d13a56b9d44868c78a009e4dd692697a2","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-2.4.3.tgz","fileCount":22,"integrity":"sha512-TGzFnYt3mtIVkIejtYIAu4Ka9DaYLzMR4NgcqI6EtaTvgK7Xep+6RTiY/Nq+ZT3l/eaNUwqHRFoNrDUg1XYasA==","signatures":[{"sig":"MEUCIQDqlxyxtLlwlcVCZEzE3xGKDmW2o3kT4uWq5FdajBPWUgIgMbQj5uDkUnmFJyD9SJGgIaaic8bNaXzvHYmSRcwjbkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73609,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjbgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxvg/7B/IeWoC1CpZVac268PlpCnEtNwSAJjO0O5I22QJY8X7MWksN\r\nvDmANtBdw1hKzURQKqnv/3DwRWupbf4IZdHC+VYC/BVIyqun1sUD0vthJzas\r\nhOLTWiRe4dvuNQ3CoqTmAedkfiYFPKPHojuxtYa7T+BVIFcXJ8BfrFsKZNU6\r\ntwu8NUy/m8FedpeP+RHFIn/GU4bdREQvpX4iSiKQVBwY1pl027xEdMXoEI86\r\nrR6xT04WN5F8N4g3G/Tj0NWOrXi5stqUXPk8pQXN00Kdom2eSK5hFKi+finA\r\nC9YWk7WjmpRPVEmzbJg9Oo3g7YPaqlIj9d7WsUcvr7Rab9RsqWfsCamse8P3\r\nm/Wt40muHoVE+9Dmt1cwDzgNAuY2hg9WziuZ9V9XWzPkffLdNPkUQqUh56Ip\r\nG3++dO+PrpzdWzZSC1CsI96JvHddG22YORkd0tD5cx8wpUNytChNfyQbWRIn\r\nrZaCl0+mZqd9/1PvRIQGZb9UjpzfZqgsXGuTd3RateStJDD+Nh07DZ10hyHr\r\n/e41LsuTx6lTc9XZO00i+QfFEzz/oI+5IOhZRKo0gLAksS7ZeZ9nQS+eNda8\r\nz3OIUp4FXupnqwR/x3L30z/s4GiyonwHMZEQjhOtlaxPI45HZP6M3lDV+5yf\r\np18p8rxVHxWgDTm6B+7qqZqOeZ4uswWoREg=\r\n=w12k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","gitHead":"ba2fe6c4b856ba3833226dc7b6a15dc91173719b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.3.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_2.4.3_1645360864339_0.1272587593386869","host":"s3://npm-registry-packages"}},"3.0.0-next.0":{"name":"@chakra-ui/popper","version":"3.0.0-next.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.0-next.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b32e55d6ae70b6d41057df6e51d839f6a534cd31","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.0-next.0.tgz","fileCount":22,"integrity":"sha512-1HETzWu/1m7P/b59t3FSefDS2mE1JTHg5eQwk/canmFgKe84MieUBTrINJrtfDJKD5Aa+NAiHhv8KrgyHx2Hpg==","signatures":[{"sig":"MEQCIFY6pcacSBmPWLVMq5pUX0NG8+GTPNHG/ETK/Qmp1qRVAiADMN1Kl9Z7LYTAIQ86WQpQ6RxExO0/Y6N0wgnEA+VcnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWY2wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAhRAAguHGfVYqJdCq9LnvXur/oun3XutQ5Mt9q31xE3aXyqVcXsYj\r\nPgvBEfWfXDTudtxmACcJUjG2zjhdI59PyUOz4Oec29bAuDhifXLJwT1/mEsq\r\nvq8nZRruXJoSZg5s9aHl71ZQUQepBno5SO1K38HCds2VO0fweBFEuCmfjBgu\r\nwXTx9jdik54EGfBAf7H7KwKZ2x4KE5pJyWtfxObPApHG6Z7JimePoFMfxtOv\r\nKhdab6VO2eTLzoekezVqhNV0rnqrcMQ5UUCP0K3Ss4e0AgANrWx0EHLOlmjO\r\nAo8fm8k8eeUq+5F+LEPv2Tur/11fkAHb2PxVfEeHPbXOWN9QR5Hb+wS8rqcQ\r\nPCSMWTlf/mnyiTg1sE95AUZsODkgGFodhW1+kwi2gzcKh9fsuA0/2tdKY66c\r\n7sxRw9Z0AT12rqhbBsr2iqWiOV8+mEu8PUi+begrHkUDWV6a0R9iXAUeCxdp\r\nYNdnIzYO1NMxHhUciKsfgxflneVtfXS0T2TQFpISOktHYTbaC/r+vOLkCwI6\r\n+OkfFLulOdq3gJuQFvbNwINNsw2vc1cQxJ1WFkKzLsYj3eC9Mu4wwFYjkjJx\r\nTWfR7pkNjqT6o4tx3l29Baao0eqb8JjW9fODctLGsv0/VQodqtacOsmeUSX2\r\ntioTbes6ZhEURv7+hOJLfZk5J6jbPcju874=\r\n=ybnM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"257811601483bfba6262e723393759399a55c148","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0-next.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=16.8.6"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.0-next.0_1650036144108_0.5080140817340217","host":"s3://npm-registry-packages"}},"3.0.0-next.1":{"name":"@chakra-ui/popper","version":"3.0.0-next.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.0-next.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"356adb8b1c037b96a39348d5f32a4a6d2e0e5b9e","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.0-next.1.tgz","fileCount":22,"integrity":"sha512-cErpS0favcGI0cPR9PTVQeS1XIfYjS6FvtOzI/0XRyJovCix9XlFnfV5lS97Ikuvjg0+lBXS1wwOvNZMP+Hl7w==","signatures":[{"sig":"MEUCICNjcktkdijx/mpC3M76tWqV3aLmu2jk7YjSCGm4KBCRAiEA43FkR22wBC/Ux8K9ZAlC7wR7ZJDce7dJNiCbLyEwoEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYkWqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEXxAAmvvb/mfF5VSrLHlwDRiK2hclN949fX1IdREAAWUD8Rlu9EXJ\r\nHt7STJJPcSkI41MKMPI9Lrc8mY0dPhaP1xTr8IVuRFeAIzdUK2mj5WnI2W5H\r\ngoEWdmJklnwzxvPa+bzDYYTpswXG48Q9/vhNt9F4U4Nx5KeDXp2IxIbzZApx\r\nsQDNKACS+aTyLRPDRj7UuwNA7zsNWunL1xUt/91pJ2wv1NTjoaMQbszOLN3z\r\nqIsGp1Bp8ysCgi9bWyTi852tkcLueUnp7OPgW9Z2BzewWcMLqmvPrtV2F5C3\r\n0HeGWmriMgYR8vpq64muI+d9QJUHQUlrKgFXhZVzqhRlDZ8kbXIqvoMxtiOw\r\nVi4K2Qbs9K/17/tD8QLBdsMRR5gutmI84RSLFkGH07VJrmnhaq6ZlezBUrxy\r\nxkk2VbU/E4Kbatwh1D1q4pfkzjTV6tCnJwDL18soy9czQI3FPEUDd63cd6fK\r\nGReSDVVKmdCxogfVKzSgThnuIZ95Ty2wvDRwQzyuLUXdefCeEOymU0Gwd13C\r\nZNDiNxA0tsk0hn8ZCNAgYR5DYJRHXh7oULFjMKEcBE54kGLq0BKY7tvwPz0a\r\nhMITMX7ozoX+wHHHezduQkGTygkEstkC1/ls70irjZVZNDIPtoaiARKRaF2u\r\nCa7+z9Vy+Io1eagZwotC6YSN6DrKPU19lnE=\r\n=4wh4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"d90c04942268b9b586b1ffae3dd3791137716935","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0-next.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.0-next.1_1650607530193_0.8740037649080927","host":"s3://npm-registry-packages"}},"3.0.0-next.2":{"name":"@chakra-ui/popper","version":"3.0.0-next.2","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.0-next.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a561a375454825f23cea4a8418824d27682f0b37","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.0-next.2.tgz","fileCount":17,"integrity":"sha512-JbKAoUxd/2C+p85Jm5zvbB8jtmywArZtNmybm3xUmAhFXpzBhGADkPJofbYJ0hvpO/gqjhcfV4NbAOll+7SJFg==","signatures":[{"sig":"MEYCIQCIz96U840Mb2UbZU7+0AMDkP0RyJaCPTdGU/hQgsxhygIhAOl1HagIQeY/2vjOjm2CPyldsuKWHYNM029GnVhadsJJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidBWYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8whAAi4bqdjOAPo7yp/LRsBstknqeQ1tAHUYWh2TRdBnR9KCA3PjS\r\nYaLx2GFPXSDQsnYAP8XVjCtJTekg09QRRSdoPvos5f7xWaXIKAurDsvqzs51\r\nfmPo1DGytjTcT5/HJ0n8bQ2ohwzmMZshLdcvasgGX3LthAsYGFuioekizGlK\r\n3OiwRWGYhVChzz+84SsFs57AKP/vOwR4zDe1zoGzeV5Gh9RYSKrPfEkOHqT5\r\ntl0k1gKteK1AAXKAvs/ylFEelX3m7aPRoBmARDsKIDYC7mNFy8Q09j48VQnq\r\nvV9mA18RblQ1UWq1gz8BL9OtZzIFZybNO6L6CneKa1JXaMEr4HlXRbVLq6EX\r\n63BbqviprcP0RwrPDfN3Gcr6Y9fJI1ofwUBhhAPncM22fL/JnyCHmTfARAr8\r\nqq1JQBhl+A7wx2yFMgMXfeP7fi5du2xwc8FXtH3w5JMV5KFTeRprQAD3vHFc\r\nvoC5idiXfm5tPm2Z/ZmrMK8nsYzGvqi5oH8K/tA5UEFt6PL1smYGOW+JEXND\r\ngkcXsvCQ8MrGROz4ITBgFNWSk1jQk3tZZuqSULc/k5rShcSSnOO9wwz58X7h\r\naKup+lMTdN37EjC9PJZatoJPRr+CjkT5u1BER6rfEbO3rbuzCc7Q51xhWFT1\r\nfBpzJ5eRTCaQR9e4C2sWTwbfaNEkdmxi+Ts=\r\n=PgQN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"c3a1993b61a7c8527c9a7fd80d4d5611f21dfbfe","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0-next.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.0-next.2_1651774872042_0.03397303325918566","host":"s3://npm-registry-packages"}},"3.0.0-next.3":{"name":"@chakra-ui/popper","version":"3.0.0-next.3","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.0-next.3","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0ea939d38686c4862ab1e622471e07f8868c5016","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.0-next.3.tgz","fileCount":17,"integrity":"sha512-se5nMuIgmKMcL1SiENiVjMsc8RnFxoQjKA7izs3f3WTMTsNvg+F3tuKgOYqrZDq/NJ4kEpeS1GjmRtY1Y9rubQ==","signatures":[{"sig":"MEQCIHYuUWBI+LyLq8c0lxwkSQ4pe11yC43pR61HW7JkSrr3AiAcrn5t1MvYEWvaWSmATHisxgjPLarBS6ik1AACgBsbRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieNOmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaKQ/+PpJCnrAuz1K2hvUh5NFZC70dx/kIeKomPE8zirFIdDzZ7NNC\r\nAS/VxhMXJ89U+C0l81KG0lh3J8EvAxvVIYiBHWtYSpBBYVkGV3vQ7ESg449D\r\nPl8m9nQ/okA0qq21ydeACF4P2ICJzyzR656VVLIhLdbqu5dv23xipu3BhSLX\r\nTZIBxDQK4JL4wtLA4O4gFImgz0diaMvlDs1bhhxvlVaq0WirEdjjuAhma9ld\r\ne5OTU+K+gjKuEusX3Ebe30KYY/4kgSOEIi4sdAMc7m0iYAFwqTzTkMOIxQyU\r\nIV3f0H/kzLFzkjMeokT+3mZxxWgUOYf963M9opIEKHxtzWN6J+6XyeJr0KfK\r\n42idjFQl1OoDG94Z01rkIl+V8KtkjYyQeR+H0NECSwWlx+l7Kl938MpX7Rmc\r\nG+2RNzzz2hUrE4MLFUdMgnFfT17uTcTWHN407oiF192zbk72fE/xGZWz6i5m\r\nljmEKE0VBuxlCG7zaw91atHCGrxDepZTHRGoG2GZHwC7OeSLIYC6Moik4GsD\r\nKdJ29Zk2UiDtRuS6EmGejhIvewJarCShsnTKGs8rZIyqqSPXqtYeri0k4zIp\r\nAQA04DFRiG6GF1hwn+fjlCq4JG3R/Mx7XbxnSTxQhWnXsxYokd1qYczWZorr\r\n1DzUJlQLk8N7PfrFycx6XxDYe01Syh/fKp8=\r\n=DKEu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"839e03eb3d949c1f68fc3034456abc050ad2d8e7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0-next.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.0-next.3_1652085670779_0.35910441408859994","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@chakra-ui/popper","version":"3.0.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ab182bdb98b6951ac83e3102b4285fe368e344b6","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.0.tgz","fileCount":17,"integrity":"sha512-ROogHl6A1g/6nhWpugNt2+ixI80RS2yLxj8qrq3kRQiQreu9LgomPPHz7x1vzbSLoPkgQKoa+VsnMvSzDUnCwQ==","signatures":[{"sig":"MEUCIBj9gwJ9c1J0e9lHP4vOLgPUNFEk0fuUcpJLcuAjyVMiAiEAopJycGqaCBQXl5t8JI9i0FyYOerxZx/x9RUQZuq0GPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifUlQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqj/A//dOWmWiQWRpzQ/n4PO4vFX2dzUc9lFLOqOAH+ozbe9bPCfuMl\r\nuGMqtb1j2+sznREl/p1BIYBUnsZJOLhO+aDAQu+oFS3/WZvFJBmOvjo7vSEe\r\npDJOG/D3TVMb77bYe2ry9tRQjZdPrqvuM7hRd0CrXuHC2JGys8qN9krNLLD+\r\nh5WrcWsv10tnFnxe3v0P468iECrmGtRElZ0L1UkC0xKqAwEvqCbr3eaCLlnz\r\no9cccFGa8mOnozyYHqhwkkYwBoioHvbphNSZ2rrB4As4PTGDHioIeioaWSJ/\r\nn134mszL6X46V/vPftRKBQ71QZz7+XuAO9APp8LSEs65Bw+zPuDpBJmlS0jl\r\nqwEO+lZKkQU5LmkCP+40v2IxZJyYnkOQFz/aaCaGMHpCuu44eCPIrewbFPiN\r\n5iV8CeQRZhkxWpimvGxNuyHJZQy44T5k64cEdnTXIA87lNySM6LfHtuipmXN\r\nom8DRH0sNasaE9hFaczVTUpQ6k8O43ZXZbDGFpwddSrASw2yVk/sMbBIH7Zb\r\ncKHeEm2t2wDsBoCaqb9M4hZB5nztSdMKTikx83I1w1bistn/FVg0+DCKqQ1D\r\n8t4YDXYimt2fOcnjhp/eML+oTmJjIB/ukt8x68Tk2HbhGYba47Ghl+U8RIR/\r\nP1/iIEt0GrrxA75lcDowppqOQZ+UwVMKSAU=\r\n=Oskk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","gitHead":"48cc749d08853bacaf380a03abce69d428b47022","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.0_1652377936455_0.7681806131585385","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423113827":{"name":"@chakra-ui/popper","version":"0.0.0-dev-2022423113827","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-2022423113827","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2b3e33a1b2fba4440065a1e551e73528093a7cf1","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-2022423113827.tgz","fileCount":17,"integrity":"sha512-iHnDR3F2bDMacrr+47hOHDFChTVuMt+Npmy3hDDcPfvHVTxMIdEj1Z0Dzpte/+FQ8hg7J1qgR80Val1BhpvyZA==","signatures":[{"sig":"MEUCIQDGFHPR13ewnjMEL7uFuDvCXMsJikkOMRBMmGyGJFd+0QIgZONTJCcx8X8FO58PlXi77iwq1acZ65V0ipv64Vra3u0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3JPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4/Q//RANEwRkyeEfE8c3WYLaOrFMYiKzJrwejB5FhDWWpwIeFUj04\r\nMzX5w6RQLAkdNXHbcs/vUkfbS06sd6YcPk+ChPyhrEFPE26L2IvNNxB7Gxrq\r\nkPHPyUjUrhRPNMuFJR6SDhTTuoHiwQ3Iy/wLIfNgTXANReMRmvNr4yqz1d0k\r\nNMhaTRw/DHfvcsWpduKDU60swwztPZXalS4UczwIvWDAzggoLrA3xFJtRD3n\r\nP2ggduP5UPPToQ+WpS5J8qk72n1yomLngVmJfKWRsWjrCAjfgUzrsRXx0oYU\r\n6wv+QbjXWLD8iDEJfEacNBcjVvgFpSwK/gx7CYuXKXrxKMQE/xRtEYoqbHvO\r\n9igHHNWJCpVCrjLDK5sUdP0EEYu5uqqGpTLc1G53lmbC5AS5NAXVZbo5xDfV\r\nQHC06bd9fAj1vKFfukRKNx7iXekzcsRQnbGa+UfcNJs4JfdRIDOQEX7se6V4\r\nLTxOc7BX3GbwjN4U6Z6N0Yn0xszGHB79ujZOaADQ5jyyIX7VC6lv66U5Akye\r\nAH1mloQWV/Axr6qXHjnbDO35VazvN2uC3gy6l4Je68n2dJcK0g+W0vStnpZj\r\nmjoqP0rHjenM0pIC0tyBmFkTYW6vkxMrxo/6DB8pyIdmefNN/mB95asYAnfn\r\n3uom8aqqP+GzEfS3xuGZC4W0893hEoaDP60=\r\n=bnJy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"1026770a2b96b51a1a35f56c97fcbc42abbfb4d4","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-2022423113827_1653305935135_0.4927413968730119","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423121532":{"name":"@chakra-ui/popper","version":"0.0.0-dev-2022423121532","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-2022423121532","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f0d2c20d37c7aec3b819ccfdb543ba9db6bef534","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-2022423121532.tgz","fileCount":17,"integrity":"sha512-N/2BXrkXItEBdhoMu6Hv3qwYDdS3fHcOl91XWR0UJy+nm/PW0i5OgNnMZW2JRuwmeeRS4zVhJu4V8VT4R2AJgg==","signatures":[{"sig":"MEUCIGNj5dGliIfYVKlyDJFA5CK+HXOgJJy+s0YQahVfS5iHAiEAgBdREnNM2m7+FT0+ZRRBT+PGGHD19HclN2mIv+GWhj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3sJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovbRAAjWHWcP1ZgXKEDBwfVEgdGsenPzbaUJlY8P4G0oz3OUU3lu7c\r\nJfC1fs8eVVjgc8ymZJwh/T7s8X+hb8Q42eB//5n+2ydpuUGBjbtkqGc8xQ8+\r\nE0eFMm5EUCtWNnPw3ONNCILrhKRmGcQGMezpMbKmmbC13ryyW4GJwyBy+DXN\r\nYT12jszrNHf+lAmcwlkNDg8vTjEnw0WsKqOvYIZuRRIk/3UyCxib0tc6o4j5\r\nm4c+PuBv+bzpUetgf4Nbh42WaQy7V1aEm7Lelw8VHezwn914NVTMNkdnP8XJ\r\nbotaV1GhTnVUm0xaoIYiTV644QrMua6VY2wh0FS0dnrm95KbMOOBMatgBo82\r\nr93790Cw1M6RYALDnCZFbahk/iF3PxaBNTuzOv3/0cyqpOERw9f/drJUnWvW\r\nev0YoZO2HhjIMWGdTXX2BqxNOpBS/4bDZgeMOVWk8eCXIKpSSBtb1noVibsw\r\nviKUtIp566Z49Ci+RX1zU4vlwIgwWEvdK6wxL9F5ucAxyPdLgyzP1FGRcAUX\r\n0Up+h6h5izKOTLQuFu243wxuvoC7QsTtfHu4i+mk4YRRnH9C9iJvEuRU7N+a\r\ni4Bhg60lrzqHZm8JPbKgTxxPKq5cS9dL2Z27iTLHrSyPbdqP6agpTjnsw7OW\r\nIkv7dtP+mmIl0r8riR0ErDpDGb9KzegHcQc=\r\n=gW7H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"35b4565b04f75dc5d3874846b65260be849d08ae","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-2022423121532_1653308169618_0.6774413395954535","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423121615":{"name":"@chakra-ui/popper","version":"0.0.0-dev-2022423121615","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-2022423121615","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bdd7ccbdfd0c80f405fb34a58126994c0d9d93e1","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-2022423121615.tgz","fileCount":17,"integrity":"sha512-6KCiz3yC3OpkCQ/uqQUhP9XeFGzZkLNjFymqdoRH3DCTUAGAxYb2rfCN8zwysqmr/etuBSF6d9mHkm6f3rSn7A==","signatures":[{"sig":"MEYCIQCfMzHkm4Hu8KP+BiPtTCJbba5EiuB+F8WdK/MgxEgSmgIhAOrc8kSz96XRprvXkimN5yY8IYirHx6YCGFqyhjLUU//","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3s0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA5A/+Jnbqfo4AcGzLFZqMa8u7j3o0fQG8Y/i7yay/kKQCqFa16Y5Q\r\nGCIGu8cvkY5NeznT5il/vko9TZaTRuUdtzNYtZfwCDSvZqrTo8BjdhjvhNRJ\r\nbJt0TZrsFoHMD/9wRldZgJzV4bQ+WSRLYWnPSp1RrDTPiBATqB4ztXPC6+zM\r\nKCkbCTPXP1T5BNFj4uvGSqSG0SoDnZgZ7QqNhQ/iZ30AVBJgeeuS3JZC4I5G\r\n69Zov9riElt0tthfFtytWkPe5mkbhgUJnSp3DdSk1b1wOlKeOCB/OHGEAWhe\r\n4BlKNgwQqgHZQW33pOdulIsZdMea6D65pJbp4pnhUDipbk1ORDMvaA6yiA7c\r\nO9yIvp0NnC+alKhI004dvii/35o6jLsXS2A23X+uM74kHqE5OIgmn+ekmgks\r\nhlCzwHEUVi528eL6Z4JsMD+0VKji+D4f6+mR9dNxA5r1W4yZAKnZxv0b1hke\r\nkj/QHqOgpQxoRBjQ/r4U7ktgh/4Cad5Tyz0jTJQBmw0FakDjIqVujL9Kxnlt\r\ne8Fdr6q3tmGXk+1Rc25LLe3pTtLaZhAcemwsg6JrvC/08hb9WzqeOyi+gizI\r\nktIM1HjBo6R7OrGesscyDVsY1NoIwpkxEP/yDLqUroJw5KaNceLw0hjYRpul\r\npC+iDJYXJ3/FkUrQiIn1h4excYbPZ4Ldn50=\r\n=MeO5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"38452854419b6a8f651d073c02c89fd9e4520158","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-2022423121615_1653308212003_0.03783996102941045","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224248246":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20224248246","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20224248246","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1e619f1ee4d187569987dafd1596b30dd4b34d77","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20224248246.tgz","fileCount":17,"integrity":"sha512-rYRbe/stxNjBzgk3a3oslT9NGxzxyNMBYA2diyC0VzSMdAPHuoltUYQgrvi4gdJvAyjyHM8m0crC0G3rax1muw==","signatures":[{"sig":"MEUCIEYPu3WgeFWnZrdLaq/4LQuLL3NegEehi+a2zmBI8nSsAiEAyKJtOqVF0rOJ146KwnsDf4cgWu1sfucG6dbILgcKMfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJFKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTJRAAl7qX8aJwe0VaC77DsMYdMfKZUtWfH263kHqgbtCNO/rH2NUL\r\n621ehe7kM6zmV0vTvFR7e76uwAGVjgWKsFEWVwpizmrfsQowrpLUQvJtFNBe\r\nHcKrQ8E5dbI3/7ijZKeuhuq+GP91LSh43/iakzEh+b4419lsD4eth/M0v/k2\r\nBqlciEOGktEJAxvJ2WiqkpBssnJqaTyEE7/OTs8tb3em7hni0A3/U0M+USBZ\r\nYktASgKPgjEyfqg40WNY02n5VvhcyYW9bFT8amJ7GFUKw9EgJ8L20rFc+Jjx\r\nfeGdlcYs6C5E+u82aIRu7Iu2AYqDONwYxuWx/zcnYHuC/Y/BD6YyhXyc9a4Z\r\nzmnw8noyBv2VMKOkdmZh/zT8LRRC54+kFiRe+fJWkQ9wD3HSsAg/GUdhxolI\r\n8ri5sajT8izYqlBBGhdi1rrLaiD4B1ewLxSl8EHAwNUz4UTTowsGN+Xpehof\r\nGDKGE223mvgs9jzDmwKdokP6KXdL5zDgz1/IR4hK629uooGVW2et9toW16ka\r\nPj8BUpw1Fb5Zg9mjXyGIWgs0NSxYdGCxShSbLV2eluEo09KA9YpYKERVKyVe\r\neLsZ/FfUSGe3xZkmNxdzk47NHw7XeWS23TOg8ccVBiPBAHSjx/i9KramGX0e\r\neHQ/6LDwWEUR6/ku+IMj2CEIgjXhtmbPT18=\r\n=4fKf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"6f1921d44b496e518b2691cbd62cc45a6135d1f6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20224248246_1653379402378_0.7882881385634004","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224248516":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20224248516","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20224248516","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"84283ac4414c74cc3395d40af8d44b9cb3fcb2ad","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20224248516.tgz","fileCount":17,"integrity":"sha512-vc7uXpcpVRYJCxdNJoEpIonIJQ3FGfqxrGDlNvsibzcHy9qbsbZ70NcujKvfxJQKxlbMhcWr6DlBhRF7zRKy1g==","signatures":[{"sig":"MEUCIQDYoFhlxZvi1oz+kAydo84W/rs+aFoECmSgmfzXIs1yZAIgery4s0KtNoMQYCXLfnyBf5ysVmtMbmPo3cyPlREOM5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJHfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtexAAhPfVS+n34kP+Zka7KjfrPJYHoHbvzDFCIi/CDRE2Hggxjl0g\r\nbecNYpqmpoqJBnJoYTc3ZHnpzie/OSSBBQdtLClRuqSh1sSv2cQ/dhtI+jlF\r\n0P3N4Obp3JbzYJAiXdpT3lVyS12BAi8FU1e39FTU1TQq04LTO5ans9pD6O36\r\nU6wchoyIrG8J8K0ZJ2DBWqrUiSs6Cn075hzGNWsLYZaT9scUQCbOHOoqmhpB\r\n6URcXx3q3Im5STe124BnnHlD+eskE05oSNOFzntinxi5msohB+JAfuVRXS5X\r\nsh0ggz26QbfcqUMunM6f87JFEPwvvo1r/dWTJCl1Nk16M9C09JZ0OXcpnwzV\r\n2rL4aUyN2m5x5gnbgBe/0w02emeb/mtleZ6aHufd9AurW0V1jQD+RYqX4feu\r\nsz2D3J2KEDv7wfazVu7e2x8132HzJYRdoQXeuC6KqTt+onbR2rufw9sBXuiQ\r\ntP/S2+wpz4cXsrP2mvU7CPtqsS0BeTfLzIYrIRG+WNHB2jIXdkxgnQqDmyQq\r\n5ZGBpieCnrHsNPWtr8fBbRJAT0uoGx0Lu6dvT0mqu3IQqxAzT2ZHGUMwsfoN\r\nQl7W6Gcw+AYsKyywXQDeOgm3bAkoGJ+F0vmac4o1CTuBziwgiTmx99i7QPto\r\nyPG9oPbsxGLV+XAGEo9TMkAdia4jNdKrJDk=\r\n=smkV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"f5839d1015edc4f3525bc74ab2cf5d9044139fde","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20224248516_1653379551291_0.5917351425350743","host":"s3://npm-registry-packages"}},"0.0.0-dev-202242481651":{"name":"@chakra-ui/popper","version":"0.0.0-dev-202242481651","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-202242481651","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"88b209793528e5cfabe005572b231b924730282a","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-202242481651.tgz","fileCount":17,"integrity":"sha512-TXP7S7oq36+2DGEMsOeUErE+vAcSyCnzBF5OiN0LK6E8DF+N7ME4lIR+8jReQy7q3DBuYe3OXOr+Gucvi7dsrA==","signatures":[{"sig":"MEQCICoohrf7yv8ES5KSO01ZTB3kDddDVQZmTzSUakIpFbPMAiBRBzernd458r2no8EUNbXTaZaAmP1c17xj3LRMufbjjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJSeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmqA/9HwqLy8y3GFYEGkQBcg6XG1X6uea6eolq8sDOqbDZwChsDC3u\r\nmr/uZRieVFWfeuF91X/1Ia3wbH4eRrD97S6uMsXt6O2y6op7EYWgF+u5nlKS\r\nYqAlkJ/Xx6Er2ZgD2WXOJg5lTEFL52Q/tP8jPn71ikqv21Lt61lqKAVdHp3H\r\n0ScZy9UcwCEjkSzCJmZtAcWrTzCd1hKSKiNTioCZqjefIj9W+QmgtfKu0C5U\r\nphecNkgpXylcU8BrlhZf1K3l7Hk1yRdbTyeKyEmIyVHWdgon+skkD3GcyDW3\r\nRXaJq79/tHvT2zsiQOe67BgvBugNL0Dcc7ZvnCAa11hNAVLBS5Oz4Jer2TMZ\r\n2FLf2SU9ptFaWqGOSn4RfnFr4Lg8mTQL8Ggck5bl18v3EI6QruCGd2qBuVjQ\r\noDKfbOXNasRWXhk3upad4fc9NyAIRfePnKPdAcySuupZGV13G4d42nBa5NR0\r\nKZuXgny99RGouptLp9OURrngDNvX5uVpRKMMRGlD+Scg8n6a2j4myjV2/gLJ\r\n7axryZl1d7LYIh14+IoljQPvdkkU4GdHADQdKjkhGYxI+Omylg3MJhxtGhlH\r\nechAcLJWnmuBgbnNcMaedogwKSb/VovHcDzJJCAPx4fsLBXoc23SI3rpSTfh\r\nybPArnxQYEP1nulQqQjL55k4T7CJUproPQg=\r\n=hR9E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"e8cce77b27714277db576b45d03d2570d590ab8e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-202242481651_1653380253961_0.8481363063022931","host":"s3://npm-registry-packages"}},"3.0.1":{"name":"@chakra-ui/popper","version":"3.0.1","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cb9a11fdb7b16f703dcafc1b375415ea8faeecd2","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.1.tgz","fileCount":17,"integrity":"sha512-dEnW3QJxMyIIKCt3D5K1LWS6EbaDIRpzmlV4K4HeHHL08So6UFzQb8RgzoKuc2ZC5tJ7lKGdLWcSvHpiONVMmg==","signatures":[{"sig":"MEQCID51lFznR8Edr8v8dmPT8QTtcLj0RH7+PYTKVnb08/XGAiAUuTClUy/R1uL5cyeUazQOwDIRLl4IRYx6C18YAAORYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijM9hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9rQ/+JC296dlNZYwsEGTQynYTovgmnbuzaxi0nNdfsimP1zIQTodO\r\nkvv3DypSXjSLXtBtJir4rPlxAV0zFfFK4JCsJBy7lXW4VO73eeSJ5nf9xNF5\r\nGt/+pjrIIldDpdADbXYUvPftXerwAlxgKxZqvvdwQdk2sSIVuuoUCuwG5eDR\r\naCy2B658RSvD3Gv3jzK++PRGNRUVhhJ9ApNcMvxOpKoYljhhLj7B41Rf7BeC\r\nEQVFfOLcNKbuoRSrynXbn7BjPMfVwEZ27dreyT046KXJ6+8bOBoXuEydF+5l\r\nx/Z2t/xDn+FwlvQWe1/JZQdDdAitjvu0Rmgjdx2UZzpOr17DGpcCas3rxhdm\r\nSxEcRx4D+JE2nIskIR1UJuDKU7cQkyAXoIIJfiOzPdAEyT9ijhv/med5KAoO\r\nfwKdQdzwcsWbq72yEPz8ZXIx1DqSQEihziftApLa/lzroi4dReWAffl2Zzzz\r\nkO9IQ4g7Erj/6zOVB2UdgQI9RDbEonX6hThfKEIcEEyuJeegpynUHciQ+9Lr\r\nXNy1/M0igIul1EfcdgLQS1hl7Swjsw9coPz8bhm4qWGBmR0fscHYxrrt4KB9\r\ngITolFHHZo/G5I4rjdQsv+mM3cHqVBgnP8eKStDe04AjeMjrzGbC2AcSSOub\r\nSeFXJFuLp3IQkWqcWmYJ2zudEeQrt0v9Pq0=\r\n=Zrqi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","gitHead":"6375f5227d4482ad6d23852454a3792ba1cfc262","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.1_1653395297201_0.8853549610402671","host":"s3://npm-registry-packages"}},"0.0.0-dev-202256192154":{"name":"@chakra-ui/popper","version":"0.0.0-dev-202256192154","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-202256192154","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f96ccb04cd2521580edcb9d26601c216d4c72870","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-202256192154.tgz","fileCount":17,"integrity":"sha512-KocRVuWjbMfnPj3Mje2fKowJmF4BQGIQ3dYA4usB8YbJ9udJFgVogtQQFM96JFHq5hiwSBYPBEJx3PwsI6KkrQ==","signatures":[{"sig":"MEUCIEl2t1mxxWvnlS9nTsyAYsX08l/mnFDa4MA9xw9GbPDmAiEAyKu7QL68Xyem+KsqCdujPNH1y1inRFLbNAPopQpBv4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinlP7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodtQ/+KyTeFt2BcaRszIcXQ0H3hSbUc58GC0Pcr9y2tdR+IvdQaJj3\r\nTbTcQpi0NG8waToEPMrRq2vN8vKBKRftW0DK9AA7NRrKjzVRTe3nePowFlFE\r\nDc2gVSy7FMmQ5CDDrISLg+hJOW1A+17uQKyjahuERkH9/FsQ13wqipjOCdQj\r\nbW9sGeDVvtlx42s61TBnmaNUIlmJedDVK0XnaGD5FRYHMYQatGUdWWOviyqh\r\nbSLfOckPlBoH2cN2pvRvaXJBJJv7Hv9D3viC9YPDDnyXEvjWAPvuDKueA0lw\r\nURsEaPAB2sN8K1OQsdJP1wrJDxhcUFynFcWhWT12jgQ0W9gQalL/dEEfLuj3\r\nRYDDkKObJb3ditEkqF7IRb2OZF9kaXrlM4JUzLy1YFh/+l6GyOY+iXsEMbIJ\r\nCJfTJmzfSv0y6zXJfSbk84vP68B5blN++VlU7RI+SH/OYixyZCnHJnGDCM1i\r\nTa9zeu67S/DOfpuwdUK/6x7R+cJciuBKjccyB1sZA8gKTQhKcoDaguiuqQfI\r\nsgFigUjXK+jNTmcBzfgNzKmc7HV2/d87SgThAaW1ExoJiKItxuKLQmuWqoDM\r\nRR5GeUUTbApL8FaF87smeyOHTzp/OSGpxMndZycnRbP4NKgPH0IR3NDP6NhY\r\nLhWl+LlQIQlHUcqZv+E/a9QSwLSwpl5G5XE=\r\n=3iSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","gitHead":"06f29f8cdbb10ff1da523e0d0e958b9990d041e1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-202256192154"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-202256192154_1654543355043_0.8100079607201174","host":"s3://npm-registry-packages"}},"3.0.2":{"name":"@chakra-ui/popper","version":"3.0.2","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"63994c39c316b03f68597099113e0719ac70ac8f","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.2.tgz","fileCount":17,"integrity":"sha512-oEUsaFR4EPY3CvhEVeZNoa+mA/w+TvLlG3xlicIwv/3Fcfl6LD2Jhr6utnqAvHFxE/qRcUcXLX20ovy0Zrgm/Q==","signatures":[{"sig":"MEUCIQC/WqLnLIywuZPFaUOa29heQIaEDX9mPjL0mKTfAWWQvwIgeHQKwGKeajpm2EHKfTNRZ8pZVA6gn312RLLIAMUYwFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinmZ+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+FQ/9H8ACJSsGuO574esROPXAQQd+yiZUQKg+Jt/Z4TCOkl94cn2N\r\nTbwPPtHN81A2xUV7vFdpb8hJ9UBPNUCZzrHO/9bi98wV+WJfSGI1+NFkmzy4\r\nfOTymQdtGWWtGHh0tb+2KevMz9QqAmQpHzwKeoJlhglgTdyxyI/Gchz/kyDi\r\nqyr99i+jJS/PNmAZoGuqPZyiCAwcsgTgReflZVVlt7AvqMrbnD0C7WcGopXj\r\nHWUdjYzQcSsPhvw2Keg/phB/VuGuSL55azkONOwxcT9l7yQTHoB4wbwqY+xx\r\nilxNPSDh9QY/8hr89rBtFDenm0jASmXuURyGSR+f/ntfPpYn5qBYhP2lPOim\r\n63d+v3bWszNuWzudre9uD/nUG+tpzlyT4EpGV7yzuQLZDmrZ9nOm6FpWv5bu\r\nuxOWfXzBeTHoZDqHH78uJFK+VO/6nGK/kAVe/yDo2xBpzLZv7HCWQuNU4Gx4\r\nKm0KOlkA6eVCR7gR856ys52+GciZkmuzIBKoVzMWa/zkB8XlqGbfbj1kD6Gf\r\nb+Cn1M56BAUxcVVcl9JqNeMyloMkuN4j5+1sY5pwr1DE/Fj5vf+wmjrUyVIz\r\n7Bje0b/DDUEICOyk3zWz/gxG/bc4xz4AsEVQHoKEkX01zjL0KgxxBnsUQLuH\r\nA/8EIPd4tozuXnNF3S+QPUYgJuUvfz0hN3o=\r\n=7cb6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-popper.cjs.js","types":"dist/chakra-ui-popper.cjs.d.ts","module":"dist/chakra-ui-popper.esm.js","gitHead":"28e10e36d773f609246df375dc6279385d07e0ff","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.5.5","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.2_1654548094692_0.19803098901348037","host":"s3://npm-registry-packages"}},"3.0.3":{"name":"@chakra-ui/popper","version":"3.0.3","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.3","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"dbea3196911e027362f6ae49c5cfd8b07d55c36a","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.3.tgz","fileCount":3,"integrity":"sha512-1cnbjY2SjT/UHjosiO7bLlmtbrL/d2UN9RosLOUdSTcrAG1sB3/bVqefeLQpQUQrEgFvjkX+ANYj3ro3k6jB2Q==","signatures":[{"sig":"MEQCIGQFaS6Eu1BmmRfv7lQtcSki2WfFMHR9NLWOy2PdFi57AiAHgCy2wV2gbquoAzQJGLas12PUUhM+tMxVBWzDixKrow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi3iXSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqE+RAAh8pkZBHIcIgVvSwKcLSlP9yop6xju7V4tHa/UHHRVziLIWzF\r\nqwFM5JmDdf0HrDFCFdgNfs8rgiLPW1QzySPGgcJqq9GC2CWKclRv2vObsimS\r\nABjlWVWmS6itFRLh5QrQLxe4niNjoP1MSrhfOY5YbO7QAP8W9NUBS5ZwVcCH\r\nESqeD2hh/WRH29Iz6Zt9Gbgkh/coEwhiCxyryQUjMTWy3AsNyPs81+tz5q1A\r\nVZKWgpwKGIt1uAqv2uxcwY+Hp+xyPci1IaEfnF1QONsRZ0XmKbE3j3JtQQoq\r\n6Kzupp/YQ7uJM6zkR36FKbc13ba9N/pj7dXA4mFiXeQDaGO3ThF4jlvlCzBW\r\nPuvLuNesw660iATk8gsHSLdAfC8h3FsG1uCVsKMatAavec1ollN8UdfAw/fm\r\nRjwYOvIytB9AJdmBDZ79s1vRVbJFfhua+3K2jYxL4VyRT5dhkPFyGZsrNOIu\r\nNKEoWAVre+ESSADAcA8rRLNUDuzNFBZyuK6Npw7IkHBxDGQ1jJuhdcfDqkZ0\r\nMhGC9ZVKMcnFywlbCysjTGU7ysfTVk31JJ+p8cmNriG/3PDCY5BokTAYnquM\r\nBa0/FwZn+CluGRDqOVt57fXpsv51gQPGfF+pt0X5mjZG7Uoo6bAFdrA6B6Si\r\ngyk9s8uDn5oPZHudFGPOgbPwOWIK6oqF9As=\r\n=xy/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:chakra-ui-popper-3.0.3.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --format=esm,cjs --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts --format=esm,cjs"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6870b5498451afcced90ac9b61849326/chakra-ui-popper-3.0.3.tgz","_integrity":"sha512-1cnbjY2SjT/UHjosiO7bLlmtbrL/d2UN9RosLOUdSTcrAG1sB3/bVqefeLQpQUQrEgFvjkX+ANYj3ro3k6jB2Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.0.5"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.3_1658725842069_0.8222192194905644","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804193103":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220804193103","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220804193103","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f92a78e7026ef6f1e82051113f00e0ba56e5d2ac","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220804193103.tgz","fileCount":6,"integrity":"sha512-JepqMFvItOF6uf4JAORwt710FYZvivM+EOZQA2ytKC4LbQS6AaeBd71pWGztz92pD4EJMAhZ2YlX86Fis7UxSA==","signatures":[{"sig":"MEUCIEwaaR39xDjMYarIJOUKEPywJpP4oiIzHgW0MwQL/J8tAiEA3HdTgmLR03Lg7I4Wb+zGa+pN7PkV7mfvHed2V81X+2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7B7wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZgA//SnohJTOA9VYhF18UajKI8ydx4ldLYY7jEoChp0tx/kyo/bVg\r\nNeUe6G2WiF2bfsWZ/jwc1zLy0dzGA+rmNnfEOITXIBwMADENw0+X2tNTLa1z\r\ncDqUOGn8NHAV+lxCQNOIGg2Gv5IksQMLYANaQyLHRU51BwC97mb+DUOaHnEx\r\n/KURXAGmmfajcf6/g3xw0d9O+b50xuG2ySiSFGlm5rsPlP0CmWzOQ1qvt9Mo\r\ntZeZ5Ip7ZQyPs4+XaFHM4zU1m7ZXuCzHmHBD0eB740JDfn9iLJH+wsYY6hx8\r\nqV1iGW+DJwxE0tcUxoTobC/1j/FvyTe6ZP6vQxS83vX8gRE0Na6fzO2IWk1N\r\nKvY70npDjhKPtRuhKV0NN/PTvCtPOK6yrkB/aXmQ7HURBdlDmnzSTBu54eib\r\n6/g/fN+uHm+GbT2OyJGER5Cp1aPDpFy0j9q0zMAhC41ClQJ7tgiMs4hxhHp8\r\nHnCH1UjvacZDEmpccYy6fkKX9Wt2Zgd5WALu0nR4igbiO9Q875JBWTzS9zwV\r\nwU+phqlsqIvHwEfBDCej1R8Zx1OICIWzZRPgdb+EvIRu0i0MgL6Upba9iGeT\r\nduSv3mqe53Ikin/2PL7dBLJjlS0CsZQhku4AT5sdK/csh/4I7PfW6u0VmD4+\r\nA8ZeeCcWHeO9nxvA5CzZ50B4mkmiKRiYohc=\r\n=ORWg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220804193103.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/private/var/folders/fh/7kklt1bx7595wvjxfmcnvkqh0000gn/T/1834ec3933d4ebc56062e93322bde968/chakra-ui-popper-0.0.0-dev-20220804193103.tgz","_integrity":"sha512-JepqMFvItOF6uf4JAORwt710FYZvivM+EOZQA2ytKC4LbQS6AaeBd71pWGztz92pD4EJMAhZ2YlX86Fis7UxSA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220804193103"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220804193103"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220804193103_1659641584675_0.9702967846452719","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804193815":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220804193815","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220804193815","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3216e0a6ddcd6189bbe2346bc43a22f92db71c99","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220804193815.tgz","fileCount":6,"integrity":"sha512-8k7qhPpOGk6jeA+dkCZUydhdeX/gNN02niWDkGX69ugBWjGJV7Mr5i5lpN5QG2ksyMM3mPd+obnoyQPgo3BqDw==","signatures":[{"sig":"MEYCIQDhKXeEZC4Oyoat3Nz1YpN3uLpQXNk56g0vKFeiUmdL6QIhAJmHEUL4kwb9qV5iHQEqDfkc7sLjTuwJtUPzS3ROZBSw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7CBTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrR1g//SgE944lnv7qAP3oM99Hwfm5pohHMbfk7rgDUJ/cIqMhhgtkO\r\nI+bcLgakMpRhYsqS1x7djLaJArnc4QxE/vzoDijF9kTol/O+Vxt/Wy+5Loqd\r\nXcIAqd4AzfREwakT+8TKvVbE5RkiChtoIHZiY2N4U0CKIc4IaEQFKXZbpYim\r\nT5l24U1egSe4l3MPxbBKdAtneAHT4raHQ5gW+V7tXXQgjr1rbk+LrKyMf2te\r\nCHugK54j390YzuUOgiDBjWNRwdAWFypfQO/bVhou9CAU+JUNYE0vsjSAjrUX\r\nxq1KEeLsX3/hFpb1+OWfvdhD9KURGlHOZ4+fV2MNy5tmbw7zFPZ50TVbXYqb\r\ngBVGJhWa7sl2yGLJIDG2HvliAmDo9FZ2ZTm5AKiIf7p1QiHmNRDUme+e0fME\r\n4vZoMAa9B3fKgAWsBdPkoZl2IUfgAAK7ke9tM6/UXaHIa1qOHV/NO0fEFuwp\r\nOoMk2wfRZR25tNii/WWXEVn2LZv37PUWOOwUrSA5mbnJY1vAFG2XKNnYscCC\r\nGV9QC8wLTpfGLKbH0qfAKa3UnXjFdUhm3n7i03FweXIJW5X2LGZO/pqRMqyc\r\nZicoY1QCr5eN1FYi5yXippu4Hq8om5eAYfr2xhamYuF5lGhitR/ViJzQI+NS\r\n7YRybI3jq/cN/p6GTDJNB0oLmlRT97gMUSo=\r\n=wKCf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220804193815.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/private/var/folders/fh/7kklt1bx7595wvjxfmcnvkqh0000gn/T/98e6f80edf0bb82499c3d9b23d597ec7/chakra-ui-popper-0.0.0-dev-20220804193815.tgz","_integrity":"sha512-8k7qhPpOGk6jeA+dkCZUydhdeX/gNN02niWDkGX69ugBWjGJV7Mr5i5lpN5QG2ksyMM3mPd+obnoyQPgo3BqDw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220804193815"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220804193815"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220804193815_1659641938793_0.42504270342989514","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804194739":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220804194739","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220804194739","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1af500e1ab277441f49feee2f09e685c233ba6ed","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220804194739.tgz","fileCount":3,"integrity":"sha512-kcvuhyPGywXTtLcrHNfnzfJ60jY/Of5MvfSWuoidT3AdsIKuhWqJVLRNMu2GyRTVMM3cvAPzpXPWBmZzYMZYnw==","signatures":[{"sig":"MEQCIFPnmhGMaZtZtcTseemeM86onprisTVpyzxC9ebZAgOEAiAp7hjuETxEnj07aT5N55xu+yIQ6+y+WcT9SWEzNsJqtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7CKrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruDA//cNTBD/NWLVmxzOsYdvZqKiv5VyzsJZN6dLihlpTYD222Z7xw\r\nWde2m3K/OoFWm+0jpJd7arHgLTwhbDyWqdLYYkVjaB7b6wS16AeVYJNRXaZ8\r\nFGHPsLq03/6tVSr+C/cNS/re1lSkO9Rhf21Vz/X7ME4Kk6SGNs9mtvhkwWu0\r\nnX/BIEHNRaXoDtUJk4IuUgwdQEL47Ib7KrhqZ1NClYw6mWGFTNvGKtxGnAV/\r\nXrXyzR+vWV/tMzR0Gov1acaeY8Qf+WMmT3uqCktBKBzXeIRztVezIBMVAq1j\r\n6AxfQnWi1jmmnU8yD5DT/p/cNNtkmkg2Q5tdwrzy9+M+aRGLKjRMcXeoEo2w\r\nrGSwuXnU0kBjU6DK4YUny83Wclk3EDP6427oEesqPNQkq2Cb78r24/s7Ile2\r\nRvZVRupkTphatdpdQz4jdmngsiGnA5w13qTGNgyFVy0eKLg6etr8szO6mDWa\r\nTwlGn7b4cwEA2r+8fP/rUM6v41QCwKJ41DcvszjdqdK6PGG/+EALFJ2+DMEJ\r\ngbdgfdn1+WR0L7rJ4vLpYS+zvBtOX+WTfZ7yrGP6q1ilPB1ibwGz3H4AfDdy\r\nI3BTA2jYmttWZOsDsmn3/sydBLOJxaGqbERqJV7sNZ4Q3W9F+6/NR5citsqU\r\nTpcTVnXGHEQHF26POpqd0TMpSMV9aY88kdM=\r\n=ZNbK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220804194739.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4d2a892055aea12db37b7db1cc433835/chakra-ui-popper-0.0.0-dev-20220804194739.tgz","_integrity":"sha512-kcvuhyPGywXTtLcrHNfnzfJ60jY/Of5MvfSWuoidT3AdsIKuhWqJVLRNMu2GyRTVMM3cvAPzpXPWBmZzYMZYnw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220804194739"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220804194739"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220804194739_1659642538927_0.10078669758782421","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804200605":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220804200605","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220804200605","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"efc9887591f36f035b8369fd464e10df0568acc8","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220804200605.tgz","fileCount":3,"integrity":"sha512-n4N4FziHjEhaoyC5tWDuC4MDGrRoaUtfuNke70IE0pgdYeVyb6+KP+FZWROKDM11GWAneTp32Zy/p0gkJvmDOA==","signatures":[{"sig":"MEUCIEz3gOBABxxdUbCFw6s5IJUtdtvfQP1sDJwR/sOhm/1GAiEAkgXgtxLCKJy1bObLgBguzQOxPD5NpJZK0U1cAOUv2QA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7Cb1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUsg//WPu2rMS2Q/yoQmWvul9qhAgkJy/Rge/L+TWjuVOlKYFmGSq1\r\nAkgHjHqAu1ShMPSJOB6iASOjIetdDgJtSq9kphqwtjokV3cW+Fdr5Vd/JtQE\r\npEZnnJx+qI430eRigpZyanTk7Un3swK6nH8YZ5BSyGwhk/9LptvYEitvpweg\r\nHQqhV8HmYK7b0174amvlCW5ck+p3gbV4LyLsaWJFQF5d5zN9VAiKf1YN544/\r\nEtjxU8zyKnDRI8cOvtObKBr8s04EZV/PXHMr2RCl5jbC9amOqJxPjsEZMYwH\r\ntDJnHtiXXUPJMRX6MYDSOUOE/cayfpI6Tzdul3RYEk0IbqWYYFpIGtgFdZG/\r\n40dbFIIbmLlOaRsQ5Sq6a0IJ+edi20RthsyErZNMOs5LjZyXFBZBHeTo8E4x\r\ngHP1cTTVihnzgpd9k2oXhIMxF9pM6nYf/+j7gASd0aL/YgUH5zV1EJR0sr1S\r\nO9Nmd+n5M/uaIZ2g/9q/dfMTauxpnO3eASXStDOk/K7KyKSm0uDZI8D+vC9l\r\nysnLe2mwFa3EUTkHwGCoWNeHUG2YvP34Fy2IYLtK4fpM16/XYlr2QoxUZVLA\r\nk6qnMagUrA1dNrQBPie8USLGEXrkLWEHLzxChPgiqxD1aqRBMEgLsH/Z3/Hd\r\ntsXKKegWC3I3WhxSCdzFHSHCffu9QX+VmWY=\r\n=LOd1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220804200605.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5c279af8a2829900bda0120c4116f2a4/chakra-ui-popper-0.0.0-dev-20220804200605.tgz","_integrity":"sha512-n4N4FziHjEhaoyC5tWDuC4MDGrRoaUtfuNke70IE0pgdYeVyb6+KP+FZWROKDM11GWAneTp32Zy/p0gkJvmDOA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220804200605"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220804200605"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220804200605_1659643637120_0.7318725235491057","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220805062318":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220805062318","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220805062318","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"90beb7054f5336b8fc92922a46a07359427533eb","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220805062318.tgz","fileCount":3,"integrity":"sha512-lGAnDmcXJsRnQdF3o27f37hWDjnRQoesteq+z2ETVt1/np+IitGnOcxlUDbwOZvzCQkTrEOEh8B+sgC2S5wZ6w==","signatures":[{"sig":"MEQCIC+n/GTM7qUydVruqLaOnJw3d86uHrnWPrv5o67aYteXAiBeAQ9yr2T6HXnNs0d+UZ79U26vGPLDpRo4rdfhFjVqGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7LefACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9Ag/+JSvVeksBegE8TvmuACjnkS7CUT1JjESLGLaSn9GKoDm6/JV6\r\nz0R3nL3tSIM7LBtf3neBjvQFzBJi4yIdVli6RiTHDOIx+CqEPOFL/rfv3LGi\r\nkMTkSD0ZufjjxAh7koHDRtlOxm4Tl/DrDTFvDZy9LtWZWuORXIVvARUjuOPd\r\naV6pXOMMyo9YvHL/XKklyENS6wwcpXZhWetiZjg+4Sh2sN1kxeqDKNLYilah\r\n9bXKuJIvW3u0hqZOhwoBRFyXUOZe40E+eWP7/hfhKJnxcy810+mogC7bfbrT\r\nj4fXrEq4XuZ2nJI4dY09yixWXVuP4UyzJbr5sD0kc05BJBssQmmEbg/mB2R0\r\nIOKh11mvbrS2phAGkLcPDqpyGz2glkEXvmMekRDahw9HCo3NYyUtidFMLVe1\r\n3PIDGW+x97GuMQdUWGidacppLPMy4mcBisn8fQeHrAwOacdhA2RAecV7kAl1\r\nYky0Fk2LD4/hpGjWHPPbf4jcso/piW2ItzzcKPBE5yvvLX1e7ht4rzMxj5v1\r\n50MitOcb8bEILNgl9kW8YmDjoRvr84pKecWK7rHlJthEg9qQ2Kh555xupWwN\r\nqiVx9WUcDw4dYkOmIf3xveDpoQ7ySROb6y0iky3X9GEHMwVGee/lMCxKE71u\r\noTkys4S/5LZO3GaBL6++NQyFS+67LK0sB/E=\r\n=mhi0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220805062318.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/bc5def6d823d198861be247955ecda5f/chakra-ui-popper-0.0.0-dev-20220805062318.tgz","_integrity":"sha512-lGAnDmcXJsRnQdF3o27f37hWDjnRQoesteq+z2ETVt1/np+IitGnOcxlUDbwOZvzCQkTrEOEh8B+sgC2S5wZ6w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220805062318"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220805062318"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220805062318_1659680670940_0.2595938590641256","host":"s3://npm-registry-packages"}},"3.0.4":{"name":"@chakra-ui/popper","version":"3.0.4","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.4","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f01f796688e7f5b4884b384817a19406174c68d5","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.4.tgz","fileCount":6,"integrity":"sha512-RU36E0h6y500d1oWjjJKQVnxWfWhDGvfzL2ml4baFk3m3u717GcfEdPaajzroQ6gwmf6wwGWR1+OWTpKysfOvw==","signatures":[{"sig":"MEYCIQDZ+e1C2HOx//3Fi2KR0GiNYJHpdyyibczd9slEQRXotgIhAK/DO0HFSmqcr+tfBy7fKwq3L0+jWnKGiUzv29yBxemg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7O04ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbJRAAjsV9LQ9gC8sb6fDxq2k+T8YQHrior7Figfp0XzwcCMR7t2dU\r\nRP3xLo0djL1dnzgPFzvfA4/D8VhkBJlYayB/V5DsZyhCSceeXKrtFXDt6XLa\r\nauINVvmglEuTO+Z1dScPFyR5FuWxaw5M9PRQYf/ZZ1Z/L1pby+ANpAVjDPoU\r\n0JUXRckagjUybyBaCLSRM2/uNMrpzypUoAEXPQUC7YL6JPRweYVlnMm/MEv3\r\n7ZadYIxPv7eM6QqHY1R1J/yvZcR4H6/PB/ODXbmrqGB6pVMkuFwAIflAhmxS\r\nrLKkPjy21/n+pHFQ4JbyEc0AgADyGHHE6OYd8QfEiLgF28Icj+Z1NbxGGKlH\r\nwL86sYA1SrFyDyKRUIjO29Efwx7cP4/ytuj4ge2GjT0oPscQNffp3bf1THDT\r\n2UBnVG3bMsRi/s8RrbIWz0Lawy22fw4w+eITsLgS8Chy9eN6giJr/S/KMz/K\r\ngdmBUaP/2numbk+cKnCb1CGBqzQQ67yUvU91BfrtX9rVit2+yMk76MU7s3Jo\r\nHfmMwdUagQ1l2kvtnjJxe3YjAurkWn9tXf52CMNpyS4ICMd+8l0AAA6PvT88\r\nesAmkq4BOPhzePVHs4yXnqdHf5k6tHemoPWWPdpq5A9fxGhh0SOH18259p1s\r\nQ3hDV2Ih6oqJIZlEDRg24gdAgPLYISv1SUg=\r\n=v20l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-3.0.4.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/private/var/folders/fh/7kklt1bx7595wvjxfmcnvkqh0000gn/T/fa6ec0676d8be067e53a980b7b1112fa/chakra-ui-popper-3.0.4.tgz","_integrity":"sha512-RU36E0h6y500d1oWjjJKQVnxWfWhDGvfzL2ml4baFk3m3u717GcfEdPaajzroQ6gwmf6wwGWR1+OWTpKysfOvw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.0.6"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.4_1659694392637_0.8598218938745015","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220811084042":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220811084042","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220811084042","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f9978f3fe2dd7f8815d6d72aa8d1ecefd7641184","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220811084042.tgz","fileCount":3,"integrity":"sha512-6KSPx8Fot3L/F0pvSKaMZBK1A1jSXwi1Wc2L0KV3OqQpMcMntgJ+8Ch7zyoBiAVkFVac827IEDHwKjIfCMUTTw==","signatures":[{"sig":"MEUCIHj+EkvYae1P16VWhLDSDAoPoKG8OoTwavxdistYm7zyAiEA22OyOrq/LuUhRdEDibeYgCjFRE18+Dfw55/qlFFfbU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9MDLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpWQ/+Lpnh6KgZ6hZndCHzE9fMU3UpND2TdwsSOn82lDFrReMGifMd\r\nQeJxiHMGcbDlLfrpW78uiPDU5yT2IjoAdO+59Z5sojlVXj3NEaGwv9DqMvDD\r\nsbwrav+p8lUqp0qj6mZmEWuFm6rZkQUB9K0j6Fmh7VSiDe+9HFEm4fQipx9/\r\nNFqtKXlb8o0w8XM0AvSjCFaO8wc2CtKxN+4ab8ecuZiPkugTDyYe8idsIf0H\r\nHc64oPZKEj9IKAXdQVKoDz380XGqRrbxKwzekap3k90GxV/LptjySWUmf3KI\r\nr0ZZR/RKwQ/5kAWpLYvhgyCcYtP4r2yIp5iR6uYOHITYkOJCpiA3rqwWFg7t\r\nqBjFhd3f7n85XYv0VNnrUrtwZRDiPXcEZRVsJw7U/5HyWmn2gp8zMbiKyE6+\r\nhxVYmPhv83nkqnYT2d6EDWkeX1/rgwvxMxej+D/KFbdTXuqXm/rnmA487pdu\r\n/USCwZ35pFWGzoXd62Xj2qmEUvM1huW4OpXz46skrruyDgxUldL2bZmC+vAr\r\nrir7F+QACnSo9dYApnM0A/TD7KHad2xtitwcnnbpSVrMQjIwT2bk1BVB9qeJ\r\nhswPSbRxe633XC1QjdE1chsIYVgn4yFXD5mZ7+EhjsATq9HyYjwqFNm9DMCv\r\nrJuY9W4RUOp5DobXnLSKZzPKWhLpRS8PAW8=\r\n=TbFb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220811084042.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/00ec7ff4456e8a3ee4a89e361784cc23/chakra-ui-popper-0.0.0-dev-20220811084042.tgz","_integrity":"sha512-6KSPx8Fot3L/F0pvSKaMZBK1A1jSXwi1Wc2L0KV3OqQpMcMntgJ+8Ch7zyoBiAVkFVac827IEDHwKjIfCMUTTw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220811084042"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220811084042"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220811084042_1660207307530_0.6150227309465941","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220811093515":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220811093515","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220811093515","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3c02266dc4f017e587afc6b7c9b9dbcbce03d2ff","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220811093515.tgz","fileCount":3,"integrity":"sha512-5oyd6u18NwHWNFaoe/WZTIXqd4pfPWHHDa4pAdbZYoAGqHfx2g9sDKxhFvY3vHwCaXR4l0cbRi/7fjSGKRW+rg==","signatures":[{"sig":"MEQCIHXhQkYYLhSJE9tbybEKU34tflS4EK4TrpU0nDz1524oAiA2ovphSY+NILb792vF9dkkTZeEjjk5jadRef1lE5qGUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9M2PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd/Q/+Ieqh4GP0YVPPRv/HgXzze9gtftP72/Q4IeRY5vYCrZfFC6/T\r\nwCo00VOF9jIAAtMdQAa1aEmltIw3anb15YdEW+MdFr9tyCFgoM7Hniw0XVks\r\nisuB1MGr9uwb2XgMZokwQJHqTphHDDLDMCfrOEOSldKD65aNdSMH+kAjfUbf\r\nQhkMG7w0rnxdkEhc55iD9NaNgkutBq3P04HRENW6Zpse3ByS+m4vOKHwjyPv\r\nMqqamANrzsbnK0c/eKQdZkq1uJ8eKMi6j4R9aBheSagFey7UOlYcn9V+YMPd\r\nWlEityfO2vNEl/erKgrkxR24eMtT/Fl2ioyC0a9QOvmUoIdTcGWLLWk8zgJC\r\nPvFWm5vjtlXNKivNWFSoI/r8K3IODIj/2H7qWK1tLf4dRZalcsZsoMjKLcI0\r\nPBzdTluYhC5tC7x6uyDoD//6ah5sxu+XH2AStoUgt7YV5ZbZ7VhKYoNPQDjP\r\nznjdcrIPaSUS8MXnKlvrWRniJ3cWlUsDyfJ/yH5cHMbv4QHsKMkUBp4TDNyf\r\n/xDbKGQoLqrY3ShhKRLTP598EH0jMz06yM5T10CiYG8aVsE5jfXH2D3fIota\r\nmpm2zihhS4vbAcQv7BL118iKXaPFk+g/RLf71ggJLFkFrXkhrGNOakNlhNaL\r\n6JfeMWFXo1JxzAjLS3UTez+/vJ+rFq+GwfY=\r\n=vr3i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220811093515.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9889ccbc8bdfc1d2bea8839dc355205b/chakra-ui-popper-0.0.0-dev-20220811093515.tgz","_integrity":"sha512-5oyd6u18NwHWNFaoe/WZTIXqd4pfPWHHDa4pAdbZYoAGqHfx2g9sDKxhFvY3vHwCaXR4l0cbRi/7fjSGKRW+rg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220811093515"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220811093515"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220811093515_1660210575401_0.4562837012133558","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220811160709":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220811160709","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220811160709","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"da98dda846b498e51dba4e2b06370926b7563fa8","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220811160709.tgz","fileCount":3,"integrity":"sha512-JF31Plv8wopqtqEIoGDobEd/lVCeXw1Cj2KFRnpCkyP5B557HRl1NqSti51hrbagoscsuCU2eRGHBCbmO+4e/w==","signatures":[{"sig":"MEYCIQD3sKtjt5lRMi3ltvyFCtJRhV3mWPmAWaDTpDATg0fMPwIhALVYR91+A/7de93/w8VQuYV3ygI27kVK6U1g+724mR24","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9Sl2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS6RAAiW3TGvdc01dYP1TUtMF+zYyvsORTNVXeOnz63nptYy9me/Ot\r\nQIXSmlufj/tundNYEv0MKJjAl/+a+sbAqtKAuI7Ay4z9CQwwNnCwQHBteewz\r\nN/I/wMvesX2TgJ+tdIAJDlMNuik4e+EXT+TtVTB0xglgCfjvgkdO59Khnnck\r\nR/GCB9Lleqi0q8dN0zv0Io1Ghhv3+8rwJerLqv0QCZdSP2bu8f1jLZOl8Li2\r\npGBHy7PuAisPlTSo9x8g9VgPOS7TL9ZDvVhHk1v4U+dmzyBn7VEpsJLmIAV/\r\n7OzeuFSpTqdSXJN45/AeQr1TVkbHbOqcvUpusoKkm7X/emHZ+0RjdJhXagBy\r\nkM6XDgefb0PdKK55Y8XrtA1z/TA6GGEIuSAjbdX3n+wvy1nmjOlvHH0oeIn9\r\n7p2md63VYn3pjNElolVNaufWd9OfnbdKSqAclsdL5SnjMpRMu+mmyUNh3mwU\r\nZlN7lX03vL41qbwnQaAIIsRwCliEZicPBqcyJmReh9e/6586o/+daa3YnVFd\r\n8SRngFtoUfbHZI/BokK3zgz9k2rHQpXtxDUSMsOS1gE7vL3sV4m++HTTdzRe\r\nTstvKSnA/xqZjzBz7zG4z/Gs/wTeYTppdAR5l3XqmrhNOVjQD129Jy/S6NfN\r\nlV4EO+9cKvEDLULyYN5nbYuIBPA0b0QiAN4=\r\n=Xh9P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220811160709.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b9bdfcfbf33632ef5ba3454071e27742/chakra-ui-popper-0.0.0-dev-20220811160709.tgz","_integrity":"sha512-JF31Plv8wopqtqEIoGDobEd/lVCeXw1Cj2KFRnpCkyP5B557HRl1NqSti51hrbagoscsuCU2eRGHBCbmO+4e/w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220811160709"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220811160709"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220811160709_1660234102614_0.019283493527209483","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220812060931":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220812060931","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220812060931","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8f1f0a1cc9d41c0a02b424804c11e120ecc8630d","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220812060931.tgz","fileCount":3,"integrity":"sha512-Am4q3g28UAja5sv6PrWgZFQsjdnDQ08zCkzqMw+R7MgsMgUl/+xn9DDuibJ4BwbrYJoPYBjm/YB/XXIeIdrH7g==","signatures":[{"sig":"MEUCIGF3ahuS1CdQ2n1B8qlYrSkRzsKntXG0pveS0Dl7ixgiAiEAn4+SsD1P8DaDD+np8i7/kq4hY9LspD6e7EyWmOAwD2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9e7dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoR0A/8CDLHNgmSzVhr910tUosJW60DHBHlbuQIDTmkugXB/6Chmjfi\r\nsdguLSNxyFF0qLej3eE0AFrJexMDavhNtPT82/q4nK2XtznJLTAEtOWSeBry\r\nilRWMaw3IvIa3F0pwN7TTfCribCZiERPwYQtf+XxCEg0GETTQHxqoo4Kylau\r\nJ5VT9bmFpheifPfnt36eTKCP68v6HGMp1UE7HoNHCOT1TYWyNwai2OHYd+cF\r\nM3zLkBqbtzUWEcQKBsJN/V2tRJQoZ3B7KSwtK457O8kLp/RiBYNKdeItiAIx\r\n5hxIFkvsnFk3Lu1J3NEXCkwmjvBHicFMv4CVqhXceeHsxtbIkzZj5gYdFlTb\r\nx6Oe0Bxrt6X8nP0Og7c/Vo+26doMPm/s5SwCOpR8D3Ak9Fm2tMlG5gpauTii\r\nIVhzHAjgGcaeNqND5ap/TYg2LTNkRBbAVl4hubBhUQ94Cp9cFqgNqk7maxZj\r\nYD4NwxQ9bo34UtRA1dpcg2vcJHmuC4y1uJFklukPtOmSvgKtG1gs3b+w8ZEp\r\nokytXuPkc99+NPeZAB4G2vncLahnejt1YdMC3LlJcwnhEeZYA6YLWjEHz3Hb\r\n0Nht7McHG2znewiJkGLqd6gGS+I8UY/kSkh520cgg4ZgitZiwFPqxlu4EiQI\r\nxK1QbSbQF8PMmsrreVW8e/1Z64utsyltO60=\r\n=puGK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220812060931.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c5742def5b0acb7efe9380281441920b/chakra-ui-popper-0.0.0-dev-20220812060931.tgz","_integrity":"sha512-Am4q3g28UAja5sv6PrWgZFQsjdnDQ08zCkzqMw+R7MgsMgUl/+xn9DDuibJ4BwbrYJoPYBjm/YB/XXIeIdrH7g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220812060931"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220812060931"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220812060931_1660284637441_0.2961098598414109","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813051625":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220813051625","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220813051625","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d800a917d44af3364bfff91deb7c180c91bdb189","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220813051625.tgz","fileCount":3,"integrity":"sha512-JgpWW6XWjOoFAu+u1E94kkAFcXNvKNXobF6aG5VzPuCitkQ3VkoGYldryqdN/tbMp+kF2RvNonuuoqC1ebWBvg==","signatures":[{"sig":"MEUCIGytje9fUFWW+48y5m1W4357IpuCK0gkAus3sB9CZ9YdAiEA3ifWn9ah69EETGPSvBaHhErjyxM1Dz7iAD4VpGRUlHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9zPrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+9A/+LQmQQk8xS+PmogavRssrLXKef26BWAdPfAosOPZaGPtPGXlv\r\njXahbXEhQR0qIkjM/P7y6QiD7f0p3wwJRgSee/R5nrT0SOFvcYb9p9tTyCtN\r\necGFSk1w1TO7JURDuKlczT0b83aYoZmZDQHnQdvWsaM9R+g9bir0AlL4izkV\r\nCwMibcoqIaHIylxTLc6e4hIjIeoF/pOVaTxVcFTTFfNDaum4VtRiboDILGe+\r\nzF5ij4Zp/Jui5qv9/bvD4al2U5YAbB7+0HHlAdY07GN94IB8DOUkgg1y/+2P\r\nfGdR8yloTYhaazvWHXarjh2ZBnLHF7mPJqJd1YysH52TUG+FN1T7pfW5Bxop\r\nCbGMcTncI9xt+rdeLzyzh31yEaXWqouIba41dyCVpsA/XNZgpSg5L0S9brhE\r\nJyOfBB/f/pTKPLRfjr3/RPshPRcGscocMTcchm/ks03wazSmiySnSk2rwRbT\r\n3iIZFiqIETgsSjK0hq9X71pCA2eyU5eHbgo/bBvD8yWjx0ndJILRxc8ZPYhY\r\nL2qB20AEwKRSCa2gkScwjIjrTvHQQKjTF6t3kiEtjTg1rOYhHXBk9rsrSMkO\r\nxu4+VrmIAtBIf65a0cM8xHK3Jq/xmhfc1ZPhqPD+/Y8dn/BwVcYfvzpWSNQ9\r\nnu7Vl15L71ldxM4/8nlsLUMaRmw/hp0Mbys=\r\n=s+H5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220813051625.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/1f1a42538ba774d88d64756bfb9497d2/chakra-ui-popper-0.0.0-dev-20220813051625.tgz","_integrity":"sha512-JgpWW6XWjOoFAu+u1E94kkAFcXNvKNXobF6aG5VzPuCitkQ3VkoGYldryqdN/tbMp+kF2RvNonuuoqC1ebWBvg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220813051625"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220813051625"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220813051625_1660367851294_0.5586813372103774","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813052715":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220813052715","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220813052715","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"44513a2c517a1727285168ed9e6afa586daf63f8","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220813052715.tgz","fileCount":3,"integrity":"sha512-fH0W4ZdIPItciumZLKbY20JiqvaS0ZThm8961UIbZdE08iGcJzCpqUoEvXGJ8zRYmmsLeO6It3M/ezKB9x6Wew==","signatures":[{"sig":"MEUCIQDGR9o2NVYxECDBMkFLB4NRndOi1C00nxrZgJEeY0hinwIgL0BttJ5B1o6sOvz5tSRuJhGLnQT6BJx+IGvg+Lb/v4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9zZ1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoR+hAAnnwYASRy8g5iNz5hgEsYHjHMaWd8m8IafSt+P4kTf9dt2pC3\r\n743ZvnnGCrCdOa9ZmpAjYOQwfqZLm1+lUsQnsup2sOz711tyNCisXzj/2DlQ\r\nx9qyde4JVI+b8baJ26My+Nt7alcmNv8P1Yg4gWSCW4MCNEgXpVXY17Ca7R/T\r\nKsFGTtwmZjT/T1jvGB7EvkLccmR78ex0Uo3hLEISB6uL8c5l5rcGS4OBmbK0\r\nty/wflPSoqaH0yVcyKYLFkUqWtjd1p84HJCXRCpd2JYrGqkHK7BK8McvCgmU\r\nwRmw71PUBYyN9SO+2nWryDK2eDi7J17k/MlbPgUr07K3NGpN2iIERZ6Bj/x6\r\n/J1uArk2B02DSRGjQhRx1DesiuVXt92ymT78hFHbG/5BwzBnv05e1tubJzOW\r\nS9oLXsD7T/90oo/k4i9XE22/aRhTM/r+xUFTa5emgMMQBZoqgnzq4XOymh+B\r\neMNILLlo150BKeQoq1I3lyBqBErKH0RQgRfcU4Ew++pM5DY1dFu8eOOK55Iy\r\nLQZRWL6UmypXGBP/OHCSuEpUxgvyPTy4yocTbboBtVDgawch40Tql+SnHkYH\r\n2PQlpS9iCBCl2yxL5dHmFwvmDDlyMhXxOP1y9II5vrIwNVSBiXvD2ip+A4Xa\r\nax1be/1DT2HnywBmcp5i4TcESKIaVigUj6E=\r\n=8ZY7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220813052715.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e1bb74e607090d821b9ab8d79c66fd50/chakra-ui-popper-0.0.0-dev-20220813052715.tgz","_integrity":"sha512-fH0W4ZdIPItciumZLKbY20JiqvaS0ZThm8961UIbZdE08iGcJzCpqUoEvXGJ8zRYmmsLeO6It3M/ezKB9x6Wew==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220813052715"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220813052715"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220813052715_1660368500875_0.9443683617026015","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813053727":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220813053727","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220813053727","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6fa325462af504cde7ed04c76129801bf51bcd1d","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220813053727.tgz","fileCount":3,"integrity":"sha512-TU7SMrRzFwvgW05FciFC/pTlFM2LrgEHevMDWaQhZjaBEJ3H0Q/oZJg8cdP3iqem11mRjXwGD5lKYHOBo3VPeg==","signatures":[{"sig":"MEUCIQDOMQyawCQBKJ69CS2edM3m/Ia9hH7r++wbT76qMsFLEgIgTT+luallodYXM0zZ/hjdKNHf8Z8tJ+A3OyqfpNSd3NY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9zjjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqa2A//YLKyU0q4HMpdfy02tCEUk1yXpEb6eij3a2IXM6EH2scaAqQl\r\n7T9y1RHDLXfNdc+Sco1Rr4WC/faACaFwUw5ILSgEGdIDrgp7jc+whx7Nm740\r\nW6HXh6JJ6LPxk2fyD1vCizMzMEb/5bxW69zaS64Eh+KEijy1EwjOLkt//PRD\r\nMZa1A7/mEx0vDKdk7mfnakrNbgZF8OMSXs7cREB/ruXN6oHatDtSemy6IDYf\r\nxNR8dGMMXbCmQuRRuCLAIb+NvdMSHxmNRbBrG9U4RnY24JKimRojNNausPkY\r\nvf5QaKv+0VmoMFa3gAImyR5aqR06a+S1wdlWtAYzbVpKkjEc6yKpIQ4Kf+wl\r\nMxpBsn1yF397EKoQ/jWRcXbmnkRRUkRT3k5+sG/6HKSdKiDOHjoYGnw6m+rz\r\ndqir8iZLf3rxkmdzaNB4MOoBoxcJS8WRGA38dhyszVzkOVXxtQ7Sn6SXvRl8\r\nWTGuBFiMWCqXv5J2u3ZE8LAWty4oJpyrM2AFp+Xwz00E8XxohXgZQh+mLR1h\r\nqcXA2sZssMNfBlTlhdU40Hj+DUy/Nzyu0fIZuRksOusLmg/4S+tET2XX07g+\r\nlTsehCdZdJhDypFjC+mZSHBtGQGzcc+kTfkFYxRUsAhIvL5+iNnA616lKRIj\r\n38X8xIC919YCRHfmzVj3xd75imc3dS4qvjI=\r\n=mPwe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220813053727.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a3e50ec16cfe812a0856262104a800a2/chakra-ui-popper-0.0.0-dev-20220813053727.tgz","_integrity":"sha512-TU7SMrRzFwvgW05FciFC/pTlFM2LrgEHevMDWaQhZjaBEJ3H0Q/oZJg8cdP3iqem11mRjXwGD5lKYHOBo3VPeg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220813053727"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220813053727"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220813053727_1660369123006_0.7649506956940852","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813055957":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220813055957","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220813055957","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0738883f31eaddfbe9b77f6cf8f70b9b3f283a7b","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220813055957.tgz","fileCount":3,"integrity":"sha512-KAkY0MBDH0joFKCAxeXUaQSbzpYkJK94PPz40SgfbaEaIz7ajkdh0lABDjcmLLZQ3sVJIyKC/1vXcgoByBG+BQ==","signatures":[{"sig":"MEUCIGpUyx4a9YkMc453lufRE1/FicrPjPh0MIMsJT2bv3meAiEApycCd2HLr1mCRkE8BnsnxQ0KKo57wQU6pNbzq+pzmGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9z4gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9lA//W/o/L8WweGEZBhWuBdXS5IDHCwMz8y95ghoCx1QQQ39NIW3A\r\nmCjf8+fNDzvRgBchoUmOVYC4DqrIH6cFqGZkzNzNNn1gbdr9SzU9Q2XLIRdP\r\nJxyjzjyX31RD3E3VpR6bAw99Wq0tWtwxzTHbmPkHtI9HK8ZycOt1GrMcCNLO\r\ns6KOVdvcpY+g9ntqAKRSpndmfCWDKaTlG0zxJNzTpFirEtwGbGTJ9uFYe2Z+\r\nbVQYgjS1swgVTFJkavodeZ3JFqcjyfjHMNK/crZSjAinw1YUNsAryCO8lp0n\r\n8TtivyUtO1JLCYhtrNRLof72ZCvpPnsQCal/nlIvZhwSDgYgSkqcXeRvxUtY\r\nPqZmasPUw6o6ETwKv9zKdhD6GsrBmvEk2+XI1XOOWw1gGdOPmzgqwlMmvLq2\r\nEXFKVIswZcXFsARXZ0GwC6MAjPmVXX7mv3Rfuc467EiF4hi/i4JxUtH8crLY\r\nu3AW7Mw6Z7901F+595nJi8R+xkdMAoxMcbOQm86VfW5jFW3uLDa/Xd7KBALK\r\nTnm3fM+byemTn0WNaK2Nk0tAjqC8cEQx4bU157fT3fZN80f316rGUmOOPC41\r\nbruSRJ2QhfOWle/o3kq1bIEDeLBLA0jHbuowzS+D1f8apK+zkyImHFSd1GOx\r\nchC/zftEUTDvwulinRM8P5Q5q88Ho2URIBo=\r\n=+LxL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220813055957.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0c9cd1803bf5d8d6cbf8503d14369067/chakra-ui-popper-0.0.0-dev-20220813055957.tgz","_integrity":"sha512-KAkY0MBDH0joFKCAxeXUaQSbzpYkJK94PPz40SgfbaEaIz7ajkdh0lABDjcmLLZQ3sVJIyKC/1vXcgoByBG+BQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220813055957"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220813055957"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220813055957_1660370464385_0.5348053483131512","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813063717":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220813063717","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220813063717","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9b62df717e938fc6e708c1db8a2469e68d0c680f","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220813063717.tgz","fileCount":3,"integrity":"sha512-DeHaFILVbI+MZgHRNQesiC2o5MoP+K87GVj1JOUck4JetqEci8VzDDltvep7ssDgdlWbV9goCzr667ZZnHR1OQ==","signatures":[{"sig":"MEYCIQC8o9hK8B+40iYq33xoVBslbmc+bmUEZdyW2yHTy4RpTQIhAPvuSB5lnOnZDlgB3E9Yv2PP6gpXSzhbscPBxnZKCra3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi90baACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnFA/+P/h8GwOhjknuvakOIUoDkLnxi3V9BFcmQTH+zZIGJmxOm6cf\r\nGkB13nOpb3XEh1lEG1SBtPHxlqtD4poKIEM50vMmi7DTmrrRTJROylh5ts2o\r\nmqXZtB5cV/4u0cA/SvyrA0ekDsoOLHnAuyNvQzI7nF1ieGPCDeO9rLltZ2Kl\r\nqN5JeItNBjixnG3pe3+Y8/uuqJVwK/JbQLRDU5p76i/hQzyicwOIJqQwf0cx\r\nTbCcFscO+E8xF3uDsW2HvQbidJpDUzqIM99x3yKYQHgArl/e0Qw26M3gtLbX\r\nkKKDIZVc2W01Wp4W0otUncgxBZZ5VF2eLKXfBoYgi/H0A/Y2XMOqARHqLzTB\r\n9OrOljqd3wW6X19WojZo0QIQzboVmgLdjZzS9Q64lo3eJ/6PNDZTzRBag5xk\r\n680Hpcv6+FWNLgaBF77i2J1AxYZWDM4owgAiPxPMr/asJFVNuWO4x4iC230j\r\njBq4l7C5KRjJBaYqSC8V18h5tosz0u3L6e36zYQrtJl1udE8YEX311xwrrcb\r\n5xpZgUTbBxujk7S++FZJsiIB7MUH0jRjrh/7jGvpk+e6wuFTnVhd17HnXzw7\r\n/hGRGg0agUqDtCTBtGQxHuanx6QnBlHnXI/Q2VapxseSDc3ksQ2OoPsvBoi2\r\nDTic35XcFCa67UN2b6WL5TASNo4jHGBCLvM=\r\n=wdYc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220813063717.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/58460d6336923d2529af5d119b9b6aff/chakra-ui-popper-0.0.0-dev-20220813063717.tgz","_integrity":"sha512-DeHaFILVbI+MZgHRNQesiC2o5MoP+K87GVj1JOUck4JetqEci8VzDDltvep7ssDgdlWbV9goCzr667ZZnHR1OQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220813063717"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220813063717"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220813063717_1660372698235_0.7243948916803673","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813070741":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220813070741","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220813070741","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6a9e4863b3b33181a115c558f479849ebfb75a82","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220813070741.tgz","fileCount":3,"integrity":"sha512-pJ78z+OYtpZo4oUg/1bCMnti3G29KUjg3uAqqqwEGvsF+kfBnyTq5sIpDoUmH3bDlJkhaCgbxAXq3Yi7hRkb2Q==","signatures":[{"sig":"MEUCIDryjGWyq3DGwlB2GXXJPv/nlkLmimpcGpGBhUdA2TCaAiEAxpOvm8ofxamRhgwvDUOcU8xJqFYTbkFK+G208v1jqkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9039ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYSQ/9Ek5Y5WBKUWh00wib2Gm7H4X1t+Q/utGMOHtN/BVQbLv22stp\r\nvpGTKc1haR6o9YGhlNJKAdswnwMpF2D+3cQ3E25tyenOdNsNC3daM9UZP0H4\r\nHcA1AeNPa25PUhobHDEXExFLBcWT427CIdva2rNA9ZUlhfM0iiY66Ws0/zSw\r\nvUmRua1tuq9Z1gq+tGQy6TEhdGcxuGwV9yMMbBkZ3iDbjsTigSgVk0sNmxGb\r\nytoyfQoI3i3ZgH364n8iJ7XBfbDhcRefhq71F6L+czUoXpKIu3VdjM3sDvDR\r\nca4wyxpnnVN8fp45iJ0i/YfCKnhk8C1tiThV8wVKPs9h31PLl6MEtRgxizsd\r\npwRnkrjVTGJU3ol5rzyh+ZFDxBK8g/+T8JE37gCXeU5WhTMces9fAWj8OsB1\r\nq58TYW12RqLK5TXLvLqoSBQQDRjlBsAstiMsXT6Ye62xoAl03Ub17R8bg8ee\r\n2d6FHXmjcdhQbAWjBZHA0RGVzyjoZKxvhNurs6jPZGvy8CUEh5R2y7rQfyn+\r\nMw81WaIn7c16qLDRyuFjz9ytgubfGER78Q/bqu2I++O1kjf3S5KgdogJ+l1m\r\nZnztGLwaw2YYkPWJehhrsPxkNM62ihP/jLB6AXdceawfA7caeQv1Jf9owyud\r\nrWSOXWmhd554L0U/pFpw2yjM9FqqLgY3C1I=\r\n=wakk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220813070741.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a4fdffe1cd6f1358fa9030a5912cbd87/chakra-ui-popper-0.0.0-dev-20220813070741.tgz","_integrity":"sha512-pJ78z+OYtpZo4oUg/1bCMnti3G29KUjg3uAqqqwEGvsF+kfBnyTq5sIpDoUmH3bDlJkhaCgbxAXq3Yi7hRkb2Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220813070741"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220813070741"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220813070741_1660374525057_0.7247296777091097","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813083358":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220813083358","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220813083358","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e5af681428baa5bfb176747cf590e90346733631","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220813083358.tgz","fileCount":3,"integrity":"sha512-/g9i/TTtF4A1ErZdQV50qrQzwNdDPQTp8P9kqvsmtljoMX/0e4DXtGNxYjsq3LFNSeq4jISlfVobaRK33qwEEQ==","signatures":[{"sig":"MEYCIQCsE3HU3NmGvxdi+Yi5E6O0n+/o/XkbZlk8y8k9FSN0OwIhAKU/rqAQJrnikMTqSvBB3AxC5I1E6mV8XZ+uvGzUeK+y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92I1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlJg/9Hu0i6u5Ktk/LTjdgm8cNlh9dExAWHwjSxqVesYptzFE8PtuH\r\n+GBpZy6RlAqUMQMau5ommnDWH2ATZ3qwVGRonqBbNGNORRxjKSBGl0/kRBaa\r\n7wFRkwuG9IwBQAcCpXd/KnKDwtSKmIeN9c3XOfe5usFu2rLXicg1tM7g+59k\r\nwYgF5Z6nY5anhyB7pkRjzfAeW5NbkhTcYOf4kDOyTGo0XaxRV2wd3UzYjQGv\r\nJiD0mc/aO3KzfZ9AvxuF5XqLwj6tdakCehXSQNNpGJo21rsvEp/oKV8eGtFw\r\n4/bTtTFYr5GtP4CKLhP5SAY3gN41thc3x75Vq+zqmC0gjPNyhrCZ2RkwmacR\r\nQj6gFTmtkFAJJQGQJx9r1VKLsQTZWUO8nG0zZ7+dREsZ+21YkNmi9eZfhpZ8\r\neBLCI2xWGg/4lYoyH7I4mOxSyXrFnsxQ1oCq32rzi1q5uDGirq3CHLg5FF4H\r\nSiLkjfX4OiEQNHCFQNxe2ZIgxs/Jws/olCbzNvp6g/1wMxE+AytWQ9SjcD4L\r\nbyL2tHr0L9ZELuVfZ068XGmz5egQHXygAYAxZfp9IsXzFxp/R204waKcvcsm\r\niXNyIUIDMLLnb8tPLYiDi0F35i9dLHbfIAqbv6ZdWwO1GEOtDHOlen9DtBX8\r\nDOCdfJajDjn3cZrHhrYXoBvDS1osBryMLbk=\r\n=fD8V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220813083358.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9601d7969bb64e88d97235c66c7ab857/chakra-ui-popper-0.0.0-dev-20220813083358.tgz","_integrity":"sha512-/g9i/TTtF4A1ErZdQV50qrQzwNdDPQTp8P9kqvsmtljoMX/0e4DXtGNxYjsq3LFNSeq4jISlfVobaRK33qwEEQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220813083358"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220813083358"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220813083358_1660379701766_0.7301059728857844","host":"s3://npm-registry-packages"}},"3.0.5":{"name":"@chakra-ui/popper","version":"3.0.5","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.5","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"41906228188c1a8a2571f5352ce7337ef04eb929","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.5.tgz","fileCount":3,"integrity":"sha512-m5KQQKI0FNoKbuAyKOQ8H8E7Sa0jqKArq86Q4N1UeAbnUTm0q3UIXS7RA+bjS3P6PiahvdNO98O3eEoH6KYFdg==","signatures":[{"sig":"MEUCIQDRYCL5R8WmNQoCjoT81jjbbIAJLSWOS6LleVr8qmPMuwIgBJCM0cRXi5+Vmpp7LQ2B10D5gRiFprnnIS57m1lfV1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi94HjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCvg//W7e0a8+ysqPQPsdXNvUBIyyR36hoP8Y7hoI9ah4/VvZ9F5kO\r\n0FyJI/cgWyupW6OqvSI55UOb9FwpFcLPsisgjFQBXwfEQ46kdMDCT3yQNAdO\r\n04gS3t5WxVNwXunvb1ODKLYnxss3CodEquvAiZtIKUQLtyPsmdGnfX6kBZyt\r\nKSGlb00OtXeHqVITGSGG5YNmpfQaq9xIgT4SiFyIOKeslzQcAZ6Nlq4JH4qG\r\nBNMOajMN7mJHIvAnhGmtU9H/vyUzmCENFbawMm3jRtsRAFuht3fDpojQ1Siu\r\nk6OFB2Tkjv7HyfcC4vXC5zk9TYo9umO/MNI0WKZnt3CK5mHKv+l/mUb+RE9b\r\nxoJApXvP+AuO4xi7bhgGVELiNTWC54pUJEWLp5l2fYcM3QV50m1csTB0bLli\r\nUSJyEIpW39D6q6R131xiCsDYBFTyMH9lHU/lqkNGhwYRGmyTRKujQ+IaHlGB\r\nXDK1MIL4p0opdpKaT1XC/hTSTHzf0/pbkcasYX92OUUSvYyDOJSeLNXJXv+D\r\nYVa8QQ3jTmVAb9ap9eqzjCnpCzaLTc0E6T2Fso9papk5LvW7E+mvwsemKRPO\r\nzrM+B+B3oNbD6lnY2mDvG+scDYyJQt3bdEAngCscD7F+RNeoBWEM5JfGdd0H\r\nNe5n5g+Q7EV+WrHeGM6Ye6JhaKuuCOuCBY0=\r\n=wtpp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-3.0.5.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/741ab79f837a60b1cce4a79e64c6d2b4/chakra-ui-popper-3.0.5.tgz","_integrity":"sha512-m5KQQKI0FNoKbuAyKOQ8H8E7Sa0jqKArq86Q4N1UeAbnUTm0q3UIXS7RA+bjS3P6PiahvdNO98O3eEoH6KYFdg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.0.7"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.5_1660387811023_0.9592041997905745","host":"s3://npm-registry-packages"}},"3.0.6":{"name":"@chakra-ui/popper","version":"3.0.6","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.6","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2ade67459b22863ec0a879e86ddf91d26951185a","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.6.tgz","fileCount":6,"integrity":"sha512-QKRzSgOsp2nmL8HXcN5DVujqV+TsECnKfMwzI++SgkIJUL5wj8w6VNqDJ4iym84Sgqw5qNVoOss1ZpgGKAriOg==","signatures":[{"sig":"MEQCIGcmRhZAoJjSZoGNKGSs/yE0wf2pt2jtwbKwSVuLi61uAiBPhY8Smqnp7TW4zsYJeFLb+1oFgUx+yn1zqz4+gv9yPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+KAKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgARAAkiwzOOSTOhNe+4XKJS5ve3RmNGJfvI0mZlwxfFXxIeGVQOZV\r\nxM61SyvozRtEf6A3pJQJee5ob3YbZJ5ILrYQFUUGhiUNCgl2XqfGRisnIC+0\r\nxmEAwbgcoixPVXpRTwHQEzeBQeAqM+TGnC6XOFF430uOcwxt7b09H1Tpqhsd\r\nhZXTKgK2mwiBphvqPu2Be+fQjMdLu8ZY3bt/tx1R7upqtuF8NQaRBthqgwrG\r\nKgbtrn2YCpiUiLO9hwQT1XMDUbrM9GfHknHOWK6WXNYQx3lV9pkhwH2ENaGH\r\nrTgM/XTQguuICBacvcyUdOCxyJH3xVIN36BbuHqJqoHqUPAhOFlVlrR6duGi\r\nQOFbwjeOS2/RSpHkaiCKOa+QSkKFXt5tQg3vFEwnKd4mzdTGmCSeEv8+Wdjl\r\nxCjB08KOQm1ZNXaEzQowpkl3bckGWO7PKsAniPQqLKRFCQa1aeaiBo66VUCL\r\nS7vRlkNIdVOihBwWswcmlRQTXAIxZioYKIxVvtMwWloE549tbq41Kyxka8mb\r\nZdeHUdhj6tI8KIGrDC4umgr+aJRCxkBRcyvRkL2mMB53ZQLDH4gk14nEPKHZ\r\nTS90iOU8+onDoqnrE72emBUqlSygkTWVY/M1k01uAP75+TV1rBQVOZP8OvIB\r\nem4Z5dnOQRRckgE1ocHgS73ahClVUc7FxUc=\r\n=KDCj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-3.0.6.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/private/var/folders/fh/7kklt1bx7595wvjxfmcnvkqh0000gn/T/beb1c853a70cd4c0f6ac69dfd0f3cf0c/chakra-ui-popper-3.0.6.tgz","_integrity":"sha512-QKRzSgOsp2nmL8HXcN5DVujqV+TsECnKfMwzI++SgkIJUL5wj8w6VNqDJ4iym84Sgqw5qNVoOss1ZpgGKAriOg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.0.8"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.6_1660461066554_0.7811061766309677","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820124231":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220820124231","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220820124231","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"64f2df4fc0419168b9e43cd81f2c957d8c64b425","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220820124231.tgz","fileCount":6,"integrity":"sha512-MUAvFC51JssfvaRw1gnRGwE8r5khR3+XyavjdTG5fbmywVhu0wIISfHpg2t9JdOHi0XoMsyR77JZFfJhon73fg==","signatures":[{"sig":"MEQCIEl6Xz94p/Td3ylhoj7Lc8G/1yYD6otEvti5UevuztCmAiBY8roxKrwXWqKx6ojBRmAADLSMdVmPAeJpxvpjqTe+Pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjANcIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrp9g//SIwM3+yIlia+xtjkGiMM8GCv2MTnVSloh7qGuSWKzxoKorVA\r\n3695osqe8c2dqpY8RBgX8baPhoZdBnpS8YVMlJsLeSZaJ6Pu7g4Ag3YscLWL\r\nn7Y1ffSHNddv3LrTOzFqM2WeG4oZ6re4ZNuap+n5VGKcAdsi/AlysOyhx/dX\r\nfd2XlWCQks9Ucdv5CP7GLVx8Hu1MBoxd+oSNmI03SUbfX+3Wpbvf2DDGr/WO\r\nTjlBZqJJ07LmoF5ph5LADznxDqd9512l7CXQlJkNhC9sX9U+a0uGCiu4NDli\r\nLUB7P2KBWS7h0OiX9azEGQ7qF+QG5KitNoi+mkin+MXSLLXMQx4KG86g3sM2\r\nCPkVhtMHiA7F3eEkA2yT15uQWWtk8GewqDn+9124q+FLQlPyQwv9ea8GFG5F\r\n78ekjRjcoJh2kHNnJ46Ju95Cgz1ubEVI0MVZjUTU1ZWH9FYI4cuVOrvYs+1I\r\n07yu1RFGuKXm/zA3Rg1/zWuzO55en3QsneU43z33k08r8+KY+vp8NvaOcU2z\r\nv/oLvss67vcXPrh930nNj4e11RQ78DWcIpJ1gOJZI+/90uDADXJHeA5wccZ0\r\n19JDc+TocGNTn7zlq5tAWvVi7FA8j19LkX/YHZrE5yLaWFWvl1EasURZK/Hd\r\nXcsmwm51HPe7Rt7kuSYVuxPtrvpzw7KUCzk=\r\n=1Na0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220820124231.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5e99932581ce41666b41e90b8b3f4ba0/chakra-ui-popper-0.0.0-dev-20220820124231.tgz","_integrity":"sha512-MUAvFC51JssfvaRw1gnRGwE8r5khR3+XyavjdTG5fbmywVhu0wIISfHpg2t9JdOHi0XoMsyR77JZFfJhon73fg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220820124231"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220820124231"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220820124231_1660999431950_0.7733847819166775","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820152257":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220820152257","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220820152257","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d4f5094a0b9e51e1ba69c02b6481b487e70b6973","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220820152257.tgz","fileCount":6,"integrity":"sha512-AxiIywzAmixo4BFtgGGW7Wki7cKKEsGZYheWjAIOXJoYoph/xAu1UzSQYbFoR9P5AaE26vt/GtsJbQv/Wb9qyQ==","signatures":[{"sig":"MEYCIQDA4nWGp1c+aZh+SkM98Az8XjVlQVxDUjwHu5DmDM80lAIhAO/3zUP65I3LSGAenqbl2qeObGQsng7jCMoKJqa8diS8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAPymACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX5A/6ApHBmjBd1MJ6OVI6vYb0DQkEJBnDVzJoOHchxfhtu2Ubokv/\r\n6UxkAkLdjdxQJ6vKwmWZQN8LgKclbQAjr1ft5212Tx9BDNUrCJR2GyyHpJdg\r\nZMern7mqF0cKUaPvq8BlQdzmanq3IJiwo0uk/Aqb/8XUIB9vJ3t2whXNPwaj\r\nUzSzSVGUdo8imZ9GdbtgLG6sCCKjJu3ZM4UbzMnnJhnsapmeaeiO52RFhlE4\r\n2qQSC4Dg7CC+ITb4P8XKCgpj5IoFTkqir+rF/RN/q5WYnrKm5XvO6TWFFw7H\r\nVSL18uv07C52JdkvqvWYQywii4jzU1zBbY1bIfXdy72hLBJOYo9Jdfs0hMlf\r\nWdD/qwkAhiGNut/93TNT8FtNW0s1ChztxW70p6i80zCyKCHSswjmT9RuIqLZ\r\n4R62Z/0G4O+So4hFRYVrZ9Fto61i5C/o1x0yw3Qm53juxjezUnbhJpekbMOe\r\n5Ykj1CX1j4811ocRNdcvwwwRlSGE55m/f3A7RXnxXrEpXdcSUVO33aKYlkbd\r\nzJ6G3EYkQbnfGZXst7HZb1il9YzKJyzeGjyFQmKojPD6FAljLKgmISIsFlhB\r\nDNfc3P6GwO+3WC8rSPugCUH3AvgXjZTnivSQJctP8cO+fME6mN4J/s8DE6bW\r\nnVnr+7oYV3igC04UbqPXtuXkYEHMcMNhsZ4=\r\n=eQuD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220820152257.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4263bd592b46231f18755607dc68b9fd/chakra-ui-popper-0.0.0-dev-20220820152257.tgz","_integrity":"sha512-AxiIywzAmixo4BFtgGGW7Wki7cKKEsGZYheWjAIOXJoYoph/xAu1UzSQYbFoR9P5AaE26vt/GtsJbQv/Wb9qyQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-utils":"0.0.0-dev-20220820152257"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220820152257"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220820152257_1661009062044_0.8224162965715416","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820165925":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220820165925","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220820165925","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"581de7a2ce2fcb223832a5a358a8358493a9f55c","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220820165925.tgz","fileCount":6,"integrity":"sha512-9RAt4UhAYIICnkiOS/THRJHwZ1q7C5uYtb1Wh0GPveHrPuMgh4NLE85MRUoCY/Tce78J92r4F+JgH+F1byevhQ==","signatures":[{"sig":"MEUCICcUfUUc9OhUEW4CsFVO/xnWCJjBBDHhH427OWM0lXkPAiEAzpbTVt+ynno77IGEoqqNHpUmICxKRQnP38Rt2f0EFN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjARMwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmfA//TXZqOMv5uoqKrDdL2AcKaV6t2hm8sOkA+ERgm+NsdScz3BY1\r\nIh9Cr5dG8DKNfDJFa9+3YLIYIgG6ZWjvBTfCiewXF+vxhtCAriMPAjjJagxZ\r\nV1mwgKv3IUKTETf21/E1YlQKt6UPiGhH5Tgo73jU/cndVySJGoc25YaU5fTn\r\nZL+9faA+FMvRiSPwDw3Y21EvuzbiQ/ceFh6eMelQWVw0Sw4yWcksqxg3QOur\r\niby45xs7bveSzUi5xpA+iVyt2+aGi2eyj7DLLT3Xl6ytAalReKUTv0LVdvLL\r\nULbwTdfc+6e61zqBdqd7ifFMbnZvwtDvfhM1db+Xo170nHlQmRKbW56+5Rd3\r\nspF/i8KEhuQHz6udpLsrib+iZ/w0iIMFzZixuOaAhjjtudjoMo6UFuN2R1xr\r\nD1WOv5CUhr5fMxRtpFGH2Y1t+7ATMgCqlDpnh0UuviZCdk+q1nMqdTMm6ptH\r\n0gq3PeOCx8NdVxzb6M1WTYl/Ve0i6XwpRLlvF1CkFMe4bzWsaXNE2JIWulKn\r\nVY0Rz2UxpFp3MUvR7L0gZZD4I3aFhjdKj9gWVQhvoFH38+8/+Mmnutk6/HlJ\r\nzW2ssN+k2XsvZIJcCrEKWt9WnLtr8GaREOIQVnOJOJn/3EmReQeJtEpFdzqN\r\nJ+O88U/hOXgzg/ymWoolkMym8d94YMtd5gk=\r\n=3Aax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220820165925.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/41bd0472160aab28c18c9d7a26ce79a9/chakra-ui-popper-0.0.0-dev-20220820165925.tgz","_integrity":"sha512-9RAt4UhAYIICnkiOS/THRJHwZ1q7C5uYtb1Wh0GPveHrPuMgh4NLE85MRUoCY/Tce78J92r4F+JgH+F1byevhQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220820165925","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220820165925"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220820165925"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220820165925_1661014832580_0.4228630681617396","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820172220":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220820172220","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220820172220","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6ea1f5eb23174e8b08f9b728cb22c8ff5d5f4003","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220820172220.tgz","fileCount":6,"integrity":"sha512-3lz74s1dwBmi9WGfXMli7FsR4QCWk0X+aRt8KbH9ZuYzfVLqjxVpNMgqlkAJrr+tW7FCjEkFaWKfNMUesu1jhQ==","signatures":[{"sig":"MEQCIHWopV0BUUscwzFBx4lqx5YwLkidAmmg0inKoEF/pkyYAiA1Nj2i9vgvEfml8TFIKBlKVZ8rH2fNG2Rh8t1uhHIWJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjARiTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrmlw/7BiAC+94YbOu9lGSIfoOHuYC09yxvWp1gmhJ4O+uWi/anVaVO\r\nHS10FGbXDkopS//aPnzZs7cieFAiXsk8RZfmBdSnL1gNNaKORfBotgMh5bN2\r\n5wY9azhGz9hQCzbTX4l2FZI+Ilto/tEkyLeK4rD1N2UZilNtBdxfFJYqdelS\r\nwuN7LpjUykkaTgeJtVSOSRus5qgiyZ/JApqHWDiIV6jzj80lGnIBWsMtLCV0\r\n0PRaxEaRzctuWBbHDtOUyqmWxAqhmgAgqspoBrBdhpc/UGBMibIgYkMHZR8b\r\nwXQGlCkND6CkC2Oq7BRqhCXpaJjpgRM9+w99/G/Yhigmq5CxdHkQD9Bzv4ib\r\nhbkAG8KzLgoNvyV7xd4h9T7GbIZ1sS9FTsa3Z4fdwSu4GO+4Ls08+yM7KS9O\r\nX0u8jCCg6LcvknpGXMOC0nIqtUIh3KeIoEHLL3trwE1ZMyPEAQ6iAP2+f5uB\r\nad+3p0ksIVEQH2v5l1FaZhSz9pwfcnCaVVnVhjG5iYW5hANMv1RIGcm9pAbs\r\nMivPzyaFeMfvPUhMUEr4y/dPNAPDXe4gWY+yd4py4hunpfcTuJ/u7M79iH8S\r\nMahwBCYpRxozQ1Y21kOnBemYpZf60PpoIYso+eyMf6mXfg8Zeg3WRA1Gv3fJ\r\nPjA4ONfvtRvPEMQE+zreTjYDkNfRbS3GKKQ=\r\n=KomD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220820172220.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7314c9ef83cd4d192f5bff6499c1fe53/chakra-ui-popper-0.0.0-dev-20220820172220.tgz","_integrity":"sha512-3lz74s1dwBmi9WGfXMli7FsR4QCWk0X+aRt8KbH9ZuYzfVLqjxVpNMgqlkAJrr+tW7FCjEkFaWKfNMUesu1jhQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220820172220","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220820172220"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220820172220"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220820172220_1661016211213_0.9622322324572667","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820173639":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220820173639","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220820173639","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fba8f3caa1c3d20530d8e408f866ea2e50a01711","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220820173639.tgz","fileCount":6,"integrity":"sha512-N1BwFNFcdoeF8T+PGE0hbSe5JJIVo28PY7bEpYAZsg6dxOA0XRmNvyNhD6iTGHhe1yWTgysbckXqj5U0RQ3D9A==","signatures":[{"sig":"MEUCIDDwxKEvYQO6VxzbNc8lYGH86S2bY8twACxZVp+T6+9ZAiEApMbeoK7q7uPcWD8WtZ+/gM50Iegoo3FApAkheOtq5kE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjARvqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5Og/+IAUS6WfdR5Jm5fm1g/7VYkcHct58+WdvZAU0YSyJfe3b3aAZ\r\nY5YuRFOueE1H523Kw+xdgWXecTBngB+Unh/otHKSvEhOmnrgHT6kJrb8ogIa\r\nGWfVe12RCOShEdyHHEePItnu6ZRtuvqnrSK7nMKQySTe7D/uhpwcgNcQGakt\r\nOIjnEeJK5AWk+focqroezl3WoG1gxjaXSc2stx6w5Y/WK+l6bAaWAWqUPggw\r\nfdz9hD0j3PC4vdQfxCGHNdq3LBWFctz53f79FA570jcIQvoqMMoA+cxawBYb\r\njtHSbLP2dcAGOKCffyV8yM/HmGPtT82E0mY4mr8KRJDqRr79lqcy41U28esm\r\n7U3d1cpHLYtNviSqqPxTAyLvPSFbI2KT0wCkqdUE/qSd8C7DdssxKlFe+co/\r\ndBjMetmOVMWk39g1sfbkEe3JnN/3C6qur/VWipfRFqKY1MA3Dzw5diXMdZV3\r\nfzjBkOKHmbMsrXqtUygKFXRKYvk1GBNM+KyqIzNQAkN82hAfs3bfGmwDajHi\r\nMZn8v5uK4QzO7JdOCE4YFPo0bqL9KjbEODmSOVsZhm9xJBQeL29MQiVZDL3S\r\nK4k+LlXoPhLRqhMEHdgQHaqNV4JncXSWjhVck/Nk7IEXaQlE8Y2jmnP0Z3wy\r\nSQMmnB3stswSCd4rOHSwVY9Lkol2Gjza2iE=\r\n=dasf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220820173639.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/fad76661f87ccb5854c28e0bbafb50f8/chakra-ui-popper-0.0.0-dev-20220820173639.tgz","_integrity":"sha512-N1BwFNFcdoeF8T+PGE0hbSe5JJIVo28PY7bEpYAZsg6dxOA0XRmNvyNhD6iTGHhe1yWTgysbckXqj5U0RQ3D9A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220820173639","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220820173639"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220820173639"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220820173639_1661017066416_0.7133820758222034","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820185458":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220820185458","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220820185458","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f6fdfed02bc09132658a4478bad1bb7e544ba762","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220820185458.tgz","fileCount":6,"integrity":"sha512-+9fcDDPkKH0FY8iXmmJfX3X4TuGOYFV2bH8kCyqktF6Fc0KMWkiNKLpihedq9eohpyH3XSoi4DEbuiSiGc3PVg==","signatures":[{"sig":"MEYCIQDUYRCBRPVyjcU2Wwwhg8ayPmVT7h/aGruhoSpQyJt0XgIhAJg8OVRkvVA0e8Q12+y7n28TNkGvJa7HPGDQhiD4LPR9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAS5IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/8Q//QtSRJMK6a3sPjOZHwYdhTZgHLHUEZMWAgKneOU7UT5/GcBCF\r\nhmZHWMSlFKWshF0snxMyWaCk7WtNHZU4xPoyhtNcUGhnsLVSjdd3/SOJ3sdi\r\n6Y2T6bfXRFH2XVWuIbwgCPyBBVIMUBozxAjlyvBYGree5I43IlQCMF9qsTrA\r\naR77cXaYoArUUqVG0ffUsy1DDPpBDC7BD0mD+F0pKajE7pWhyJklYF18RyvM\r\nWtJHoyzuhnMrIzpsP5wdkZ51BGGUiGZ3FXjmVMetgZ3kz1EPLiArqSZza4hd\r\nLRnj+l3tQWq6RtNJmV/6fd1AiDydlHoAhpxPBh7yGShGixPyYWMe91qgz3nQ\r\noc9QSzFdilVngPqp+2+xqITyHLslK0/IE8DF41KYuorff7bY6pN1ETm/qWec\r\noshinas8Hhy0RV4zP/Ukhg78HZ819zkqgwQx9NsHfWlTuHgYr2MXRiie77rG\r\nKt3I590OC7WxQSZB65dvnXdcFD4b+OLd1aDnM1WJC9Y2HJSCHT0MzwaIDFxE\r\n9nZS4YYtuFGoI0u0p/EkYPOozEHhYiBZDN1jYU5guuuxhYeyPutGqJhSrWum\r\nzC5hJpqh+DKsx4rMDyNzvo1aoiITOj1dWJAMDm8srwrJmREJlrL8J+Xfz4ra\r\n56d+I9K7CLnVGB5jtguTL3tFRhINU4poIeM=\r\n=aaDE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220820185458.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3ab995e05c416e7144d73f01432055ba/chakra-ui-popper-0.0.0-dev-20220820185458.tgz","_integrity":"sha512-+9fcDDPkKH0FY8iXmmJfX3X4TuGOYFV2bH8kCyqktF6Fc0KMWkiNKLpihedq9eohpyH3XSoi4DEbuiSiGc3PVg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220820185458","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220820185458"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220820185458"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220820185458_1661021768305_0.4320131198633379","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820193723":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220820193723","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220820193723","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f1479904150f52cade11571c7407fbf0a46b1022","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220820193723.tgz","fileCount":6,"integrity":"sha512-+7UVUfV5heI52qhKQI7MKUGLwCUvh5Y2FuIgWzrlxv2uiajtHjS5TL/V8ksCg1t/JKvpZYpd+e0DP3R9ZnpF2A==","signatures":[{"sig":"MEQCIG3CJMYuT0eAt4I+WVbgw1zpRp7dB8P2SyHVRUsGvJB4AiA3AZRK9J7o4JGvM4UxIcPYauA8yDstuJsz2h3wl4aFTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjATg7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlMBAAlnamOoBFpjBtF7uQzYHzTsnyQCF1ye7HyVWxy2YkMoys2M15\r\nuo4PV1/1gA2tB92xcd5xd/9e0PTbbVttTBsETbPF6+7uV8qy+/36S8ze5bYd\r\nvwXW0Aqo85kIrhCC26fmttlz2kgQyEHJZf5u1G2xXR6xARvExNYFVFfqVXsT\r\nX2unJAFq967WF28dI7EFxcU9eyhdar6K/guzwYFos+VMOLQSmFiZCQGNXAVm\r\nK6dJK+8L8yn0nqZoMyisEF5Sy1f45IfWjqh6/pGm0MqiKDtar7HTaQT/f2rE\r\ns7QCGHgkW5U/p3bdPkd2wxft0i/ONyJJp8t0DGnZWlNnW86NMi0kJxIk4Pw/\r\nYAm5bNwRMqrVwffX8DXF7FRYfA0USusNVlo1lOZAUkecSiK8rKreWLttrWpq\r\nTS70Ph1lMGfN9HCGaEtd/87ogFkhjIeEiFplGB0c5VDsOgQnTDCqtboxRl+2\r\nYjqwic1IUpvVRAmW4Rbntl5qaoiljLjfFaNakaprAvsY3EOjpRf6TNuRx7TE\r\nSPaHbY5CVNf47qXe/XkqG1RdgddSElXfRT5XYh+dIdRThnjCzJ/SICaSflen\r\nYVKCtCPBavoo7G6GNU2LcOoRQpUt5V2IQy3nsK7a0wleZuxUWVC9y9qt1cZf\r\nS6sMY3wc5pm+KKZwhZ656DZ+n/a5ALZhaXc=\r\n=jH5X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220820193723.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/194848852407533fabfcdef1544a9694/chakra-ui-popper-0.0.0-dev-20220820193723.tgz","_integrity":"sha512-+7UVUfV5heI52qhKQI7MKUGLwCUvh5Y2FuIgWzrlxv2uiajtHjS5TL/V8ksCg1t/JKvpZYpd+e0DP3R9ZnpF2A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220820193723","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220820193723"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220820193723"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220820193723_1661024315212_0.1449583226347051","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820195548":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220820195548","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220820195548","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0de2cb455d4058ded6f9f1575be2fd8239ab5638","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220820195548.tgz","fileCount":6,"integrity":"sha512-WBz9OkOzGx5BiPjeQZouxfOgnPMEQ2xB0T5Gx9QJxgiGNczHuT7RKATGDNkQO68rgXwCqn0MWrDgOEfGZvT3nw==","signatures":[{"sig":"MEUCIEMTKN0ABEZbp/s6JR6Xi0rocqubMML41lg/JCp8T7CQAiEAj93v/NWspDcvqd4NDCEUIZEXBlbUKQAI90g2WeisrSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjATyKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmov+g/+JDHQ1fmNwDYLaconOAWuYG8AHhY4Rs4vRn2iZPVEcBFiBsIG\r\nlMsdioJZqo8c0mZsQYbT9aCQGP1xxcXAyaZmrl/8hfYvvDwuICofz3Pee4vD\r\nzNmM/aZq1DzHU5pXI/CTNqzJ/n/aW502cNyJy46uIGuSQPIm9eITJ094eNI+\r\nhcYkLXkGGHZaTKc5To1nqXaw1G09sQYm6eDIv21k+EqJK2A71Lu2y/42vK9T\r\n0Io2WSDm6yglZDNV4srgGXK1jgEeUhyXNRw8KlP15H8ZEYN6AnhTTNtnq7KN\r\n7bVmCaiFhzhRbJxSp9oIgM30b82EU+wZ3EL0/oSrcYqq8bzC2XA/zIoZy68+\r\nKDXlBBC0By1/ctVxF91eVi8NyGG9XIoSyBqV3H7uIowLlhhVpMAMojJVs1Qc\r\nzU0/1SI8RSv0QP2Ta80KkcpKt06lhQ2xZAnljgISUwGKe4QiEeD6azQKMEcl\r\nHJejV9NDWrqGvaFpt86YKcuc7TsHijBCPt1U8kw7vLRqAzx701mOUyWxkSJM\r\ni0KCTeYR5PjGGRwRnqCm3GubUeS1h9U6Iwl5LevCaOLTMWpvTGI4/GPiFXGc\r\nMaMyn64pM+Uybvh4GnAF1L8kOcsPwz95jWX5ySWIGirw1XROe5aeR6IqMzD7\r\nzCYBhQNyBjWoJjAl1XjdH11hKE341s3tuWU=\r\n=tc8h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220820195548.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/507c44963c3b151869ca9f82b3e4bd7b/chakra-ui-popper-0.0.0-dev-20220820195548.tgz","_integrity":"sha512-WBz9OkOzGx5BiPjeQZouxfOgnPMEQ2xB0T5Gx9QJxgiGNczHuT7RKATGDNkQO68rgXwCqn0MWrDgOEfGZvT3nw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220820195548","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220820195548"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220820195548"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220820195548_1661025418624_0.9476388482142184","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822051456":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220822051456","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220822051456","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"754ac66f0e974f1ab3bb40208ecef2032a135db0","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220822051456.tgz","fileCount":6,"integrity":"sha512-GttpxOFAe36C3yvdv6yuLuRAGt/wZ3ihON1OQLq1gZ4bVVrTNHldTyygOuj66j9P+UwSgaKmvx2y/qIjOjNuVg==","signatures":[{"sig":"MEUCIQCw75n60UQQsBB2fuw/baHJumGVWTuJAgfUfnvz1rbK+AIgEGgsw+CQ87VGh2pTt06elbOK7tjnSY0lIEcNNjhRiH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAxEcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoefQ/9G/DMYRaRm04ZKc5Grxq8h5q9AkmKt2tBI2zHYFe0Bu/xK/Wb\r\nyUi9eLjwpyfG5YOVou/jRik0ZI3HvxIjebSduc1LztMHkNz18HBU0C1lXozy\r\n3YGbvpAGot8Cy2CaTmuJfu2h7TbvGDmWuiOZzvwY6Yjqk+1jZzlu2HCuKmyC\r\nyEZiT8AxwOy2o2dscemhCaJWs6fCQyKjGne63wF9BVIIOPozBWS4DVBspBmi\r\nGWM+zLRFFFdl5pbQGx1xUVUEmtkeUIE4FgRcM7d0hhVckz3bxWLC/KxGqTsA\r\nUWMN01ncOy8q98omhIwE9RT9XQthwhLWm6YFTs20wQlsSG/H6+aChJnQcM8o\r\nMjCPV3s1aVb6YonKobqVXzGvYta7cjxU8t4+BhzYdAsWPWnmY3L2+zXWpMRP\r\nCx0+U17UZjwop8os37CBHgU/J6cDASM8J91lptYvQzMYU8zYsDho1Y5jV18e\r\nU7QeyT0CRXIvdz7xM/WnSNkPP2Vc2kciTRuP+nNjAxOm5FF3JTcyhgTzudI4\r\nOvTiUSJDhNxo8JRfWOSSpWW1WAuAX78JoLkM3xnscdkvW7jeyb9tesAzRi4R\r\niTebiXFI0C5Ce3Ji4RHb9ziuj93afuM5CGn4TDzcEVSKC3Ff46sHpKLMVHU2\r\nwi39tLa0IktxEcCAsfKnKxLZM8/ScP1Juqs=\r\n=apn/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220822051456.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9aa62642e8ef3d5e2e11f901e8055cda/chakra-ui-popper-0.0.0-dev-20220822051456.tgz","_integrity":"sha512-GttpxOFAe36C3yvdv6yuLuRAGt/wZ3ihON1OQLq1gZ4bVVrTNHldTyygOuj66j9P+UwSgaKmvx2y/qIjOjNuVg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220822051456","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220822051456"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220822051456"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220822051456_1661145372640_0.31522453852985266","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822054045":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220822054045","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220822054045","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f27bf06f5f249da024c28cb30586e42ba95e92e7","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220822054045.tgz","fileCount":6,"integrity":"sha512-kQuOAV4Vl4x43ONA+cjmrEM+ndMCm7wV4AJtAGtcpw+2yJMkTtv0iGDPHUPrPY9/pK5d2WCQuz/oEfpv/f7kKA==","signatures":[{"sig":"MEYCIQC1y6+i5Lh7fUm727f9kgwoxrcPr/7AYZ0vqx0nAjDbtQIhAJnei3EzUjdemJundgqUYEDLnuA7u3u6UTdWBA2Nicow","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAxclACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIaA//cXJhfSMJq8dw3GE+G3M04OfNDsgzH/SwzIY5z/XvCReGNqzT\r\nuWiLxeDZr3RiEFU/AAYY07Ni3v73IqfxXP8ONkZgAbblPXm3kFb+RokEuD86\r\n+LF1whGx0e1wddh78oiDXJow1fY4mXBhrQQ5DPnM4I3DokjpSoMHkK/v8nzn\r\nXwmi7vvcQ8H6SuhaJvV4AWqyjc5Meec1moOTOLo3lUnecGPgGzfX8nRI6zep\r\nwHMVr4XBRWVm8iY2ksP4NHjykol3InXhCFDmj/1EE7nuvOkJKBw/8XovW+qB\r\nLsFT8vOOhSmSTaMpB+9gXzAzhHSzs9jwMudm9Mfn6k7Qg2mGzjzDE/UPbY0C\r\nohnxhr6rITxpoWPCurEh0HQj48kNvx0oxqXiynvvuVtPcAl0fqlHyrVSg4TW\r\nI3bvOwLxrkOgyNkxVxjibavh8p9vRY3Zy1j4NR4/fbYc6/cx1p0UxXvoWU8A\r\nG0X+znd2wW5+GG5Srto7fCu0dHm6eOb3Nmh+C080Ck/IcfBOsvC7bkj66OAj\r\n0XdrB0vx4af6Ln+OYpyFiAjOun3vJxJ7QCm6QJo3clBOzufveldI5w4wNVx/\r\nrUOrSxVohUD75IJp6IZaChMtYwik2WPS25yjDj24m5bJkMJefoOJyOXE2Z9m\r\nbmDLpMmy5nPfAGQdG9NUB7EeUfG27C4Y868=\r\n=GDWV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220822054045.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c62469ee747491431871781f88c033e9/chakra-ui-popper-0.0.0-dev-20220822054045.tgz","_integrity":"sha512-kQuOAV4Vl4x43ONA+cjmrEM+ndMCm7wV4AJtAGtcpw+2yJMkTtv0iGDPHUPrPY9/pK5d2WCQuz/oEfpv/f7kKA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220822054045","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220822054045"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220822054045"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220822054045_1661146917156_0.2101005807573173","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822055339":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220822055339","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220822055339","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1c5dbfae73a8807561ed5757cde93ab4cd1d2c5d","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220822055339.tgz","fileCount":6,"integrity":"sha512-HnyCTZcSqbV8w3easX7EYesKvyaYI3VqiAvR1Pk771Ny1EyKM7V/C8BHFcD9ZD2xQTYY37F/VLq1iMOqBG8U9Q==","signatures":[{"sig":"MEQCICjcOYk6JJndsVgL1vMd1xoM4giJFfOpmSiHVh9ZUlPNAiBmzBmtnHe0IMfc3iRHTs8k/sb0p4dphSEzqkHDpJv5qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAxo/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8mA//SdalpBQ2dv+OuJN0oT8AwPZWepvXTwWO5XIk3XRL3g3+EkVY\r\n6spo8UmlBk5d3pvqHY2T7cB/d3+gerXZm6UQ9pj1iE/6X9BiYAbsFGmM81Iv\r\nEn95fJRI8IgoN/hIm/dhP63fDXYzfuxG7gZWYcFhNmQwRHY2+CII858LjLXb\r\nPeYU4oAL5iqMaSTvcZ2jxj0J2cmtfT7INbtBlEovNj5A/cZ6SZMTio+cwmHf\r\nF3zXZFuSI6aOAa/zQHKko8fQ13ttQfiKk87Nj7tGQdQzFTmNTKGj9YxGdIn3\r\nTDqZoh746vQ1ToeYgA2Kngdw1ZPvIhhytLPvxXdJhp3h+H3HGJ99je2UPvTW\r\nC2Ibtx6zRw/7NDK/83A/koPKe8xyp1B8v7HMMuvPkz/TlX1ZmEbC7nMZqAde\r\n+1wmlLRYmmKkmTbpFXTSQnJ5GP+gKscvlpDaPAz+4RzKUYcVrAwlEVMZfX8e\r\nNCm/rbMbT/FjMLNcsBUDz/91hwfnaSay4qWKw15NkLBPiGtLaVHQjMfEvA/G\r\nFKgxHovX2mSmI3nUJkC/B/ptjjoJE1Z8/tqBRkwo/pSTob9ELqhw3shtWaPg\r\nijmf458mQQ1RYZaqSrew/YVD8uwI0Z9UWpUc+oNl97j1SQgbBchgzZUA4DpM\r\nKLmCiZQEjwPwyCEhZHuKxXxQOPhCkzydCko=\r\n=jsZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220822055339.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/663323fa90e5f496c99f7d76eb8ff04e/chakra-ui-popper-0.0.0-dev-20220822055339.tgz","_integrity":"sha512-HnyCTZcSqbV8w3easX7EYesKvyaYI3VqiAvR1Pk771Ny1EyKM7V/C8BHFcD9ZD2xQTYY37F/VLq1iMOqBG8U9Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220822055339","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220822055339"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220822055339"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220822055339_1661147711114_0.8349158703827997","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822103611":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220822103611","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220822103611","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"277af88a9a623ede90683e7544fc43ea98045327","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220822103611.tgz","fileCount":6,"integrity":"sha512-EwZbbHL6H9VmlJaUveb2Hw1COcTiCeBegs42mFQJh//OW9rAMA3v9BncXzRNITHxWwAOd/J0OutO7jDUVtr/kQ==","signatures":[{"sig":"MEYCIQD0R9E28JXuFXmxA9ng5tDzg84TLAM5jtg/yNlQdF7DrwIhAOw8wgSnMzeq8VTYjz5cgTtezsMy11x9vUH8TZzj6HTl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA1xvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmof5BAAlurEAD31MsAWTy9yAfmwSVot6cWfhkp6kNQXLMPRHMbtUapw\r\n8sIdj9ocuDgagEvCOLUHC2O3afeOsfqMMO8ytL/PSL6ClF9RvXR4fJaqJuWu\r\nL90birziPg12rTK9zKj7AJcR6FJciJy2e8Wdg46LXEnrQXcOspLjGLouLqhr\r\n+lL0xnxHVDk9nYw7XzyzENozEh8EOyJbgrzoLptEeo4yjv3VuaExzlGpoSet\r\nJlHy45hvROo16742tFvFtFbaXMs22O2Ad5hBAbHS6XEV+QL8Vl2qTyPo5Nju\r\nwod1L9rIDmlWj1JeNQE6WzZFGxBRoQU1Dun8JG8YoxHyGLTnrhFPn2wEkUPz\r\nClKbjsUfni6mcumFOrlkhTuK1hvK7B40zwyRfW5ZsSj0ocWnXFjjijZ3MX3Y\r\ngo/rkBUduU+55aM14spwiDyqHUCVjjWMxJuDCvkRkNX/YT1DrzCpRWVpgaoE\r\n76DUKGntJJHx3VtbdDhyXnU/7X7eyNO6U6IZt/8w0p1DMjnTQxx+cosY9WUj\r\ns5G4dOcwnFpfqHzRDAVjZv+uNotv9rx7xRTKKBjBhTKYrEldmjPjyF2Ti5Cn\r\ndnZ5g5JhKjMKvJ757n9c9HYFvo5Is6XG+qrYTCrehOS5jEYLHoDNKM5WQ87K\r\nGKmnsxe8dMnl1QMA/MqUMC9w/92NJ9CxHHc=\r\n=adEv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220822103611.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a5938a9088ea7ad25d6e567f3e69da7a/chakra-ui-popper-0.0.0-dev-20220822103611.tgz","_integrity":"sha512-EwZbbHL6H9VmlJaUveb2Hw1COcTiCeBegs42mFQJh//OW9rAMA3v9BncXzRNITHxWwAOd/J0OutO7jDUVtr/kQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220822103611","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220822103611"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220822103611"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220822103611_1661164654830_0.21439399747090482","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822184448":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220822184448","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220822184448","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9b44505db0edbbffeacf1895a223ddd1a7ad7cb1","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220822184448.tgz","fileCount":6,"integrity":"sha512-p7XDo9b9/cjrEXcTdMRVH3n63h6rhbaNskjw05QGGMaB2ls9ZCNlqhaKB+IK/nT5nZKeJk8q1CzDY2IixNGskg==","signatures":[{"sig":"MEQCIHLeWgXQUR7rKr8oCHoXj1oewhNlzWAfTwpYtoYvvLyoAiAujgRNvUShqK4dnaGR3NDQm7pgj8ZdIqbQ/NrWntbpqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA877ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN/hAAmos0EnPAtv/J+JKBH9VLEOX/pQrfG0LA+R0gpVneRjqCW5HQ\r\nhg7SExrCRIEKvqEtuc/CzdJOxqV+U4jNIFI1D7gfYpUHZH/UmJxxJH0LndO4\r\nVesvWP1HI0gEaYwJC13du9SdoMj0JcoOiBVqan3u7A8aZ9Rfn6T+6w839jot\r\nnqGtGfdgD80gak8qVrtjQfiLsVSVAhld5/kglFoaszVrx6OUOYFtbFFdo5wu\r\n7IywqZFAn3kussumz9sUNv4+ekO1OL7HZuF51/1ADey8BGSFFnl2gYpElOQa\r\nVv6GvvhHvU5mrKXVYvWqvbv/zL+z+9uBTf6QZfczf4z2H5TZzhF14hL6UopB\r\n2Jq9uzFWjyQBbZApB9I/fvu9GQ7nlqbxqTKPYJ5wgyiDhbm/bn2zNTOhlmhu\r\ncYBVjUHVtyXNosyemFzDqMIL7B0vjbdZsve/KOeHk2ihcosl4p7P9xpCbfdh\r\n00e3Hf3dwmMVXZ0UBDTU+6aTs0mhu1n/V0cXhCjdnvkMHVEUIDlsmDw7ezOJ\r\njmhc08mgQWr7Pt7XWF1ebCtDMq/8Zw1a/52y1Qmk6POLQA3ZGxcg+4AT0rUF\r\nEXORZbnGhnfDDhffnqnkUc9C9kgWWxOi9N4NOlU5Hc8LMieLyZ/Q52Y7rJvC\r\ngwcO3acI5Qtoa+hQTcsoJfWyVvvP5CEU/TU=\r\n=mtwZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220822184448.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/163b8a02a9e9ac2ab42056652dfe4037/chakra-ui-popper-0.0.0-dev-20220822184448.tgz","_integrity":"sha512-p7XDo9b9/cjrEXcTdMRVH3n63h6rhbaNskjw05QGGMaB2ls9ZCNlqhaKB+IK/nT5nZKeJk8q1CzDY2IixNGskg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220822184448","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220822184448"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220822184448"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220822184448_1661193979434_0.16636961200052136","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823150801":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220823150801","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220823150801","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bb2932545158fe01cf35da6a22f4c9f9d8d434bc","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220823150801.tgz","fileCount":6,"integrity":"sha512-noTTHHjZjJZCLV846oqx3msAw88Ik/ki0yPjJi4HqXXZerJVo+/fbsBYx0Ad9wXoeAvao/cYbCUWtuaD/ll35w==","signatures":[{"sig":"MEYCIQDKmdETxHc+3QoZ2aF9dxF+B+pOPIW5JrQvANh2ymnkCAIhANooQpsOweRLyOzTQ8BdFcVSGq+Qm78bcu9Ei5z9XEAw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBO2cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGCw/9GGuwILlpqSEiRNSNmEmEJetQaHNHNZtLPf9OzGcUKxPrxdbC\r\nq34abp1mhMrbVNSlGM54Tsk5TRhvy+35MTheQABg5t9egGBkGvIFRLxES+Ve\r\nvBftsItNcnWvhicmWsjOg6HXqBk5wvNnPhLmhHbwe94UmCnMyvuEb5mdN8Xj\r\n+FRUKZB6NycSXMzGc7+JBmI2+oCf4NNEiwrZca08TyFPK8/T/FesGD7UdrQR\r\nQqvugsPCIaxfn1qekAqn54108OL19aZExf5m3Fxu3vlMdu1ojEa9uJl35Ru3\r\nhH7Xw5iUw3lE3TqKB3pCu04zfpTk2V55ouOy/xz34KFn5eFt9R/mCsGNKNwg\r\nTn43UO3Lf5w0swViEfys8peeY28+lQSyA6s8kbC6Y9looXWgZZ/vXTP/BSE2\r\ne9xWRnbBceGt4ZbQl7Nvz5a2Ju1xwx13uNRoyhYNv3rhNyIpCZO1cS69K0qV\r\nT+J3sTIMuFWz7fGTlw2Suv0kRTRI9hVXS2hZ2Kb/6FmZ7agAyIB06gV6iLQK\r\n+ym1D1vlHYQYns1YmyN2nhIIrM60Z0al/RCg1Zpoc63sYZXTqt6x1F40OFr+\r\ntFNdzhmwST0Lxw/zbqBrzkZ5vdt6f/z+qJ5+GCCal3SOPFJrmaTENIDy+9yp\r\ncVQMTCbiywdBwMlkw9dMFxp1vbbZoYhx7Po=\r\n=8ezp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220823150801.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b9c161d95857a998dbd5aaf2d650b087/chakra-ui-popper-0.0.0-dev-20220823150801.tgz","_integrity":"sha512-noTTHHjZjJZCLV846oqx3msAw88Ik/ki0yPjJi4HqXXZerJVo+/fbsBYx0Ad9wXoeAvao/cYbCUWtuaD/ll35w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220823150801","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220823150801"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220823150801"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220823150801_1661267356552_0.8272058849664223","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823165602":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220823165602","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220823165602","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e3b8c600a37ab2ae3abd3b5739cb79355ca6e549","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220823165602.tgz","fileCount":6,"integrity":"sha512-S3YpvMMMgDYom+Yn8ZpGHAoyqoeIsIOzSQWQ1KZe3EqZgbtsk4aZ2tLkbC79/cjJHCkClEudg1p87ZDIqzcs2A==","signatures":[{"sig":"MEUCIE7u52cgd3inlrT9xm2MZ0Ax2K1M9KP0JWPj1rcHxg7oAiEAuNLhPj3rnHDgD7kdpc0m3lSEWET5n3XoeFRuEXFmZLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBQbrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcSw//YoTXFgIDPvv4Q6y71oY4+BXgoomAk1eBwGb93DI4RkrN2jg/\r\nN750AM/ygafL0sHwPiTqNv1pGznuvaoqOgBf9GKa5gSZkovTx0C/e+MSQ0Mb\r\nIRvxxRyoMC4AwoD1Wn7JNidfi1OLQllreOtTpBs8VUmw30wHpbSEHZZvP8vU\r\nw05jNnh+UuqZWhEUTFXMBhmkaVDDXQQUJT+l3P/kOvN9rs7PMaSnhat3OHJN\r\nYF3DcqpwNA6puCwIscWNrmF0EB4QXeQEcp92qaYrz7waX/j4aETC5tXPpW+o\r\nDVl/g0m9uOF/24sY0mB2sXkl0LI8Ox8kDf1w22EfWw/i0MHitdcUAtbIzKqG\r\nDV/l8ZwAXUfV7qS3j+6nQg7EHtQzGz3ZpdHZ4ilNJl1dks/00UZefjTf+/bT\r\n5r+x+xBp4VPvfR+BQgUoW5rirSXWegj+br6yXx8OyU4uXwBgAmdes876OlSn\r\nHIATa6hFgqgHI3GqxZea/RncrFxsphQyYHt1Gkm2D9vYko36cSmXyAinJM9j\r\n8cWzHM+gSsxpn8l3vaWkzjYikUayGQyfih0i/KTSGwRP9va2dp7cOldC5WOT\r\nk5vvxb3teheIXAaiOVMgXZ5gZrjr8XmTxLhGK58uqvZFXzIkAuinhT5/nzhW\r\n8vhjaWvi1lALZCKcnleXPtQeYPQMJ6pDasc=\r\n=lwWS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220823165602.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/40d46d5b09c343f024a1b419057ed0b9/chakra-ui-popper-0.0.0-dev-20220823165602.tgz","_integrity":"sha512-S3YpvMMMgDYom+Yn8ZpGHAoyqoeIsIOzSQWQ1KZe3EqZgbtsk4aZ2tLkbC79/cjJHCkClEudg1p87ZDIqzcs2A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220823165602","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220823165602"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220823165602"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220823165602_1661273835853_0.5288830217937992","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823192757":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220823192757","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220823192757","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c36118fb49a5aed6f77bf6b1bbb4c2aa86e4906e","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220823192757.tgz","fileCount":6,"integrity":"sha512-PnRvFxOQ9TsriwXVFwZeuQZi6iPh9f5fMOMxOzWpOTUsDK45b34wH8jiZ+USftMXG6Q2emDDbf4FIa5y+o56sA==","signatures":[{"sig":"MEYCIQD8DftuXa/1fzcIfYR87b12fu/YWlC97BYZClnIAT7FbQIhAOdT45Vlyq7g7nC1WMBAuUODpKmLMreV0e6iw5qS2vwT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBSqaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzQw//d0PBeDxHAKLtRUbpxsa+L0fsN6nEb//Zd3RJr0Z3sIM6heJj\r\ntiBnldYmvSSyBLvV38F8fvBXUT2RjOUhRocmXEMZvAlQANGRderP1IBDHs7N\r\n0ymq7tVbYP/G4myFQ4QrzaRXJLYwJLK1szYNEe63VqilVtQjb4tx8BRHe7PR\r\nD72iEKH/pD2lCPcxe5Ll5Go2+tMlk+lUO72eQVGP9+zxiFTSQvzaxUp0cNf9\r\nuPmAt4YOHO3hXiZz+jFugkALbGkpEpDRvi7tCRliTPlk4u9NfGfVPjq5cYSj\r\nlv9CvnGN2Z01+lNopdTunoAy7DCLyJx5kihS9AltHG5sOCrkjfDmdeGQDMLd\r\nREh8tqbNe8h9lTCjAjBOHwUGNi29+StFpfD7PVpbZ9f0udVlKsomKXYooX7J\r\n4dIE0YQ2w0U55K3HyBVDNs2Y2LG+AQmS0c0fJRgUGC3j3P6STcl6iChFS5Xt\r\n3N5E23GomqACS39cGyXZUNRMiT6dmgN7f7EoPLyQtZd/ksHpaVwgDX2pQGEK\r\n/sd3jX7kEZ7u43f39S/1N8OE1+ApkEQ+AbHr6svnfvryrzvNoJ6C+58vtHBY\r\nk/BDhFBLyzmH74yAlWq+a96hZOUPahazwYqHGjNmx1c6DcvXtFm0hxJY9xrS\r\nq38xwVIeyKICqYykJsq7M2Uc21JOL9Y1Kq0=\r\n=mVHu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220823192757.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2bfce9a8704900b1415f2660bc5623b7/chakra-ui-popper-0.0.0-dev-20220823192757.tgz","_integrity":"sha512-PnRvFxOQ9TsriwXVFwZeuQZi6iPh9f5fMOMxOzWpOTUsDK45b34wH8jiZ+USftMXG6Q2emDDbf4FIa5y+o56sA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220823192757","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220823192757"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220823192757"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220823192757_1661282970053_0.059536816338148446","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823195046":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220823195046","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220823195046","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a0d60bbe24ff80d20711e3351d037671842a03ee","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220823195046.tgz","fileCount":6,"integrity":"sha512-2GoeSf8htM7/aF/9oMDFMpr1B33AYF3gHvZPiyCRkY/Tbb/lgQowyr9MxMtBdp6WRfAEqxuwSrQBf9WemYmvAQ==","signatures":[{"sig":"MEUCIEcZ4lBecxXqUStei1F2Nt6CJ4AAt1u+SBMqm0Y88QooAiEAvdBEy6Rvij84iU+K6eBmB2vxYGlieHb2GLIAoFOWJ/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBTADACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYwhAAhd5/XykFxWE+KTAUJcWReqnKg5S89JhpVHPVH1+ar+lRcVIE\r\nxOrxdd71eke92gPmB2CN6Wf4kK9ompx+DHrCqgsX3kCwnICr28BAQKkWR3hi\r\nkCyviAKybOFrufNQmq5GNuqKgwbRvX4zzpDUNcL1f54fxfbKvbsgU/ydX5Be\r\nYV3RC5Z70VzI78Xx4u9Vxp803XCC/ZoLuj8BPTp9drZZ0oQNO08hftAsU8/s\r\njFRx9ZCIdKBwl7r5WjdvAjjmr9jTlxrQkHIewsGUzA637qtT1u1V4Oe5FDsn\r\nlrF9q+4iAY6mGggktO6qO5B76LDO0WcUsnw5uH4KI33DtXUHptmca0zFw6tk\r\nJ7RGY/ywea0Q0S38d5IgneLqBOVFXXX2Hsbj2TFl2mA1W/3khCMjdkR++Jit\r\nH2cxF7VWIksxZeBuCniYgWjMbT3qBR/0rqOoZa/zQ11dDPt+nr6R9IkOoYUL\r\nAwJXsii0kPQo/uDETspxTrKdrJlEPblMV+wDUhuV4NXAja8c9wbp7oNHb/df\r\ngSxhIQNKuFsa4NwZbq0N9tF4gv7TJOAI5kNndnAm2CRU2CQ/O86599kJRfqf\r\nvrBgxRINyCUdyHOcpyVdTAPr0lVZDfw6mQ7r8gM3Mjm5IZXWV1Kqf5TjnlOB\r\nVtCKEXY1Ue2sk/0hsiywbEc8phUxryRx5ts=\r\n=K40V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220823195046.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/61ef9aaf7384f3d77887316db906d1a1/chakra-ui-popper-0.0.0-dev-20220823195046.tgz","_integrity":"sha512-2GoeSf8htM7/aF/9oMDFMpr1B33AYF3gHvZPiyCRkY/Tbb/lgQowyr9MxMtBdp6WRfAEqxuwSrQBf9WemYmvAQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220823195046","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220823195046"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220823195046"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220823195046_1661284355394_0.6698993220878044","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824074122":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220824074122","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220824074122","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b3f1f3230f231711c7e14b117fa99f381ffd87ce","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220824074122.tgz","fileCount":6,"integrity":"sha512-KRPZmFvrhvX5KTAg6kSeD1flv8CLGBvExEKXgUx0yXdu3MC3NS0lXGh/Ano4buUM4c6wL7ObSx/fs55/1A8Q8w==","signatures":[{"sig":"MEUCIDfhpnLi+riMJr6ANaskRk980crncxZZbEsk4VQfTnroAiEAk30IgamvWQyW5lE9NJ68eQqZwDFCQxspXBw8U2AOZyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBdZrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpa3BAAnPeRVSRY1+wVsS08CNBWZltbUpW1Vna8beoG5B7vhAleRU3G\r\niLO64SWQDYeHI9gldtSZY/fSCW6mvFIxPL5SBByNgl9k9RQrhuzt5Z6sLGSj\r\n4yuZV5Otz0jLaB8HNd5Z+Z8qRNOMeV+SArtufl8Na3Hn3O3LaoaiSzmx1h8y\r\nnve++yO9T57FQDfzo3iNdTRYF/scWXKoOTDzfNi8LpdpIEaIa/C1qz8vJ5iF\r\ni5FPbGKKIR91PlwXMPnyHLkN6/vktbdVYF2JOyLhdpC6IjdB+k79CzPyJxyU\r\nFLBanXu7m+aDToT17lc0C+jiXZgyle+I2uLhU5El7FurRt9LxUgLYi6IYMeO\r\nQAkMYeyTdmVwg0Ml0TdEbc3PoQGMUtRuZ/UlmQ890Di26RAPKzp5XJvA12Qr\r\nrh3ltYuy6wl6fRUYedeZ77k2kekvAeEQze6lmAhqMzLKnXnFjISPnd1sprCV\r\nkUVUWE5sOEaUCiUp42C/Ultl2GrD/7FebnF9IowPpcF8UNfn4Ras9EVfvMbe\r\nveczMBsr9My/i1ir0Vo6ugJBt9Zf9ETPMF2zQztJ4KSMLP3g1Z6pp8n8SfLM\r\nmYpZkNTn+F8szevcXJH/VTstzWk8EG8a4/dLjPYcGdVayIBDk5qfClO/INrI\r\nsQUGwtV4r/bvProuKy9Uno2SUriPo8oFqxg=\r\n=P35e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220824074122.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b932d4b001d5ad8e7cf2f803d364078b/chakra-ui-popper-0.0.0-dev-20220824074122.tgz","_integrity":"sha512-KRPZmFvrhvX5KTAg6kSeD1flv8CLGBvExEKXgUx0yXdu3MC3NS0lXGh/Ano4buUM4c6wL7ObSx/fs55/1A8Q8w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220824074122","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220824074122"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220824074122"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220824074122_1661326955300_0.2434650883857572","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824080240":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220824080240","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220824080240","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d3748095c2985ea34a2d1682608d92749a84f8ce","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220824080240.tgz","fileCount":6,"integrity":"sha512-VQuCN7vhRao9o2Z6eXugdA2VZWLGdhvOZ6mVb0Vrmp+dzxiAOTjHP22/c7bsMsZwyfw97psysc0ukhbVfGMLYQ==","signatures":[{"sig":"MEUCIBjQElvbCs/YQ+IonoscatBi9cMl+pwaihCXnZEvzjzIAiEAuBqeWBl/RyvAb1B2YdfYsNhIWC+XX9NdBpDj9UalPEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBdtpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhjA/9Hg3kY6f7n6Ng0sJ16fSRZAmdLm/1psBbkC0ewp6r7zEtzkqo\r\nceR7lxJACirChv0zvAbdS26zmVD292opKoUicN0M4WfWGfgw8YoSh2FBSkYm\r\nv8TJp+DlIF7Uxd9x4mVqYByAZ3mKMrTJCmIlkehtACilivoglpr6RiLzDdXG\r\nLEPGRnNEmtu7R8S9jjfVeJ9igIt2kif8PUZUJQXigwp7Tz1QMjtKQ3NMzU+A\r\nXsPCSbUHn8SpPauavmHLapi/CQiuVvtnJh8YhcYxWxnqZUQ7jEwS8X6qPbVq\r\n7bFwzQAHieZPXUuF5wh8eZA9xvlDM333UIHyrsFQH7rgipDYOyrllDn7XbmY\r\nTZdAxjDAAFnL/beco66uNK9e1nmUklrGqaLciG16RcZdHZrunzo2gfOSMuGL\r\n2WV62MaTIAkK8G7kFevkuFtV5+xqLJ+x3gqkAjA2L8esG7z2LMkiLGY2ljZ2\r\nt6kZITBAJcrULEyXmJ4n2VdJJWGXfH3KsNMtzcykTbbTiobqqf+9QqXUV9Z2\r\nkK1xk22EinThtwHKd9khFBgRJ/pJ855dTdiW2fHHoOq7erWDyzt4huaB13BK\r\nvCfa9W3F5nT7fdyDEtNvXMPDd/TpM5TIVKIR/KEni6M4JlUzzYKmbT6eHJxV\r\nhoGXg68UOMZYQVx+AaP5ZDaYJiFu/rOwn/E=\r\n=xhbL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220824080240.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/04f9c01a7991effab570dc820d9ae514/chakra-ui-popper-0.0.0-dev-20220824080240.tgz","_integrity":"sha512-VQuCN7vhRao9o2Z6eXugdA2VZWLGdhvOZ6mVb0Vrmp+dzxiAOTjHP22/c7bsMsZwyfw97psysc0ukhbVfGMLYQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220824080240","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220824080240"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220824080240"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220824080240_1661328233512_0.3952079428386055","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824082222":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220824082222","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220824082222","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e5fad8916856490df3651f441f25cb33340eb449","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220824082222.tgz","fileCount":6,"integrity":"sha512-pvg2EXyZXzyekQpPBZrHMKqpzPAvkqHpqekWEqiYYKkJPR4eSKck/orv34DJaTNT+LYJMj+OUqxgyOH7rQ84TA==","signatures":[{"sig":"MEUCIQCOw6VHSE0WdjjYHk/GJ0krwIZpErDUdPQ8enP8KKekQQIgLPd5EqZwXwrsGX3ghLOyf5nQRLvkT2RIyQmd0GKxYXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBeAhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrkew/+PI0d6O2jOq8/3YjZ+twe5SsAw325uIua9Nconf5h3e28Aado\r\nzMzZxatPInXplUXtVWnj9DcmmAfqOmYD/HjOdyVWkPiG/OS6JbWu9zVVaGLX\r\n2+fGqhrOd1dDWDZ9vTkdCHMPCfPdLXzjklUjZA5gxy7desTo+kmnJlPddBPZ\r\nufjVCaiLYsgORvxT3faQRTe2any2t/aSCbBEQtRm8Tif8NppEZt4eRbZkxO8\r\nGFBCNwZQaaJ8dQ2QtG/DaIN+EGdrvv5B3pzzEp0gpm4UoOSMCLIMTzIY/Hed\r\nJC6Ps1vbmHjQ1xA7ISB3gAL2CZ+0chnJQG/xm4HSJSymf3jD0l1wu+Q9xa8C\r\nf7/AXhpJpTiTXhDRdesCUmjP8Az6CzXqmFM0fPDwRmjzIk8LosuLR6IQH4Be\r\nVe38HRrXWIHO+2CbxEG7KyG5VulUa6svIDwDYgAA47PO7NYQF2aztZAlQItk\r\nmom9WkIQzLxvNN4X0vS5Q3drSwL5/MSTKfeL6Ny7P1T43aVTS9ULI+I85rT6\r\nZG+KhuDzKQ5+dFntU1tm1GvX/dLC/9tQW+1poFN/pbMBtieAq6hUtqMnrzI6\r\n2eB7MPEiOfBRCrkQ7hBjrDJk5AWM/Nia2wxR+X/s3v9wVSSPdrkGesEgRZP8\r\n9vNgIPxSzriLnjJZtixJjirkipIk/rQ0HHA=\r\n=hFaA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220824082222.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7afa00f8b952b796d3d715d9722c603b/chakra-ui-popper-0.0.0-dev-20220824082222.tgz","_integrity":"sha512-pvg2EXyZXzyekQpPBZrHMKqpzPAvkqHpqekWEqiYYKkJPR4eSKck/orv34DJaTNT+LYJMj+OUqxgyOH7rQ84TA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20220824082222","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220824082222"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220824082222"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220824082222_1661329441263_0.4065260712563199","host":"s3://npm-registry-packages"}},"3.0.7":{"name":"@chakra-ui/popper","version":"3.0.7","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.7","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"af3428bf5d64ad9372210a70181f69a9d79eefb2","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.7.tgz","fileCount":6,"integrity":"sha512-xLYhuNsk1gOjymtek1ZdZlG21hmg2a7Iu2KsD9Hi7+aUxc2K5/XxX+/vyjjz8u4s0gmj83pTqnauQRynb/TCXA==","signatures":[{"sig":"MEYCIQCgVlO28TTZmO178TKzPz8p2aoQm+nZXhUEYgIIYT/chQIhAI3h4WRT46PWO6UKmgMILHlb1obPPvStvJXB+LHZh40T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBeWKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJmg//UpbnCJTEXJ3BYdN81BWq5kTSP16vvp4QU2VRbaGyDDsokOA4\r\nf72c6QagqOGG9Fke/Akju0fXdcGNRAM4akYpy7PhSi9aDwU1qu/4BhqBCxYb\r\n3j72UtfVHpMVRITHiSDgKskFfAlKxgJPO3qTBe7egtQTaqU1rXznm+bomhUc\r\n/O6qYE5/cU76dIwoNeFoOL0ET43s6DP7rG9r5mdRq/cRtSyBC7Zfu9Smgeoj\r\nkzRH1xIqEUWwgQPu2h7XlnZ61C5orCt7qL3H8UqaQZtWbg5kiNDQ3yzMZEXJ\r\nqcK0DsCxDVXRC0xkx/gW9Rv5RKztUnLcFQMTIPBQy/3zo0TmeFrOYdTdzANc\r\nPnxr2AJy1Z4yQwSwmillUuKHNlfDq+NoueVRHCt2ko6qAm37jeGH2dNf0kHC\r\nLQgD+AxiWVkVJjtH9SlOm3qxkrGV+bj/x2PLv0N/tp1XxjN17ff6k4+Ta9go\r\nwHw5f+cfZHbh4EuRDUYjv1AVw7XSmcgvnjgU3tq8bjJp672WWyZLhrc6EYCZ\r\npVa+uNwRq/JxxAYce9gEBMU6dOKyPypteRMzX3ceDNXeKszPs0MRdY9JrdZt\r\n82sSoy44Oag9GSwq0GG2bgyAVdYRIj01yti42bI7TCX8OhPNNiZ6CWABICsm\r\nx+NE1kwwryUotklOUJj5BsDXnZvLvFnQtEg=\r\n=3NHa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-3.0.7.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/89da083da3de825312f2545828d30763/chakra-ui-popper-3.0.7.tgz","_integrity":"sha512-xLYhuNsk1gOjymtek1ZdZlG21hmg2a7Iu2KsD9Hi7+aUxc2K5/XxX+/vyjjz8u4s0gmj83pTqnauQRynb/TCXA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/popper"},"_npmVersion":"8.11.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.3","@chakra-ui/react-use-merge-refs":"2.0.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.0.9"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.7_1661330826240_0.557716766072331","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220920121057":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220920121057","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220920121057","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e5753a73ad57bc48b6567b8f4c6ed364ba9679d8","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220920121057.tgz","fileCount":6,"integrity":"sha512-ZAThtwrs93EW9wrozMMkEMg0sIxnl6BCI0y49O53nhAHOHTwtLCWKOuiUdpvGbjl2ckX+9ANoKJGydUWwQIvTg==","signatures":[{"sig":"MEQCIAMF54oezR1ocLoqsehsynPYQMQD6XpEeDr6BDK/sbmcAiBCsb0IcKZeJSfz7SM/zKVDUwUX631T8kfRldMc5O4Rjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKa4OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3tw//ViWRR1apV+XJUPHLGK4nv0N1s7WpnMkH2RYE/NlFi293N7kQ\r\npHAEe1MvTOvMglE8y6xKkU0We7lpI/JbwYfOiGWRwxIbwAFg3O0ekmEJTqF/\r\nhahTuEan8yvhQRKFOVhy4eMK/35QKeoPJK3CuaKAKkiBeZezOpninj5XNTuP\r\nwrrMk9Ml1v3qVYOlsTOI+w8/LkqfijTZZCCwjBGshBAoucl8QrBNbYT13/4U\r\n2k5i2HoX2qgpjt0/yDzWrror1kMxgIAq1+kLFTWefJJqMgzjjsp6IsTma78n\r\nWNDIbb5pVCY8DMCv92oY0UbJPdOJW0U70O0WUQhhDaXWrjS5SHfbsEbowMqr\r\nFWuprtP8Wow99qALUFVqH5SLUEgn2TXBpIT4FVpzAGneLnc2gDbGXD2BQWbw\r\nMqkDdudRX5klpGSw3dX8kYBADn16145+3aGG5gJ7sClSKGUnMxzivXJwlH0l\r\nBBvorSXJhYYdvn857fu4nl4U4eLs3yuPWUDAcKA/2wH23GpG8lu83k+NJlsC\r\nrvpIl/PyB3Ybgy/MWarHgE9Cn4nKTeAcizKgsfJ0b9BUyp8cK7ZH0GCP4rmb\r\nvkme73muhCCqIjXDwpc09bynC+2ZvB2najqEtmzRCdSLMZim8phyEEnmZznp\r\nfNDsao07QRHLX6+ZMkdCu9dBKmEmmW3qw1s=\r\n=iZQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220920121057.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5a687ec0259e7f1c2eab7d61caed17f4/chakra-ui-popper-0.0.0-dev-20220920121057.tgz","_integrity":"sha512-ZAThtwrs93EW9wrozMMkEMg0sIxnl6BCI0y49O53nhAHOHTwtLCWKOuiUdpvGbjl2ckX+9ANoKJGydUWwQIvTg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.15.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.3","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220920121057"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220920121057"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220920121057_1663675918617_0.7258668476415813","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220921093814":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220921093814","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220921093814","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"01b30afcf0349b5603f683a7d5f5292d92c00cec","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220921093814.tgz","fileCount":6,"integrity":"sha512-6P6EUt8zLV8kAsioDjgpkhw+p4ZEa/SrnlWMsg2skHVSD8lOJ5BcRQprDFjskXXbf1rTLHLAi7c4RNTn9YRBfQ==","signatures":[{"sig":"MEUCIH2Re2J3OVbLlNQJ4xWjGkDrPE5FdYQqZzYMW0XdRkP+AiEA1aXDy+DV1sWZg57ikeT8dS7eZZQrwWVi4M3+LcoZLdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKtvfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTLQ//YDZP3XzCf1vx83FCw0KUlzc+4xDR9b6/tC6Gwx1BDwhNuO1W\r\nnyrmKB1guYxkJzShk9BE7KNjWaaMu3+xNZqB0uidezm5fb9Ad7Y/wC9FLL3d\r\nkv56J1PPEZ39vBQ7pkOU4Peq2AaxQeZ3LzLd/lEH4A5T+yPyWX0MVuKLWGPH\r\neNcSaLD7vVLH3MLma9p4uxWt7ByLz+Vv3qHgDLI9XEK9mtJpLzHgVnAOvLla\r\nXEFFB4O6/AW2weeLz3LWlNG5/KCC5YBvmvvNElNVwEHey05p3rAx9NSdGyOy\r\nE42ukpLwmoOeMpJW85e/nkjjJ9hvAv2haGqMiD7lbHvok+WcXHRnUUaYLcMe\r\nuGLjSDmF/D8ProFTcTWGI7hOadSkHHrX3K75S4xNvvz4WKZaVfLr1/nHH7qs\r\nxLnki5azlRFMbNkaF+jDE1a/9LJ81yzDPYcsmE0HeZwYcdH7MVXr4C+dk9IV\r\nrVAdRXRQarsIR1WYXDECVWilughSmIvJmYmdBQwJy0BPwJwejqCf3/Mgf3WU\r\nZF+viN0f+wHzn+ikDw+ETZ7/31tLm1zZreVbfbZr2MohB95giPEbKWgbVW9U\r\n7rf/dH/a+5BVP0Ug0kGqhNk0mS2JGfIeqZXosoGl+nIepO030WTGjifCSnCT\r\nttPw6C3VbDlM1+3CJUPsdpOfqKpDofeVlKo=\r\n=3pvX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220921093814.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4c6aa3d30904479213abb6f6c70cb760/chakra-ui-popper-0.0.0-dev-20220921093814.tgz","_integrity":"sha512-6P6EUt8zLV8kAsioDjgpkhw+p4ZEa/SrnlWMsg2skHVSD8lOJ5BcRQprDFjskXXbf1rTLHLAi7c4RNTn9YRBfQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.15.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.3","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220921093814"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220921093814"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220921093814_1663753183079_0.5239413282609935","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220922114557":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220922114557","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220922114557","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"11bb14e440113870bf673d35d9c7c7e2a607d924","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220922114557.tgz","fileCount":6,"integrity":"sha512-RKnuwvkenNOn5OUcfkMTgGH3anlc71u6PPxJn08W2SMYC3XhxK+HqJhIUm24NfVc9i0xZjPlQCfT0vp0sjnBDA==","signatures":[{"sig":"MEUCIE7JneWQH2NfJztNJnfO1SnbnJNUPav7iVDDmvZ7Gx+6AiEAo1UVxRijjjjuxrQkoHePuc8/Efcjos303nOsyEZmxdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLEs1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpiiw/9FMXsV2b9P6ZjFeZoVRSyQ61ec8eKiS9U8i4/FiVNvPZ0jzFz\r\nP44/KfvBBTUZGkD4DgY59/Qn8sBUOk8eSlPvcGKJAV3AhjueS7ONe0Efl1he\r\n46hqsUG/jfHPoqYBPRF0+c5Gexzp+L8ipWAYm8nGfkAtvxXqjd+zEJrAvqPP\r\n1lsaf243tp2l9ZtS1Ry8vQ6lhn2/I4W071G207uHH0GsxETJzOXHbDANbgqV\r\nAN1op9FoFtonr1/i0KGrdr7uXrj5Ai+GKZwe5tijwK7e/hMezjEmGdB1FOiC\r\n4KsJ52pa2mYouH0PCPonLoeUqX8sblYVgtiNs4foIsBdi2doxKy4Fk6E5i3E\r\nLCYUXA1V7f3/xDGsyWLqalmUhkbD72/qkyeD3U1EBPBwnoMe4IVjMYwIxduM\r\nJXVdTSQOBdNu26ycfTkNQKBupVUW99kehAU+dohoapwMIhMrfi65wFIiSohu\r\noVajiW9H9IvVY8Lxuz4RSo3beaNU2g+6MOEEW+EIeek5L8gcWVyG82GD1vms\r\nNOmmZf4+0wz4NdQ/NKPAaIm0SmMwVDAabziJa7TNMkVei/mABjkFaXvaR7Ci\r\n5fnANGZ5LdoFxSrKUyTHl8oHOpJvbTa3lf9y4BbmpW8ehBiGePUnI4hmfyDC\r\nvrjj9qf4dRnCijbPqF698EgCC/mf0t9V1M8=\r\n=jik/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220922114557.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/577eb17707bb568ae28463434ca2bd84/chakra-ui-popper-0.0.0-dev-20220922114557.tgz","_integrity":"sha512-RKnuwvkenNOn5OUcfkMTgGH3anlc71u6PPxJn08W2SMYC3XhxK+HqJhIUm24NfVc9i0xZjPlQCfT0vp0sjnBDA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.15.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.3","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220922114557"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220922114557"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220922114557_1663847221584_0.9887767472943223","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220922115811":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220922115811","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220922115811","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"926e496bd076eb3e7c40391d1ca02c6a68bf470f","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220922115811.tgz","fileCount":6,"integrity":"sha512-76mGWjDoH98EnlLg0LEtOITHd5Gl0p/6pZh1P78VXPqSroZ7pXO1yWopwuj4MSmhQGwEImDvNTGWIohTfK01/Q==","signatures":[{"sig":"MEYCIQDse6c3ZDO5Th/PffyZlDP+f4AjVLfjTM/GV73tbEMKcAIhALa36AaA5hrIR1IV61ltgRPdxLWHfmtLRfNCot0vULIH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLE4gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/zA//eFT3sZG6MwFKpcPfGV5g1V40Rte8lKDCJVvAdvETT9x9mpR2\r\nFV0bot3v1Aj0j/ghyyzTmhjFrzi2V3G6Lt6/SkpT0NZzeqLvLJD0veK5oouL\r\nqcdbpF37klT/QN9YaFyQR4vGwFZvN4ReZjHJRfIaz6pnhIE8MhyDWBXpvzJ9\r\nFeHiO+Jquu1kzuAXiAuVIA/ysE0ixEZBfNjbJQbufN3NrPY9M3jYVXZwpN6O\r\niduklU05Vu20ILjMMXodvddiiAsxN213NH6opA2fUvbgS/SsScuL12YS7rJO\r\nG/Tx4hT7Ht7Qaha7JytJ/sBlFFXrBgJ2DbYm0omvLya0rlK65sqsGyMYKLuq\r\nPxIdbcX5Cg3nCjVXcY469SaoxwZul1Lt7CfMpxL2JlBCf3SP6auJNtZRfnUF\r\nSWcfJskynnkzZfoexbmJpeleFePgEyE8iZDUIOjKUX6q908rSx8IkzlPjCt8\r\nmKRVrGSHvwj3nm7w0xzkz8eRV/Vmd1JDq6/4r+WMAwoak66OLLglH3cagMFX\r\nBWd3jCQIjjME5amRHgk7xb88y1RUyk6F94sbGyktLQM9C0QaaXbSH/OsJa9b\r\nkJz+gYZmclN9Yk0BeQ0lpAw9S5pTBSeFsbTxZAyHbVNHKqY55iniRNtk2Wkw\r\nz1rOnMxPHA6PEkux2sLemwha9sd4mIHGgco=\r\n=h9r3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220922115811.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/98c981ec347c1a345d0902e51314f40e/chakra-ui-popper-0.0.0-dev-20220922115811.tgz","_integrity":"sha512-76mGWjDoH98EnlLg0LEtOITHd5Gl0p/6pZh1P78VXPqSroZ7pXO1yWopwuj4MSmhQGwEImDvNTGWIohTfK01/Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.15.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.3","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220922115811"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220922115811"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220922115811_1663847967981_0.7789519655057018","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220926164115":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220926164115","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220926164115","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"65d1a82b0a93476e2749b38bf4ad501b30038e82","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220926164115.tgz","fileCount":6,"integrity":"sha512-Bwvjh0B1z+AQIEXT/X37I+lSzuMWog2UttoF1Tz2oi7tAUOPZRv6vZLJNNF7j+2+H/Wqkd6FGyGjgQ79Oj3vgg==","signatures":[{"sig":"MEUCIQCazB9yC53g+7t5CnIbvN5HhwwoQiIfiGsvK54dYA31DAIgG9sjIowYzOfj52u/l0RSAEmqxjTK19jJAjtIbSitZzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMdZ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmri3Q//YWYLPYZRzsz2hb0DYi1m8pWTCDN7kaPt4mNJgXRlkQuY33Ky\r\nPunCHsTfdHMrQGUIWg4X6eOWKcqQ26IgYcEje/wcGILx4BgRG9TJOcZjHT/J\r\nhs1SKGcXFEB18AL8FomPHIXmB1XRd64ZSyHN2ZPiARIg3kN4lXbySXHogAJD\r\nvJL885mWFaHjhI3MCxG1GtJeeTFlLtmjqCSJEHNshQWG0C/Bv5ybE8NloKHd\r\nwb3BN/h62ruhamzzvlsqSuSDsi6bxpSgPx92bgpSkq9XUbdUYNYE0WeTcRON\r\nL94aBk2TrZq6AEaKtMlwlmPHkT0wILYrcFVEZvNrk+gslm3bEO9Iz4RbKEIy\r\nqj/G9mp0FaK0jF+cdlDbJSx3Qh45koqyryRCx3HG1B0rwxwPZZd/VbGAY4IJ\r\nYETc6qZgsUpNsXl7iPBzRI0Vd+AiHrACdMRoajEdZWCLExrtJkIRBt0TdSkF\r\nlAHez8IJOfI03Z4FoYCeodzHhBZzOnzX+lrl1dm4p34t+YK/qvNidMPmb7CP\r\nBf16uu/WOPkBj9lAf1one9Rl1zRFtUKSVVSlFTn8blvQljWmUcvf3Mj62pog\r\n0T+sQp0lSlj2tJtAqBbuJ0tubUDZDczDZILNmnY6lOO5U7YWHP6+pPQ4BtpL\r\ndXbreBqzYtKXWrrlGBTWGlRNEvY6Ldh+AaQ=\r\n=Vl+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220926164115.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c53b2bf0bf6e97e4658ff4b7d84ad01b/chakra-ui-popper-0.0.0-dev-20220926164115.tgz","_integrity":"sha512-Bwvjh0B1z+AQIEXT/X37I+lSzuMWog2UttoF1Tz2oi7tAUOPZRv6vZLJNNF7j+2+H/Wqkd6FGyGjgQ79Oj3vgg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.15.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.3","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220926164115"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220926164115"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220926164115_1664210559722_0.2585806649266995","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220926165450":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220926165450","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220926165450","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6766a314275a1f9828470a9bcb9f57289c78fe3c","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220926165450.tgz","fileCount":6,"integrity":"sha512-gUpvLgFF4aW30+2fvsZH072gu7CsgJv0eiiPJ1aEW5fYJyZ1AKjSEkQR5lADUXFM1CJZifiNtLTynGvSTeX7Tg==","signatures":[{"sig":"MEYCIQD1UQlC4yGg4NFrMlD6nq+lgEMb1/1MvJ77DB/3yqe8rwIhAPAx6DZu6YucaFUTde9xZ3Z2Td9ygzM8GtuypvWjX5PT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMdmXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYGA//QScrqVUKkllFDyHYeSBLSqkjKGa+rLFfKS1cBJoKzUJwYjI6\r\nJsgcyke+XYZKxjbjyfGV5GZ3agv4RhVglzYWKMd4ArMAqGf41jHfTkZh9iZF\r\nn/195eJGXHaoBwSV/d/puGR7B1cFCV5blur+I2HIBaXCEoh0peJT3oFyTAW0\r\n9ZHIG2q0h6dFgM4lMkCszuCGmXSkR28j9b5FuS1QqinZQEejR/gSSlGd9J4r\r\nvvuhtBWSuAi+wgcfU1TziAVXdL8w1h0Yt/uJ4ntlC/N2f3K2HTFYfa0HG6B/\r\nUw+KcSjp3l2Y93OvB1objUb4Uj2xV7/JFOp5J32x4EeKTQGSRoUkZPT9i7Qx\r\nBzQQYXh9ae+RxQB84NGVAqKkz1Bg32DkSLlmgwxZolagKjstog7iHg//So5e\r\n8YP1P9df1z+nZ/BdGHegeZ2hi7K+POFEsfbzN6BCNu8ww/NPl+nmr6m0Jj0q\r\nSeX6bKDPQ7NlKgiG07OTOjVzlSgBKfCEQBsruy5plv8ETQOcW+B4K0uQSLSy\r\nMTvbKYrE0Svi209WJZcmfihxQHQRXCsCJH/2H33bu19Fu8VHKK5v55n9YYgC\r\nC/QJlADqRFsad3DXJkO+BHWcHO2yGOVi8xoFzu87HSXtpctYv3kZjCZJMqSf\r\ng+vnCJ4VQ7NrbIzhFMbYaTHDWMsyCYBr1ZQ=\r\n=LomA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220926165450.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3e6fc114cc4df5fe75318dbff72c74c0/chakra-ui-popper-0.0.0-dev-20220926165450.tgz","_integrity":"sha512-gUpvLgFF4aW30+2fvsZH072gu7CsgJv0eiiPJ1aEW5fYJyZ1AKjSEkQR5lADUXFM1CJZifiNtLTynGvSTeX7Tg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.15.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.3","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220926165450"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220926165450"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220926165450_1664211351569_0.1917572833306882","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220929105632":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220929105632","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220929105632","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2cf5999b98335c56e3837d7a379bdf336427b350","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220929105632.tgz","fileCount":6,"integrity":"sha512-g8W4sDpgbdy5kteX3duU+tx5WOHRQYCGbWP30iPlF2cMpCsMXam13mrxH8jMeptYg696DJzF2p9lF8JZm6nbVg==","signatures":[{"sig":"MEUCIQCwTvpEPKTrg2khWzQvUAfsRH0VUwSoS3PvEvyghNUJ3wIgKCgs5YT5KFNc9CkzejE5ayF1YuvAtH+Us2TL7/OrZyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNXomACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW2Q//R4BxjEpHGbPd9JzA0WidNYob4QSXZe0OpaPpd5dPTr3Bhym1\r\n/lS16AesIOwMDoQN/7eo9vs4aIVYZRs90/NVPsgIgZmJMIsYcIlTm2dY0GR6\r\n2nwgPvpYeHPxxxz5yS3zeTFgGOC7dDyshc2D9VV5h3s6mtExHpDbmfJYaaVi\r\n1j1Q8RLz2zqP7B19TlJcH+g8SAz4HM1vx66+Oz5ice5jR8YCQ1tPWykv8l6s\r\nccFMT37Ds3Bx9JP7gGYmb2cSNK0KAiMkAa6sE0o8YPWmrdviKwg2Xk2uPt2S\r\nddc7dIVIzsvOopwb9q+0WRP0wlHYxS7fwgF6Fywj1WkdzJB6hgA7DhJOPe4M\r\nt6UnXu5OMP89V5/eXhaFWGIWNHKPyulxzoDVk+ulXvnszOqE8NfNqvl9J8ZD\r\ngwWqmwmVEVXeHs5UN5kK/R/ATjIM2H0h93XBIytoIc9YOPxYf6YMyuKjnoGp\r\npmW16stp2S29z1I196Mx5bO+QCYPPSv5zSWAZVGSDPSKhFp7BI6/z5+dwsij\r\nudJfJiEyzS85gmjG0LABTFA0HpDiDvtJ6YRbsOdZi4qTeiQiSZUk3zOsY7/V\r\nQZx1FoM7efj25uNVQaKfCzkUHq3sa4WW6pSrIYvH7dw0uY6Vu2DD9SzUWhyB\r\nli8NRiir7pNdjie3WuyUOwLW+cZExYZW6gk=\r\n=ouHY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220929105632.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/50a41e0faa1fd5cb22f6cc4708f3037f/chakra-ui-popper-0.0.0-dev-20220929105632.tgz","_integrity":"sha512-g8W4sDpgbdy5kteX3duU+tx5WOHRQYCGbWP30iPlF2cMpCsMXam13mrxH8jMeptYg696DJzF2p9lF8JZm6nbVg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.15.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.3","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220929105632"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220929105632"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220929105632_1664449062526_0.8824050971834081","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220929132459":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20220929132459","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20220929132459","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"adc32e7449a7d1d6a7e3bc2f2c583b56b33a73d0","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20220929132459.tgz","fileCount":6,"integrity":"sha512-aPQSBZJEwRhrhuHRbXETqswy3UHSgnI8S+gWDim303yBnBLHin6HJFXd/TxThLqIFlpU/Dxmd08lsSzG+w158Q==","signatures":[{"sig":"MEYCIQCNNYjuEufs9vTlu4/LFpfL43IDxbMcYwAWBMBGyiFZBgIhAPo8PfHQQTvFcbclHHIVGDtZFnY0rSyy3/IxcsEiM9ZT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNZz8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7vQ/8DFqVsWbqZJLX9t7UEpFIJYZTvo7uzd5sXrysZInGdpSK32r5\r\n9fpOaKggCC2XEzwxnV8pnG2pQSdLQ2dS94/GyPHK4LEGI68p7RHEMbCHD2uz\r\nR3JDuO8elvoiSiIGeOpLUZj4LlQWuxU4JWbcYKxNWYfYzURb3HyL3istG4dz\r\nsIHCcstza5PPXJR80UFUaUfAjpTOaFDgb2682eoSknxPD5n+otzrD1MkrcrM\r\nFzX+LDfdD2gwayZ32AwKXcXZJhzo7d9gYjEXj2wCz5v9D/31Z+v4ixgLwTl7\r\n7TvGwBU1y+lf+YMl8QaVrV7WwW/SCbhjp5XNWGz1jKA69hvXpQfXudveIQvU\r\nA93MzLi2ymnlPYGgblG8UEAx9ebMMrIUAqNs0T8uwQEbrZQvt+TPIbCCET3j\r\nQqM/lp3tFgtqzFJOvMsJyYIEei+TIw7XGT/gXYrab/2QifiLWoayZ8Zo6MXA\r\nDrN7vxyRsMWSo3ZwWpyh1ZsBJuhSPz8KnghT5P+2sKDERkBK2VSN6luyUw9p\r\ngwFXEw+SpANxxHP1lSGdccIALrfnwdHAY+iqc/txlbows6rJDLea7I6CVZpB\r\ntksx4DmiBiPfBHlJa2Wu8KILrunrXkmeeyfvtAIm8WLLN6arGGhGRMYQnqwx\r\n1FFpYLVnFaSVW/J7u39ZnqlbtBMVs4pDKWQ=\r\n=ZiNA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20220929132459.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8ece1399cd10f16b79e438d4c99d2d2f/chakra-ui-popper-0.0.0-dev-20220929132459.tgz","_integrity":"sha512-aPQSBZJEwRhrhuHRbXETqswy3UHSgnI8S+gWDim303yBnBLHin6HJFXd/TxThLqIFlpU/Dxmd08lsSzG+w158Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.15.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.3","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20220929132459"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20220929132459"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20220929132459_1664457980285_0.6253997352526224","host":"s3://npm-registry-packages"}},"3.0.8":{"name":"@chakra-ui/popper","version":"3.0.8","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.8","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"89b6984aee405316974dbb70ba451f85832bf44e","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.8.tgz","fileCount":6,"integrity":"sha512-246eUwuCRsLpTPxn5T8D8T9/6ODqmmz6pRRJAjGnLlUB0gNHgjisBn0UDBic5Gbxcg0sqKvxOMY3uurbW5lXTA==","signatures":[{"sig":"MEQCIB1xsgE5uSz30bfLjYmJOWCV/ZgOHV9lP0bCDpKBQWoUAiBTrOTi0WSlN7A2qhnER+P2mTiSNMqtjx4O3ZR9oHHfeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOqeFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+9BAAoHerNHRgHUeNoiqrMGEpNXrRATnXdIuTnGSvVh2p4Iq+vh76\r\nAWPA6uTrhAchsEatzp7RpFBdDWKEvvUvwwMJwQKb7T9SuSi064B6CVBMkqCd\r\ngIsy2zqNUBf5vrQqbN5d9MYcUvaSU7wQbWJNsFuIcNgTg/oEMdQ8J6VBfZOS\r\nBGaNfRu1we6GX2QYlyvb+UiIa1IFJqAYjDVNHLoOBDrsvUsN+VCShOwUKFsx\r\nZSDy/LzUbBdjqPgYfXmUQyI+rRExG7k7Ys93xv6PbRWQ2dhv3YDROCLauXd/\r\nKzt+RRugDst/4OsU6oPnnZSwLqQR03F870MZ8gJvl6gGLfWPmvMBw7uWKwX/\r\n3mKZQPEt1hGR/WXz/krkHB5GdaFniu8usUnO7e5JHBrtn+tJTSmN26OR+2U3\r\nlNKRC6Au/tQWmheZiVqMyAZH+SYsoONNDcez67WiY/2WLzb9i1M16QXdrllM\r\ngYnhMaQ/Pn5X4WUdkAa2sVTO+HAd4b8vtkkagTPo4rlD9D8FkGzaRSZXr/r5\r\nYImhjQ05wCGDqfnUKLkvT0QeAYO3M1ft5M5MiT6ehpshQzbm21vlFmy7aWiV\r\nSe6NSmKvCwKGI1WoWPBCR57rCfF2KSfckpw5T2FaZkaWuT2vfG5ITO1x7cti\r\nygntKg6aBQJLK/Nn0c/HrrV7q3YqJ7/Ehus=\r\n=35u1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-3.0.8.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4fee11d7ba36bee32846870c41078e30/chakra-ui-popper-3.0.8.tgz","_integrity":"sha512-246eUwuCRsLpTPxn5T8D8T9/6ODqmmz6pRRJAjGnLlUB0gNHgjisBn0UDBic5Gbxcg0sqKvxOMY3uurbW5lXTA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.15.0","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.3","@chakra-ui/react-use-merge-refs":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.0.11"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.8_1664788357036_0.554518316624546","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221107161407":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221107161407","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221107161407","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"421b4971436dd8c4955182fcf05c49c166983d74","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221107161407.tgz","fileCount":6,"integrity":"sha512-h/Bp1SpJI/tDVLcteASiQ/FpiUAP+Wz+YLjuf0uHU3lsu04V6S67qVrRzhbs9A+BTmmpzrb2ou+jkZF2O8fWNg==","signatures":[{"sig":"MEQCIDdQc5dbOlTdnoZQvdGOUQ1cp8U6VGzLoM1+MwUQ//kyAiBgDrIRpUMmKM3Fomb0YQZyG46HyIrOv1XJCQdxUe133w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaS8aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV9A/9FFXUMAJi7Ajc+n8NHEWpmvthwlqwNLpeSzRMxPASZEehsAmF\r\nc2+bjG87TOfxklS0a6016roUBYzyx0FsXj44ii3Rdy7U2f8jYD7nbfajEepE\r\n4rZoHi/SekicfY0pwEuOw5idSAOSJJjzkBVRt3+fCS942mujGxpb63ubsmx+\r\nc6wgpllFQXfsOjs95FpHYyhFzyymbgaInGM6mkc3bvjnyvAzqCgkBkj+h9Az\r\nImfna/tHWfstqW2mQUkAy1iVlzJWvPNC/7GG6EwKV7SAtRUk7Qtb6ssC2okE\r\nhuucvW5ameSxhgdPqU2GpiTJjUhtopvFxdTjAM4HKH37IhljiiPEHMkHFi/2\r\n9vBNywB+6vYGzOBWyFffNNcjv8rdiVFdKyEKSOUQQ6UkubYQqOohtvHR/5js\r\ntsM47r/TrIkUfl0h36TGCinxz50sdlN0ukgG0cQE0jUes4pVB8ZazDMb83+w\r\nkKUpsiasJIGHrDe1l7Z4Ri5gWTvwDVpZWVH7EPkcW9afsaRvx3kAEI6E41HO\r\nh06SvrxySkFnqAQLOs8lBTC/OOzhKBQqcxol9erYBTWhfnw+O1vTe4yBFJFU\r\nQ2QLJxiDmp/LpOly9X4xkM/iPqPBAirKTWi4cQ1vz/PSUvkZembbCt3r369h\r\nE/Za7q8MHf8a00dMkQqRCBJW0TOkDakZq78=\r\n=6TxZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221107161407.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/925e1a05d46c31056a7fe7aa19352a33/chakra-ui-popper-0.0.0-dev-20221107161407.tgz","_integrity":"sha512-h/Bp1SpJI/tDVLcteASiQ/FpiUAP+Wz+YLjuf0uHU3lsu04V6S67qVrRzhbs9A+BTmmpzrb2ou+jkZF2O8fWNg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221107161407","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221107161407"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221107161407"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221107161407_1667837722499_0.7291739087583844","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221107181117":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221107181117","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221107181117","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e313b130c4895bda8c2c2641a7e4f80ea50add97","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221107181117.tgz","fileCount":6,"integrity":"sha512-XRKTCjyR4mn47EgIZiiqmE3NuP1/CKMnCSg4tMGOis4hPBnVfBm09OvFB6eJUWWR9feNjiBjWSvPjoqa1p//pA==","signatures":[{"sig":"MEQCIDmAr0NvSbzlHhmsblh7zoknH9RTlzGVWedW85Fpaa0TAiBWK9Q3T4+KjIsxwWZ/4WV/BLk7wp8S/OG5xhyv/Le9zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaUqHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquOw/+KR+OEwXbGi6MbUApi9SO9YNvJIZGQBfzyQt1ehrgAVjsotry\r\nii55/H69xfepNJv5gphXcBmT2hY3ZQ3ypazhdxca5BHlu/gZOPhctFFHQzur\r\n+24hr1Ab0W6v6M1tKIdNfduDYHUr6rkUq1jgAvN1mAAZm9go9Z+5OfKugcVB\r\n5fer4dS9TEHfKOH5Z1M48mcdYYmtTiy1OfuanTmD4jg7SCCXOaylY2yMZ1gm\r\nBdcbcjJ/GlqcesJ2QzOe36MI7fL7P6l+B9Vh3WaGsEq45qsZfCe6TCS+42Q2\r\nou+RjAwQPdwSEX47OvUJrHJsY18+OpIeu3AzkheU47c+fzNi2+YoYea3iuLx\r\nPvP7VemPPdbe7wewEle4OyDaQ6DhWPMk3Cx5z6TXsm8Du1EjPuD1IBCZf2gy\r\n/Hkdix8ODurzqZULuqS02r/iUhtdSioKmKedXJB68eDe5MTtVHYXQGU0BXeG\r\nvThbxWBSCJlxuBk8sBx8MYEHGOhPvIaB/z0TPseksZVDf9KRawf2wZ//l3RG\r\ngr1so20qR0FoYo8GPrEaAtK+4IRTHpkiBZoXWypoym8lzPABeXK9+7ffgKn/\r\nfPfAgYFnpxMCWYLBHD3mimy00WiuCKke+fd5YZxB9lBZmL59qw09BSU33zqh\r\nAG0efBE88l/xFVJJ4A4B5JjVCLrp6cOULLw=\r\n=H/3c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221107181117.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b4a40f85d2c74fc6ba8b14ae823b5b75/chakra-ui-popper-0.0.0-dev-20221107181117.tgz","_integrity":"sha512-XRKTCjyR4mn47EgIZiiqmE3NuP1/CKMnCSg4tMGOis4hPBnVfBm09OvFB6eJUWWR9feNjiBjWSvPjoqa1p//pA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221107181117","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221107181117"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221107181117"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221107181117_1667844743618_0.27660065870554185","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221107182607":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221107182607","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221107182607","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"34233b45ba0c39b11805fb1545e013c3b97556f8","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221107182607.tgz","fileCount":6,"integrity":"sha512-lWsYq2OmHsr0i7iWhKooRy3iGU/nrWXrdU1Thc9GrUHMYLYwGBisqUZqq+UBKstePymDahTH3eaRA+kEJZmMbA==","signatures":[{"sig":"MEUCIGIARsFpPHzxivbFy4Nznn/9en/FqJwpihkbPKPrDcfeAiEAtwdDImpcv+Y6hbFr/Zb07TMvwFdkbXmdvLB2IjBe5fE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU3+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2eg//azE7YgOk5BFGvoeOO4PTJ6yrWUmF8+5PK5jitRIeiMzB8d6D\r\n8A0yVegM3+PMa+05aAzdQwSo9E8OpiyhL9Dg4QIjEVIhnfLcMKZGLP5AVlPr\r\nSptRWuC9aWPVjsX4aoxOR5DgPt0n4CBEA1YruZdb+wfGQnudB7A7ypE5mL3q\r\nw7/mSpsdYxMc0riixPcAS37ZRJa46hveB8zpaqaZ9Sk/Q9BlvIwQ9Gv2VXt5\r\nUByGLEHBU5GX+CkbIQ7ooGEeWMhc/Gai2nkAdy+xb5pA6tPKFmlc6YTDs33M\r\nx/ol+S0OQsoPo5/8GXZOyRmtF1ep/Lzy+TfAGSN3QXqC24BlukPSVT3nmjZU\r\nlWmQajdAnVl2qHwr8rJjM8WpZIIaw+/YzyDtmDaImOcC1pTEB/oGFOZWEZlc\r\nDWdYWiUu4Y73XNTSZPd3gOa19EW+QAuBS+6TPK/b50wp0iEO6QxXpjR2Yk01\r\ntuGrmdGhTOur1pbiBH6nIdrF9HT6TYI+5aY90k2SD/ryiaPQFOm2D+mDKz6r\r\nyb+Nv7+7JiyG9KCr0C3G+n7seTo1zMGAWDylWfU1SNA0FZe97ICljgr5Fxp2\r\n9XNJX1pN4wtPiA6X9dFW/pipShUPkmCi9a6qFKR0V7yZEUy+cs7mGkCjE21e\r\nCHPqrRpIO5I5jSq8jnSoct09dMCC8lFhn+E=\r\n=vABw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221107182607.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3fa7b352b24a8c80c958efea46e1e94c/chakra-ui-popper-0.0.0-dev-20221107182607.tgz","_integrity":"sha512-lWsYq2OmHsr0i7iWhKooRy3iGU/nrWXrdU1Thc9GrUHMYLYwGBisqUZqq+UBKstePymDahTH3eaRA+kEJZmMbA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221107182607","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221107182607"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221107182607"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221107182607_1667845630145_0.9820390344033436","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108071844":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221108071844","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221108071844","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b47367c35ea7ff531463d389233e39b887f16f9e","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221108071844.tgz","fileCount":6,"integrity":"sha512-qV9omZsTwf7jVOyfikXGM1RG+Vm5XiTNJ3mreBrWutaKUUPokbEmYHWtd0DCUzPQx7J8cr4YAGjjKSgLrd8aDw==","signatures":[{"sig":"MEYCIQCbSPowaMZQG2RHNBBJQj6w66TIgYmoPhx2Ya+Ji7/74gIhAMRXEIcaaaL/wFAZVfnxR2bHxUtGnN3pJI1JMYGTo8wi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjagMXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrysg//dbQs2A8MHVnrsZ4A4rR1u13K9dzvi4tKIUKTeM9RJLF1aXWR\r\n4fbIg+lccQNr37UcGCQCh+wfJULC3/8MiUSv6Fe3TbcRWyeTFtxZ/FJcS/JT\r\nYf2x/QZaxbC1gF2ZjQisR9PNvct36oEOOXt7te9tyNyWf1CG+NVCbCl2E0mP\r\n5yCrCSp4Q9VmI/Hc3Y0+DhflpJfl0czddxdxY/rhN3My+I5GGeAFcBXs3nK8\r\nKBrBMyO1BSJBE5zGOAEvdig21hZ3xF7/9+C3I/H3MEkfD0M8JpfehcE0JMQu\r\nGe0DP3rZsBmnHJeDjyjO4P7S8hZtZ45Nu/5n8RrIlzR0Pjb84faytZLlNKT+\r\nDtsJnx2AJJ9fAK5SaOEDpuzGgbHiJq8UTyT+oMaroDcJ9RYftsgxsLNiGhCE\r\nGnEngi5Lr1JBQs3WPuxFTWgByD+SL1HvScyFKMRdEUl1VhQYgJnK89VYKIO4\r\nntLFFv1VADJkq8AfKheaurTGWHvwUyrKgNuDBo5cJGgdJM2COI1XK6LIE9TO\r\nC1/oDe7WTKv8TWyIORRLygzEsXRj9KRaDHzGaBOxw9EpfjfdHsCjH/p9Z2ZP\r\nt/DmbO+wD9EWxWYgrRg+2BqGYeAmfm1a21vtuvTz8j3MYVFgtKo1Toi1I/ly\r\nHiOC9Nq1xpjDbjLWKWXlQV56HdXCBIXV9rQ=\r\n=J8SW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221108071844.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/291186c3a8a26a0f0ee41eae50b4eeb4/chakra-ui-popper-0.0.0-dev-20221108071844.tgz","_integrity":"sha512-qV9omZsTwf7jVOyfikXGM1RG+Vm5XiTNJ3mreBrWutaKUUPokbEmYHWtd0DCUzPQx7J8cr4YAGjjKSgLrd8aDw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221108071844","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221108071844"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221108071844"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221108071844_1667891991136_0.8659416632444645","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108073543":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221108073543","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221108073543","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a2e98970f20516fed19b03528cefc8d1e55d1b2c","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221108073543.tgz","fileCount":6,"integrity":"sha512-EjrtgaAqhU7JAKAcncASQgomE8lZtp0+u2vve/3FVYhOslALph9HrcCeYT952wC6lHf5Ea6ABVlQK8IOKeo5oQ==","signatures":[{"sig":"MEUCIG4M/7viN9/DmR8Ry/mAANQejhBpOafmsaO84a/b8FVKAiEAresL4EN6Kn59PpGNi1o5F2XVwXSkZ6WVYSoXHI6o86Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjagcaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhSQ/7BX5pgyAffgbOS+ikwq0t/4YjK82j2am+oxU28wEPqjSH9DMP\r\n2Xh0HCXbqfWZE5Z5cYKdzMTttJ/lYGl/SLj4sp0CEMtH6TJcJN8EavN3RGDm\r\nH+LXwiXhilXsd++RTq824L7N18UmL/GyZ1RgYwe87Y1a+e1MjRgepienPtJf\r\npU4rtWNrao8/4FK35+J4BP0DeVF9KOgAnLAWnvWmw6J3fh8lEc64XCFwBC/A\r\nNFGei6Efo1WSNJElg9+kgA1JstzdczO/QT99YpNiBR4HkwNeT8oDJK7UytMY\r\nKPIH73J0Ucy0Ljry97tT526jYRIAh0Fs9hVi/957bXDbXpr62tlX223jTAUD\r\nYxG0caTaQgN8RMECtiRP85FxR6zmgFqv7AEuQshqBdJ8uI7cBEye0KWBCtw6\r\negieQI0wH4WJGKJqdNgF8v6IfBRkc6XLvbwccKasvi36dOYE0z0IVIaWHY47\r\n4dmbKEefWVQi8Q4O1MRj4XdLqjoeHcp3fcqvbXgCZiwn85u2fQXOysOB8Yca\r\nfobch2VBrf75SV9WjPHJZ0w3f62GR/lR/i2VGmF4tPaSMkmNI6vSHY5jbS28\r\nFng3h90ctwrzjHSaFnXRpGRoWydLDhPRULOG6SzxEdxySawHQ28APKfhWGZ3\r\nlzczmv/pFsHBGOYjXOyDXc7M3R42n6OkC+Y=\r\n=pFJo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221108073543.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/20334e81fe48ca776b98c5fd911eadbe/chakra-ui-popper-0.0.0-dev-20221108073543.tgz","_integrity":"sha512-EjrtgaAqhU7JAKAcncASQgomE8lZtp0+u2vve/3FVYhOslALph9HrcCeYT952wC6lHf5Ea6ABVlQK8IOKeo5oQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221108073543","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221108073543"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221108073543"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221108073543_1667893018372_0.7070581967060312","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108075029":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221108075029","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221108075029","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5ee6f4379f6d67506dd50b9f84c0491283bd3e4a","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221108075029.tgz","fileCount":6,"integrity":"sha512-otPs+9vFx+AfVjw4l8QqxiCD70KhqZPhimU6CAFzHgf0sYh0SAuGjUQqZky5CShhBdMqwToA+0C1rHv09viIGQ==","signatures":[{"sig":"MEUCIDeuR/3H2Vz6ql3Zqdk6IzaUbx/8OblXr6osJBwD5K1YAiEA7cgV7S+AMt+3ph66Xz8gO2U9vBQTDYPNYQUmQKTgXwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjagqXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVOg/8CloezVV6G3t9J3GTbxLliGSNfLMM0KgE3i0ioh88+/fyRKQ8\r\n8oH0E1Ry+kTFUzE8yH2YNNiZMEOeuw+yBuTas/18/Yj5tteXpVDYNlz8wprh\r\n2fAbmhnaih+rTWQVWUHu57o5baHST2MQ6bDD9KoSz0/N7XjeXtOKa18xBUu6\r\nynTo8QvpING7NsRkg+EtBP1oKA/KSgJFOZzbNSSHwOwJyOViDcfX3u1h2eQr\r\nr4TzJYyiNR6hwtuYbfsF3N51KuD38sAZTiAkqkB+MVKdc9zGUv6K8zld1GhP\r\ns+oAr8x10uNEdAP2cMQPE5q8tBFqPdLCSoREK4ORSG87m6rCDgBmdqBrMBbx\r\nk64j/itmETkmQdIEBnzWaUayi+70YUru3GykE3g5cWp5RTiqEjO1vnAN5w4w\r\nR1/Nc+2ZWtN0g7WiXSrBpADUJXWGzFDFk3m6bR/8bto2PEW4AJTqk3RzrB++\r\nlSOPxZQvq5YuuxvQADGi09OKb0gSaQzYFgXrw4ZkY9MI6DHUrQsZXKIdWkUP\r\njd8trqR/uJARkccL9Dyi2Da4rBSkVgAokTHpkpNA5VU2A/du5lWi29Wj9qK5\r\nxYMB8kxKMWbA0KoVDVZ1GKMvLi4pPt/bFmE5YLR1azxMOCxYi61en7XytyjJ\r\nltaY+05B6bapDrooRKuDuiYO3s1jNjxfOe8=\r\n=68JY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221108075029.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/921887efa9ebec05c1b818e9951b8c33/chakra-ui-popper-0.0.0-dev-20221108075029.tgz","_integrity":"sha512-otPs+9vFx+AfVjw4l8QqxiCD70KhqZPhimU6CAFzHgf0sYh0SAuGjUQqZky5CShhBdMqwToA+0C1rHv09viIGQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221108075029","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221108075029"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221108075029"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221108075029_1667893911540_0.22329677621968735","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108083411":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221108083411","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221108083411","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"116996d93122b08544f64ba6952f347d53ec1fd9","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221108083411.tgz","fileCount":6,"integrity":"sha512-xv06ehEXxnHIYhqDnrERRuw4+qPBTQ74zVZHuB42qqZbdyKKXq2RksiaBqL4XuGU7i4nOn0vcKJ15iuKSgu88w==","signatures":[{"sig":"MEYCIQCUVQTrnflswJA7DWvmkoNd0CZAOxm7bscv4hZj2344KAIhAPsJwaJQYUp5bOxuUz4jpBGZnuCHdRajRDG5PSs8+/JZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahS+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNOQ/9FeuYzseonHGSnytvYVZZvM+B9RWcD25CieaEeqo5wPiWA0iY\r\nSaM33edHg3LWbmlicTBCyvlNw5Mwnc77MRV/E9pRyvcY3j5qxNseBlN7JBY1\r\njR3M1vYmff1Y68fxUfb6OmzTiPQ3pGf+WRCFwRT1FrVQhdHg0ag9xI0/QTCj\r\nQ9hC9II2c+JoEKaWcu8DTVCXoaPuS/xMTHMI74axEsxY1lwE9T3rGTJaGXEn\r\n6RmQpTYpvRfFG8xt4124dBU8mnUIXISdmEGwxOy+aDms/iSqNeVON7wu93ck\r\noXHFlVMW9aKgHeq1RfgNR6ktgGMG1KbFer0vmdxredljtnrBFwzLY1IF97wT\r\norJqejQqIJv2E6/Wqc9md3MFfjiu4vtMW0sDjCDh/hS8o36lBZ3DEcoHnAFf\r\nlyLI7l1/j5UeGVtdyPtSy+pg/4SkqTYUNcISBis768bYPyWfGNcXFv8VXmED\r\nUBn82mmn2eKrmk7mlgyV+SqhqWoyIWKZ5IweBFXbc6FxqLucq2odClM4qblV\r\nvn4L5tqiqMStD9pop2vVTGkwGDee8WPCuMYL8Zh6oI6fERAZXS96l8P44RAD\r\nQ1CzdgDhxl5EEIe7/r33YwgJsG9jqoJ0YymLX0yTY6Tf1SsXXXe42H7c/x2m\r\n47fuqTbJV+1+2yih391kcpzILyyOkg4bO/M=\r\n=gP+4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221108083411.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/35f5e428e67defa6c0716ef319deb25c/chakra-ui-popper-0.0.0-dev-20221108083411.tgz","_integrity":"sha512-xv06ehEXxnHIYhqDnrERRuw4+qPBTQ74zVZHuB42qqZbdyKKXq2RksiaBqL4XuGU7i4nOn0vcKJ15iuKSgu88w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221108083411","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221108083411"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221108083411"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221108083411_1667896510255_0.011653307822893533","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108090938":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221108090938","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221108090938","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"593c8bf6a7e36f756bbcb74a048428d2b502c991","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221108090938.tgz","fileCount":6,"integrity":"sha512-fUp5/HANDWLYlFvX7XTu+4Abf6DoVPcNSX3DWw70CzLLzH+VEQgoVmiWGdj8LLIE65KuQNjf68bDkGajtS2Evg==","signatures":[{"sig":"MEYCIQDVbBZPCjud3eYjCM0jHp1gaw2r7fh0iX5zLiWxFOfkMwIhAOqET8vdaJAwvCPB/JhvyU2BQI+oIFX/ldYsmSOMxAqS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjah0eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmot7w//e8GjDuDSFCnwS3/pBNIG0cE6ASOIm02t3ravDsoronyL7qcA\r\n/Hz0tLaAaegBGyWjqJ0x3FUG1JGxlsJD58ZgbRQouQvXK5WQwL8akRkxGEiH\r\nrl30fgizzvhm+GHTUFZbs0xzEt+bYOf1JLAywePARaUHJpexxT/v67lQ76ry\r\naC3nWvtWNAsaQ1f6gIyzjL5JPP4/EKcxgxz2Mxe9yP4fMEWkgQO1Fb9ixRxO\r\nTEKyNRLOa01IXTxQLYwwCBSNVpmthM7/NNbRwhSAPz27UMxchKMEocInPt2/\r\n0uDMYvyRZfqaH1KuaI4+IotiCx9CbJ7ltB0YKZy1Q9TKgdwZGKqKCg3olaQn\r\nZClw7ZuD97C7BvNQivlSdiMBec+gyI9/ZlfJSgzPRJTo9QS+JcAZxgmWouOf\r\nWvQV22F+fuGro9a3xr/Z/fQWukfaJl/P/4QxkflCVHtU+BZ3N98cH+hMWOji\r\nP3XmraFMznQ6PopFxTXC2IISFBIcYssyQo/5OUOa3azKYtbKg5HM88oqq4eb\r\nJyL5rhknPCV8KaJ/3s4QIBhIrlL4gV6XO35J/JsCZldDCpDfc0flmcgRKlkd\r\nU7x6WqKcwWie36zy1obZsWL1Ie9E2kWzHIWgGsgbGVMTnEvstO4oUTiJP4/K\r\nKRw1XxyWS7plGs7iNBiUxnUz+gNPErBhUEA=\r\n=wtPO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221108090938.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d49a80a95b6930b8f079277d75b4e7b1/chakra-ui-popper-0.0.0-dev-20221108090938.tgz","_integrity":"sha512-fUp5/HANDWLYlFvX7XTu+4Abf6DoVPcNSX3DWw70CzLLzH+VEQgoVmiWGdj8LLIE65KuQNjf68bDkGajtS2Evg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221108090938","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221108090938"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221108090938"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221108090938_1667898654500_0.8048076082921121","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108093520":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221108093520","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221108093520","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e890c5c821c1210cfac6d63d66471fe6702ce7c0","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221108093520.tgz","fileCount":6,"integrity":"sha512-Ra1Yvu2bmba7QBOlgvGvffod3NANyn9bCNLOaxFLfROSQlLzHerO/I9iGEGqaphKBCR6MXEPGgPxqPRVt49kVQ==","signatures":[{"sig":"MEUCIFPWsPg1joXiH689Ory0QNWDDRJm+6h/wigJ/xcKD3v9AiEAkF+JTNgksXIMvVABOdCsfOlLMf/eHBqXmkyAzXDHFYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaiMuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqANQ/+LBsjJotpfR8sIVBfHq2X/1za2xdG4HVSftPqOX6cAv3dxSko\r\nZB3QbNUhVpnW3h4eAD8C5eCl6SUp3imJwuxL+/8bcXH9lHPdLNdVRXTlcqt0\r\nw/qR3dZam5atHd+JZIeYW6Uz26an4JOmcKCXvUaz86F67BtCrSurnqwGcIXX\r\nJP/DIORAz+w0aNZ1McsUAmkCySrrtkwq4E75annupprdDXTXAOrsHe3G28A3\r\no/fESqZZIKjiGdImYuKrnZOozQgHHd4BLIcgIv8RBfjHBU79YPZHxnaGQg5U\r\nwbW9LPEJbg3YhxJ59RLifk+8Qmy1HEmdfbxlZl8PTXz/DK40ZTdJmxKv5BZ3\r\nA1OWpaP3q2Gz0uzN3fYL8jiHvaBkNQi0xG/Z41yMs/Bxw6jg1YOzrNxJQ+BX\r\nylcNpWtJlspvOpxEWTSpSXrde6mBk8HR8EOTYqS1Vddbgbytcx2W3XPokAc7\r\nV0uC7pmhtttcreLqnA3XKfPvwz3DtZddioN2BTSa+kpcUE0ejSCYwj3L/0mG\r\nwpQyaE+d2YLDRO7BpUfugcKXrs6sOTkmDsGYfqVE3lHu1E/HEo97SW3nbWN+\r\nGZr0QCvFAzm4a7nZr5Ubg4rC9Y+KPvmARp+XVIZcP6i4i3+ATHnHMX0Q7GNV\r\nVYpJtumaWZZ9E9lnukbmsECDG/RoT8a0X4c=\r\n=Zzof\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221108093520.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/455b8d535307179fed88c3a237407a13/chakra-ui-popper-0.0.0-dev-20221108093520.tgz","_integrity":"sha512-Ra1Yvu2bmba7QBOlgvGvffod3NANyn9bCNLOaxFLfROSQlLzHerO/I9iGEGqaphKBCR6MXEPGgPxqPRVt49kVQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221108093520","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221108093520"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221108093520"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221108093520_1667900206160_0.9435954457287037","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108100218":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221108100218","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221108100218","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c7e9ee353e5c18743f21c148ad63928369218967","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221108100218.tgz","fileCount":6,"integrity":"sha512-sA5cD7GXKWJdfd2QzZ412mUKhlDlkT3y1XnTF+grre6s8dn0TX5f2N86mviDJCY7K+iY34Pq3tVBddjDwZzxgg==","signatures":[{"sig":"MEYCIQDVmDOSjVKc039II7uZr46JsxJpD9LZr33apLREixIYWAIhAJv5KZXsTw8x9OkFOwzJKiJmZoBJ/cuC9jC+TtTGSwG6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaimBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrilg/+Jd6rx9pCKhyAmPh/T5LcTCX46qJGhvppmAXiu6K+GRb9lnAw\r\n+JSNhWAC1chikndVoTiAjOF2hdWhKEbUp0jNPiGbMo5dkOTqoYABMs21qRFB\r\nOxDt48/6pTZpP2s81YsbwzuYMSaoRm9nxButh1Eh2nx/L8AkfhNSaflgbIOg\r\nU7hyfZwEy/s89aGZWwp9lQ/nIgiAi6BqMsILppqY2f1NeFlwDr6VZYa8WesL\r\nb+1W4x57vZo6De+DwncMRyRIgV+jxQfpzC5EWVvtRybbmQp/kL/oj8uILP1n\r\n/ipfRbFqmVuwMkjH/doG/bPzrwjyYnSqGoZ9tfXVGMZlHEY2cIkCWkzzo9H9\r\niKvxPhzWt4/CXdT1I7RblIufmbS6J4Ov7Daa+8FT2djth6QzXPRi8dfPcJ/w\r\nY5D2T0ZvK5yvZxw923RkpzN2grnkBxqVSGUox0HASle4hMFtWaFAgaHR9t7E\r\nJBrdUMaJJ4XnWjyIZwrAyuV/CVjOZ17K2O03AR01/J020K0EvSaLZVp58wYK\r\nuBuFzFW7jGWOg/l9ACqRg0NnVU5qvwcqSuabo/ssSNQsbZB62hFGItoQQ6vx\r\nC6Jpy3kdsTJPEE1t8iJ59L21ft1HhcoHN6AQcE2aVWIbW9MU1kMJXQuNlT5Z\r\najBosZThkhSodiHq+Qwd5+EqQc2DTDPsp6A=\r\n=hAKQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221108100218.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ea6db896aa32f070d36bd1c13b5fa7d2/chakra-ui-popper-0.0.0-dev-20221108100218.tgz","_integrity":"sha512-sA5cD7GXKWJdfd2QzZ412mUKhlDlkT3y1XnTF+grre6s8dn0TX5f2N86mviDJCY7K+iY34Pq3tVBddjDwZzxgg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221108100218","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221108100218"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221108100218"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221108100218_1667901825487_0.29993948836640993","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108124603":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221108124603","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221108124603","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f314b9dade0653841e0c63cae6d2f3aedad90201","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221108124603.tgz","fileCount":6,"integrity":"sha512-WPWDSxDxaBdF67P1nJKRL7K5RDQb+qhU5kcqKT6XihRyTXuRJHITxKTHbcceovvVS8gUd5ioVhX2hoR9vJjygQ==","signatures":[{"sig":"MEQCIHxoN7AnrGgf4Bn1t8ful7hdY7gGtwF2EF4ZcCv7hN1lAiAid51c1T0e4pLpqpH2iveW6QslugwGBeJIQL2oz6DyBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjak/LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeGxAApANcRG1AmAI4fN0Np6W4992VoSVenlRdxzcGoJNy9tDDLpzu\r\nShcC/TQeODz7OL/1knxVEDaGRYT4Qh4G+fgan0o4fmXCS7hcBm4BuSBMuTR/\r\nOx8w2aUc33a0uZipu9GQcK6qzpHYbvrSBcfGkLsYBcxbE+kdP2Lw4D5BYY9P\r\n9aYW94+OAIDPWHea7yUWs3+BkC/iz+kMxy0BwStZza1w4mPQu2XfnW1R9Jcd\r\n78YAEEc78qM5Uldf/gerfiH1PRdgcSxEdBYS6/Ba1e/PoBpvtUcPrsGlRBS3\r\nW69VAbXzW8cv1rJBcxhDa4X3CMsWdFvfe7lysUMxoiQTkUSlv5SOMNWvp4Ie\r\nJN1eWdGJN/rESNdDNCVFsxvB8WX23sOtusEvtuU1xKiWlWqVxJ5K+0aZpFYc\r\n8eBs1IW12T8cji8S7xTFlYP4RsnL4XZYxhTvuxa48HpEjUlLi+TM1T0t2aT6\r\n+VPxxlWbtm0gNt/9Y4PP4ME8DFAQbuLdLSstutOOB0Swc2Hcjj2vBSd2aD+2\r\ne+0yxK8YW5aKzUBd/HXDvrY/7Khf/dXKmbTE2R2wf0OXubo+TTy3icKTxUhN\r\nRiRtd1vNPKjx2I19LaEo6GlBhv3ZXa+655THylnyV7w2FzCUS3Ki1VdAXgKg\r\nZsRozDYFkfTc1YXUOhBqVIlB5HSJJ8kQ3v8=\r\n=9qPj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221108124603.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f5315e9bc2ad88580e0ae913c8b400c3/chakra-ui-popper-0.0.0-dev-20221108124603.tgz","_integrity":"sha512-WPWDSxDxaBdF67P1nJKRL7K5RDQb+qhU5kcqKT6XihRyTXuRJHITxKTHbcceovvVS8gUd5ioVhX2hoR9vJjygQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221108124603","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221108124603"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221108124603"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221108124603_1667911627602_0.37401135274157604","host":"s3://npm-registry-packages"}},"3.0.9":{"name":"@chakra-ui/popper","version":"3.0.9","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.9","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5e810e67573c99cbb6fe79869ab76340359e857a","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.9.tgz","fileCount":6,"integrity":"sha512-xtQ1SXxKyDFY3jWNXxr6xdiGQ8mCI5jaw+c2CWKp/bb8FnASXEFLWIlmWx8zxkE1BbPMszWHnaGF8uCBRjmQMA==","signatures":[{"sig":"MEQCIFSlUmCMAGF9E23lcnSMlZ2mmJ3HFcs6XoAVGF2Dsb3aAiAnGzNAlI4A7aq9IjIXVWsBIKxUGcHHe0yPHeJRg2rQGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31278,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjciwpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLbw//TA7InkSfP/PXTjCoXSy/3dNxuIKjp5TpltVaBEKxLstzNWNS\r\n2exmOL0XV8BP+XqrO9prMwc2VAzK9wDHgH3wIjvJAwCoC+wmvMbu1N/HpDvh\r\nGusudHC/xz61fx+p8CZ9V6b01ImHvxd0oKvFOnwGKNUFe3qbmrYUpWF0FCnD\r\nCeG0VAf8i2IYW9A92nkUsqgNnSLZQFhS84CiJr1IkVGOrKPNFUBop3/sZDcl\r\n/M2kBkZL6C0DduvAmd9SQDvTy+tfvpinzWN3ewHjo2hYRVj2vEQ0H9oIcih6\r\n3gEb0z5S/OYBIqWkqqKS/b866yP8WoyVPgugJCY59t3Y3PwO8tOk0nFEm/a9\r\nEJu57v3UiTHSWSja5kosBdSSRq+4TMFHAWSENWZGs+3OcYIKf0aXg/KNtZqT\r\ni680b3wsmHBtFmpZ0NdGamuYLP3GQJ3brByNK0yjIUlNF2WWLpVqVSalMMGt\r\n7GhvNZO67rB5ex1wyFB4iqtbINWFE/Qg7FLoX0UTyqoHs/ZAIqwLLWI1Lp0F\r\nWTZdTfvowTft3VMzVsa8qtyrcL/D6/v6RhC0YG1bM3g5tdzeWS5xPgH81mYg\r\nD9/qx8X93tB/Wwj5D3YxFktvQXpOdAKqpmQh9QzweLS9ND6GvMyjCFLlXpdq\r\nbG4+67zHmYyIXwOFRUz0vddcC/zS0H7wEjQ=\r\n=OkQ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-3.0.9.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2da4c0cab2e4652f816c4d08ac1cfea9/chakra-ui-popper-3.0.9.tgz","_integrity":"sha512-xtQ1SXxKyDFY3jWNXxr6xdiGQ8mCI5jaw+c2CWKp/bb8FnASXEFLWIlmWx8zxkE1BbPMszWHnaGF8uCBRjmQMA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.4","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.2"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.9_1668426792910_0.7123641702056271","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128164126":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221128164126","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221128164126","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5e236a0d6a65e180c14d8f42cc60cc3646802390","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221128164126.tgz","fileCount":6,"integrity":"sha512-ucevUlasNNDRd9608bfUtAfnsO8oo8ldv4nPMAUtjDUwt3nUvPVrjSNR+IiNZZa5FSXZFjCyfDdfIQT6oaFYKQ==","signatures":[{"sig":"MEQCIFZCx9tVS/jM68mDQ996r+sQKuKyipPbv9Nq+hfI6FGeAiAcngNNJBdS4/5ChXURKJ4gQQQYk08RrkVrYP99mSAYKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOTsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrygw//TfgZ+SPjnzlbU0qVvFKq50JGcg2hDqCyU6ssk7BzupT99nmw\r\njlxrpmkXN2MJJ3j3ViIGaOSowopmxbYLSpb7RFPQ0vo/6i2qzPWRIeZ5Bt1/\r\nHbgVMWr7VNCrRwMi08T89lXS8MxV7XoZwqVpN0VA6O/OS87bxt9KlU9sLkVY\r\n0ISspSB46fnNFUMxlB8OxPN4kTs35xYafXSJVQ6kQck7TJo3DZZifUBLJ5is\r\nTWj0rwb5E55/ZycpbXwZ27VmyKB5tZdHkc/zGhLkUg0tO1bsD2Kky53qWC2N\r\nXcZf6o680xUwsRqlHH/jmdiieCJfiOW2eFK5F9B3dXIrnrN3PejRSKrgvOPF\r\nfuU+o2ocCGzi3xvf+h92d7gJXm0RN4mn9roSIXTMeEtFC+IH1JOzQ/R9IuOL\r\nwObXh7MUKyXirmZix2HvHShpwwiGiBlqoucrUmUtU9a+AOqPozsnEJlQaZ/8\r\nOsBE7BP6H8QwasWGxmT6dWlk5Ii7uw9WwEwkEU+kjnLKX17pwBkrwAPdE5fO\r\nZBI9Z6JpxJEcHZSqRFHtRutbRSiZRUDjuKuch3FRfqQ3EvlzDxSj9CLhAmXr\r\nsxShK0cpvoT050WSQUbYA3bGZibpmyuoLJDxK+mxSTO04NU47xHIra7U4RCS\r\noudaOvPsGhJFjOFaqE085fhtP/gbH3+Wwiw=\r\n=G/RU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221128164126.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/46e100c7910326da6e99196af1bba0ea/chakra-ui-popper-0.0.0-dev-20221128164126.tgz","_integrity":"sha512-ucevUlasNNDRd9608bfUtAfnsO8oo8ldv4nPMAUtjDUwt3nUvPVrjSNR+IiNZZa5FSXZFjCyfDdfIQT6oaFYKQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221128164126","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.2"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221128164126_1669653740497_0.7990908846189646","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128182021":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221128182021","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221128182021","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8dd086a9f9d0144e742892074c29991c9acc22ea","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221128182021.tgz","fileCount":6,"integrity":"sha512-9bGoASI37pQOX0EwFjQFKnqzHLMeOtqa3uIz80Q0AbN9Kum+gRJ7/CiisrmAeg12kSNaaUsck8qfMW0Njru9Fg==","signatures":[{"sig":"MEQCIGANuGwxFzTmVdlTzh2IW3ofMmICrmjuFCeHyNsMdv+cAiA/gzTmj5/889XsDeW4mkELLfJvhHOWBoupFZ7n8Pmm2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhPwvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFRxAAm1Olr9mhKPaXiu8ExmtjC6hxnedAkF/uyOq5aYDjmzyMEJSU\r\nyCc+BSOcpIfJhpeblDggDvGD2W/ljUN54prDBrRbN4nb5DeSkWGbXA1ZcMOV\r\nrf7N5aEYYchw8dwCcKij3jn3lGOvljwaWtjjTtVAX5xuruLfiH/dVh+Sa80Y\r\nptwdsai+Ahpcvq7ReZJotEOOhK1a8BwcgWFW+1fz4dq3kfseK5Es49+DJMZB\r\nBLnK6QS9BdQU0aaXiPxTSwaFYJIbmONrhUroxjiktCbYE91m/Hjszvoy/q2P\r\nihokafF/t73iz9REDmWj95D0vvqakAAE7G9XQYuMpYXaGFnl9K3cFBkIUOzv\r\nN/u6VSpqGVMlURhVURtEd1BmSN5oQEZ0l7AGv4UHkiC1OJo9tZ1lNTWm/L2z\r\nTACRKFv91zLIDAzV6f4JIcMux6juzksMo/fBhD2ZUKlok3DR/6Q31cAamolw\r\n6p1MV+2M0bsC7zEwIRsP/bGAsR8BGMzXI3RiBJ4h1ZWSxrjvIxU+ESixfjDb\r\nXliG9apCvdDDq3bo8UrutCT/ZNLaoL+e32r9QH088WpY30+RWpgcNJpykIif\r\nbcswI4H7QW1udXqsOldxXRnee7NEzpulErFawUa1sJ9aZLlbMrt1GiaT6BKd\r\nXGjxAafBKfVmjD3qmIWxIA6//J6sVi2gUBA=\r\n=WFtU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221128182021.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a70798149ec0c49e0ca776615409a35d/chakra-ui-popper-0.0.0-dev-20221128182021.tgz","_integrity":"sha512-9bGoASI37pQOX0EwFjQFKnqzHLMeOtqa3uIz80Q0AbN9Kum+gRJ7/CiisrmAeg12kSNaaUsck8qfMW0Njru9Fg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221128182021","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.2"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221128182021_1669659695232_0.9011539900623333","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128183433":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221128183433","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221128183433","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f181ef4f3b7b789dc0641fa80ad934c37956470a","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221128183433.tgz","fileCount":6,"integrity":"sha512-Utgae94I/epf98tbW8ezXT73nH7zwX+nfnlJ/67LxOTKvVpHej5Agb8apDipYmq+4KpjYiWbKsycHT2Y1dhKwA==","signatures":[{"sig":"MEUCIGO1hSgOg3bZNxFqU+1TTlOR8y6yIXqfIn8m9Izn+7nLAiEAmOmufoAfD7KNRK4m7Hv9ySHQUdG8h4bseygjpzyIrPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhP9xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHhQ/5ADVCW599R1upenh9y6xZu11cYiECC+ruG9JayP3rLxJK1MK/\r\nMI06xgrZ4nYnOUUiyqFvC4Z74FEUNF1o83eEpK7XTOazy3XfPqrruQOkKc7s\r\nlkIYU0of3sRejN6hcrYWixq2mSCWp0+ltFnm2HDdvRouOkV93xIbZe5paeo2\r\njJsbHvlp/LBPa75OF8jyBXNQmJbHBfOHpriN+sV72sARNGL1GLhRhFRhTsm1\r\n3oT7hZCjYQ9f5CzIfK3sV9H/7Imt1q88yWyh1YCm88hEBI01tn0bXpwPGUVl\r\nVPDDns0ZgQUdkjhYdPYUsvXNK9HpMOf4d7M5NYtM8bHYelGp/b+kkM6TjiES\r\nCsC7eVU8W4XDHOztZyfF4BvZJqMs+xGU5VzxTAsZ5LFzw8Rl7I69PfZJWUYv\r\ntcURJtePq0meoc2gGsFb1Mf5W847oyVTSSHEWPoOqpQanh+CJWWWSmVSqPRe\r\nOXBfTKAnNYJlCA/jSj+GKj4cRAv6skXq4VDofmeV7/IgetFBdEtTF/yYTvFZ\r\nQljaN4aLZ0/3tSdUSUXo6wvAbWep43555KuSpHTt05TYqKRKbP0v8fLPtXh4\r\nDPnxexCW2JH43ncWg/dJEe8NT6c9zMGod8mmEdAUWH74jwknEu41w8tVSCGE\r\nv6VkGfgPe1GxVEPEoiik4e7YoJrS16GHipg=\r\n=1NFL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221128183433.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/04df621611ba72eca881a91fd1afcbf2/chakra-ui-popper-0.0.0-dev-20221128183433.tgz","_integrity":"sha512-Utgae94I/epf98tbW8ezXT73nH7zwX+nfnlJ/67LxOTKvVpHej5Agb8apDipYmq+4KpjYiWbKsycHT2Y1dhKwA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221128183433","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.2"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221128183433_1669660529773_0.8976599774504999","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128185230":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221128185230","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221128185230","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f4c4ac9eb6321887ad58bf45b17c2834cd7f5c2c","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221128185230.tgz","fileCount":6,"integrity":"sha512-VNUGouskM6gDJQgdqATFAUMnjGF4GJYmS5cV763Q/kzGHdnyOBc8nyJcg+X66XhwDk6g21xXDs/hAFvg6FP3pw==","signatures":[{"sig":"MEUCIQCSpnNHJzwIuJH3Kb3HcbRgKrXi9HrxIXPKHJ5GSIy8zgIgJjEtAgzsCDK12sheBgicrJ7RBoWrR3t2WG4j/e7QpAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQOiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Mw/9HwESqHGLC+c2Y8TzhMeY3rddlAdBUmsWnD1bSpbCYMuNInDr\r\nLjA8d7mQfWwROonarFks44DwkiYq0/jSsYuHW1uyd0VaYLFhN+v3iAd4zOvi\r\ntuwhmfwcP0nva8ElHdc9gtm1GQydzWPHkxDeHxTxA0toJMtItQ68kwPUBKYm\r\nG0r90gx3s8SW7ZTMrJE4Je0/2pQaT6RRqUxBbZ+aZi3vz5d1vBELkC9ADV7m\r\nvNFIt1AyNdeF00FgvgxkqyNxlq7IATZcZFkh3xJ1Ov0xsShPcuRUpS4qdiP4\r\nXD++Tg0Bo4ZwPljVCFqItGDIf5lOUEb0btXtH/UpwttaNYQna6HmEchOHscU\r\nKLthpKfGLcCWWabcKggp54kgsyDoJhHNc3awwxUdVnrw9Xqfl1n9EJWaD7eA\r\nRYNQvCPTrBoumh7qf+fH4HXgaSLUo2X80kx9ctPw/Vph012XoBFYo/gZVZF2\r\nAe4yboasTLFBl+8CVjALR0X63vJNwVXyEKRdsiLLpbL6BmuyNbFdO9OCHxg7\r\nUFmpx41chQmIR56uKD4df8JuYz/4dlK7hRwyh+LFtOlJ9+EG8UNznIyrRFOz\r\nqlnu9SQKGA56tBlM8ZEoAEXtFPi7GFr/bwcnaT09swZ82A78pVJD0kaZWhG7\r\nxsEJZo/4/oMiLAb9E1B0+nQI3iNFHzsjSXo=\r\n=FIyW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221128185230.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/246d0ca5c26c40a2f2e091e94aed3052/chakra-ui-popper-0.0.0-dev-20221128185230.tgz","_integrity":"sha512-VNUGouskM6gDJQgdqATFAUMnjGF4GJYmS5cV763Q/kzGHdnyOBc8nyJcg+X66XhwDk6g21xXDs/hAFvg6FP3pw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221128185230","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.2"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221128185230_1669661602414_0.2684534271633543","host":"s3://npm-registry-packages"}},"3.0.10":{"name":"@chakra-ui/popper","version":"3.0.10","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.10","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5d382c36359615e349e679445eb58c139dbb4d4f","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.10.tgz","fileCount":6,"integrity":"sha512-6LacbBGX0piHWY/DYxOGCTTFAoRGRHpGIRzTgfNy8jxw4f+rukaVudd4Pc2fwjCTdobJKM8nGNYIYNv9/Dmq9Q==","signatures":[{"sig":"MEYCIQCDg9WCRPR+EhmyQfqH5/GcLyjxhUebE5z2Pz8T18YjiwIhAJHm6K4e8r3OFeLVfZLxcWyKc5jXO1scXzcANzS+LoE2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhaLGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovtQ/+J0O5eiNC5fPH6V6gcAiQ/lxMuM+TSgAXdK84b6/WfXYGT8vt\r\nCY+L5iEdP1M/DQvGWF5bbt9bNEJCU8933pgiJeYsGjbRNpzWCv8HcAv8Ze4o\r\nvl0R5q/fuscgFZIu22+HN8TxD9w2X5NCLaZjkM9ejeaMFvmwMVoJWpkR60kz\r\n8ZIPQgTPTFQqo8dv44l5RdXRKcod9HuvjKvl7Z83x71iuyqwRRvcaeEWvcgV\r\nPE0eQgQmAxVrHF9uEunOQ1D30HjgcM7pGuvqnKFs6DiCH7O7MwHWLE1uDaWI\r\n3oZ+1T8Ci397WZNycIdTHgLjn8v+iSkBTc7HGe5MgrI59O9K2+WFVaok+uCF\r\n+AHE5WGV3ppnU9JSnQU90dQ+PJsXqRSKb0IGoy8JKLTS6jU31NtdLuSwaCnx\r\nIREDFYaKYgOefYtX+Bpoc4YU1eRR+9XReB6krpIdlKjUq2ncbzE88I6N/mbj\r\nfjfELg3v2ytKfZIj0qrLFQT2x733E//Kouv5jOphNHZOMJBWwAViDtKnGPtX\r\nRCJm1e3WvCWNkkUHGzSij6wDHTYRopcLWJUjFWEnG7NTANM6ZeyqNX0lwj5u\r\nHHq923qRho3VHol/rOw5+odiFjqPOxluHxcmAROBImJyhNDzRkq8/uULE0ct\r\nHoUY+8avZsBKSExbmGZ0ns4HlAjQLQBIvnM=\r\n=4q1H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-3.0.10.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/25c8e16aadc61c9ecb7816203abe79c3/chakra-ui-popper-3.0.10.tgz","_integrity":"sha512-6LacbBGX0piHWY/DYxOGCTTFAoRGRHpGIRzTgfNy8jxw4f+rukaVudd4Pc2fwjCTdobJKM8nGNYIYNv9/Dmq9Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.5","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.2"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.10_1669702342565_0.20346623295344402","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221104434":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221221104434","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221221104434","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4ea4fb258f5d4de293640348bdd3a637ce6a9959","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221221104434.tgz","fileCount":6,"integrity":"sha512-YKxqtyImE/5qxA4iwMHCoPSOS+eRUuraH0NCHAUb1nfaY5DmpcVl7oSt1vWyp3OQj4omF64bZuDyhecx/wj+1w==","signatures":[{"sig":"MEUCIBPsMRUuQ+E6kwIZK/Zpkrx1fCTae+2RIYxuo+OGrOtEAiEAzck4BCEwHkt8RHUW/ADUIxEBuH89KbQpo5skUhpTSDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjouPEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjGA//QJbXs4NszBvbqMTu37l2U2ldjEgGzLDyLxEt7v+6BldJXfHA\r\nGX4/j3q+xEV3LhVAi5W4pNjSG6efQBIgAra1C4jDXA2zIAE2StgqBEcp95cb\r\niKLpt18pXJElnFRmHCr4sYUr90ihd3NGsijmPI73oL1x2sse4ishDRFqGdH0\r\ncU4Cy00k6KobT2hbZlo1Ovb9RgQv/7PGYMVui2zHLEb+tvGqII17cZ+YtsLk\r\nT7Mda3T6koKbCtoM+Hs9CtJ0WFmqTw0m1fxVeGAR6HuHZvu22CAik32IJUpM\r\n60EfsmAA9lO9bM1oboDQY6DF0nwziGYnIROQsGs0qyz8jA3IGRSioJbhyy7i\r\neklrCH1akSlOv+S/ALsC7Kt/0h9J2O22KT/1dX7374AMSo8Ou4pzxFu6EFNG\r\nVNDNPqzVRpogKuy/Y3l9Vf+obBg4ohPgCkCI0joAvtKe9uuffG9aAzikNhe/\r\nRipGDlpZmmPguGpDAEbtghKAnsIVXeiiJ7AwHzYW7sIs14Y2MHdF5XJ/7MuX\r\nTsTb5tCS/tEVqrXq1D7lu6AsOc9zftmVOlU81neiZ3IWhuY5SLTs4u/JBQXZ\r\nPZobpYKr/fp36YKIzgbDaOli7vV9FdhAAFHLSvSFM6fZitz7KwDmGp6ILxhn\r\nWGC/rSiQor9Splcx0+WPDtUO9akVj762qWE=\r\n=+9zg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221221104434.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9f0d98d3652d7148501341df8c13f7b2/chakra-ui-popper-0.0.0-dev-20221221104434.tgz","_integrity":"sha512-YKxqtyImE/5qxA4iwMHCoPSOS+eRUuraH0NCHAUb1nfaY5DmpcVl7oSt1vWyp3OQj4omF64bZuDyhecx/wj+1w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.5","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.2"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221221104434_1671619524555_0.8974933418623889","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221110721":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221221110721","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221221110721","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d6d078f64f4d70885169012d2ceb485d8e910049","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221221110721.tgz","fileCount":6,"integrity":"sha512-8ccStFW/Ganfdk0cSl6bxGG+nVDHo9SAM9OWX/MftVR+Xx/EzoCkjAy2ikl3EmK5SdOqYT/iLMSq/lr4N1XxWg==","signatures":[{"sig":"MEUCIC5TbhVuFOR3St/orD575opJgQqqkNBb740f4ohaeNbCAiEArWHP12sLHzc/eN9WByY59U3gSE9PxnNqIRFzbQiMgFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoukbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowuRAAifY+bwTc8/pTyh3eiuXrj6++j6uweJ6vJeFtL3ajZTEkDHO2\r\n8a7FWY9Z6sMgorne+YFBIStl6vqdGVuzhkHKMc3rvFyzgFf8M4ykSU1Ly6Bf\r\nv0su8ELmDWTgJAVc6CGKBbxn7dD6hTUomWzJC/EZjkwbjNDHdnflW6+RIkbA\r\nhZbiZAmRwplR3iOxInIgZ7TEvZ+vL668JwF2BVmBNszMp0xdZ+rFCOgEzQro\r\nuCV/sa8ktz7U2DUPvJ9IMwYNirfmsvmA9yuaureP86v4wZQpca7WrRRaKPWy\r\nv7Inx0zoyW3KLw/9d53Q/Lk1MeGFqK06OHVC0cbyHqdNp+P50w3DiJDFQcU9\r\n9BQPam41y56WourqZVQ/dehhxFvuwl8l+DORyyPuvChuxTiZCFXzJdKy0Fr6\r\nKn/f63svKQAxkBFFsKrkwyRqwyxAKE2bFP5WYcvOLUajwpEpBTyIs7aOGakV\r\n/d6NwfjxBf4PQesptKTe53USlxF00aFXhxRTMs15Ox9rIdN8NyjflZHtsmGt\r\n/I8hWFbvtOdraDTteU+fje1oqxhxV0d4xEjC2w99Xdy35NoSvERTUALfxo8G\r\nSqIyXbE1ucSTNI80cx2XfvnfNTzypEqZmu4GTlvwoyZ0My/bn3/Or0+Imlvz\r\nUD/u1F2jCFXQQaezq9r92VXkelsDND+xsSM=\r\n=sdJd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221221110721.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/aa59c2081d6d680634496b596d891553/chakra-ui-popper-0.0.0-dev-20221221110721.tgz","_integrity":"sha512-8ccStFW/Ganfdk0cSl6bxGG+nVDHo9SAM9OWX/MftVR+Xx/EzoCkjAy2ikl3EmK5SdOqYT/iLMSq/lr4N1XxWg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.5","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221221110721"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221221110721_1671620891158_0.7183257407489403","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221133224":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221221133224","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221221133224","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"65caffaf2685e3c01e04c4e2129aa579b9ab05b7","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221221133224.tgz","fileCount":6,"integrity":"sha512-22V8c2n3LXT1whyfoxl2tH/FqaSuMHXTGnsfrTokidx2ur4FnSjpAsLhLwunlLaVlmpmLhvne6VwVrUu+XQPBQ==","signatures":[{"sig":"MEYCIQDY11jNuTRVea/5Kb8U1TUUGK2Wop9uYh0JkidJI2TcqgIhAL3POOkJiNnXwoAIJPRjpJBILI92KJ4xcWXLMtFrZfvd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjowsbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorNQ/9HKYMdyMI3eVh0HBSyDgqQZkGaCk6RDaWi6RG11rSzHZ2j5DT\r\nsCrB5qZoFqNvj8XKa3nPuhQrzHRqxt1IbFDyP/ws171mcUHHxsv3htsZKNlp\r\nebQJIUK/kh1rIHHGvfaQ1f2FPGHKJ/177tcuFENjrleFmhpLErobh8IaUH/u\r\n/4hgctZzdDAEoWQGHogwX7pe49JT3sTgsDG2HbPcuoRqvZjMkRFeW+HK755H\r\nupnU1QKJ3wu6iVod4aBMJ8GJvYY16WZLoF0J8TfvAv3/X4PXfHDAJ9DVgmpx\r\nI6NtpA2+8xNR+8TT/jM0nyjM3wroQNdeoI6jQidqKrW7Y/lRI8QoSCTw6fqn\r\nhul/z8BplMvBVvZLVXzaUtRvYxvXphXnw3T3S7RReZiKLCKnncv+9vPID6ky\r\n142WbrrMjuwUZbpkPILhEM8JUYyG8lZ9Pb/BlOHFEGFSF08Rnx+//ewOL7+I\r\nUuo5FzjNNgzDr1CoTB3jHGwQaoidkhUs0TYRdCex2r1rZ9tjXgLfK6Z8CTqU\r\nAf+yLLRk7yP/Nw0CdnrWGBI03TBFEbUttszbC1qwtTAtnyx4jS70dVeQJMr8\r\ncL1CooLhWzCBhvbBZNKwjHG9nUUK4T3M5DMoXLGZHmX1k8oU2gux1LY6uVdv\r\neYYfaUV6+oks8VRYc+aHuHJTIDBoLSGnmRY=\r\n=BBT4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221221133224.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/1ddfe1ca1da032855869bf7976672df3/chakra-ui-popper-0.0.0-dev-20221221133224.tgz","_integrity":"sha512-22V8c2n3LXT1whyfoxl2tH/FqaSuMHXTGnsfrTokidx2ur4FnSjpAsLhLwunlLaVlmpmLhvne6VwVrUu+XQPBQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.5","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221221133224"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221221133224_1671629595032_0.8378872988365917","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221152939":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221221152939","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221221152939","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"40ebeae9766a82d553c6a3b7e02464636267b2cc","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221221152939.tgz","fileCount":6,"integrity":"sha512-5IhnIR3derbhwOB4SVgRYARRvBO+dOIwVaN87SPjPEOVoDXvqX1ywAmCikO8zjx6XMIpdH/7jDS4dL2ZGfeVpg==","signatures":[{"sig":"MEYCIQDu6yzW4wHwIYMUJf33zlGFyieI37WYV/znrkjyLaG1kAIhANgAUAunPwpVg55AiTSS/Cpe27Ul6kyAIxhO8aOZ6Ccy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoyaLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNTw//bgbBWaMuwyKRaGML6UoeCpqq6NDyNOPEhv7k/l2sLzyccpNa\r\nEH8oegmK7WxebXPAjkU2RPBjvLdU5zWNB05s0V6U+tuYu56LzEsaH8R2SQSb\r\nirTtOM69z0vi+zZ3i/ojo9SLJSwIpVrcVW8Znf2Va95lVNQoz7KYzLAIqtjD\r\nw/T+mvykMJaaQVpn+NvChUwwWH+l3FsMAHSeSRS4S1gYq4MbFqP+z6DXHT52\r\n3TfpBwtRdcuE71lkqY7v9ixqyqHLHdVTIhlLfQ3W5HYl49MEI+zXwllw7dIb\r\n1mz7M1H9MRsggdLMBOnhGcCYr4FPOUjKdo7Td3cZw/ifcPwwwCJwCB/+reky\r\nLKQrXB1B0vbG4FcWtf8sytapHMKfdBkc/fan437+EA7S7oRafho8zL+2vrsf\r\nGYEcChtg2C/iWrmX6rIzWFWUFhZDZRTFOpEXqK1UbY80GfHG+wjoTuQBENaR\r\n2bEclzVYVsmQOiV3piIhmMIS7j+kvj9EvDM5gbJKVDrUfjcAQHXNKXZcs0xZ\r\njZZc4AvFeaHm5VgwJJMZ0gH/K+t46ueCOYhLl2wsK6DevnHgKVgb4ooXORI8\r\nxIP4d5UlWIrAJGlIr6YPlGq8ot8vzFWDv2xVDnK2FN4xbp5c7uJcLViDr5i0\r\nLPuLtmRuJecOYHwNtK3E/ZdppGNFbU98B5k=\r\n=HG2V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221221152939.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/79775a6d5b899b4d9c419bff0a83eb54/chakra-ui-popper-0.0.0-dev-20221221152939.tgz","_integrity":"sha512-5IhnIR3derbhwOB4SVgRYARRvBO+dOIwVaN87SPjPEOVoDXvqX1ywAmCikO8zjx6XMIpdH/7jDS4dL2ZGfeVpg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.5","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221221152939"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221221152939_1671636619593_0.9360765905178394","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221222051548":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221222051548","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221222051548","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4f87beae63b2322f8bc5be22ce76c9a8bc3272f6","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221222051548.tgz","fileCount":6,"integrity":"sha512-kk56TLZjgYlxlfZC5yTqLZwcJbZu+l2t3qZX3xvQN7xKZuavSkDr8zSi+d8T0VYXJABUUv2ZkIGXTp0nA/oTtg==","signatures":[{"sig":"MEUCIBHEewkRmun2SiqD5WGmLYQdNrVsR59hIWnuI/+yLxEQAiEAuXkI8Fk1U7kAs1IIfV84wiuwkijtEYnh5n+S1F0UXnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo+g3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe0Q//UeU7KiwO/73QXYY0KhKUqvPyb7pNmmGVAX9nkDBRe9X2MwDa\r\nh/66uvL2x2i/2ouIYicoj8uKalKDHXcy+iusMyqyVUMQDc2+vxD5m4Yt68As\r\nCVPGNQ9saer5oTJ2jXx6TXuhLMQJyeI+0mTgGh5tNQ3WC6Ozy/LuIEXHsxzG\r\nlXUyR0sVUI/VI6B5RPPVzSn23Z08S1V6/tSxNIj7Nz+44D8nxUJVRUm/+XKo\r\nNEumwlq5KuscTTKfCU/0aAWw4wsrIIf1bJlCV9BQoh0rHAuOEuCpV6xGmyKh\r\nUpm0Ynuv8O6M4HMsSgzCgwFFLx+dAoLahomx8sFMHfyDVjIxnZCe+fBL9dsF\r\npyZneKLubNhFfkJd1bim3azPGev4DLEkPDkze4mMw7oAYz1g9FAPshJCAMP3\r\nSEPhfwwm7cRErCyng1HzfuA415JNy1Dy880xplG4WjEczt8Tc0wI1KKgKtyW\r\na3HcvXvFp/DI/cLF1GyE24RJaBM0qx7MvHCSNs2WDI5nYmx+jNZZZ+GFy3eH\r\niovtEm2UeTbgXptOU3Ea4JQ5YwZAusJmZ8IASRwjnyP5r0SQMqstVqz9it7a\r\nKef0U2tGhKWXWAbDwVkge4YiD7uGdL+L76hk2usx51zQNof0teq7PvuodISB\r\nbWx42VEkdWysmvtjhozLJ9sFScRvhPbBpak=\r\n=sY2E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-popper-0.0.0-dev-20221222051548.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2aa930035b8000e9e20f4a8882e5ffe8/chakra-ui-popper-0.0.0-dev-20221222051548.tgz","_integrity":"sha512-kk56TLZjgYlxlfZC5yTqLZwcJbZu+l2t3qZX3xvQN7xKZuavSkDr8zSi+d8T0VYXJABUUv2ZkIGXTp0nA/oTtg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.5","@chakra-ui/react-use-merge-refs":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221222051548"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221222051548_1671686199403_0.4414873376263342","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221223180742":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20221223180742","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20221223180742","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"07d6f9166571ffca29cf46d0552a3c6557cac54b","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20221223180742.tgz","fileCount":22,"integrity":"sha512-EcL+Qz+OTh2xrany4Lvr6xDLvEOpaTV1JuVOyJIgt23zFz4WDxk+DCvspAcBCpsMb3alC1BoM8c59KmI1xeYWQ==","signatures":[{"sig":"MEUCIQCkTwW2POvVRd5hvomegrbXNVTwF+ck4uTBxRHD35IokQIgCbQZTewXKhzRpboPDEx6jqQlQbYg+hVuH6hANkfxouU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpe60ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmbQ/9FTrI8/uHt7BkioKEEe3iIoHN9zzSXJGXYhmrLTwB2m2I+WRZ\r\nE3hudn28CSF+23klCfIOSeAM7Q4dkq/hLn6W6mNR3SI/lExyN5PF7p/1BdN7\r\nNzYE6FwksUTSefIfKCs20E/Xc+qvOFb79YAuNInZWV38F9cBXDWy9N8CLIFV\r\nVQCTFl2TJ3Bo3Sc8dfiHXKSZM39FfIYvxJSMlA88psP9nzwdBxTsFPOV7o5J\r\npNQuzTiMaqwPAuvBhipvdU2q44B3tXnij3JvU3OjfhDlf2zQdIKkuYAFJwXo\r\n3vnG9ptUU87sGZzbP5oxPK93visO8gcGX7IcWuwszyTijjyI4YrGSBYiB0zd\r\n2N9+v+AzY4lAQA3sK2fLDFbCsQvksxpCbUDHXcfdh0aEiFP2migD8uflsyZw\r\nPMJ1j1fZ5wD7Nct8ZTAfOPK7RSkruwR0Ubrk+EXHuXt2Y6mPF9i+mD3UyV0i\r\n/w1XCKxhdzhNO8oUNvzX/FYYC9W+yOOxNzt0BLyz39miavUIFO/NaiRvbLfx\r\nP38sgDuH+XRVwi7mMPUzzya54RZmK22Z9qZ8+qKf5jOhyTpboDf61Xdv/O00\r\nI24PeEFXK/h+/yS1G2Sdy07NJ4f9Lf+LMJLG2praQqqTOKmRvemIGTkeTo/H\r\nAKGWXb+RY/y6YmSHnlCMSj4dFc7ZpPCXnLc=\r\n=e8Wx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20221223180742.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b76848abd591e413319effdcc15473ec/chakra-ui-popper-0.0.0-dev-20221223180742.tgz","_integrity":"sha512-EcL+Qz+OTh2xrany4Lvr6xDLvEOpaTV1JuVOyJIgt23zFz4WDxk+DCvspAcBCpsMb3alC1BoM8c59KmI1xeYWQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20221223180742","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20221223180742"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20221223180742"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20221223180742_1671818932521_0.22655633778109596","host":"s3://npm-registry-packages"}},"3.0.11":{"name":"@chakra-ui/popper","version":"3.0.11","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.11","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"00d412d408d4628d55491bd5d3b58e1e23e6c972","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.11.tgz","fileCount":22,"integrity":"sha512-fsKwgq3E0S6FqCzTCQ7HQEr2BOHfHZZMiqvFpGyrIPQ/Esv7aE3Ipw4y4RHTztzJ+vUKK3XTbJzX1cU4RR4a8Q==","signatures":[{"sig":"MEYCIQDDkQU+vC2kFtiz/KH2103qOfpx6+kp/0dwWPC4XC9YXgIhAJJncGgtTz5q23YjXP/2OZHxLEli6O24cDqt203UsoeI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqZ4bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQKg//XlfYRMtenbquvYn27+qAhVQHSHWXiQ0BcGJtkXpFe1EY4EcU\r\naJ5VYS/2uVwLnkt61YH09f1+Cd8SNopcy0m/142Qqo7UhsYTNSeDqc+9kq6o\r\nh9dqIJ9ihLrku0ZwCBWqA/GGhca0npnmL2QPX+oq65w11QishmjwWewyyMV/\r\nXeRnWIKkbHr9/A8vHfZxfRAcSvaO0qkj5ynNOegQ1t+hqtI1AbPu2euTlsjk\r\n4BcRdM34lVg72gI0Rqz/uoEopu4AjJEvprZxXkcTb6nQ+RpWI+CoDqQrfc2b\r\nb0A4PN35mhmp/mm/WA6HjoHhi3JM0cJye9X6uPi1R4Qe3mwVfoPrRwagSOSJ\r\nfFVqSj8IivAgRx8CYCmnCi3l7pgHxJ2wiD8YDVvMCG4n02Uy2anrQ3eG7cw+\r\n9CBeH/SQyofa9HaJyVeh3sD0axfC6OcSTxvDuKtiK77MqA3gnPOyCPZ5LmYt\r\n3N48w3tYhL2A9DJDWBiaFjA+MiRNMUmSOIxXdA0k5N0xDm2284T7XVUucPz3\r\nMovDhZB/Yhqc9SoLBwNxLgiX7wQOFnOMgHDGQT/6WQ3SJZXi2kOpUZtuqj1D\r\nqVLR2Xg4ZrSJTljnnkCNboTQtXnz1aNCBguYcrTaxYs+oV6zjmgjo+8LgeKV\r\nWTASXHw/hZSEirL8HCw337+MkUHgdvho8aE=\r\n=Cjci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-3.0.11.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/412e941a60e32b06e899722017548864/chakra-ui-popper-3.0.11.tgz","_integrity":"sha512-fsKwgq3E0S6FqCzTCQ7HQEr2BOHfHZZMiqvFpGyrIPQ/Esv7aE3Ipw4y4RHTztzJ+vUKK3XTbJzX1cU4RR4a8Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.6","@chakra-ui/react-use-merge-refs":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.3"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.11_1672060443716_0.17156343906846527","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230111211417":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230111211417","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230111211417","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e2742cdb451f89e53b0084f25d9e8ffa4c9df9c9","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230111211417.tgz","fileCount":22,"integrity":"sha512-lFUiWAzXPlYURJkZW03tmOB/b6tISw9ZPt9tbx3dEFJmkkFpB1pzpdSz826swPKCE8V3hvJbGKFz/Op0wc/K2A==","signatures":[{"sig":"MEUCIQCuK+Vibe5tUlmhUyvMceS4nDuruiCV9lZ38rhpjdCyGAIgLAWLX0AQ2VUUdrWQmaVkgM9w/3uJ1ssWQkMsz+daBnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvybwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTTg/9El3qRuofKooaq+is4sIuSu1+cXqRsfy8/dZBjYeBQG83BUBa\r\nxAbt9tEeIOTAPSHk29evZnkL8hm+nUsIg42RR3UPHwwoLgI+rybMQJ50TU8P\r\nR12oyWBbcZlLwdp04osVxZWXTh5URePrMcJxuQmlzIyFz4m91EHaLigRkYvn\r\nCF4ovUioDIVuxT8DqEcNiA/ryNfeZO8WceqD2kKiXjTSwXyvOJWNlxNMIeT9\r\ngkWBVPRoQfn6TI6Lx4VWFqNXySrLVjnVxu7hzCbmBV03oBFHTQWPl/jH42MY\r\nf6+2HgTugoPCnhX8TpGuG7K8gb4vsHwB0z/Z1iZ0z673M+k/SuG4rmHtYmbw\r\nWVP1ksqpqGqQ+K98xyiI0n7Eeklc/KvQsY7SRufrThwxrDs/lJLlWWKtxu9P\r\niUVxJ+GMVy2ASW2Y9YddhFA2YYbP/PsyHoCW9ujMFePkvb5y9E3iS/YcNdxO\r\njl0PHafN+z0dopEWQpm3M1jQjuJ5VpnA6PULXcw3RH6kKQT45qVp5gtNHQ8D\r\nARsl9bR+BrgbHMxf3Cpqz/CP6ZsV+pu5NLG4UXibq6rV9W+odcRMc1UZqr3C\r\nN17ElK7KdmKEHoIPARWFQmcW+1V8Z9mIXsZz+zREgJHcSRHXmc8pQ7lT2iCH\r\nSs+Mut1S2qrICRIfMQwKlk2DRvLmof/MCQI=\r\n=vOaA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230111211417.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3eedbb41b228621a20c75dcebf91c06c/chakra-ui-popper-0.0.0-dev-20230111211417.tgz","_integrity":"sha512-lFUiWAzXPlYURJkZW03tmOB/b6tISw9ZPt9tbx3dEFJmkkFpB1pzpdSz826swPKCE8V3hvJbGKFz/Op0wc/K2A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20230111211417","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230111211417"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20230111211417"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230111211417_1673471728281_0.4634146396189951","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112113621":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230112113621","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230112113621","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e659c170c497cab6a46d883b21f7f4fc57148cc4","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230112113621.tgz","fileCount":22,"integrity":"sha512-dHQh/+DvsLuQg2y7fnlvhzb65Osku8Sx2zhqMsJ8K1Hw08SJPMg+BVeLRtsJNkkQc4v6zeqLwGDXnZKy/kKVYg==","signatures":[{"sig":"MEUCIQDOn++ZYFNp94dayKm0avSEWVLqHRH0LmlVY2u4FgWyZwIgH2iAhl0IlRhl9F1hsnPi+JVCgpNXYwAHrHQ4Cz84fvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv/EJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1+A//ckkDhxqDg+TVTvEKujGlxS/kSg4DYEmh24XoGdc8qdN6rx/6\r\nvk1W4Qsc+wvYyiBYUHHVCY03n2zsUbXP2T/dD9cob9FZGBaKhfq3cflD+tKh\r\nuIGV2Doiwejv3fV986rZ3IsAX60xEgsxGODNbgvfsV5EX2v+Jsvnm1MH0Isj\r\n7mvV372a7QxvKqKpdN6UakjQl1P5J/eyFq5aTzrALBQCU6903ToG7/50BrH9\r\nfWFAVywV50P10xsDoocLSqaZhamCnvDPrA9ZwKJkvC746yxVDpoVP7tpEnyy\r\nqLaecS7PC1zPCcR4fR92q6YQffgD04iLaHExgluKh/0uKo+1mn8yCICHQBOR\r\nRc8G8inZlXtqbnmx/HV0Y43s8Bi1iAv2Ft35PK+aafXbDTYrxc5bh58sqpWG\r\nwjEpZHyFPebJ1xasTnaDlnHPV77UfDXqqfC8pxHT2DA6anHiDDzNrNlI2t+5\r\nh1T19VSKRtucGcgCVEg1SRK1UaOjqzL/EyVGniI3MHMwB4MS1XbJuChQfts/\r\nQbtSYN/I16L1IXr0+VwRmZp236Gjmmzb4zhKFunbNbPFn3LnhZd4pzNKZTTH\r\n6Rc9LLYHuKvSGMt3CiH2oTja+FvAlU/CPl8kt44YVn5qvsI5MA9uUFEifuY7\r\newyEeIPvu+XFNe0iPtsoe2Q0C4jl+IRJYwg=\r\n=fG2l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230112113621.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0132b6b09d43493a812c1d8cda4cc3d6/chakra-ui-popper-0.0.0-dev-20230112113621.tgz","_integrity":"sha512-dHQh/+DvsLuQg2y7fnlvhzb65Osku8Sx2zhqMsJ8K1Hw08SJPMg+BVeLRtsJNkkQc4v6zeqLwGDXnZKy/kKVYg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.2","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20230112113621","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230112113621"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20230112113621"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230112113621_1673523465163_0.6065092282756961","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112141201":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230112141201","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230112141201","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f2e0c12c3135cffe27821c5a02a0ec720c714d65","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230112141201.tgz","fileCount":22,"integrity":"sha512-Ywypir82DxiEIvmVgDM+WuQtZuOGODnJGxA6Ci9DclteyxfYmorOg5Pb7QGWEemeQnLKoBYUry15JNc3uwxENg==","signatures":[{"sig":"MEUCIQCN84OaE/7aXcQoN1j/RbpW+v3JZBeypKkKXCIdFZGihwIgU74TkchCyewkjexDYqetEpfsDHLXPki3fLGp47yv73U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBWUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5bA/+MAlhuV3b+g0QZVeVc4nfGlg++NPlVsa3C8e2aw21DlKmocKQ\r\nhmrCZfg1jwcGrFIjDbox/BhNf3nkBP1RyZj9VkM9EnH82HLdEmYTGnjqRPU4\r\nCbqcvcz/Nz+tjsFTq/1m1K4EXJcdayX+KB8j+TVdL8dyrBwiRtyqHr099p1e\r\nuYUxU9PsR338s6NoSPE9m9PnoamJsPrZI8DBH1XqYMb+H/LEEWvpgKdPJ+6X\r\nBkmnq8ZUxI9xMnMwDbcuK1Cybn3t5zaZqVR7CUC8IILTxQUiWMDM8a9mDrAI\r\nMXe35hYqq0LJPO6YyaVZjO/HKd1x9rAAXK8VzlJj9MBl+POa+3aYMT48HWBm\r\n3OUY+QivtmZ0oZTBgmcQ3riszn7o6NhNXXi8YqiMkd2atThq+nZDpvjcmUWF\r\nhfvz1NzIZXBS9/ddaFyD6ow2eugRBzReUzpOiZfiuo1W22qYdpb7rmRBzYUj\r\nDW4iVgrE9Bt6SolxalbdKIExp0X4siU8DHH84VybaD/LVZISYZBVUK7f8RmM\r\nWFb5Lx+OIxZxRvPx6LNmgL9QZEmeaEpI+ew+icK0ouG78l2fJGTo74kjnevu\r\nzZ64tRbLZNZ66hdrb5lpMFx1pMTgzGsB4ttup0OAphQv5qLAy6ZMFNhWTji7\r\n6Z95kyXPJh3bGOhjmCA/ygjZdiJLTvMhNOg=\r\n=2PNY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230112141201.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8ea1dba2e8a5acab5d8fe8aaa30636af/chakra-ui-popper-0.0.0-dev-20230112141201.tgz","_integrity":"sha512-Ywypir82DxiEIvmVgDM+WuQtZuOGODnJGxA6Ci9DclteyxfYmorOg5Pb7QGWEemeQnLKoBYUry15JNc3uwxENg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.3","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20230112141201","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230112141201"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20230112141201"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230112141201_1673532819902_0.5328137852211372","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112143332":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230112143332","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230112143332","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"afe59614f4ac983f144a7ebf6d07ddc2d198f509","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230112143332.tgz","fileCount":22,"integrity":"sha512-sCEbV/8RoIWgPA1sQJAoP5BdhfzRfJA0VySTSLH2OR2FxxEIITdw41sEH7wCxLcJ81g3rTIRQpjqkFsLKjIekw==","signatures":[{"sig":"MEUCIQDtaf1eKyL1nBtoS33hDCtADKpoInZOQPkrygjFQe//IAIgZ/HKVRMo9TYhGgZylocIiId1FK4BHuKA4npU/Ilsmr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBqdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo96hAAhnNIqK7Y9MPMsEXY7E6oiNGM6N3OmwJvsYrGEigwwqJVWTdk\r\nACsHTGbXdhJYYAkOryBXvUlhaS9Xe4d9PnGKgInB4vzd5QdMdpRHoonJH6PH\r\nCYDnk9KHS5pQ7T+VLbqeuynTM3Ny+9qr7VZUTPupeusewbgqiViasEyUfoY9\r\n3ox9AqDL4+qhCtde3OqR/0JsJqMlEONTSwrgd3mwBx1G1W0qgqMxC5d1Tx8N\r\nQvwlH1TLzkJjlkU+47Y2n0WuOW/TsDgPo6xKhExzrPsF9TWSZUdNdBDof10p\r\ni2Q7XDTMRJduxLAMB8Vkoghm8Ja4xU2aXp6Sf0wEs3nAC2sZL1XoVWWuDtW+\r\nmeTXBzraQJuDAZR53Q5VZcQLPQJsoPxw05ysf39UQxnWEaK8BkG1IkPABFYx\r\nvms6K/IaXcK7Qex5NS6T9/KNoFo8GpchQhqOBX6ZNIu7LZG+mFsFeAyJalld\r\nYmhmSYWkDdksMzja9dIupWxrX5uW2BMILeii1zWnvWi+AEpv2mHjDDNBY8KV\r\nj8YCXa2KROnc5qGNQwdK18ZasL+PzIGY+3g6HVGgjk9iE04vWUu17qjc7YWz\r\nYy+uuE0eaH5FTFd+579pMR5oz57rGpUgOijTqA1y+g6eZNwZ3jFKIRjPnON8\r\neduNjmVnZ/BE2xz06s6NfEu0OV4i9X2k4xg=\r\n=yyNx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230112143332.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6079598e46b8f259c061a1e1563d6197/chakra-ui-popper-0.0.0-dev-20230112143332.tgz","_integrity":"sha512-sCEbV/8RoIWgPA1sQJAoP5BdhfzRfJA0VySTSLH2OR2FxxEIITdw41sEH7wCxLcJ81g3rTIRQpjqkFsLKjIekw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.3","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20230112143332","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230112143332"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20230112143332"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230112143332_1673534109006_0.5925403874241744","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112145104":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230112145104","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230112145104","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c91a632ee699dd5c05db9569630bd4cdf84df9ac","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230112145104.tgz","fileCount":22,"integrity":"sha512-LYAM47oH8+rtBO5NXO37ucXfHmLCQBMu4ZEVEqMB8nIugXGz5dmHY7VAF+r1Wgy3r9p0wlZ6IrR++OEPztg6Jg==","signatures":[{"sig":"MEUCIQC7aFHRdZlBtSx5eTA0+YmDl2W4GhTAawdGMLQe+zdo7gIgE86aGVMHZQSg7cZfVDZK6BO7aXPsfmhgdSAaae3e02M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwB6dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/ow/8CaVLLRHORYNqbTkHgQ9lbnkmV946DQGu3XfIJOMxqxIPoXuM\r\nbbBDlYzSXfzGsMl4jgYJYxlOixOy+CKT6YLcvHpPQE0sFkf3DNfNOyUBq7LF\r\nQvANQlHJMc9Lr88UTmac+CE2YHLSN/I/MzOJ5V+o+irxElrRb05imSqzJ8Pa\r\n7n46EJ3JaSxm2slpH81562cjEi9RpVTKoguwgHozsqZmQ0cUeZCgaRHbAPxE\r\nbc36UTnJR8esimGVftizpz5MpwNHiL0YJGpIYySyex6aCcj8BI/JdYRHMyAw\r\na2yeLMYv/HTX4fIfxnLK8MffFHffPtPEieadayBr7TW32/3Af7lcp6GPM0TI\r\nZ703KhKmmRifIK7K2+k2fsaJCWGB/dgEwOFu/v/+ukfVzD3fPSGpzNSVHF3X\r\nD1q5L6O3Ojvc9S4GgqKSVx/4DuqGegla84makiBvUkTFccvgUFfL5BxWSEAz\r\nyNW4cYrCFxh1/PLtKyCcfhHIK/2fuxLY8w88H4l/gN3o/ubO5irizoJpODMA\r\nsOPTRgpHoXpKMGc60XfQ8kZUbakEMtYegNXOtvAbYuKzV4REMdRdpTlXDJh8\r\n7N8lXUqW4JieV3ICAiircH8DNI9mJAXCIqWjjwP4IggMgKoXf12lmeuNgCTN\r\ndVM85fsG5XnD3Yg6AeqBhl5nt5la90HaPZ8=\r\n=IoNV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230112145104.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a9077422994855f633c2f032854283bc/chakra-ui-popper-0.0.0-dev-20230112145104.tgz","_integrity":"sha512-LYAM47oH8+rtBO5NXO37ucXfHmLCQBMu4ZEVEqMB8nIugXGz5dmHY7VAF+r1Wgy3r9p0wlZ6IrR++OEPztg6Jg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.3","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20230112145104","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230112145104"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20230112145104"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230112145104_1673535133562_0.3667607747902757","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112152756":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230112152756","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230112152756","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"23b8b23c2b91fe77cc4e11a8c1742e387630287d","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230112152756.tgz","fileCount":22,"integrity":"sha512-I+N/G8q9ZDVkK6jk7feBO7jwQ/6aoL1deafNlHSK00a1vuvT8WDyFTYeWm0eqRyvweUP5GXu727uHMzG9rcGkw==","signatures":[{"sig":"MEQCIB4cDvrTSDlGO9iklFHmSSxFHhZwRIrGizUzkka1duBbAiBIbxJ7YxKTLzg2/YZFtIDMLBUSCajanf9aa28E4LZ5/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwCdKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJ/g/+K1IqDfdYAX7UppQigziou4MYqCFtskyT/jPFWwprU0A56jC7\r\nPTararfDh9FYAkOgsDiiKVYkcW/jH/O0a6qt5N0o5vnOGQ/WdJU1mL8F0m/u\r\nLGMoRImTjef1BBqcFIaZkqGbntlNnZSgKJwlS7HcoOgmdf34roTle9GASK0p\r\n3S1jDGEVj3XLIKvBVbVfkghOB2PZfwaCvM1Fc6b27NyqtE8+Zn5Xy1Swz5wQ\r\nunZIcL8/3AgViaP/RNVunkQwrU9LE2J8VLpC0VrG9E14ANdNclM8dIHsrx9C\r\ngUJ1ARmzpCTaYBLG4XItGnLN5Q0SHZfaa90KjuRpIfBsc0wfrAVp+DVzc9qF\r\n0Q8swTbHty0XgFrSbYoh1A7J4kMHq4XRLdDFV2zl98DE9wA/imj9rU1kwrFj\r\njCxhuDhVZwZzQ5tev74huuXg2q0eKygbj+YBIuI1AMHWkapBuOY2GV1ypz4g\r\n7Qd04yyJzCu0vM4V3tMIp1T0s3OiRWjXuhTozTf98cK5aIgXkZcFhbIzAKc6\r\nNfGCUWK6bk0tyJmw+b7drHkWaSYNd5vMYsFKGWg0nkPac6GuMSNm/yScQTS4\r\nEv2wDuOMfW77ZyTBUJdFPCJQlj0gfoSPW1FalmNukvZCTf+0VRETNByD+/fL\r\nFoj/Q8rVnbc/LfdSyjauCm6exAb7nurM3gE=\r\n=IvP2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230112152756.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7cc197facb33a91b1dfdb2573393a5f6/chakra-ui-popper-0.0.0-dev-20230112152756.tgz","_integrity":"sha512-I+N/G8q9ZDVkK6jk7feBO7jwQ/6aoL1deafNlHSK00a1vuvT8WDyFTYeWm0eqRyvweUP5GXu727uHMzG9rcGkw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.3","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20230112152756","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230112152756"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20230112152756"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230112152756_1673537354126_0.5539953017068329","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112154520":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230112154520","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230112154520","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"df24c83db0e8feab647a02655e3aeb37de8c4513","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230112154520.tgz","fileCount":22,"integrity":"sha512-0IFP3eJeRDBkniWNsv9yvHEfmkM+rXdiFgqW92uZuBH58Ihx//iTLPK6iYUa5jZNzMcxow6ZYdrdKctqfT2s0w==","signatures":[{"sig":"MEQCIEDS+8e9OChxHS73j1x6VJsOC3W0RnV/tzFdpzuKdfnHAiBV/ZdT4nT0MdqWGsR49mQy9z5B0tpSnKVwO0wXEUSGHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwCtYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi6A/7BzvO3BNtLfJpUpQuWPTM7Pg9pybNSn0IbXtKySMKx0Vl7FE7\r\nPkTv9+prJDRK7bd75Wu99TohYDYch/wPYPse+8Trnkpuq9zC4pTK++OfnfM+\r\nc/VRXj5twYUNZ+OKgDaIkJf3NY5qA59mSZ7ZrnHkJT9l+Bm8inAAiLM1VMyl\r\nviESHreQyuEM4jX88QADrgRkR6VgSz+KvGI8W1TdDYFV3Pt+kYSutlmyadrG\r\njEjFYiZp9NDca0ikyjIKv6lyJGjTgSRgb/rtXzGOo7dWFSbleGbRGeWuvtiw\r\n+YZoHN6zcmrGkxUgZisvjA/9qz8FW9V1Mj3iS/+++egcCA4bb/6lClY6EG0i\r\npWkKq8mQNNGByOxepGKBGPOoYEkJxhy9FAp7/EZnK/DizbgsOYFMZr4h6LoR\r\ntQ5alS/eJ8N5uxO6sByEKgf0zGBbTrvohQimWDqWTdSuQnboapp77Ej6Mg8v\r\nEtzQ+9ZxRb3xUYTO5eJuvlt3QuuJojxOQNVdAPaHLxPyoBKUyv362UEBYso0\r\nOMuADtGetuSFcG7n1tyMt2dTOQ4Vc1IBNyyu+L62kRwEn/qlt6ow3wOcWGeF\r\nx+wJzXrvGDJ48q/oNEpsqx3zOms2ScXE3a2/PNQpcGw8ar2SPGY3KhWkN4iY\r\n8OxldchPogMyPMlJqUH0GjuB0QW+iqxL7Ts=\r\n=205A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230112154520.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f011253ce4bd5942c5cb25b834821a1e/chakra-ui-popper-0.0.0-dev-20230112154520.tgz","_integrity":"sha512-0IFP3eJeRDBkniWNsv9yvHEfmkM+rXdiFgqW92uZuBH58Ihx//iTLPK6iYUa5jZNzMcxow6ZYdrdKctqfT2s0w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.3","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"0.0.0-dev-20230112154520","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230112154520"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"0.0.0-dev-20230112154520"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230112154520_1673538392670_0.443266791735085","host":"s3://npm-registry-packages"}},"3.0.12":{"name":"@chakra-ui/popper","version":"3.0.12","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.12","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4ec6ad27e7185eab28ac461534d119a7b50b0912","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.12.tgz","fileCount":22,"integrity":"sha512-mJjyg1RalNusgRoB1HNryFlWTkgPWRVBAHwYW38AHRQFWbBRwdEV1lxWP8Ty+a++0rTXgnskzamF+bP5fRMpng==","signatures":[{"sig":"MEUCIQC7rrKJ3muDlciBIwM3ZHN3oyMNDThtjd6qBj8Xym3sIAIgEq/rkTS0SHNE5Nfvv0oFnIfrhGEdf/HwX/TYkA4i564=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwC/lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphZhAAltjh/d+0fjU55z/9YMXq1jVtNiKzI7AM6iKOtweA1nxapviv\r\nB2jKOe/mtGF4iZ6unJGEcWGy5MSYZUDquYwDf43osaygixjDCN8zDRXu1zOZ\r\nvMlf/ih7aj136l0ZJC/eR8JuWkRd+G38ePAnKfDQ79qs6f0ci4Q3Pqb4VjwH\r\nXaYwDkZ6UPkxRUZwzAde0tx7JnkGE5jEdGsbpMbVMv8kRum3A61+aLRhUFUr\r\nLvsB6YAxhWj3twwzkUNHQ9NdoKE0fc+SmBZOa44wB6O9+/2dkWZ9CpSDFy/6\r\nQwdZeVV7+OAsdd8wOwl4T2nNqyCyLBUqlU2sDDmH1nJDRkGKuoWrGzBDPGWQ\r\n/jke3rkxAC5zITGCyF+eDRE8BNOuRngtc/gDWFL3bGDHWlAaEt2k5tNTXzNo\r\n5jDB2k779b8kTHF9pX4033n8prULOYMpSlFlwDYczrxNuMU6woeIKYKhj+wg\r\njoEArtCr11A1Emo6ZUHhtuKGjZnK3lceXRoDmLhcaYlww7kSWGkqduBRhroz\r\n+YbEMV6GkZsKzEiVjtCpzLgbA86kQEqewzTke1ZmjvP/68uU4YH7f1+vEK6W\r\nqeTMd6QcXzoGC4c6ZNco26pbW9zp7JBapqkocdVabgvLrU3xahv+kq1xysxO\r\n/6VsBGztvEZsLLv1InifNLd93P2EcBK/+fs=\r\n=vFCd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-3.0.12.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6a00c8fbd3461ac5414fc7e435efb634/chakra-ui-popper-3.0.12.tgz","_integrity":"sha512-mJjyg1RalNusgRoB1HNryFlWTkgPWRVBAHwYW38AHRQFWbBRwdEV1lxWP8Ty+a++0rTXgnskzamF+bP5fRMpng==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.3","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"2.0.7"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.5"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.12_1673539557622_0.2546383450386567","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230116120206":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230116120206","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230116120206","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c23205e327c151bc50412d05fc96cf3a3d54d737","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230116120206.tgz","fileCount":22,"integrity":"sha512-RQBtQlfLOVy8tdL7VbD6a8j44NL5kBC/hpmzdyH+i7b+9vV166eBSVew+EYzjB4+1XiAJPII7vD098jlxtjdBQ==","signatures":[{"sig":"MEUCIDPT+lE8x0BdJe16TdsezKV6PfvPKIRu4owdjKilhn4uAiEArN0M9ZSbhWmeeWDbpT07vU3FduGgoi0cWrUvO/tOkEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxTz2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+SQ//ZPGpRvNu5Of1uwWDwRiK3hTTAAlKdbZml5VitbyhXJLxkbqz\r\noLvCCsVQSrGvMCbhJ93l7kxjjTDz351YJ9D4cRD8WLsJ3a4oE891N8Ec9x6G\r\nA1zkrY2lwajqUCUaSv9o4VPm+JI0zJjahJdAwQdSQ/F8sGmnRFJ9iEkbinyi\r\njhkDX2TqR4eyHxeWKWRImSt2fTUxszxtUal7BZuRUydlHfJ9G42llfltAbOI\r\ngAXsUX71jr9z9NWFNogDFnBxDX9RgNMMuHl0KydQgUivMt1TB5GRoxuKHdmA\r\nkrrFO4KbbFhg1pGniKeNPJg2ed5Y3lmZs4vrBVOtUCU/PyRtQ89SfyxD/EQu\r\nSumvRc4NKdddQVp9rKpRIWau+E7LMZcDBfft1iBF5r2JKo7Bh2Bj3Qg1u4ZV\r\nXtCHZ4uYGaE6n5LN7kk4IdgdnaAdTNWq74xkJOO0LRAJ6uB/2BZCtrRZoQR2\r\nus/F34Z7JpxHltZZ212mt6KGTufpzPHfQexeYd3jBrVNyNhmMyLIxmhHO5l+\r\nkPXzVM/4CIgqBqQxzmi92nJ3F2m1BOGRWbHgICM0sqVJ/5/VjeolKxFq7b8k\r\n+jcsFG2vK6IujlM05OeRttaGcih8WO8Lyp69+KaXnsgmFfTxg+EMz7xu8qHQ\r\niP1EYJ4O6TwXLDei48hzymqB6NfWNAOZf/s=\r\n=NlT+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230116120206.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/91d11514b5409b3e5f9c3c594a196122/chakra-ui-popper-0.0.0-dev-20230116120206.tgz","_integrity":"sha512-RQBtQlfLOVy8tdL7VbD6a8j44NL5kBC/hpmzdyH+i7b+9vV166eBSVew+EYzjB4+1XiAJPII7vD098jlxtjdBQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.3","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"2.0.7"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.5"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230116120206_1673870582297_0.221785254152026","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230116122157":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230116122157","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230116122157","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"895dad65b012f5762d843a14ce46aa08500edabe","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230116122157.tgz","fileCount":22,"integrity":"sha512-BOPc16CXTUe4tdQCJ1BlqiHrz0NS5B2jEdOO5o8WseRbBM3JP/RiT9zORkMLnIM4nyAvJ8vS4kVGMzhWqAVDKA==","signatures":[{"sig":"MEUCIQD38iEknnyBjzddvfbx82741gsz9twEzb8e9i7J8haocgIgH0kYKAwpsLhxo9Ft0lrx9BKYbu7lABHb36l+4Tc6tv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxUGuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMIQ//deOGYf3no3+J/7nKnWuXzvnU/x5cJMSJ8kDvPV8JmFaHJ9Dz\r\n6oPER+cx3WoC636zx4hcxbtaEmN8c7GtJsRb01isndvI2AumoepVjiBaicAz\r\nJwZwVOJuX7K12dUyhsEW/ieQaPA6wlFgSLYe50qtDtRFQX84msL8qKzcQ2c+\r\nxXYIVWOqXAQWIoI/QQCOKG0OiU6kZ74dBG0a/eWMqMUq1SFIkTvjzRBRmd1h\r\nht7y2U+EsOzO4BSJYnRqr+ud7w0CsAFkJ3FP7o9ZW5163P20hS8l2ENllexz\r\nTMfmfxE/sdhO73T+XNfuXGgogy09cbho5J4Azjq4Kx6D8rzVTwL+qYRDmxxO\r\n0gJpr/WLOiVmQH2vvz70zus395qWuiiVqcRnQm2ujEAMYlmlclXxIbQtZm3/\r\ni5Cx8U7p+3x7iNTFK604ii8QyEDiK7+P23gHu7Te+1q7HItdW2PCUmrG+nUd\r\nExDL1NqhBhWead24FGvrFFZVj0JHedFkTpTWvtkPthmSFrZKKJS4X5slZjYM\r\naYa8s9KOZypNktP0zoUGMd3gjK+nqqLkfhdmoJttc1d0tk42g8MQM15qO69+\r\nfufIE8coO8YimekWKFHntugzhuGr6rgnpGM72N6gSj6oMPyVN+6yrLmv8YKb\r\nPjLsus2lZ7Rnpyl5X6oI3kC+NTwugKCoqPo=\r\n=Mavq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230116122157.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5969b8b778e8bfeb708fcd46cde116a8/chakra-ui-popper-0.0.0-dev-20230116122157.tgz","_integrity":"sha512-BOPc16CXTUe4tdQCJ1BlqiHrz0NS5B2jEdOO5o8WseRbBM3JP/RiT9zORkMLnIM4nyAvJ8vS4kVGMzhWqAVDKA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.3","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"2.0.7"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.5"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230116122157_1673871790326_0.27119703250001836","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230116124502":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230116124502","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230116124502","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7798b4925f69e4a58d0b77cb6a759c4ed44f730e","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230116124502.tgz","fileCount":22,"integrity":"sha512-YpdG6T3qXGuQBqRZK9i5TTT2wXWkjLUitkpkhyq/L1DCs/n6vpx/L9vrtd57t99aWn41cwONLkPIqRwEscuV7g==","signatures":[{"sig":"MEUCIQChyQCPwOjfxMHbRFHOgOnj9zaN2lpNvX3gPefS4FwPLgIgPjFPWzXSvUaoVhEqVrrIl7ZVQmr9Tz5FmRESFyOxLAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxUcNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5KhAAknD1RSXS1KEqAV0pDBzz8Bi9vcYOtcSf/lbJBHKTXf6kawRY\r\nNGHgnKe3OkvM0iv13tPkP4gXTjincvgiscEXWbLmOwI6uJnVGq5zQZ/Hzjps\r\nin0G3ZMVs9U6zkYG2+tU2c+CXv0e+VsZLYvKGbP5XGN7grymD2gbpr2RXM45\r\noy6m6yuKf3Pmc1Nf3cilINZ6F1e55Yo73rTXYovLhkuccUZ0SnsinHBYyxUb\r\nYgFsZX5B8lWWReZ1CrJE4BJ3cjBLMIrCziOZKQKb2AOq5QGCpTL/7u6Wm5+l\r\nflp5Blfn16LyZ2lDLSl1CaEIQfD77Sv4Mgh7B2bOkt/prYXrwHgpm7le70tq\r\nQvCXV1TbIxPJAgtAp4cZgy2JIwH+nyik6riPREf7JlAqVRUCFgU1NSV52dnI\r\nu3O0dRW1BvwiYTwyITf6b3g7DWSmBGcemj4qhzzyPFaOgwf0RQACp2DoqYsU\r\nWf6Vhr+o9lOoOcZ40KDMjQjzX/dhTwnlTKJ+DAtG0dSe5QDZvU4IdHjHZQ42\r\niza60z8gqI0h03+P7t42pL4IeFTo5xUFfkadGVDLDDxKGt250FdWPLW8lU2j\r\nO/viurG+pERveLwy38kBz/4Adkpc0S1Hr3g3VcdaeyYdFbaYQQyGiSOyLZ6H\r\nHSg7CiQFhM+hrK0s35tEyFnF3vK/y+bjtsM=\r\n=Naqc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230116124502.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c2fba0be29e30fb5c8c6421ce7cc3a61/chakra-ui-popper-0.0.0-dev-20230116124502.tgz","_integrity":"sha512-YpdG6T3qXGuQBqRZK9i5TTT2wXWkjLUitkpkhyq/L1DCs/n6vpx/L9vrtd57t99aWn41cwONLkPIqRwEscuV7g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.3","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"2.0.7"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.5"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230116124502_1673873165235_0.9229141039743964","host":"s3://npm-registry-packages"}},"3.0.13":{"name":"@chakra-ui/popper","version":"3.0.13","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.13","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"914a90e9ae2b83d39a0f40a5454267f1266a2cb6","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.13.tgz","fileCount":22,"integrity":"sha512-FwtmYz80Ju8oK3Z1HQfisUE7JIMmDsCQsRBu6XuJ3TFQnBHit73yjZmxKjuRJ4JgyT4WBnZoTF3ATbRKSagBeg==","signatures":[{"sig":"MEQCIHLI9UBTwHCySzP1Vqff1MgD4QUzbY229oewaMezdshFAiAdqqwqUa9eIg1iaxusx6FClaTrb9xUt1qq2v+1DBr6xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxWggACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwiQ/9GcgAFM9CyL21WYqpibojQRNa73VA4eACmB1I4mwB9PwhXBK9\r\ntVT4Hax7YPUV3U+LnwIRTQyPwu+2uOqwEiZcsA+g3NnCTLWOoYsKdCz/lC6c\r\nMKNkLDS2cnArUu4ELLRLUrfVbWctnyGBK1ZI189HolVvaiJDFNFLZWEVRBjO\r\nFJNm3xkB80hwXLO4Ym7NdWKns2ohXUODABLeYj5VP8JOWNUlGK/tCIr/VRxE\r\nLVLdcO6iFhdb248a5M1fNznQOdqo62zrOGrS6rutDXG+eqqI5yUYCymJmTIA\r\n2uX30oX7gCuJY6VUtJ9S661nq5T6TMLDU+V3rny8dFJqLDFghAdiVMC0D/DW\r\nVVzKYctT3P2sYN38K8tSOIYEdOSRPM6l+DAX6TnbI/Kz4PM/Fo7rClns/OWX\r\nQ+YRqQqDCeuS2QA0kSgb2u9qYdvOxeTw7YrPu0iqWozUrwEL0XIJ1laiDRK0\r\nK0X4UajXb7IUFmTV44oRA8W7AuxECyqYdgt5BDwMPU3IB8OpdphfL47zdURr\r\nUaWRha4H4YExJHceR5BgBRE2jR+CjOr1c1+DFko1UFi/Z2dH+hKM1rX8KYQB\r\nTEdvxTNHWZd4S1/XCPhetgfxp0N7GiTiTUZTrET9m9DuLys8mmyAJ1oetZLf\r\nghfvNjQGNOPjCFHG4ZCU1+jEML1e+K4cF40=\r\n=wjae\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-3.0.13.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e50f94978fecf85e44a76190d00c8cd1/chakra-ui-popper-3.0.13.tgz","_integrity":"sha512-FwtmYz80Ju8oK3Z1HQfisUE7JIMmDsCQsRBu6XuJ3TFQnBHit73yjZmxKjuRJ4JgyT4WBnZoTF3ATbRKSagBeg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"8.19.3","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"2.0.7"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.1.5"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.13_1673881632600_0.15060399868450003","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230502164338":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230502164338","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230502164338","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"471dc306d9c2e54ade49b74cf8f0a7bf5aa887ca","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230502164338.tgz","fileCount":22,"integrity":"sha512-5jcV/3o07qRH9k3w0dyqdpwgoU0yhtToGMRQeoHtQwKLh3fBvXwSh4RE4GuR+BnP0WPNlzITIfRTlBzoTjU8cQ==","signatures":[{"sig":"MEUCIH0i1c615Ixgmm2IqJ4t2ysPSxtxYFaNn3iYqhwDevc/AiEAhCuex6egq8vNjSSDINtrnq9QgrMdxUO31kbM3VuBeGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUT3vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKSQ//cWPUecvfuPzZ+R+N5m7N6gLGl7PhuYwv7di2dQejpIXTks1n\r\n9610/Et0hCjfGjNWGIQy7c6SyZihLQgSyIZsKRAGLPj3egYqw3uu6j7WYGBw\r\najAiVrQZ4NjM6NB14981t/MZslRACwU4zC01U+tUbL2fjXaObzXuNas1HX2g\r\nBOZauCHnCJmREW3t5UQMQn/IfHS9UI5L4eE+sYq2MZ1ya4GNfW6cx4LGGyFY\r\nEH6UGBwQ/wbejfW1eLXadNhh0B4tXDyu37HYTrSVTuhhFuyrFcLoLazoGqFo\r\ncoIbQFtLAnVhaUplFUTq8K2jEQH4cGuB5MSHQNTk+2yYIa6twGsPWVeUNDM6\r\nRrEvzPa4kgyH5cv5Fsd4q5r8NEk3CQyx9fFZHZipDr10290zpRJL1yPHzycr\r\n80z/HSGHSU6b5JqGeYmKv9oudQxF2O5/OZwdaJRVxWGGOqEJO11gTmy959wx\r\nauZUnQJ92dsTDCC/tBLCJ4MGkBmzMn3o//MdXVo6hUGQK27i944YONWZpgUb\r\n5VGt819UjLelku100uVy+PfrnrcC/rmqxJ6RNbcJDr/adsFodkCNmgvaaf1U\r\nUytV89TJhNl5pbwCFoST8SnKeT0S5Wd3jkNHJCSdlyRj4hnCCOUMOywVRF2y\r\nior+Xe7gEsjq2BNYiI9mMI0NcHxdsdlwJOM=\r\n=+ZS8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230502164338.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/40c9da62b0baa186a9bb8fbd25378218/chakra-ui-popper-0.0.0-dev-20230502164338.tgz","_integrity":"sha512-5jcV/3o07qRH9k3w0dyqdpwgoU0yhtToGMRQeoHtQwKLh3fBvXwSh4RE4GuR+BnP0WPNlzITIfRTlBzoTjU8cQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"9.5.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"2.0.7"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.2.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230502164338_1683045871564_0.22421785535179906","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230502211538":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230502211538","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230502211538","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bdf08c9288bbc240a0cd12a55f94ee9fd27e176c","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230502211538.tgz","fileCount":22,"integrity":"sha512-2VEcIE1a9cdvwgbtXo7lYSus3JscNYHwkVPrePhxKTPmrCPg4GNXkFV+ij1akSuhiHpIos3ehk5S0QK12xnfig==","signatures":[{"sig":"MEYCIQDDYOrUu9FAuq6IuDotV/kHvNMDsPfijrWUTCMorcakLAIhAOaa3DYgwqrZKBlndOX3tpYdc5C9q/R7spm2JKLDMDMM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUX2sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyZQ//VBOwRpwh6vk3d13dA9q7i0r3tJrOa38XEhKLYqmf64llHAi5\r\nuQnMXbofPkx5bQuNFll+4XOs+wTBljndPphyWmPnf6C1SKYOJcnpCiWYNalK\r\nvqBIfjC3LNszDwII2EfX1Orj8Yf7dEEUl1kPp1Nq2V9rFBYdV9YVSB2XR6Uz\r\ndH11iEHbapmgRohiT+bcwrD60lG8eznJt0MKhR4zZ1Kja+u74+W39WeV5pxr\r\n57QJ7EbIDp73UlVPKVx55ETH0kR3DbMmgWQDVkwqFj5AwewXxCq5v4OMcxlg\r\nhpRwkZVgiYFmQchbJ1uJrLFZa5vG1elORalpvA3CCdAG2AW+CjNeS5i/8JNc\r\n2XpsukUYwH7M3u07yv7y9hciA7eLtFEcFxq0PifoRQdJb5hp0t5Lp02A68aC\r\ngCRWPH+nrCko+vtQ/ERLm3SO1Zt0miARByYIdkSRaM5CpTHzjh+lZfA5t5YA\r\nqTwBYnxkpJvd7DG3qTtBIQWAliF76yR35uf86u8JNUrNAjWouS39c6+frMPY\r\n7spUL8ZAatWMOvdw7zNln9MSpzoiWEVKSho+T0d0zAdvCOM7p/Hx1SmYFJlX\r\n78EWnO05fT8JJ7pOhbSTplO4cktqt3NYfsKvuAeQ+muxDlq+WHDxNKO9pN+D\r\nuUjCxULKoLpHN7j1cR8cVM8fY4lhwqHT9Ac=\r\n=WeH6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-0.0.0-dev-20230502211538.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/72358472649f8c7fb1873567d501faf3/chakra-ui-popper-0.0.0-dev-20230502211538.tgz","_integrity":"sha512-2VEcIE1a9cdvwgbtXo7lYSus3JscNYHwkVPrePhxKTPmrCPg4GNXkFV+ij1akSuhiHpIos3ehk5S0QK12xnfig==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"9.5.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"2.0.7"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.2.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230502211538_1683062188308_0.8700630066156212","host":"s3://npm-registry-packages"}},"3.0.14":{"name":"@chakra-ui/popper","version":"3.0.14","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.0.14","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"598feec8825df99270585319f7becbb6cf33558a","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.14.tgz","fileCount":22,"integrity":"sha512-RDMmmSfjsmHJbVn2agDyoJpTbQK33fxx//njwJdeyM0zTG/3/4xjI/Cxru3acJ2Y+1jFGmPqhO81stFjnbtfIw==","signatures":[{"sig":"MEUCIFiUR7UQ0r14CHU1wfuPWwf5Sjwu2H98Q584iWkdYxCnAiEA8LGB+QwIYt+CEPNE9PDtjrfywHw0KnQLhu4jb4OgIp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUjGAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRYg//XtLAxzEEFZpUR+bLVLsrPPAE6zUBRQJiEZ5VQZRrvOrUxzpK\r\nISQsMqjPFgU3sYPJTk6LvAqBR8qiobtk7ZoYvVNiKJ91uamR5Il8GheuRcNa\r\nJ0U2ul7dU1bcgVn1BfhIM9aPN61MA81eJUMKmnpiTTTH4VyEeQ7ZOSLOblV4\r\n2N+QnjPIYOC67oHXH8hRJ4SPuZMhUvAnENYhvWJV/jGpjF129Nm/ez9JuiU0\r\nJSUjCE0Ii/ZyLe2teW00cmCubg06My8jgtlDEeQiWK0BiDYxPtuGfCLP6Pum\r\nyq5d10pU151l+luB8QuYqRtACDlskepGcZNQ62yEhbDXX9xnavEDHl2XQK1O\r\ntPFucNbhu+hAT/dMs2Dclbbin3S8rLuVYHdpj6eUS7qN67WnUM05c7tk1Op8\r\n3mvMvUsxu5dJzkx/Hfozm//eekR8Gq2hDJtGi4ESGFLO7nzUf/VW9M/HqaVD\r\nAN0GPxMOXGq80SlelO2wwb+Tzwc6JnbeqiBZ3/5ATsCOhBecZuxb3ZZU9Dpn\r\nRXbyL3JwJJjVSfH8vZAjAeACju5xXLvftGTNEzPE6HwlzaF5rIz3UdHu7l1+\r\nYyxaskKv0pGgMXl8CyGc6p8/vEULyiHokKpwmOWGmNY3uUIbISVPCcIjzV4c\r\nWPPqta8120rR6weci/4AhflZk0TmLE1Sa/Q=\r\n=qBAq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-popper-3.0.14.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ec12ba98138efa2670f21723a822303d/chakra-ui-popper-3.0.14.tgz","_integrity":"sha512-RDMmmSfjsmHJbVn2agDyoJpTbQK33fxx//njwJdeyM0zTG/3/4xjI/Cxru3acJ2Y+1jFGmPqhO81stFjnbtfIw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"9.5.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"2.0.7"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@chakra-ui/hooks":"2.2.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.0.14_1683108223951_0.15344849200697586","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718122336":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230718122336","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230718122336","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"706428a712cd92253da350c30ec7f340fc696603","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230718122336.tgz","fileCount":36,"integrity":"sha512-fZr0NZayZ2TfiXMpDQ/1urLQZ0ENCeSmK63KkucqgyfZRSZW5K0BWQArIMW6Rms1KXbdG5syuFr/6FnOoRcNnw==","signatures":[{"sig":"MEYCIQD/fYt7lUG6khl6yHuAB4s27xRBrRygH+sx/qI0rUOUqgIhALp/WrDD4OZCtUmzcBSxH2MtNFSPOU9lFazAgApw3tkt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143900},"main":"dist/index.js","_from":"file:chakra-ui-popper-0.0.0-dev-20230718122336.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/26c6640132339716e48bef4796537340/chakra-ui-popper-0.0.0-dev-20230718122336.tgz","_integrity":"sha512-fZr0NZayZ2TfiXMpDQ/1urLQZ0ENCeSmK63KkucqgyfZRSZW5K0BWQArIMW6Rms1KXbdG5syuFr/6FnOoRcNnw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"9.5.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230718122336"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@chakra-ui/hooks":"2.2.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230718122336_1689683122236_0.8543764551729265","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718124717":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230718124717","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230718124717","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bdce2a72f3c675d778dd8f6eeeaaa8fa1a44dc3d","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230718124717.tgz","fileCount":36,"integrity":"sha512-GAjtHmjMVhFUUnWVq4Cj+0jgNL6hw0km200j+3JoEbK/yLN6NYGBAgUf+tgPZXNpOzTcCREptOTFDXrv9Us8Gw==","signatures":[{"sig":"MEUCIQCHe/wqp1YY2shkw4nXjxhDGCUICswC9acy2YfYx7+lrAIgISRBWneHNrSDg2nqd0tCqMHxk7v6P0/FiSrmkXIM9A0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143900},"main":"dist/index.js","_from":"file:chakra-ui-popper-0.0.0-dev-20230718124717.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/fb830a8a2104c0d6e29fd34b3a9bf908/chakra-ui-popper-0.0.0-dev-20230718124717.tgz","_integrity":"sha512-GAjtHmjMVhFUUnWVq4Cj+0jgNL6hw0km200j+3JoEbK/yLN6NYGBAgUf+tgPZXNpOzTcCREptOTFDXrv9Us8Gw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"9.5.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230718124717"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@chakra-ui/hooks":"2.2.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230718124717_1689684537515_0.12007082983435868","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718130742":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230718130742","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230718130742","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9ec6c0435cb471956871f6041fff6892d8891e49","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230718130742.tgz","fileCount":36,"integrity":"sha512-nlH4slfVPlSS6Sg5kg6mvxIk87g4hMXWYn+zV2laPnr03zc+xQHeg9rP//8DwHjVNvIqLYEPjFa+jgL+Q1gGvw==","signatures":[{"sig":"MEUCIDV90tP/NxnATdN8SP2vhkTBvARgNvsDCCyHQ86i/jMgAiEA1EtVDVEXQPmejnpbfeSD7W0kFRfLQ10Ojb/xRrWRnkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143900},"main":"dist/index.js","_from":"file:chakra-ui-popper-0.0.0-dev-20230718130742.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/720903c2a08cb6fc24c7a2ba08d4e514/chakra-ui-popper-0.0.0-dev-20230718130742.tgz","_integrity":"sha512-nlH4slfVPlSS6Sg5kg6mvxIk87g4hMXWYn+zV2laPnr03zc+xQHeg9rP//8DwHjVNvIqLYEPjFa+jgL+Q1gGvw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"9.5.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230718130742"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@chakra-ui/hooks":"2.2.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230718130742_1689685745077_0.18838709017584754","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718132637":{"name":"@chakra-ui/popper","version":"0.0.0-dev-20230718132637","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@0.0.0-dev-20230718132637","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"22beb4b5dde2e63f788493ce52131d312173fcf1","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-0.0.0-dev-20230718132637.tgz","fileCount":36,"integrity":"sha512-ikXYfK6o6djIZXuHEFPSwThH9NB8lxuWF34zILQYyTrwCnS8bl7a4lKGEVekZQQzqMqqc6LHLwXkYiCFb0Ya6A==","signatures":[{"sig":"MEUCIFek1txCp8GEnP7ZP+81UEHyMBg9jTHhuIyvNI5dDaigAiEA4B6Hp9MT9OWOFU7sAVfsphGTewTUr+zsQ3rwz/dUrEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143900},"main":"dist/index.js","_from":"file:chakra-ui-popper-0.0.0-dev-20230718132637.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/1870cd00e5b80a50d4fe11ec27de2f43/chakra-ui-popper-0.0.0-dev-20230718132637.tgz","_integrity":"sha512-ikXYfK6o6djIZXuHEFPSwThH9NB8lxuWF34zILQYyTrwCnS8bl7a4lKGEVekZQQzqMqqc6LHLwXkYiCFb0Ya6A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"9.5.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"0.0.0-dev-20230718132637"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@chakra-ui/hooks":"2.2.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_0.0.0-dev-20230718132637_1689686896534_0.018752288048741628","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@chakra-ui/popper","version":"3.1.0","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/popper@3.1.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"92a9180c6894763af3b22a6003f9a9d958fe2659","tarball":"https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.1.0.tgz","fileCount":36,"integrity":"sha512-ciDdpdYbeFG7og6/6J8lkTFxsSvwTdMLFkpVylAF6VNC22jssiWfquj2eyD4rJnzkRFPvIWJq8hvbfhsm+AjSg==","signatures":[{"sig":"MEYCIQCF9MEiZ+D6HL9S6orK1iUATAtx5dg4wRP29eyg/f3ncwIhAPl0ohBJM5Q8v0uHjti8DORK9jyAlwVkiqaX6LEWW+Kw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143862},"main":"dist/index.js","_from":"file:chakra-ui-popper-3.1.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ae02eb4279529c5403fb87ac67184973/chakra-ui-popper-3.1.0.tgz","_integrity":"sha512-ciDdpdYbeFG7og6/6J8lkTFxsSvwTdMLFkpVylAF6VNC22jssiWfquj2eyD4rJnzkRFPvIWJq8hvbfhsm+AjSg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"_npmVersion":"9.5.1","description":"A React component and hooks wrapper for popper.js","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@popperjs/core":"^2.9.3","@chakra-ui/react-types":"2.0.7","@chakra-ui/react-use-merge-refs":"2.1.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@chakra-ui/hooks":"2.2.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/popper_3.1.0_1689721256841_0.5522672948365979","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-06-20T20:42:48.399Z","modified":"2025-08-25T12:24:47.753Z","1.0.0-next.0":"2020-06-20T20:42:48.909Z","1.0.0-next.1":"2020-06-21T09:41:07.586Z","1.0.0-next.2":"2020-06-22T15:35:50.260Z","1.0.0-next.3":"2020-06-28T16:35:10.452Z","1.0.0-next.4":"2020-07-01T17:41:42.048Z","1.0.0-next.5":"2020-07-15T10:11:54.127Z","1.0.0-next.6":"2020-07-15T15:34:45.757Z","1.0.0-next.7":"2020-07-26T12:54:57.432Z","1.0.0-rc.0":"2020-07-26T15:57:18.671Z","1.0.0-rc.1":"2020-08-06T21:14:23.944Z","1.0.0-rc.2":"2020-08-09T11:31:29.299Z","1.0.0-rc.3":"2020-08-30T15:25:06.466Z","1.0.0-rc.4":"2020-09-25T14:07:39.075Z","1.0.0-rc.5":"2020-09-27T20:26:43.087Z","1.0.0-rc.6":"2020-10-25T15:42:33.734Z","1.0.0-rc.7":"2020-10-25T21:38:22.532Z","1.0.0-rc.8":"2020-10-29T20:24:25.595Z","1.0.0":"2020-11-13T10:20:40.665Z","1.0.1":"2020-11-20T19:50:06.209Z","1.0.2":"2020-12-17T21:39:26.504Z","1.0.3":"2021-01-11T17:01:51.650Z","1.1.0":"2021-01-17T19:43:28.451Z","1.1.1":"2021-01-24T15:01:00.921Z","1.1.2":"2021-01-30T21:52:39.063Z","1.1.3":"2021-02-06T11:41:01.612Z","1.1.4":"2021-02-13T17:47:23.535Z","1.1.5":"2021-03-05T20:00:32.171Z","2.0.0":"2021-03-21T06:35:11.396Z","2.0.1":"2021-03-30T12:25:29.413Z","2.1.0":"2021-04-07T15:07:24.145Z","2.1.1":"2021-04-13T22:12:02.455Z","2.1.2":"2021-04-23T18:03:41.089Z","2.2.0":"2021-05-26T09:35:24.838Z","2.2.1":"2021-06-18T17:37:56.252Z","2.2.2-next.0":"2021-08-05T21:11:20.227Z","2.3.0":"2021-09-20T15:13:10.089Z","2.3.1":"2021-11-03T20:33:00.088Z","2.4.0":"2021-11-11T16:56:49.242Z","2.4.1":"2021-11-12T19:51:34.242Z","0.0.0-pr-202215125733":"2022-02-05T12:58:15.301Z","0.0.0-pr-202215132532":"2022-02-05T13:26:11.642Z","0.0.0-dev-20221513279":"2022-02-05T13:27:55.654Z","2.4.2":"2022-02-05T13:36:28.094Z","0.0.0-dev-202211720414":"2022-02-17T20:04:48.219Z","0.0.0-dev-2022117201925":"2022-02-17T20:20:10.456Z","0.0.0-dev-2022117203714":"2022-02-17T20:37:54.843Z","0.0.0-dev-202212083710":"2022-02-20T08:37:52.707Z","0.0.0-dev-2022120113958":"2022-02-20T11:40:37.174Z","0.0.0-dev-2022120114012":"2022-02-20T11:40:45.501Z","0.0.0-dev-2022120114225":"2022-02-20T11:43:06.548Z","0.0.0-dev-2022120123118":"2022-02-20T12:32:07.546Z","2.4.3":"2022-02-20T12:41:04.509Z","3.0.0-next.0":"2022-04-15T15:22:24.220Z","3.0.0-next.1":"2022-04-22T06:05:30.376Z","3.0.0-next.2":"2022-05-05T18:21:12.212Z","3.0.0-next.3":"2022-05-09T08:41:10.925Z","3.0.0":"2022-05-12T17:52:16.643Z","0.0.0-dev-2022423113827":"2022-05-23T11:38:55.294Z","0.0.0-dev-2022423121532":"2022-05-23T12:16:09.836Z","0.0.0-dev-2022423121615":"2022-05-23T12:16:52.173Z","0.0.0-dev-20224248246":"2022-05-24T08:03:22.596Z","0.0.0-dev-20224248516":"2022-05-24T08:05:51.479Z","0.0.0-dev-202242481651":"2022-05-24T08:17:34.165Z","3.0.1":"2022-05-24T12:28:17.337Z","0.0.0-dev-202256192154":"2022-06-06T19:22:35.228Z","3.0.2":"2022-06-06T20:41:34.829Z","3.0.3":"2022-07-25T05:10:42.234Z","0.0.0-dev-20220804193103":"2022-08-04T19:33:04.881Z","0.0.0-dev-20220804193815":"2022-08-04T19:38:59.022Z","0.0.0-dev-20220804194739":"2022-08-04T19:48:59.122Z","0.0.0-dev-20220804200605":"2022-08-04T20:07:17.285Z","0.0.0-dev-20220805062318":"2022-08-05T06:24:31.095Z","3.0.4":"2022-08-05T10:13:12.814Z","0.0.0-dev-20220811084042":"2022-08-11T08:41:47.683Z","0.0.0-dev-20220811093515":"2022-08-11T09:36:15.610Z","0.0.0-dev-20220811160709":"2022-08-11T16:08:22.739Z","0.0.0-dev-20220812060931":"2022-08-12T06:10:37.585Z","0.0.0-dev-20220813051625":"2022-08-13T05:17:31.493Z","0.0.0-dev-20220813052715":"2022-08-13T05:28:21.053Z","0.0.0-dev-20220813053727":"2022-08-13T05:38:43.091Z","0.0.0-dev-20220813055957":"2022-08-13T06:01:04.570Z","0.0.0-dev-20220813063717":"2022-08-13T06:38:18.387Z","0.0.0-dev-20220813070741":"2022-08-13T07:08:45.242Z","0.0.0-dev-20220813083358":"2022-08-13T08:35:01.960Z","3.0.5":"2022-08-13T10:50:11.256Z","3.0.6":"2022-08-14T07:11:06.784Z","0.0.0-dev-20220820124231":"2022-08-20T12:43:52.124Z","0.0.0-dev-20220820152257":"2022-08-20T15:24:22.228Z","0.0.0-dev-20220820165925":"2022-08-20T17:00:32.759Z","0.0.0-dev-20220820172220":"2022-08-20T17:23:31.402Z","0.0.0-dev-20220820173639":"2022-08-20T17:37:46.525Z","0.0.0-dev-20220820185458":"2022-08-20T18:56:08.439Z","0.0.0-dev-20220820193723":"2022-08-20T19:38:35.373Z","0.0.0-dev-20220820195548":"2022-08-20T19:56:58.787Z","0.0.0-dev-20220822051456":"2022-08-22T05:16:12.841Z","0.0.0-dev-20220822054045":"2022-08-22T05:41:57.376Z","0.0.0-dev-20220822055339":"2022-08-22T05:55:11.319Z","0.0.0-dev-20220822103611":"2022-08-22T10:37:35.066Z","0.0.0-dev-20220822184448":"2022-08-22T18:46:19.660Z","0.0.0-dev-20220823150801":"2022-08-23T15:09:16.730Z","0.0.0-dev-20220823165602":"2022-08-23T16:57:15.965Z","0.0.0-dev-20220823192757":"2022-08-23T19:29:30.208Z","0.0.0-dev-20220823195046":"2022-08-23T19:52:35.588Z","0.0.0-dev-20220824074122":"2022-08-24T07:42:35.445Z","0.0.0-dev-20220824080240":"2022-08-24T08:03:53.715Z","0.0.0-dev-20220824082222":"2022-08-24T08:24:01.442Z","3.0.7":"2022-08-24T08:47:06.415Z","0.0.0-dev-20220920121057":"2022-09-20T12:11:58.770Z","0.0.0-dev-20220921093814":"2022-09-21T09:39:43.221Z","0.0.0-dev-20220922114557":"2022-09-22T11:47:01.689Z","0.0.0-dev-20220922115811":"2022-09-22T11:59:28.111Z","0.0.0-dev-20220926164115":"2022-09-26T16:42:39.901Z","0.0.0-dev-20220926165450":"2022-09-26T16:55:51.715Z","0.0.0-dev-20220929105632":"2022-09-29T10:57:42.685Z","0.0.0-dev-20220929132459":"2022-09-29T13:26:20.464Z","3.0.8":"2022-10-03T09:12:37.186Z","0.0.0-dev-20221107161407":"2022-11-07T16:15:22.618Z","0.0.0-dev-20221107181117":"2022-11-07T18:12:23.732Z","0.0.0-dev-20221107182607":"2022-11-07T18:27:10.465Z","0.0.0-dev-20221108071844":"2022-11-08T07:19:51.312Z","0.0.0-dev-20221108073543":"2022-11-08T07:36:58.564Z","0.0.0-dev-20221108075029":"2022-11-08T07:51:51.709Z","0.0.0-dev-20221108083411":"2022-11-08T08:35:10.371Z","0.0.0-dev-20221108090938":"2022-11-08T09:10:54.686Z","0.0.0-dev-20221108093520":"2022-11-08T09:36:46.336Z","0.0.0-dev-20221108100218":"2022-11-08T10:03:45.682Z","0.0.0-dev-20221108124603":"2022-11-08T12:47:07.754Z","3.0.9":"2022-11-14T11:53:13.123Z","0.0.0-dev-20221128164126":"2022-11-28T16:42:20.713Z","0.0.0-dev-20221128182021":"2022-11-28T18:21:35.368Z","0.0.0-dev-20221128183433":"2022-11-28T18:35:29.948Z","0.0.0-dev-20221128185230":"2022-11-28T18:53:22.596Z","3.0.10":"2022-11-29T06:12:22.737Z","0.0.0-dev-20221221104434":"2022-12-21T10:45:24.721Z","0.0.0-dev-20221221110721":"2022-12-21T11:08:11.430Z","0.0.0-dev-20221221133224":"2022-12-21T13:33:15.180Z","0.0.0-dev-20221221152939":"2022-12-21T15:30:19.745Z","0.0.0-dev-20221222051548":"2022-12-22T05:16:39.595Z","0.0.0-dev-20221223180742":"2022-12-23T18:08:52.647Z","3.0.11":"2022-12-26T13:14:03.886Z","0.0.0-dev-20230111211417":"2023-01-11T21:15:28.481Z","0.0.0-dev-20230112113621":"2023-01-12T11:37:45.425Z","0.0.0-dev-20230112141201":"2023-01-12T14:13:40.101Z","0.0.0-dev-20230112143332":"2023-01-12T14:35:09.172Z","0.0.0-dev-20230112145104":"2023-01-12T14:52:13.717Z","0.0.0-dev-20230112152756":"2023-01-12T15:29:14.307Z","0.0.0-dev-20230112154520":"2023-01-12T15:46:32.886Z","3.0.12":"2023-01-12T16:05:57.782Z","0.0.0-dev-20230116120206":"2023-01-16T12:03:02.465Z","0.0.0-dev-20230116122157":"2023-01-16T12:23:10.542Z","0.0.0-dev-20230116124502":"2023-01-16T12:46:05.364Z","3.0.13":"2023-01-16T15:07:12.728Z","0.0.0-dev-20230502164338":"2023-05-02T16:44:31.776Z","0.0.0-dev-20230502211538":"2023-05-02T21:16:28.472Z","3.0.14":"2023-05-03T10:03:44.108Z","0.0.0-dev-20230718122336":"2023-07-18T12:25:22.448Z","0.0.0-dev-20230718124717":"2023-07-18T12:48:57.708Z","0.0.0-dev-20230718130742":"2023-07-18T13:09:05.231Z","0.0.0-dev-20230718132637":"2023-07-18T13:28:16.731Z","3.1.0":"2023-07-18T23:00:57.032Z"},"bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","homepage":"https://github.com/chakra-ui/chakra-ui#readme","keywords":["react","popper","popover","tooltips","popper.js","positioning","popperjs-modifier","ui","chakra ui","component"],"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/popper"},"description":"A React component and hooks wrapper for popper.js","maintainers":[{"email":"joseshegs@gmail.com","name":"segunadebayo"},{"email":"npm@grizzly.codes","name":"schroetier"}],"readme":"# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n  const { isOpen, onToggle } = useDisclosure()\n  const { popperRef, referenceRef, getArrowProps } = usePopper()\n  return (\n    <>\n      <Button ref={referenceRef} onClick={onToggle} mb={2}>\n        {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n      </Button>\n      {isOpen && (\n        <Box ref={popperRef} bg=\"red\">\n          <div\n            {...getArrowProps({\n              style: {\n                background: \"red\",\n              },\n            })}\n          />\n          This is a popover for the button!\n        </Box>\n      )}\n    </>\n  )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n  strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n  // 2. Create toggle state\n  const { isOpen, onToggle } = useDisclosure()\n\n  // 3. Create motion variants\n  const slide: Variants = {\n    exit: {\n      y: -2,\n      opacity: 0,\n    },\n    enter: {\n      y: 0,\n      opacity: 1,\n    },\n  }\n\n  // 4. Consume the `usePopper` hook\n  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n    usePopper({\n      placement: \"bottom-start\",\n    })\n\n  return (\n    <>\n      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n      <div {...getPopperProps()}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              transition={{\n                type: \"spring\",\n                duration: 0.2,\n              }}\n              variants={slide}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              style={{\n                background: \"red\",\n                width: 200,\n                transformOrigin,\n                borderRadius: 4,\n              }}\n            >\n              Testing\n              <div\n                {...getArrowProps({\n                  style: {\n                    background: \"red\",\n                  },\n                })}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n","readmeFilename":"README.md"}