{"_id":"@binance-chain/honeycomb","_rev":"348-933a7abef711c84795af3a3b5770d6e5","name":"@binance-chain/honeycomb","dist-tags":{"latest":"1.0.0","alpha":"1.1.0-alpha.334"},"versions":{"1.0.0":{"name":"@binance-chain/honeycomb","version":"1.0.0","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.7.5","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.0","@storybook/addon-actions":"^5.2.8","@storybook/addon-links":"^5.2.8","@storybook/addons":"^5.2.8","@storybook/react":"^5.2.8","@types/jest":"^24.0.23","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.1","babel-loader":"^8.0.6","cypress":"^3.8.0","husky":"^3.1.0","query-string":"^6.9.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.0-beta.43","styled-components":"^4.4.1","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.11.0","tslib":"^1.10.0","typescript":"^3.7.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.7","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"gitHead":"006f42306f71e3e6a4aa3f517811cffc548045ae","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.0","_nodeVersion":"10.18.0","_npmVersion":"6.13.2","dist":{"integrity":"sha512-D70eLF5J5rgDnqfMUbo2SXIwe8XF5ENljmPz8dkFZVP4bgAeq6oXuS0EWQBdL87N2S4WcNa6FQRBXggVQlHduw==","shasum":"28b76b835b6caa58c8eb210cfa8ac7bd7cf9d29e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.0.tgz","fileCount":82,"unpackedSize":287654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDga3CRA9TVsSAnZWagAAIQ4P/iXzWeOrnaLrLSGOxvJp\n8c/TXckcr1AdzI9KAE4vjsKbD6MWqUry6WWg9GYzS9gSpTx3CpQ6amtMkCeY\nw8vD4C/fZIgwGjTqlZhp0ta9+dXOq6E0mJqlbLtao0BqHE3x7Kys097f5dY6\nqYY6OJCynBh2gc/JME4NintCSyuenWkQ5keik7eMLcvwiShmWuovfozISe9L\n2APztzKR9hPYShq35zkgMnk2EKS9FwdwbqGBc+0FIM8t3fJZNuy1vfnipH6e\n0e1QxWT4IKLKzR9swwwUluK0/yTDtevWRSFOvQzb7KSTcThvujH47xPV1p8d\nAEMHcacpbaAItiT0ZCVRUqhGloLQEYj5Z+luc+es7kD6J2DJa1MHzD4ZjaiA\nq7LgAGxn/+cKFDaT37R3TFBCq+iJbYnXStyEIuYcqe+yfn/RyS4jFinEh9xT\nSagoL7pbE9CzXIWyKmDl86m9qzeSQyWNL/UboSNpWeomqgyU0C4KiEIwkPWc\n1d7fYD2eliz2X/PnPw+4eQISCMesC8Yqyo+xm6GdBFRF4+G+tys9qCQg0zd+\nCBI54ivauh/1MqaFepMk9n33RXu4/dUs5Nt1zyTsrTvxS2al2vUUTL4SUUV0\n2DvPxavkzGHdoj03uExDzvg7p7imniOndaIBlnW1JtptYxOJbYOAgq6tYsSh\nSSqL\r\n=1Rh0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID2+svsciFU8PVyT4nbQfx/kb+p4k3mmJBaxqpK8m7wNAiEAmlvZbumilHyQaaSFXfmIL0K0s9ozkqSnrVhBidCwsas="}]},"maintainers":[{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"rubenillodo","email":"me@rubenillodo.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.0_1577977527388_0.8294283451269298"},"_hasShrinkwrap":false,"deprecated":"This library is still under development and will only be published in the \"alpha\" channel for some time."},"1.0.1-alpha.1":{"name":"@binance-chain/honeycomb","version":"1.0.1-alpha.1","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.7.5","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.0","@storybook/addon-actions":"^5.2.8","@storybook/addon-links":"^5.2.8","@storybook/addons":"^5.2.8","@storybook/react":"^5.2.8","@types/jest":"^24.0.23","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.1","babel-loader":"^8.0.6","cypress":"^3.8.0","husky":"^3.1.0","query-string":"^6.9.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.0-beta.43","styled-components":"^4.4.1","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.11.0","tslib":"^1.10.0","typescript":"^3.7.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.7","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"2ed6e0264e08e884290d71ba61ce604a7b68b0ca","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.1-alpha.1","_nodeVersion":"10.18.0","_npmVersion":"6.13.2","dist":{"integrity":"sha512-fn2phnxtWG1RcQ6l1Jch0Lfa9vSkIMkqDc8wrj6vX8wRjXo8gnzoKTnNk1/nGdXo2uk6U05m8ZL0H9ervDXC2A==","shasum":"2a294cbfacce0d06470c84b9e52716cd85d4bb3a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.1-alpha.1.tgz","fileCount":85,"unpackedSize":288206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDxAfCRA9TVsSAnZWagAAuo0P/j/WK+OQ3PIHUp2YxzdO\nfCduJO6LAkb7jOIazsczu1ltAc7FTKCV/T2D/vMCsn91y+fqxH2noZdkddTK\n+Z31hz4cMjJPcwjjmTvSXbyIQesV6oL+GoDNQ6Vgz9IDndfn6HEHlynd+JQq\nTjjQTx1/0GBYy+d1mJ9q937xoF4vReLwcg02fixwLFFMbH5aVbrc4dOZrbzz\nZ5Y4Ij4e7mgWRJVDnxvQnom06bh/AfUgg6k9VtIbMLYRsecF8xt5TzMMcwxW\nt9HZ2Rx+bv1MOcj20Czwkck0RrDC7+SfmF0cqDRpql9/gUW9sLFd7U1AWgdB\ndhOtLaw2WQD4IKyPqwXI4qqb2HGc7zk5HXO20Nqqk3GinMcfJ8RFj+usX9gr\nC4vQT5OO6l0xIibVd2gepTXN2IeZ4dVmODd0l1KqEuU2YghCX0oy64P5MO1X\n3B0OkaXe6pyRQPd/IlHUhDUavwZlgELtw3E761lpbRVy9hW12UN79/npkkbR\nRuek7Jq42tAbOW213LbhKQfGwROrduztwOK5dTGPQd7bTt6tUBmDbQWRDewV\nG77qBB9vERkPahLRmWaTfjUBpIVxIl+p9AxOXXjGgBVB9z1XMZIcVIaixtjJ\nT52A2UN9fBGbWRktNER0GqlK2LJW56vjWh3gxD0sRThgijzHfS5v9uHOtJ8m\n0TX/\r\n=0LZ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiYcNtn8bc+6njxeIGKuvcBeyxSLt3JmUBY96pUfxSSAIhAI+pD0qo18XBb/+JYZoVtvc52I//6dfpL7gBks6HZl3e"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"rubenillodo","email":"me@rubenillodo.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.1-alpha.1_1578045470637_0.5179462094844953"},"_hasShrinkwrap":false},"1.0.1-alpha.2":{"name":"@binance-chain/honeycomb","version":"1.0.1-alpha.2","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.7.5","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.0","@storybook/addon-actions":"^5.2.8","@storybook/addon-links":"^5.2.8","@storybook/addons":"^5.2.8","@storybook/react":"^5.2.8","@types/jest":"^24.0.23","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.1","babel-loader":"^8.0.6","cypress":"^3.8.0","husky":"^3.1.0","query-string":"^6.9.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.0-beta.43","styled-components":"^4.4.1","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.11.0","tslib":"^1.10.0","typescript":"^3.7.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.7","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"74554191a312d82db45227d5b357847a86328099","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.1-alpha.2","_nodeVersion":"10.18.1","_npmVersion":"6.13.2","dist":{"integrity":"sha512-C0l+b084Tq4FVmgtcsRtAEy6IQ4q7AMISL/bsitE0Dfdwl/fbh1zct7XpjG9ggRBSX1GVJJtD5SRNJWZN3rViw==","shasum":"133640331b86afb033e8ea5984fd3d47ef102507","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.1-alpha.2.tgz","fileCount":86,"unpackedSize":288651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH/EmCRA9TVsSAnZWagAAUlcP/jIbdkqjSiye4+uGJ7lZ\nDBKfjhxN/mB+2WgrCl7IL6uls9BcdpDyxL6+ogQGNCRcNf/Zfpv5nMD1nKI4\n9wlth4/hjToLQ/x3ZZkXIvxMLxrCXNFaHawNAMKh6QTzAVALp7FTgeNGeFbK\nmzfHroSAgxDoL0she5qaeuDW4O5n92cFllVhU7osU5089OJXoQGCasUgrPrG\nNiO9IlM8qXni3VNOH1jnk6Iy7d49jG0OT5dKfzU+HoqEB5Npug//XbgKxJ3k\nQvthrvrkFq9X2tfzt7BkNB6m3v3st2vuWGs3RCOoJIFvS3tNX6CmSIzEUUz9\nXOogemu4NxsH25GQJAYYny/75/ZGW2CjhaWlMtV8D3IuCFy3PL9/BvuzkiIG\nt10anErlhr2o9XkXoQWG1qOHqd4d1ISZmxNzMVuoiCWi4xhaSyk0L6bT1L/W\nPScxr5mExWuAovDJdvUM/RiD81ZCWhFIOcwClkO0akMbNX/x3OnOWVp5SxWE\nV743R9d5MJZTd3ZpHHjQQgeNvrAfglQgYdqAQ6lDLqdd/BZyG2aW0oe8FLTs\nEAdMezfzeHSFdqgkam/LgymRTQkXbljJuV4jt5LbllR6xzaU6u81ZHBkJbQ0\n0eVq579Qj3sR56UAvPgGgzli20WopNeto/8SVeY3pmRqPxSDmcCYEbuzFcyk\nJbE7\r\n=n34H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqJNuWY0Lr65E3Yb0W5wu0yIKUr7Rr3MBo71gy/seHvwIgB4GxkxTk3XW7AYUvcmzedKR7ysG5mADa6A7O6spkyGg="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.1-alpha.2_1579151654114_0.5890303959314089"},"_hasShrinkwrap":false},"1.0.1-alpha.3":{"name":"@binance-chain/honeycomb","version":"1.0.1-alpha.3","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.7.5","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.0","@storybook/addon-actions":"^5.2.8","@storybook/addon-links":"^5.2.8","@storybook/addons":"^5.2.8","@storybook/react":"^5.2.8","@types/jest":"^24.0.23","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.1","babel-loader":"^8.0.6","cypress":"^3.8.0","husky":"^3.1.0","query-string":"^6.9.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.0-beta.43","styled-components":"^4.4.1","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.11.0","tslib":"^1.10.0","typescript":"^3.7.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.7","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"c3d32e952ea4aa80927ed308bc69854596495a44","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.1-alpha.3","_nodeVersion":"10.18.1","_npmVersion":"6.13.2","dist":{"integrity":"sha512-oXUv7bdtOWHjjUD+PpCAIsQYaHM/x4WLErgNmNGY5X989wTFGX3WMBhqwBadP/ae+dujFqsLa/Y01VVze9dGow==","shasum":"ea9935af7bc7342a3ef77d24b9c2d723ad604b5c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.1-alpha.3.tgz","fileCount":86,"unpackedSize":305083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH/e2CRA9TVsSAnZWagAAWUoQAIfx3oe/xrQgZY4U5XkM\nHPx5T2loRz/tZlA+ve/5e76ATD4MOdoB5zU1WbICWVGRae38afCEM+lLrFPR\nVMjTPo3g54RLgrdzu/r/qk5A5qhFH4YfC5G/Kp0K/+HTHoUIbFtr2HKtNQsX\nAWbTEoXOwBztvUOmn6LC3FmfN01NKOZqozedUxeYOXvdiqsknqBzj+pisG2V\nmj+/CPXNYFzMwWoSuJJeb2v+8VLcbDNfKy0CbW9P1WVFMnFboO5+kmBbx2eP\n9UXjwJrfABbxAn4vhUpIdwfQ5ZyiraxkXSVXqcuDf739GumvzFu5oLoXZ2ME\n0rvkcC9JwCdy+y2LWvsRkD0PqpDRtES6uQa39X8bfVs8URQt7w4vvpoa+YN2\nG1aIBQTi7Vvbi2oorfoB0WPANL6aH7tQiR2YFjSBR+Yuh5VB4iJp+9SNsms/\nhf6Y3K1c58URUJ0PDUW49IOtn84SPtmY0dsGzBk0LzEIAdrFLajMzQbY/BWs\nNqY4wjP8F7Ke6mXYf2edK3p2RspbFxFpBxd8Fr1Giy60G08SNwSnYkd7IQ21\ncubparpiwGlTrQDoUJqiUU3X6d7OlGEDnZuGisBG1azg6Qit1IBN7no3nu6k\nlFjhoIINK78r2nPaIDXxRf9NKoW3AXsuuar/DfG5xj4qAQulL1bWsbTZok1+\nUggd\r\n=6z7J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM0KDt37D0gtNA1g3cVesdc7iXGfnRaMCi325qSim5DgIhAMX/ngTErX4F1xs2YmqCKJxv+W0Xh6RzWy7HJCU19zbI"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.1-alpha.3_1579153333932_0.6196838344331128"},"_hasShrinkwrap":false},"1.0.1-alpha.4":{"name":"@binance-chain/honeycomb","version":"1.0.1-alpha.4","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.7.5","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.0","@rollup/plugin-url":"^4.0.1","@storybook/addon-actions":"^5.2.8","@storybook/addon-links":"^5.2.8","@storybook/addons":"^5.2.8","@storybook/react":"^5.2.8","@types/jest":"^24.0.23","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.1","babel-loader":"^8.0.6","cypress":"^3.8.0","husky":"^3.1.0","query-string":"^6.9.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.0-beta.43","styled-components":"^4.4.1","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.11.0","tslib":"^1.10.0","typescript":"^3.7.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.7","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"0ed2ba84c2f9d7f20e66e3efeae34a1dce40d76f","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.1-alpha.4","_nodeVersion":"10.18.1","_npmVersion":"6.13.2","dist":{"integrity":"sha512-ECLzHsAw/8B8eAguoaadJf+nVULPvsZLDR50txQYUeBlktetTMki/pXOp1kYJy4PQJUz8an1xrpAoRAX+OVIfQ==","shasum":"c29aed46a8996b3dc7bb90515d31680584c55479","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.1-alpha.4.tgz","fileCount":117,"unpackedSize":3341515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIS+ZCRA9TVsSAnZWagAAxokP/2Jy3Ffate0rDW1KwYjj\nVKZr4UAKcR2YsXujF5CpRYI+9Z92/LzO4TS7yGCAJh9MU0ajCCYza4UHZZCe\nEqsy52xzHcKo07OpS0GR0nvJZqjpJPzw64gH2pBI216Azc2em+SKWmBnwVfx\n0hgl2gOqOAa8jyeVYcNR6OhuqwFAPdMn5tW88LHox7pabxPOa071onbmjC8P\nJ1n1jSUmp84V+tywDGYAd8f5EUTi0S+a05b5i0CZnx1BLWBgJGaD6GmSepYw\nyjEuh8zOEdZETyZ5mbIjEiVPwDHWb/w02Ul80psvwBRWOHfadgDUOO0zxZ2E\npXNDzQ7qSk830ZPQxd11VHnXP8pW+dRZ0EcHneYBpSo0MerIQ8rGW1+tMfIJ\nDGQxLOrV1JbR6Is3LGlaeNfWqhWPuviYM5xdLjJRgskaePInEnEusqZavrRJ\nsM8breMSySYvSWI6TxmMKV+dnb/IvgCByMr52j7UvBpaRaVqNrJw16HHpBJE\nEWXKtajHpiDTb5uHR3smNI1cl9SiLKGIfIkXtKgpX8TTdQsfVA3ziKpz62K3\nbJ1sHYMfJn0CaEwR7urmYtA7KGdlL+l2wq6AwUBU0hWkoVst3pWcboDBS4qz\nt2Pv93EYpIGeQ9oHtJNWJYzBLI9uXeOqaJal9J+SoFFcMbXn+vaV9RGcrPkf\njGt6\r\n=GRvF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8+zyh7iNk2UVEtoDqP/Sgyxsk7M4evmxCI5fVrhmblAiAhomFY4/FmOKlHmUk0a6nvA4F5C8FpdnTgPXve8Hn+KQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.1-alpha.4_1579233176610_0.4473580501169907"},"_hasShrinkwrap":false},"1.0.1-alpha.5":{"name":"@binance-chain/honeycomb","version":"1.0.1-alpha.5","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.7.5","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.0","@rollup/plugin-url":"^4.0.1","@storybook/addon-actions":"^5.2.8","@storybook/addon-links":"^5.2.8","@storybook/addons":"^5.2.8","@storybook/react":"^5.2.8","@types/jest":"^24.0.23","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.1","babel-loader":"^8.0.6","cypress":"^3.8.0","husky":"^3.1.0","query-string":"^6.9.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.0-beta.43","styled-components":"^4.4.1","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.11.0","tslib":"^1.10.0","typescript":"^3.7.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.7","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"2e51a07719ff25cce31efaa98f53651f9ab7af60","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.1-alpha.5","_nodeVersion":"10.18.1","_npmVersion":"6.13.2","dist":{"integrity":"sha512-3222/X3HO1eAEbLzMxDKlksyyPGCrLM24zG8aOILvlFL2e68ARRzUbzybf2g85LvmBW9qkspTHYRVfFlOww20Q==","shasum":"917d322829f79902f996159ef15f7a4cee5de218","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.1-alpha.5.tgz","fileCount":117,"unpackedSize":3341716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeITWFCRA9TVsSAnZWagAAoW4P/joOpIZ/b5jh5mpZ5x9C\ngO7Or2EfD8/GG5okwtiz4yO84Sk38csg4qa9v1GtZZQ7L10+Xfb+oJg5NYO5\nqB1nCMWKqXuqofuN+g+2bD13yAKWJ51kGSIXkMdNcjGBdLPboBo4E1+tA8yn\neLSNqGhbFfnLQHTfuBmivlhWT+mCWjB/SfRa/2oUv7gQqUk7ZPlc+DrZiFRi\nsHVdh5j6P7dUudLLDfL/e9u8Cqw2OBDabJUt1KzkYcujThEJGTf1ppdDbDZI\n7yob3x7GK9SZCDIr/W9OFfn9XxV+Lcwg/Hcl6xpBdcKAOx/4K22n/8HP2vSF\nL//zTpodactpFQQLKyEvFlL0cILlv2X03dYv8yjKMiTX3hx6HNe0fAn3cgg5\n7SpINZSb7IeJ9K3IctM1TFl+iR5ilttN7Mlyml1taS7g0Kwl/9zb3h38rwGz\n3PDyh8N89mXMrAJpEpdQWoywPiPcBmrUViJs4InVrbWZzyLq/BknYhECXlwR\nxX/bTkT72oP8Isc7t2NBDKMoJlULzRXxcxwXiaNlJJ8UP7cCp/uPigcWY0qK\nlI+V0If9NTQC2jWY1HSwTbF+SqStvSVpGo28zvr+GWS4vD626bO7KyHyp1Hf\n4ztfFNX2N/Yy9KgcVKJyZpQY6g3F9ZahoApWDWh70sDkfW3JPXfVIkQyhgrX\nj70O\r\n=8fDU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF55QlOKuG1wxXOMN/a8Azv++QCFd7OiCKcapo+EBJn+AiAJhbdMa6f2Vyn3HaDbmqB8tByCSFTAmS/GDxKJf2KNvQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.1-alpha.5_1579234692988_0.5081012427506226"},"_hasShrinkwrap":false},"1.0.1-alpha.6":{"name":"@binance-chain/honeycomb","version":"1.0.1-alpha.6","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.7.5","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.0","@rollup/plugin-url":"^4.0.1","@storybook/addon-actions":"^5.2.8","@storybook/addon-links":"^5.2.8","@storybook/addons":"^5.2.8","@storybook/react":"^5.2.8","@types/jest":"^24.0.23","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.1","babel-loader":"^8.0.6","cypress":"^3.8.0","husky":"^3.1.0","query-string":"^6.9.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.0-beta.43","styled-components":"^4.4.1","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.11.0","tslib":"^1.10.0","typescript":"^3.7.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.7","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"8e0f05696aed2f34761dde5585b212072a7e346c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.1-alpha.6","_nodeVersion":"10.18.1","_npmVersion":"6.13.2","dist":{"integrity":"sha512-kVlowIpIF0c1uG/l2ayKDamh+5BEb28Q35wJ76ZDMJ//tsDAZwJO0KIJx17Yxq0xaHKJv26KOpsghfPSD4guHA==","shasum":"2cc2aba657925ba273d52c5657dc84070e3f9b99","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.1-alpha.6.tgz","fileCount":117,"unpackedSize":3341676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeITgLCRA9TVsSAnZWagAAB1MP/iEc1LHo8Mn9BWfWc98/\ngwtgZPmXXWLxR5Y6JfOpMEqHb/PfcU12OdA7wW9hc5G2VrnblpAfJR7D1k65\nMpvAk3dwuCRJIQ7cL+A0YJ6+DWMJSZTRrjpQHFhdn0hi6l1bYSmV+SWWdMhW\nIHaVFPpI5R2wHfk8tLFyUyW2GyIbF2JIAqRCiLDTOgWXARuMWfRi6ZhqcOUl\nf07QFlXubZ7gT78Q2aVgm0pDivykrjY9KUZQt2yASIBK7K0PbF+kwcsfnmFe\nKlzUuZ3vrpMV3CRGNOVACjT+mejjopIgxPnHV7aNpdFJsy+s7crXWSuOYJPh\nQHvK8BpYyhW8ipYke5LRkMRj9T2bH40klsn2tt5GwusMAZqfH9Pw1sI5dZdt\nts3R94Zh8zaqOKZV8by+eJ3zqjriFvlBWvAm8i2SbC+aIqseJTQeKc7cuOTf\nplWagdXVWSkd8apTnpywQcyRfxEyxqQcSA16ftLI8mmB71aEEqWCcW7sQi9A\nVAyJPY32paRoj3fEGz32+4/RZ7pihGCHpq0leTFUP8CJoQFDadWYOUpv+IDc\nPgido6ze6PFRMGNj5rK83kh7oCN2CwieNXn9pDhnWkGp2UdGeVOWuS6jtoki\nl1FRaF8epuBYtFkmo8LVBGdkCqqzmZF+B1IDT57ozlBpCwJAxEusEoqcWVwq\nrj2i\r\n=sT6k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChOCp5pVx80PVn0YOj9iwGdMl8Y39/2a9KGXNeVuMLmwIgFtb+lc+5fLam/fqNprpnvroff/R7fqYiZvPnBEC3JK8="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.1-alpha.6_1579235339490_0.6911821121366915"},"_hasShrinkwrap":false},"1.0.1-alpha.7":{"name":"@binance-chain/honeycomb","version":"1.0.1-alpha.7","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.7.5","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.0","@rollup/plugin-url":"^4.0.1","@storybook/addon-actions":"^5.2.8","@storybook/addon-links":"^5.2.8","@storybook/addons":"^5.2.8","@storybook/react":"^5.2.8","@types/jest":"^24.0.23","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.1","babel-loader":"^8.0.6","cypress":"^3.8.0","husky":"^3.1.0","query-string":"^6.9.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.0-beta.43","styled-components":"^4.4.1","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.11.0","tslib":"^1.10.0","typescript":"^3.7.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.7","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"9b5ca5c78767c259bc37e8240f46616b3edc8796","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.1-alpha.7","_nodeVersion":"10.18.1","_npmVersion":"6.13.2","dist":{"integrity":"sha512-Frdomiy6RouVGoHL/fuC6DCD6H/qlLiU9Ed6QBhc87H8F8NLCOe7belE0lm7yNe+gnAFXst1DMcHMgi6jpAPUw==","shasum":"111b4ad627ad45293ab2d70bc720cb3a2daf09e8","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.1-alpha.7.tgz","fileCount":117,"unpackedSize":3342558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeITzUCRA9TVsSAnZWagAA0ZIP/0WobYsqnDJOc+VwB6uM\nKOUGdDgqNVeg0U4UYPQpPAEnChJhwgL1uTZM5XbytCx6rrygCHWRy0boQK50\nUQPgb83As9hqL6iSljAmni3OIW6cWaD+MTMhwlJ5895/8BPatEG8GvHya2ag\n6N8rgVDZ11MclB6Hvtq77L+6HgfjI215pLIOZ7EebqNd/95SHD9hnbpxYfgh\nlgFvKtmUC66mQLQY3flM9uHfs25w9ideHqT717LdG2PfF34o5qi7iMx+PzSh\n0a2eICjV9NZTc1Mh6W8nhcrkSB1p04P+dcZm5KLnfNF/ysZP/ANBjq72c0QZ\nIkbtKWsJ6zbSwh6q3ng486k+if670O8jqFTu+njd6utYi0IpfOZmfTw3yF9m\noi9fCIKX1YNe0BTAan0+Gc3EbZ4yryObKCcqpKSzwPHGq+xCxh6Fw3Rla6zj\nw0fmohh8KlGYjNg9Ioi+CpSAo5uouEOZkXFFeudUNX1mw+pZQr+91pFdaO3l\nRTjs110FhdSJuxTswykZ7IKtgybb9oMSmGGvsAnbv97YNaLh48RazTJKLYX2\n++qMRKLOjCd+csdloSqwVmVwrZPva2xNqNSfU15hLNXG7aOZziDtRggqmukr\nnYYYMZTfMn2IwV3cd0P8E3ZSvS1quyvw793448BJB5YUaUsGlvCTGbkMXLml\nFwi6\r\n=8U/g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELu/HftJk9zhYwY8c2yhHVsU2ZQovmzjzzdIHEjPYcJAiBCXq4fvKOlLuxiM7u9Rf5mZCPRn3zjzQu9GWMyd51pYw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.1-alpha.7_1579236563829_0.5900896835012597"},"_hasShrinkwrap":false},"1.0.1-alpha.8":{"name":"@binance-chain/honeycomb","version":"1.0.1-alpha.8","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.3","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.1","@rollup/plugin-url":"^4.0.1","@storybook/addon-actions":"^5.3.5","@storybook/addon-links":"^5.3.5","@storybook/addons":"^5.3.5","@storybook/react":"^5.3.5","@types/jest":"^24.9.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.17","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.2","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.0","cypress":"^3.8.2","husky":"^4.0.10","query-string":"^6.10.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.2","styled-components":"^5.0.0","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.10.0","typescript":"^3.7.5"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.9","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"c047885ca0e0a315a466fe40588aaabb19e69e57","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.1-alpha.8","_nodeVersion":"10.18.1","_npmVersion":"6.13.6","dist":{"integrity":"sha512-BZW9BAriiSAqNCE5Zf/Q3JYXbpWkxIe0LYrogrwjCtCDqAKhaZdgcTf6nkanPDFGGGYebY8NT46NMVns7d96Ag==","shasum":"26ee9ebfd4f449bcb265bcfcf400af327fdeecd1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.1-alpha.8.tgz","fileCount":117,"unpackedSize":3347837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIVGoCRA9TVsSAnZWagAAVnAP/RRm6s4cFMwu0lK2KTYO\nhchqBsmQwADUtjjzMYaEoxCWCQLp+mZQMmQpIrh3DeoKRzH/t+mRdue04SMM\n81iCXtMW0Kk93nRE1qU7zUT2WR62vRaQZczbqOQffkIzGiq8kgHwTV0OjfyX\nn0RICPUBs/f1L7E62rMY4BSUuW0C9ypDLaw9zelyHnczcclEDQ1d7V6HwRef\nzamz1+pc3tB24GRTXRZeKz+RMui47P4eWi8kVvkhrvkaTGbtpsEBezB3QStR\nlDzBzFpVBJ/6cbUOqgB68ULV3B4aOp7aMzDu91a88Lc2+TLwlVtxn4MHwxB7\nrED+R3mZ4s7Pxbg2yD52vxIFZYy2XNQ09RPhn8SdEaxGvKkdS1a4X1Ank3aa\na9Txx1gyCb+uEfeNIPVRY1/2Sv58tx8k+WXFet+rB4OTf016r9SGR5V1uNV8\neKVcRn0vHV2M3O63fluBybyC7eXBbquU9C+LusUkfrFFzKl2+8coEeb/yZWK\nq6eGTCvoV73eNNlEv7sociqA2jp13KkW2nFQy3BkdjwApuPZKdoiwqb3xcN2\nL/f9Z3qFKm5sZhhnwE3O46HCoId3oNGaBTztvAWlPqWIjNxhN6f3BaPsHZv+\nCJ4xrLx2ysgWrguTICsFJkIepo+PHELM05J4d5ZgMubgutAPX7TrXNYQSyoY\ngpL/\r\n=2+Io\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaclba8LfWITXiUORBVbXIYH9clvBElK0IraxhCkIHbwIgDa1u+cIhWR5sBa8mRUUnv2LdNjoc3ItR7DL4HAmsV44="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.1-alpha.8_1579241895522_0.08490353938784723"},"_hasShrinkwrap":false},"1.0.1-alpha.9":{"name":"@binance-chain/honeycomb","version":"1.0.1-alpha.9","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.3","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.1","@rollup/plugin-url":"^4.0.1","@storybook/addon-actions":"^5.3.5","@storybook/addon-links":"^5.3.5","@storybook/addons":"^5.3.5","@storybook/react":"^5.3.5","@types/jest":"^24.9.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.17","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.2","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.0","cypress":"^3.8.2","husky":"^4.0.10","query-string":"^6.10.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.2","styled-components":"^5.0.0","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.10.0","typescript":"^3.7.5"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.9","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"82c9f32a02d5fc4ea0956e7ce2a6f42b53a2dded","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.1-alpha.9","_nodeVersion":"10.18.1","_npmVersion":"6.13.6","dist":{"integrity":"sha512-mHoiDRnNRPAZ+ZOvrbQhiREuUoY9FtJpyWouRpnJJwTggijPHTEhdMqAWtTZv66J1Hp/jOzg//2NDQxEsOi1AQ==","shasum":"e4db7bbf3a5f0c4d64112e6cb816fd98e8a85fce","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.1-alpha.9.tgz","fileCount":117,"unpackedSize":3350910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIVYaCRA9TVsSAnZWagAA9k4P/3RQ6JamqXycbrlEvDJW\nG02wGSauLGeZMjXg0Mmnyt0ujeSUKmGErRgT6r1qczutyEJoxrYdsNYSS6Wx\nZj6CbfcazLdH+W25lz9m2sjKp2jK/wQNnjbRe5qfRF5QVZfe13nDTatfnxrA\nPploKsTYpXd+CVoZyF4GCfonM/mlOJlp5ebCY+WJ1rGJNktvapdRbq9HxY5O\nde7n03cQUs8zOKvJwz7PUUUBDIPnfYTiqxRks/tfPm2jyvWovHHCfsrV3+0f\n9FciDuLiVd6C54G+BYO2jP1mDWZGQui0gow1NvyUDuPVn55pgdSz41tfQrVp\nLsfkThs5bHGWcycrH6Qyo4l3i00VueacT9Rvzr2v3Z5A2LYmOQHJ7NxLndB9\nC0iscAkpRtUb9Dq/K1KpohccmAAa0HnGQwHWNvuGLsaT/Q0lAY7p/jq5eXaJ\n3QYsPy7MN6MDZT+iQZN2kKZN8fcbn3FQrwKeYl9X+i3zW8T/90ceVcFgAL3Y\nVfcnJQhEdXzCNsdUGkQVPltsLmd7YWdsOuyyjseSKvcQyM212ermapsHxnbY\nTSFxvQEqaWhTiYlS615MpKWLxs+PE8thIQ29Q3yquou46JAmxOrLhkrxrbda\n0tPn838t5ekmb40FK43Ta7Hjytr5SMlBYx6bRJXiKMfxNYln4b5SiAUe6MHm\npphO\r\n=N6s7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDifmMwJ6n7TWN+ebxtyMb4Qk/4Z/DFAa95AU/SmIsQ3QIgC7qOGwfqo8cnqUnwi6o/ET3iivPAvVViB20r51w+JoQ="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.1-alpha.9_1579243033670_0.33867350772345217"},"_hasShrinkwrap":false},"1.0.1-alpha.10":{"name":"@binance-chain/honeycomb","version":"1.0.1-alpha.10","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.3","@percy/cypress":"^2.2.0","@rollup/plugin-image":"^2.0.1","@rollup/plugin-url":"^4.0.1","@storybook/addon-actions":"^5.3.5","@storybook/addon-links":"^5.3.5","@storybook/addons":"^5.3.5","@storybook/react":"^5.3.5","@types/jest":"^24.9.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.17","@types/react-dom":"^16.9.4","@types/styled-components":"^4.4.2","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.0","cypress":"^3.8.2","husky":"^4.0.10","query-string":"^6.10.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^16.0.2","styled-components":"^5.0.0","svg-inline-loader":"^0.8.0","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.10.0","typescript":"^3.7.5"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.1","nanoid":"^2.1.9","polished":"^3.4.2","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"50ba0589dbae45479ef522b67f8fee1a377a66cc","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.0.1-alpha.10","_nodeVersion":"10.18.1","_npmVersion":"6.13.6","dist":{"integrity":"sha512-/Amm8ZzatDcZuIIvZiAYn9hVPJKaFK3v+b6eKqRu1OyuU8HqIT9L2gt7cmk0wNAGj5j2s3FxPTzTU0IGR2Nv1Q==","shasum":"75719d0b0b05cf2ab4e65a58309e7db6b222bd58","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.0.1-alpha.10.tgz","fileCount":91,"unpackedSize":24153802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIXiXCRA9TVsSAnZWagAA7aIP/25AU5diKghTop3SLfiu\ndTOdrjPwEc0uARF+IJqcvHJFk8q702pwCJLQ+E/vYEFJmoYhYnYYQJ+mrT8G\nCko2orW/zYJO82RW2Aj49f4mH5VKmyvvjG5NMXKoBGju8Xsk+giX/4y8t2qp\nuwB+zVpEjIdx1i+TVTZAnqL/hbUobDHRjTNqoailES4pCwT1ih//D7CSdZM4\n2+ZXXz0e6QwDhV0ufbsfLXUK6JLo1iBbTr08X8u0NBTTeHZAtGcduwsGpf8h\nNPqlutt5sVtcTC9BV+chu7ucIjjQ7LUyUXm6MtEIMcyVKAvOsHG/PZjJBWvm\nwgOcjR9OzHjpgULSSSmf/2B8Wzcem0bQ0vp3y1uFqoMyZEQE1yiDyvAMwgNa\n34nozVL1QLUiX2DonoIm47IUFconyincs2ioTIP7bJbEbbsEY6Li6Oma1ro+\nv1k6lwoBVOjvvSzDacwtHR5KwxcQVH8C3gekt7F5l8Cpb1KB8WhGby4nIre2\nB2nHYFx/CX/DGyFQrr0/YSdmZaJNP4E3ru3eVYz3THj1NjDea5CDBqggM9pT\n73Ka8uXjaoDkvqQVzv/1LRdJVX4aOjT9b72ao3rxIbpzLM6QE2RBBWhThQLU\n+aRMuZS7nODJzzI0WCJNBgmZ2aXjlNFG32DZaA1d+7o8au7SgCoyIwLgnvce\noZW1\r\n=SPxB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTGzM59T0zU1mdr2oN5ZmiW2vAeAdCuEKZUUv7kL1cXAiBNuoi7FIuc0gt7Fj/ML+sdvoMBVhhAMsPAdRW1NznmWg=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.0.1-alpha.10_1579251861650_0.050840047726415705"},"_hasShrinkwrap":false},"1.1.0-alpha.1":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.1","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.13","@storybook/addon-links":"^5.3.13","@storybook/addons":"^5.3.13","@storybook/react":"^5.3.13","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.22","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.0","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.0.2","husky":"^4.2.3","query-string":"^6.11.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.0","typescript":"^3.8.2"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"94f0315588a26e94e875d9480b08f90ecc326071","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.1","_nodeVersion":"12.16.1","_npmVersion":"6.13.7","dist":{"integrity":"sha512-TJaj+BvQovG7pRL/KT63x4tWk+/xQ66uQZxfYazRF7swhogUcDMBeSw2C732blzIaSNeSGD+pwvUy6EkyTiAbw==","shasum":"b90d566d1c5b45e0b72b3baaee182a8d577a7b2c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.1.tgz","fileCount":92,"unpackedSize":24154733,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVSRfCRA9TVsSAnZWagAAriMP/itewdA0Lot1MLrwZHXM\nx3HDC5fluOHsRVwdWDVqzm8wJMCZubKFGcYm77WkchEUWe5sPXV04HTW/WX2\nHtL4f6C3nY0S0mlPeIabW8Snw44CFJx8uB6yUdqid5WwUWUgl/j+YSBFQ8WJ\nQjNfr8J4yNnc5Ns8QusYOkNTokewj24mjyI7LUx4wEn+f6zvmZWFrsrdnBgN\nQj2cEw4d7t3u9m+CutLXAe5/BoTtoMXiZ3NffeeW6Nc3iPTyHLO4Bfn7LH9J\nvD9ThcpR9Jr7o8Q7G+/DXU0Pl6xO9TF6J9kJPOxy3JYbmhIziPyfMmn/ewSc\nvAAch//lf1NiR/eF+hANuwJDCoH9yo4GLsuF1r8sAyZLv7b9givJNXVUurNK\nPuH5iJ9tIxk48eaemppX99TgW9n2d9oKa/Xmpc7e7GB7Z8YLYrfVlgF3NbU7\nMBrt9oBqRVlTePXeBLuvJJG+VBBzzvtUwObtTB1086we07ABjRMHncFBmlr1\nat81QVBCTKSY6b/0cl2ZDzJKpvNS08qt0BJUDZ9IAXu4BWmvfK0aU+CiGD02\nZxQAv9+R2+s6DS0NvEXyCAMUHG6Dfb2Ch6tHKTru4B+AihcOXq/3xsR1EKAQ\ngAnVVaWW0NPGC8XteTzD1tVRZLTt5bhErnsQnxM4WYQrO91YL7nN41NtrmvD\nckB+\r\n=+xWi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1uQIrTx83UvQH8lbZFeULwyPKdRSS5ps+Ulyhu9U+3gIgHlePVWnpSHmqimt3ZL0e2FjD/gr+HURuXWJ0tJpXIbg="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.1_1582638174363_0.9496898314213558"},"_hasShrinkwrap":false},"1.1.0-alpha.2":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.2","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.13","@storybook/addon-links":"^5.3.13","@storybook/addons":"^5.3.13","@storybook/react":"^5.3.13","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.22","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.0","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.0.2","husky":"^4.2.3","query-string":"^6.11.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.0","typescript":"^3.8.2"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"5347b44703c5d00da34422443c852171dc18488c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.2","_nodeVersion":"12.16.1","_npmVersion":"6.13.7","dist":{"integrity":"sha512-F20KxTqC0tnXUXldlTL/ofj7x72IPJCoULC3LsKJ1tuKFXor7SQgIhN9LPrgxZzdsvcgguXInQr2hHg4lP3ESg==","shasum":"ba7acf4918a6debf2365bfd0410e0c01b09bdf02","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.2.tgz","fileCount":91,"unpackedSize":24151297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVl8VCRA9TVsSAnZWagAAox4P/33Y49bRKsk+HHZ0iAL1\nBkx9cT3fa4pMAafI84YxdH3UosZxrnp549yed/FgvBRwMuRU6MVP0AaRN0Tb\nrZ+lVbs8mlUXZJAzRRBbLJhqLMzXRxEL4cmlVfRUzcAkfQ9frYyskOQwShKU\nsS8afgCukiWOEv1Ypr+tkArVpN0Vn5U9QKgx44UuLAL+lBbOYVUqz+uZzXLE\nURQQrVneLUhMgAC7jRGvY1LUYwKqEFHSUvvYhq1qejUKakYNJsZzyd+xTtlw\nYFds78SZGPm6XPf3/2ee5c+BIAnf/colfO2T1dBTHpyYCVv1NOUGNwpRCN+F\nnr6s0Mv6+P6hbBRORouEaWljh5po6FZC6IHYIv6vtFC13HRmOwz9nx0F9D3v\n4lN9fy0bwhRjLzWnsnz/zoLzSxWhXMrbaTqMuOQbgawrEo72wEToZHsN69Zb\nK2HsqwL865m9WB5s+B0R7ITwYLFGAHd56+13bpRBCQ2gS5mdunOO2I8g+E28\nGgSosSwKIjhgP4X+VhBJARkQK3yAgvJqirt7+NClRt76SRnb9mgcoMMMFWw3\ndSuCS7k7gyqCM2qRuPebLR4oAuvTLHTdMBzoIDXBkkYlJqANz4GRhiyOrD7h\nOdU3MTQlWdQ3xljckmMt9ezCW3loavoTlcOzE1LK+PB1pFIPwHQbMmZnEbVD\nz0uC\r\n=nwzN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdESSM4ubmj7AWVqGsQZVcBTzFPypTKTfaNO3+j01GvgIhALsUY6wXQxiedLO0x2GF7l7W9SIV5XTWg/8J65NVjLj9"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.2_1582718740962_0.5170442394009251"},"_hasShrinkwrap":false},"1.1.0-alpha.3":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.3","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"57292b404e9328b57e9fab51021b3e025f08cf19","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.3","_nodeVersion":"12.16.1","_npmVersion":"6.14.1","dist":{"integrity":"sha512-H/oiaMAWw/UTS9o9ly8kgZXa2OMJDxa5lH/rdtA/K8nLhMZ6w3j284Bi+YUfRudc7tIDH3/ShGHDptJSFvPa1A==","shasum":"34169f035aa0616055e320d16dbd5d674c674761","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.3.tgz","fileCount":99,"unpackedSize":24214508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXTWeCRA9TVsSAnZWagAAMgYP/Ak5OI55fGeBiqprhd3A\nCaTCtJq5W1hv3BqILOo2P1aG11wElUMwDiMA8MhkrM/ugTcJFe7y5FnWZW39\ndxxMvJQzfLMjgDFoMVvsQqzS/5YDhUykUvQLh+GMT3CIlfFow9w/3e1cmldH\nvbrHpajIgiZceZutuMXGj9jS7xdOK9NW7V0JMu4ZATZNlAGqKMkpgJISmGCd\nbcV49f+yty+OkcZBRrQMznZOj/5WmvUTEBuAj5TGJVVMXzkXiYNkdyOxV5vH\n924UsKQKRVVHtTClI+65oq+4kRAC+M6aAoPq8bIcX7qFO9WhAaoOzuuFIW8q\nBJtQiKD4xQFTgtts9vVdTv0/kPKtKbLuvNEVlIC8/NrL2St+tw5pvT8iWMhO\n4Lcy4c+NwXDxmyiBVVgzCYRXqxPQiNGvsFnKSJHlVlAFQbQ/Uz/gv2MtQCz6\nlxxkMIgUy41KCsmab8ll0TQJpPQsoquROC8R0cS61sWU6Kwag9ud471gNsdO\nPSjI7I8diUnOyk5RDPeFB2Ih7SBsyIgxKNv6NscrZQr+oFXl02IyLAgNJ3nU\n7k3ybGIB35h3rjsxfz2QXSBQDkdaaE2a4La9fDZ1HTvQUu2sXFSa4q0iobey\ngcEN8m9C5y8a/ED6W+XOw5M0R05NmTOPU43SqP2p4eWZENfDRs26aWegF62S\ntCzf\r\n=nuLV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEeXi0aooARsbm7NRkfMy8CyYMPHKwa8lC9ImhboFAYAIhAJYrf0slDg/HwH8SB3CH96FIhBdS4NDAUeb9YDHM1/LH"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.3_1583166877522_0.9018110847010434"},"_hasShrinkwrap":false},"1.1.0-alpha.4":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.4","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"6a38b8d82c26443c411f41012c356c3aed0dbf26","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.4","_nodeVersion":"12.16.1","_npmVersion":"6.14.1","dist":{"integrity":"sha512-rxBbnNNIfSam7bpG62Aei0QzM5NYyD6Ct4rR1u9SyMkgj/rq5OFu4y+u2HqLwJG+j3ZZG6uJDZCgUMCqrrYVBw==","shasum":"a1adcfb0bd05b5035ab632f200d2d37be078e4c1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.4.tgz","fileCount":100,"unpackedSize":24217737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXlADCRA9TVsSAnZWagAAqkAP/2qpGbdm2WzTV1u8PQFe\nxz4Ddmbo2ipmNwDj4yuTdEbGPzzqj0stkGpWKZI51qkhPrJ79/D/c5+0iNqE\nzkbiEPA9CBlZV0bUqchv5dePcdWF0pgO2bQrH8L5UOBQamsqM2zq0687xdoz\n+LsL66+IGVEY9k723oMg6gQx+TIhGjbG0/zZgDP54mVclHX+Je130bdueeMg\njJ1ZPWIICIyka7Onbjht+f476pf9775noMMLk3sD0RzfRRtP83Hx5uru650O\noc2FcCDsw/+3qUpKWCHsNpz7lqT5a6oXpSM88v7aj8PWXFGMIO2h8vVgJWcd\npjpciYyMVR2xoERVtvqKzsYJxR20fkV+FZq+gD3Vh0wKgOvOfRyxPKKYqANy\nCteZ+JBAsL1zhBnsfKjP+BfO8o7XBHL4wo8rX8+IRkOCID+NartHa8HkpIWq\nxGsXi6ah/CM7lh/8cPYsvlP4NSz06T9yupr/ipobM/gn6rKoMBnrjSIy45U6\nTtTlYHlR/ykRvjynqcd0xLzZkkRbkrQ7dJqr/+MxuQRuUvc8FHDRDEzxxp9F\nhirNRfvqjqO7LN/oFJnn41duf6vg6dcV1NsNd9fGZ5s1P83Ik0jPd4DlZ7/n\nJlsWxNHRLBSewuCzwskRcj49s3UtxfIs7/91F0KaRPYnW7IvSKL8fVxPDLeQ\nu9AL\r\n=jNz0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGV5AuUC8y37hmmTMCVVliqZtiROR9TzTGFSl5UZ+4FjAiEAkpo5YApgXhXs7RbvhwwkIsqxtRNIK9shdHINLrwflas="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.4_1583239170897_0.9456889054352147"},"_hasShrinkwrap":false},"1.1.0-alpha.5":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.5","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"fb02a33ead7a371869f58a6cc3dbb8d93c1a122c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.5","_nodeVersion":"12.16.1","_npmVersion":"6.14.1","dist":{"integrity":"sha512-pfHq6YN5ggm1pr6o7p6W6fUOMXgwxtLzAtx/jpx2Xd1lbNz7/09R2GK6BmxIS8hqdXxmbWtt3PSqtGKgCIM+Xw==","shasum":"7fb0aa7490534bcd099295a69c53a92011296107","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.5.tgz","fileCount":100,"unpackedSize":24218038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXmXYCRA9TVsSAnZWagAAk18QAJwu0UKHpNFmTOBjM8oR\nxPnyJV9tIqdMMaootyeIOBVpEqWRvDldxC/eAzBDPgDfVTsczN8oYm3g9E20\ngPlzQiEhN789cpTeX3Z+xG+Q1YxgjQKmvwbESVk41c07n58SuurSi/75nXI1\nPa+/7QICgHGLFERld/7BhV2W8RvuWccDmstaUyD3S239WZNZ+CU1eEca1szy\n4KsmE2kWOn5F9YpAxfjFWiEnXXExV2OSHCYp7dE2QsdFkp3ZQm+99PMoP6me\nbZQ4UQNeEt4GoQHC+/4Cx4ifc0tid+AqvYm5hOlmhgbyjy8gpCFjnuRhaNIr\n6JNJNSn6pHyOde/xUIVjlpkPT0RFSGi59EjIj2X4R3m2hhMNgkXFcSlao6OC\nFKuOXwSicAlMn0Bcb6usnjkE2CIgofZ2tPE9P5JutTQ2xCvUEIDOco1W6nS5\n+0QXFvZevfhE9/3j1YhPszyGMA6uWmVOvGp6joDaoUiXdslKTNG01SX4k0ty\nuoZmyIbC8XoCK//ImdlsGvy4iG6zt6wOmALMhtHt+OkU7fVaHvnrCmllXj/q\nY8GLRYbIJNbBVO79h4ISwo2ROU34Rx0EhCLlKlaE2ssyBltMT8bxEI0XoGgL\nuqhWE61MsMSwJYnze84ooy7xVflOl8AdocfrOGow0ZBhF0FCBxh1bpraPRPr\nTq1d\r\n=lgtg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiNjxVLW9Bpmc1zhSt647mWcFsXmZwAYuuonq+geDP1wIhANKM499pH5Gy7OXKzovl3l3XIwnXUhtow97HTVOD+SHM"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.5_1583244759744_0.044819030402087456"},"_hasShrinkwrap":false},"1.1.0-alpha.6":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.6","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"ff029c91c1c2a2daba6a7a889a039c2541e6aebe","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.6","_nodeVersion":"12.16.1","_npmVersion":"6.14.1","dist":{"integrity":"sha512-GSWS3Xf1Eit4Nd6pngcNMT01nbLkhhKZxni3yi4QPwDKcjcLOR3Vh0vS8lZQpt0VLNjhSIBD0l/LVjoT4pTOgQ==","shasum":"42a3bb3a0c261f5c4bcded5e51aca78644c72dbe","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.6.tgz","fileCount":100,"unpackedSize":24225572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXmxXCRA9TVsSAnZWagAAAY0P/0zlWZSGHzsDYhiKhoS3\nZyTQTngPQbiDfhC5Ce/oD3hYEtWE4nVJl9+irSHfq4AlyHOUat8q9kkmdb7p\n5k7APUVGP+f1d8902HmQP7m+mJkUJww6NHDtXrt3GqM5WDIYxZUlvw7cyJio\nqj6UujXxL/OD+Vo4z1gzBHSPC4mC5bH1Hv1n4/WQaogpP5voX42Ldiuam6WY\nUl2nK//QE+0l+cTax0d2u9/+l4TJV4Al7zVop4Jix3NBWmB+ldI57hLJzHbG\n+9ifWELJ4iqUrF5X7Cu8rJ48sEriK5kSfzist2QMVOdb/pW+m9GLGxyHNDxW\n8EU5Y3MChXe3qmJ2beDJRSf7Hzukh+df7lDedu6+5p3y1zDLlDE0bCesPheB\nZhhSdAN9fsX0ynJA55oaGWnXUiqDlIzXox2SSEC3WcqxEYIpF3fSk78+GC7g\nDdtXskeSRAs2r6mvd4WwrcjiT4GiO8huoS+3FviZa8b6ZUYla1X/UJwYX4W2\noyNnjReXiLDH+wWDAz1ZjMGkHSw0HJhkA9L8CjhDEDMXrnUubiaPsgGBxq4p\nx3lsZ601a24b809VM755m6v5rvrw3kKRPdaFGxUiNvgbUQFGdFbxgtleVjFg\nEvR4+tAZ1PAFa4DfznLDhwIzliefFdiQSPLY4ldlm25URUljItzojCWtZh88\n6/MB\r\n=MwDT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/jGa6XfDbKYA1+i5/pQ/EdnsQTWgC9qGRX9TfOOtT1wIhAIwFMcYlxoW5Zj2A+vFyyuiz2bl+y5LHzvVrYuek2hJr"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.6_1583246422553_0.5376110623189827"},"_hasShrinkwrap":false},"1.1.0-alpha.7":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.7","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.16"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"9730cb2b59aaf0bbe004be9027ffd142766b9bea","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.7","_nodeVersion":"12.16.1","_npmVersion":"6.14.1","dist":{"integrity":"sha512-PHwvzZRWaMCxKeShyluTumkUxQne89C3N4P+vBJvd/pku5e8XxR+XfjHmjOdaJ+D5hNnSqkBIK/Su/U1RiFREA==","shasum":"d742b595502cc8aa3159fedef1c53a7b46f9d981","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.7.tgz","fileCount":99,"unpackedSize":24229141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX39/CRA9TVsSAnZWagAA7y4P/jjt0dBx+iO/zH4Si44k\naxfZv6SJLlVgoaHKQmk8yPaEUn92pDxli4g7GpuFGNXE/yNvwpyo5i9aN+Hh\nhWjVGe43txDf6S+0EIJbUnL1sEXMsLfwfLxz1Dc4RpHXsEVc7efaNqt35cCS\ncwABf+COdnyl5hFqkxr2m/vgIeHtjC6YYbxIwxzvQgQHzyNt0/HOxKMWR4Zx\nDzvXpNcygOB6m8VESB4iT94udU/18FQdQKFr5dfNssFR27K7w1YAzOV3W8HQ\n0ro7h1enHtuhF+wrZHl8RNix4EbobJWhpaQok+h2syPsp3Nv88DC6OjP/mkl\nE7PlTJ7tNOBdP4mIjKLggzZFfTw/PCRKIFFTPMSN8S5+1lLq58jmnyCYAurp\nW8UBCu0+FjA4xuPw/G4YyiTcWmpF2qMhZpKK1XkCRP6BCBknnX2UJbH3As7X\n3gRaEFNh40GmKGSVpRmjPRq4MzaPU+2BuBCTP8Z3VtbLGCoFNTLzDjm8zvZf\n8WN6uAhwpfZo5WlEjjwwjRjsU8DAkiU5Svid7V3zUYfDUE2WERW1iqHJ5uoI\nJztMIITgcgoyPwxQ2q84KZS9fPbkDXCp+KHpK1QGFk82nE7Z0E4fLMbN5G3B\nSvA+fnE3nrZ1CGE7I7TrGRHeGsySwrmMHfSwKfhiZhGx4PYpkC+Tz/q/sXj+\n3fYc\r\n=8Yto\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3GO9nze6of+hvZGDlKuVxtlBrJyOpqgD5ZwnMHIi9tAiEA0GcOR7sx80IUrDFKbPR0AgBkiyuNZ3l67LgyM29AaVE="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.7_1583316862069_0.9951667465664304"},"_hasShrinkwrap":false},"1.1.0-alpha.8":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.8","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.23"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"870f1e3de33b4c2c6fc42970222dc654d5fad1a4","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.8","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-cg93BXw4rR52UhHDu/aSPKMMTgI8ZbxhUmSDrkWS46Dt9MfmJ1Xj4h+fqKa2ES63K5Tz9ZE6WMsq+NL4bB32sA==","shasum":"66ddd1a51efacd2325f52521c60f80428d2b83f5","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.8.tgz","fileCount":97,"unpackedSize":24224143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaQtxCRA9TVsSAnZWagAAaKAP/3pp9qdd3GbYzBGbCr35\neNOAznnLIXTikr0qq9IExIHaaOZrhkaJxGReELih6DfLz8kLV0kDKV41TbTF\nI+D8Xi5OL91DdQcCgl6DYm1dW3dn7PYxXkw9zvqafh9ySUoml/rJw2h5NrPP\nKrA0RYwyZDW2XUR9oLh1GN3gEdBd4KOFCSG/SOMUQx1un8cRwO5/+I1Uzon6\n/8TszxLKasC9NOL8GrJ/BiUvFfQ1RoW2VocSDTgB+N2ujLuhApPUJqjS4zGr\nTmapSk20UeSlQCGloeVNcvfG7lIpyUJfSUT8hthy0y1NfehwLLhvt/JQyiFX\n++wqHba0HD2exymLHB0Gb6DYgqS+UjGuA2cbc2X6Al4RSiG2Cad/iaDUbTvS\nwkJQWDVPsVcpLopvdDBOrWpBQIigzkayTUgzZqTmcG/bdnDBpzFaAt/PJ6Y0\nsCnkc8V22y2F5tGVqZlsHsSY/xPFlxPOzBLcUgN1rQQvyxtqpxF7ZnqvyeNY\nTHkMayLn90iPZWta2lZTdllLpVLXNBeFgMvb+Hut0M6jFzVpO1uI0kl3p5zv\n7+KlgNBJtoIZbkuZTvNXBqB3QkXckaZaXJk1e8FtYaHnvGCrv3BjEZSZ4JrT\nQWwsYU5xySqE/U/ntCifiOp/l53Vfgts1QhdloigAvEcRYUGq4nig6yrc/M7\nGFKc\r\n=HTxb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAEyAGcadqmwHA87Zaov/A1ke/8VHBB3hICKMP29zSBqAiA/QCKjz08oNMcUbAjWx1AU6omlTqd4U+7hgVI0Qlf8Fg=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.8_1583942512873_0.7509668199192976"},"_hasShrinkwrap":false},"1.1.0-alpha.9":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.9","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.23"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"f92cebcf378d0d1dedbc9c66a282e9e963ed47e6","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.9","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-sCAonUFcht7KIX5EX874ZCx6PU+/GJHlSiFQIVnBEHqx1Yj8lxIwOMriOLkFCYVjXysImVDiViWQJhe5vyNacQ==","shasum":"9a0f6863f72d6db6eb309abd8b0c2c3e119b0fce","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.9.tgz","fileCount":97,"unpackedSize":24224748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRDOCRA9TVsSAnZWagAA/acP/1h00uiA5kwWPNre4rF6\nSEhzIjOdrGeh2aqFEkIt82MTFWzZiwR7xzRQrGfAO4eQ/9ceb/BXa7fkJQ/y\n9yEjVuNbMdAPkesXqEuDw03wjJqclAwenNfCXq9FASBvOpQAYuXfZDC3GChQ\nXt4lDUewF7ipWTKeI0tHqmuPbt39piXi7Qs0ua1txn7z4C+9aHOCJLtb5R9f\nkFnw4BWTMhnxqk7l33si3tflo5crqfC2D066tp0qKU3eP1/dtj0Bb8RQpInG\nujZInPfDXgcvuKLgwZytTXf3EeMo3mcTCfOe0+uJvC0hJQ0E2iZn+M19OL1L\nTvmEu1e2L4woCZ2lzrbdfBJM3mZ5vp0UHLMN3+6RzZfqDl4YL3rc1gL7gIG1\n4gaggiqSG9u3pwOsvfurkYrGPUdsn4lcaMQ9AvFaMa0WN2Eng0iSmiiXqHzW\nzEzbdDrtj59VlNsrFrE3J4sdbAzKZd3zeUnswXAzh883jrhD1aq7LblcuZqi\nBtm5brohM1fihZFPd8CbG+9fU6CAGq+pAz/kppV669NSSBd6Z7MGIgiRTRO3\nNjvu17xoqmPLB+VTKiuKQJiVYA3+I3BxpkXzJhxYJL2yt1whvRnGww+DKlll\nNrpIFaOsK5x0a+rHKslgTOCd83u60tku2d89MdN3iPyjwBdm7A6RgKpbe00a\nbHa9\r\n=54C/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAb2dkqT+Pgs+3sF5KUXR/pZ9/Z2CKAknjdIaUjBY17PAiA36C1Lzp0cjLG2iUxX12cawT2/sr6FDwF6uc0RnHDYtQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.9_1583943885288_0.5579493115538532"},"_hasShrinkwrap":false},"1.1.0-alpha.10":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.10","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.23"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"0a3984b6e8bf3a6cb1d24173e88c074dabf6d8e0","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.10","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-/n73j77qC0R5sD9lWx4OEz8TEyWmz/kIkOe4PM6MSXtYKMsoFU9y3nxUeovKwmTlsN52udvWCjNfHj6gpBktdg==","shasum":"e200bcf9d5c01abea37c2665dd55442b1eacc22e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.10.tgz","fileCount":97,"unpackedSize":24224649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRmxCRA9TVsSAnZWagAACAQP/isIFKGpixhPaYwc2tlk\n5OvI3idActcu1iX8V5V9Y4lrKSk/kH1b+G2MdxH/XlLg1Z5Yn6+RGGKw9WSA\ny0qVvJESQ01ojGErlmi2cEsxJCneHquvllDH1zF25M/VwaJSpWDqD24DEdyt\nCICgH118qlB+2ETzhLRgxLGrMywYBfeQgh07nUFxBB+x/TTg3NE7J3gdutxF\n+8zwkQuSi8848mYSjcEAqw40ydQrpgULl/nN9FXfx676CkH04tnQLvdZvftp\nqqJkIERRgNkUWIiy2F4McKgTZAb+iT10IP/8HJaGTkjdx+bPPlOfxbWe9BD7\nFxr7DyvAxSplp9icoDgFYdQTP4cHBGzKDBe0UpeKaukRfPKOs7J8LB7yOW/R\nUb+V7+ejRfU7Sv/3V9LVTiEfWF8dTGqDfRCuKGEaPcJzCyFTPD++5idCUSgq\nWRL8NuaH+hORqzBKjtDgEZ7VsWpNSEFU0OpM3D2DjKIg+MA5840Un+/KN5QL\nFl+b0J97HL/6hspq9dVzpS/uQIcVoOEsKwLRjX9Zq2ALZrVKX1Pz4Fsc5F/7\ndnAuZK9TBKXlBdeFXA1o+HfIB4KZkNVNrw+AlMdB/WjVO2VNAa/mC36CHqKP\ng+pgXhg5siqZpPx+e0ne469vEyvDGKpUSri2wjTn5yfWIo5x6UVR2zOtQ9os\njCIw\r\n=thSc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDC7vqyO2snFFqTJiq9YRyIfSn6Rr+N7E4iTto9cpPVeAiAZKKiXKAPv6cNjeACjzAyGFWxIpOssQUdtAmIMd2dBsg=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.10_1583946160783_0.08122002191116429"},"_hasShrinkwrap":false},"1.1.0-alpha.11":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.11","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.23"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"780f3fb7a7087adae2bb54cd0a8129945c7890e7","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.11","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-wMBucGrLEoW1i7Vpa9nw5NJHmHAD/11unTkYSHtCcBSpr0T9xccr2tD4eyL5Ri6MhhMezGfRTMsJ952ZsV+NQg==","shasum":"743b089beacff3a7f0c403c36b84b0342da142d3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.11.tgz","fileCount":91,"unpackedSize":24222905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea1JdCRA9TVsSAnZWagAADkYP/0asDWF70zAOGSo7Sa9x\n5DeUlU2O5/NnjgjfqUmoiDnbCQjXynwlPGYmtBw3VE4f0M+PYDM1EFQcQauD\nZ4EfGikxFB+6evNF2nJ+kzvQ4rnrGQSCvmtKYliSLBJYno0aob58ShDz5MgC\nt2MR6QwW3eA5YnNDP01Js6NOkimekEQZZ4vv1XMal7eoRPhX71DFGlvkdOsQ\nIbulS88ZsXkfqNOCSuUk/qJKmftRtrT/qqZk02b5BMIGXLS/QOi+R9O3DyTf\nY2aEu1dWuQc7xyG++m7AKbS2/H9VWZZN5VsQIUVEqXm6QT4itZ56bc+xge7E\n/YJo1WvDRhyPHhlyW0iSYvCc+WtW1YjPkdqhQ3Nlemu7wZvBnDU+p1p1EFi2\nl0UwSRez0gpTGPy0UU41MKwsYNI5e731asLQXOsVBS5YvWrTAW6S62S6n7qC\n0YL84h46vB+RoMze+zC2M247nJTQz3Y64USssse/3ghqvqvaSWnz9YMSIbnK\noCxQCpMdZFdMo9g5V4f/A9xJQTyM0Cq+TpD3EF/nSzlcFTxtgtBa4iXim239\nWEc7yUap78TW4ds0MRJflBdCuY/eVHU/BQC/Z0FxOG5n0NB408c1v/HCjyTK\nDaowoyS6lZHFuYVpn6BDEHqGSg0+F9AEYUIQ7o8CN0pzoP6/sQswmNtKI4MK\nLVts\r\n=BGfs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGv+OzBXJsqxPi9xCyLvuBfwHhd/oWTKE2BGGrMvAdy2AiA7rTcqvHS0Oj0LURC/Y0dtE4WVs9iLRDgktsJELsLmcQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.11_1584091738942_0.5964035129818883"},"_hasShrinkwrap":false},"1.1.0-alpha.12":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.12","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.23"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"42d4b197140715e16c6564f7400fdcb6c118bb2a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.12","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-tmWgLsAv+32fju4hUkKvulL1j35P+WVfh4j4GHlysJapVVuV9z8vgnef7E7KBInDvG9/6H/CsHSzqd9I7lNRcQ==","shasum":"19e4d755be80010640f4ef3728b1d5dd66639e73","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.12.tgz","fileCount":95,"unpackedSize":24249353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea16QCRA9TVsSAnZWagAA0zUP/2HG+M9z4Ba6bNOPUbUD\nVtOqJPNUH/95Slfznh1cQ8MRVS/Yg1Mad0Ad6PErns8tjfhwraWdZ/R0YLcH\njUjmClEUdkcEt9a3F+c95qmz8HEZUUFnzhS9yoNc3YaPyln7ahqIR4yeKvQH\nn3VMuUw2LLujMJzcp2IZEiIvNpD2q01xmEIUQGZIvSzkqf3/eFH15Z+O2bZJ\nLaN7vcQkNNAs5jsey3pJTXZGod0fjnk6b/3a8rgi4uf7tcI9GOgq00Waqynh\nzEO4m1OFdVSS4zCJDF1pHxS7w0kSFQ8vap8VMdozVS2Z51qXE+wBZy71iV2y\nn8WEsOG4kBEAokIYxKUbjsxTi6bP5zKStrw952c5pAtpsiFlSvakUbrKkuvB\nFoEtp+Oaessm+yYieLQhJscE4hY/1Sp+WNMj+ox1JDFk2iEi0wzn51turM31\nEQiT+1aUvkMBzrVuCnGjpPPHloFrpa8YwOusALqH9I5OTLrXAaexwuOZ9kOc\nObQtO3LJYWfkSLjnHuktig75rzrpp/h7a0na7EbiavvBfAoiqWAwQcuX2bIi\nUvIhjewlAkSxSTe5NTti7cPMOcD0YIZIQRuGFRLVuxdQCavtCEi0i0ONjjER\n/xak3rdqAJEdoUs1GBTeJyCpOdNYG21vbYxB5lGb0cKpCNFR/0mToORzjUX9\n/thW\r\n=Uvnj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVc9UXwu/2SG6Lp09pDQCJ9rvJBioiSEvACTgV9dIq9AiEAif/ZwG8l4e5M72zdVs5Oui8JX+/EYss7yYoPZ8QuKxc="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.12_1584094863998_0.4233402027727242"},"_hasShrinkwrap":false},"1.1.0-alpha.13":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.13","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.23"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"aa178a6f2e57a12dacf91fefd80637aacd99f091","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.13","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-mLSlzHGV9n9ZGk0pNSMCYLjatl1hZo+Rl5lrWCu1qatp5rMoBmUXM5jQad8/13V+0CwOtZCOfMlxiBEw5p4kXA==","shasum":"eba7dca916f611fb3bbb6e27ffd6678cd7c6d382","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.13.tgz","fileCount":95,"unpackedSize":24249949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeed+kCRA9TVsSAnZWagAA6qcP/1wId1EUa0Hn8xSuv3RA\ntzDlotGFfm7XoQSHTGjCf8hThpeqbM1TOjrPCvGfPvzhze9jEptNC02UmrXu\nSfDXtunbv+TT3V3NnKUozE+3tUQ1kMj2mmijCXmaoRMHfkpJURroTZ8kLW79\nFL3st7YD4eFQz/1ZRmPN4dgjFiuDbaYA4y81nv1XALivEoEFOWjHyXjh+1Tl\na2+4o9sZxi/rRK0q0S9Zun5cHpqVA3Ja45d0lS87ZAVZuPaludxMMo07fnrp\nolMt4I5iz3PIc7atU0+tb3WGNIVzYvzzykvwCU9cx8ZOW012WnDpNG04SkkJ\ns/t2Y9nNH3dQsHC4AjX4i+acsUWVjQrLTf5eoXTrRWYWnXM9V6u9hn7YfKt9\nJgDRd+S6CQPQ8GMeOORQ45b25R28+yAy1lVToklnLIMvkewlZC4Hhpa/iyWb\nLqD4i9t1QwIpe/ferh5sqc6udJHWojF6AceZXCjIJdV1JX1nqsgRvXVpMc0D\nQEeUXIiJYhAl+HmNEPWokCvRy1t9xhRkdKTpZWj+sm418/gp1mfftGsRIQLe\nG2y3iSVuIO/BRLFf+/6KDv5qPkEI1grxxUx/yAz6Ja6E9hBuEjWwQq3oack9\nWmzGLx0WUK7tmI25jvgHLQIpv3DS9h25AJJPK7WVv0s1/SGT53TCjQHJFOtf\nvv7j\r\n=IZqB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDALDI3g6CrbUMwqzCmoQNTOA/e5gqWDAOMaLmU6pPpsAIgLNi1n4CWxzUWiAhkQJ6OxN2H1Uhdrw6nhprycHwF9Eo="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.13_1585045411181_0.4364517625459736"},"_hasShrinkwrap":false},"1.1.0-alpha.14":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.14","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.8.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.14","@storybook/addon-links":"^5.3.14","@storybook/addons":"^5.3.14","@storybook/react":"^5.3.14","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.23","@types/react-dom":"^16.9.5","@types/styled-components":"^5.0.1","babel-loader":"^8.0.6","babel-preset-react-app":"^9.1.1","cypress":"^4.1.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.0","react-dom":"^16.13.0","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^3.3.1","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.12.3","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^2.1.11","polished":"^3.4.4","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.23"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"275557f2dcd5924a3eba7583b5ed5388bfd8c353","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.14","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-2Q9VKcgLUUSdr2eN91lAnpeODe5NDYKXwmYh7sBTJyT6IwMlhUCy9RGtLmimblcfjpAokmCErfPGcM/xiUj7Uw==","shasum":"878a9d346315a4f3d8b7756b8d1862590666df95","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.14.tgz","fileCount":95,"unpackedSize":24253150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegx8TCRA9TVsSAnZWagAAqVUP/iz2v9SQx4GVyW2cozpA\nMagZjM/3B7i5xKjbkUNpbc1RlFrAykqkTdDgD00pieDBZ5m+FjAfUOKP9RUZ\njdj6BwQ9EcARv2WTh+ebohypNc1NFDax9JSudQVrEAsvIk8ees+AQI2UfR4q\n0SSUpA3dvaRZBnd0qNNCUso1UHard01hIkSDu5mHrPZDEcmR6M8D2wafm3kp\nTRVy+ncqoiaNb0iXR+ahoVVbJN02YbAuSPHOS1wkoIOGPfJAPqzRdI9WNOlC\n6vxd9sUHkYWpCYVLbwyXwzjnirVvWEH73GWFc84zXyfjeSQXB/CtWrn+pHgA\nLjzm/H/hLG12Io0ukiOsvg+BZ3r+Ui3gTfrSqYHCaCSE9IteNsQn5hiBDwxH\nW1VLOvJAG1L2/xKEi1nipBKZp8472IWAkOikb/XAcuvErkDQYzezJccUvI7N\nD3+nryFG6zRHfRwBsV9GKCvRbyX4eU4nl0FXdd1IRLJauk3eEAovlZYcYb18\niPJDpb5QCaR7C+OPU50b4rkzfCsYJN26HYXXZx4YEPANda6MEjkhI5V5Umjx\nQUqZEfJlXIVTL+A0Xlw1Z11Rgjv/Ko/7+TdQ6qA6R9o/NOF2y50UP7+m/qLc\nA9fs7f4rnunDztOY02t1sNNJ8doMitTeS8IJ6KjFTrr1+VVEqIKEtjLHeEPH\nxiyZ\r\n=R+76\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGnWxr6r9peqfF8rahCHxxdrdxaXrsOd5UHwVzjYvDzAiBCUL5Vk7Fy/d0NygO6XBJFhQOiefBsUtt5ho+lYa2M0Q=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.14_1585651475082_0.9126392472273308"},"_hasShrinkwrap":false},"1.1.0-alpha.15":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.15","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"4a1a3399f76f76c9983d1e2ba46b0ca3f383a31c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.15","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-2cSXPSO9RVWGWiCatMZFdp4nXb/u7JI/nHk5rW8GjmWvy8NnXJl6loVH6fkoM52TWcZgLYjMdPXkA+JAgpSosg==","shasum":"5ce8ca0780952299f6c7d652fef9b32ef9f361d9","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.15.tgz","fileCount":95,"unpackedSize":24239361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehH2ECRA9TVsSAnZWagAABBIP/i/S6D3dklOAzvrKkMSh\nr+0oaedgfnXmK8PXRU/QfpCcwttGzLyYieqarTEtslf6LUSK6f86bpcl79gq\nziDofimZ0Id2jTxYKF8RH/gb7JI5uhOHdvc5A8YuXamSO8hsHfmK59YiVm7e\nh4f9n545Q8SBN95q0BskYbHoF6gBKSVuwJgDhEIodccztwnOrVUnK6x92ZFy\nlvPFmLSTIT+zQy1tj8f7JQXmJ5SzD0WluoeWUozpEPEV5PjgQtl1PerwvMg0\nVUnFPWcYOZTYy0cJejTKRKKuRIizGrwyi4ZPQM6Acg+1IZn4CRw9GQGfha3V\nGmir5+6/I4dCvHDsTBOfbE9KqU/1ZBLprEC35i1ISf7t1vNLT6A2UQxaICsY\nILBD5GknPpFnmlc11rEviwOSVXXu+Eh8lW29020sPz0POJ793vRSx7iSTqf3\ns6YhfQTcD2Ktg4V3ElGeV9p5uucaZ8hmbjTx6cx7XvhprQeBjpOAxaB9hAns\nyGfVXzsgEiImfj/7JrZ/yGxWS24e2nKMFHa/x8H7IriDPcfKITKn4MVbCmAF\nwjxnXQzk1dMhzS9Ca8ZQEKH5G8ZcZk5NREUa0oAY/Qn4MZFfV+SFnb4oQIXv\npxdgjvwXgeXZkEI3g2tbncZIY+5ooLA2McOvGvXoc/CHactVkAaPu5MfenW1\n2LHy\r\n=tN5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCalHNHAqtFXMtY7S1DqLK+YTwrvQ28O7SNJ6LwFxXNLwIgGNIuieugfcqWHUkMGMPglUtwzbePAPx3i8pJW4poIRs="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.15_1585741187383_0.1216137215523807"},"_hasShrinkwrap":false},"1.1.0-alpha.16":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.16","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"088a64879e2262f28c032dbf763a729c89a5dcfd","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.16","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-Lf2tcDCW0Ox1vmkG63YoyodTUvQNZDn3j5ozEkvjuhZbT8oIsLtOUvYnHRB9k4h07Ojkg6R8PU0FP6RMLgz9Bw==","shasum":"0e5b674e92f73ad0d635752c3834201f8e2e55cc","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.16.tgz","fileCount":98,"unpackedSize":24248908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejWXrCRA9TVsSAnZWagAA8QcP/3Hu/W7lny1EcksJs0Wc\n98VZRKI2xG0QRv7oGLuIhX6/EetWDd6j/oPQhEU+Ct+48AboEV16/8O7UUHe\nm/1MmlHSy385qZgnwcVszktfmtZaWEta6uLxHf7Oyfl6EcDW8s8WJpcpSY7Y\nA0FFzI1M7Kl+0vwty7WTcKasQ+yQp6lt/ufoVB2Of+yvb1lb+Bmlo0kPxiaP\nBO15xP7WKjD3zwrgPeLNxIePrS4CeFVLNxWdPt8eWkKTEhv6qRdkprzIY/dz\n4qHMisOt6+z+t9cRBJ9GxI2o9C+OaqohewNeffmDYtnpfe/GthnHyR/uikJw\nN08ZXP9/VhL2sYamR8a0NCHM5sLC4orHpkckXqhyofkI0JmkDUiBzFRZlNpk\n6sT3t49txkdEzpAXmCUzWp4IH7w0hAoIoq1n/xKVrz6zc7incDRA45Nn6x1w\n5I3uj87/ZeVxTrwW8HFPYo4YBVNq4jzdAPAlNN9yZiymT3GEJijG8/OEb79m\nje3S1AOQCWy+ltJCmuy7tSCHkrOp8lA9XhYwdQLdJJveH6VsLyms8tKrvnIc\nkvgaUJUTBZD+bdjX1zsqy5ZBDKOl8B3LJiJM1GkeaKyVeL4KXaNNXIE5t+Y/\n3VzHqy71gtQeZqcUwKkDopV2sPyzDNgX85uBubsckT8dfLa3/SuwGUABUehV\nG5ox\r\n=W1Q1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHoNKOcKSkc6Df0cdpSJtQajH9JvybptSrjG/uK9ZVy1AiARVqHVSOdWb3bhhPJ+vcoypY1phH5CWDCabLviS9xENw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.16_1586324970806_0.02624359375514773"},"_hasShrinkwrap":false},"1.1.0-alpha.17":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.17","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"8a4b7e493ebe7ebcb9d3491297a53526084a1111","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.17","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-6e8HnUME+48xM+jK1+z++oIeZK20QN4sXC5mxGFGzk5/oX2hUrCLyhCUlfDlwwOFq5EGwrodx1sGi31Q5d9XcA==","shasum":"91ec2d69d693b5287b0c75fdfba3bed87f2cdf57","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.17.tgz","fileCount":98,"unpackedSize":24248921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejafkCRA9TVsSAnZWagAAA+gP+QHrkE+wuhzFmQ31gxf/\n+7wNGtTFHzIm+lissgZbLPip7JNTLBBTybhgLb4rgSVWSUogI03KCJLnn1/Y\n2iBKkzMehIOcyrtts8XpUOZrY7H7PEjcPbIjIowNkuDt50D4WOi1CRJHq8eK\nLtYbHjlktgdbR01UxMAL1mtsZ57ADaOxMsp+Ug9C19Sjrqk0c5yieu4kEbAR\nek1P3SzXScEVk0o+lpbnypxwUeOf+3KhfPcDG3tRhkH+RJWdGfx1+hpm4ehN\n6KuDup3Kb9uF3Ijv4y7vMv07bs/Tm12a44GNaDA4GhgCaotbcez3/VGKe1X9\nUjJkHXSEmVhQ7VT9/Fyn1BnHOiWP4fpRytyI9WgvTO0YQRt/LLJpXTo7Rd7V\nGeSXRQgKQZP2G1Ek7zAx1zKT7VlsUwVyNxvgtJtyrCmIsVPgJzdu1pnKGhVA\nBjgBfRH9NCTXoC9fRp+l0L5aENBTssnlR2novrNDKCFzlJOCcpYQuOzm9UZK\nxmYQh8PVGCUSgaOC7mUc1HGXP9ZRcudM9ttagwhE/F+QJPPJJIyeHTHqyySi\nQaRDlGPpf0q24xISwQWfVGWvMdtFlGCnWzf8vlXU2+RiSO7RCw9Uk2KG8Gyt\nEQTtUXVV9mHiASMP+k1Py6SbmaTXOvfI9Tfywp7BqagtEBuOIuOTo55dhGLp\ngNqH\r\n=Se4S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDmHAsnoEThxX+yBDmCJ2J8LKNPopFfR28qnZN1Pn8YAiB+m/6AxyJzbsIS9/ooXtJPh1YJfZUU3eChuK+zV8CBzw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.17_1586341857667_0.6903291660869211"},"_hasShrinkwrap":false},"1.1.0-alpha.18":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.18","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"e01b4369c8b2f5228152b3c0a974c8dab53c31a7","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.18","_nodeVersion":"12.16.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-6YY2O/DJRTV2RPyTNDUzQENzjGPaItG4u6EmU5PYvlNt2gkIjw2YKV4aF6zcSV/81+x/zT4ZsArVLCcCx02fVg==","shasum":"00c75de7131623cc0be9783c6f9e7f8170ad15ea","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.18.tgz","fileCount":98,"unpackedSize":24248985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejdFqCRA9TVsSAnZWagAAJLsQAIbWJnej8mJUyPFb0gX4\nJkx/XjbvwsPkI2WfsE8aPY+E1w86kF6ww6XYADnOHpRsdylnG3A5FScC+IDl\nVuya2KYND9qhszNXE+LfEw/2OxdXxx/H6TaaMGm8pj14U1bMeNKrH9tUWmNW\nhgGa7J2iAUUimDvBJBeXGpoCMcxT04jfrKhT0IF+l6A9HUDP83tMfG81NN10\njXFp3RV8PdTHSISGV61wbDv+2zZQq6tqzajVRry8LxRxB+/cn/f5rbDOwqYb\nPvj2EWfPWfx8PMlW8+aQ2j/p6P15ZSpkBRMavDllvxNS+6d5X0EpOxZxICup\nhIJ/7484PSOoevgtbGfhtV1nRlXgP7KmqLQJXTiqX4Hii9kLdYjPq+YMLoet\nySwqZu5v7UyF9hiiUp913QnSW/buSen3xbBY9Vp4R04ZTVHrUJJHZKo9k1WL\nf2IofbTTdDU8xMTMTFs/GRomCSXWOMPFj1aE0Pubk7TshJjPNJ3ep2T3BoSM\n7j38GCJInJKxEHtjyl1R2+XRqkpsD5ehwWOB/qURaZpc5VM1RwYVXkesBz/e\ngp49P7pFUcx+tTiREYKcu0xXDMviJMMjOX8XUdj1AYbRJvXpgudNf7yOJ0Zh\njcBTxhTzzay1cfF9aatPMfmKAyfs42BrldCXShrt+4SWuVsrdkdaseh+l1xI\n+N1l\r\n=+JLo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0tGnu0O+rdDgrQoLne57gQCNc/2/R3Hq0i8/FcmMJ4AiEAnG/xIff65jmzUB+s7t8ewOP7XEDpVaERWe/oDQX36zs="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.18_1586352489655_0.38584528404113283"},"_hasShrinkwrap":false},"1.1.0-alpha.19":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.19","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"ec8347650f18c79e5229677b45407cfd54faf775","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.19","_nodeVersion":"12.16.2","_npmVersion":"6.14.2","dist":{"integrity":"sha512-Qm5u7vYxR63b0bYltFjlYN6knNK6Qb7A91HiGGbVPjUDIcwQnlmLmydkCze0Izajhde+xtcjmSxSD/5943DTFQ==","shasum":"8f53cfd15125d7b64949c2c155ea1450f0c81ced","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.19.tgz","fileCount":104,"unpackedSize":24270190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemBXyCRA9TVsSAnZWagAA+7cP/iXaeF8s1Lop356R9qBz\nBB9zwm0DcyGdLnH99LQsO8ISiyYrNOz8YsB4pS/NTOObfgg3Ky0kyxvsQaxL\n9qaitjUyy3z2mBKtJYR37jBREb+gzfdZlBlkm5KsAmPwvlJElrWZHDO6/sSS\nAIhEyw2L+MQlYSy9qPU3K+V1cmud2gNulBj+QxE5LynPcHSDsSZCG4iOgLC/\n9U7tmesg1EJQ5RFaDgJmWSZimVF4qdXH9zAkk20S5BT7FNFuDA5gwa/ey0l4\nXpu9rDkP17lBfl3hlujqVWjUKRESGS495RxSMXxSzyl8u3kHd1weg1JYNz26\nMOUCixp04ishXbZF99wXNYWD72F0DkfSBf+ViHVd7YpxS33ae3pj4H+bBOrW\nlOzOrXcxM7sH7Xc2xDVIpR+EP6jmEyMPiOCuDECPUpIIqmdcZsQkCYTivEXc\ndnBmLw/9T08qENU0ELJRrAhOLzDY/s8v/OsfaHP/0kEET64UULg4elIDcSB1\n8fd2ph0PYwkQd6PpitjgIPxgbPrx/WwRptZfxt9rXzGHfyGHQsjwnFGgIDH6\nibM6T5M1Y++dybKvnshqUNmZeS3OZzfNrsMd8HuhCKJdhlqqJS7YDPXEw6Fw\nv/yvAm8VtTPM4tLBigtdlnlVfsYE/kkafvC35ySmrHMS6NtnjWiofytg74FX\nHGap\r\n=7iVD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB5SGPqv/SpsV80HjsmoPMvhdZ9NuGbtk/Ba1QIvbXeAIgXP2rgSTKrGwy7AP7uNFUtkFOY9T3nF5Euwx4fvfVAto="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.19_1587025393794_0.5161744702728592"},"_hasShrinkwrap":false},"1.1.0-alpha.20":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.20","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"cf39dc6eb256f90bfd610b355dc2b98633d02be6","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.20","_nodeVersion":"12.16.2","_npmVersion":"6.14.2","dist":{"integrity":"sha512-6jdH734O3d6v4/qlTWjaRbX9u1/Z6ND3MRlM+CWjDVeXbabHKWW8zMxpUJxm4CfiZsE8hecdm6Aj2eJSjRIeUQ==","shasum":"b0e29453e58a45823aff2e7a6f494f50fb2519cd","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.20.tgz","fileCount":95,"unpackedSize":24249074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJensEjCRA9TVsSAnZWagAAA0YQAJvQfYoTEViezWJ6w/jC\n902naAnSqvmXFKdgVxBSzdjDZ2tZCyU6a9EVO172HmGuSVecKYwM9DN0rE+U\nKotxPydRZoTaXfKIYbg//74YjGd/9N/d3E8hbBaz4d0UW6GmJG+78vB07Vlv\nsb1eS3RO0IEr1eHUGhwMrNINoHek/Y9EJtZuhtPJVxswYtKdCTo5gfS/03YV\nlVNxfwmsA1FxczfZvgMhzmUS0ZYN3gKlq+mpf3Ricj3e1/FW3eSu8vIe6G/P\nEZQbye5nAcXq6qltOwZK8d1921qjcG/Hrv4WwA4dJUUJtfyFoXLZRkoumMU7\n3r0tZoxyiSlnQZHPmRd+XmFoy5KLX8z/5/xoHCwmOCEeGVm/Fn94RlaVPEwE\n/0clsns7GjuRv8IkGbxpVItrRdsLIVXAyFSftplXffK1BAPXwMPjx08XZpDV\n6ezjS/sAmKd6gG0jXyHNBGFF1kyk7qWuyDKhq59YcdeCtPzN8zrHpwRJtwDw\n+1Sw4q3M6dY+rqZNDFpXYjFiX3sc1YRRWUwe3NXvBew2RuN+8xwUCtl1shix\ne+1Rmi8OOzUkeoM3j0yOzCwc8DzhvW8kC+YQnDnOYeNlyQegfxnvCOGIOGd9\nnI+l0xNXAvqO7D86UK7Dr2NeVWtLibtSzHEC2KHfBIT08GpyWTJbhg8HtSlp\nSQ4v\r\n=OcMw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/dd30RgbR40oaVtC/K00Z8LAfoWclhzVAKKCK3c4AHgIgSs17Wrjd5BCqojDELmDRP4AYD8t5nl5lB1NA3+2Tdks="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.20_1587462434035_0.5442483867887129"},"_hasShrinkwrap":false},"1.1.0-alpha.21":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.21","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"898f47c9fa29ddd8df35936dcef5f791f64060c2","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.21","_nodeVersion":"12.16.2","_npmVersion":"6.14.2","dist":{"integrity":"sha512-4gl76XE6NadiRDFdJya1mqagdwVIPRgkMdXCkX9C77ACXQw1JiSM1CN1QSRdpuswns3y9hgvWHwxkjjRVBsGEw==","shasum":"c99b74f83bf1293aada54a868894f80420c51482","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.21.tgz","fileCount":95,"unpackedSize":24301301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeorpXCRA9TVsSAnZWagAAHg8P/32ajHuojgDLzu63RSXa\niTDFCCGOL0z+F5gRfBHKuRBdwH7jPiYW23q5P6fvOAy1PUMEd8Uts8pLrNZj\n2RvUFMjIcJAddfM/nM7hmSZ6plVXelsHjJH5sERipgWSCeqhYL+Vy84trH9E\nyOb9p2ESl+X6g3VfX73lirr66n53BwA8T4h+uanW2VS3bjL5j9szEfla9NrY\nYVHjMpuKVNpvW42TzJ+yHOh9VkuG/16p534DzPsM24QZgrJi7kli8Lv7gdlc\nGZZhgqdTM1S531L/SwyTjFJdrrn7O+j55mdJaOBynb7ipkji0oDdpJJ2N0/R\n+On2mjAY5C+rK/zmXUcm3lxsuxyU9sO1G5UNWy/mRc1R31XG9UvGU3Q/7bgh\nRnDWZVy9NZyfpz0WAGePpp3pxyuaoDJeUx5NRw7x0awNYQ3IMrD+cDKsjOTd\nvQsfgUMXn0WS96womH0Lvpqch7NbZD73hRF3ai7E3MTwClCRZgbRG4xX591g\nDHGeDh6HLGC90NNk7SGUMr2Ra+4OV+dY1OgR1vAYNSVtdAgTcE4x3nEG97L7\nqqOUNm3L36tT9gfQ0IE0bsFa0Fm3Fa59DcFtTSsTW1KuwRNfn54UMOb5LfLT\neayc6BIh3Ut2dpWrE60NKW0o+w16DyLA0UbsBM/oAgN97dKrO+sT6v2rnWwJ\nBWVK\r\n=fxx8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMO1QyGilUk2EH8+z29KJ+YIMJxNo+BI4yWDeAxDZbuAiAoHozMzLNq5nwb5Tsa6P35NS25HMQvhoNEwL1CGUkjQA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.21_1587722838982_0.7556893956564064"},"_hasShrinkwrap":false},"1.1.0-alpha.22":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.22","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"f79c1539f0ff4ca005f1b8887e36bbb1e85d8495","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.22","_nodeVersion":"12.16.2","_npmVersion":"6.14.2","dist":{"integrity":"sha512-gGFQhZz2qFiX8LTjg0QVlO+Mh6oiJ1ichOHK4z6geWTkrtiCbXX4AY3EFMb8wXX3yO39DAE9VV+pEx+q7Lw5Rw==","shasum":"54943ac7da5255376eae1c00dd7e5ddea08a398b","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.22.tgz","fileCount":95,"unpackedSize":24301301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeor8xCRA9TVsSAnZWagAAgikP/3yMQhK7TFEmO6NTh1Ym\nZRA1V8r9lLK13KhL6nCdLYUww5kfUPuaXQlCbIOURUf4rNfTbzjDDnU2mRli\nWsNQ41DCyHNEIJJyKQLN7/yt+uV/c7PPBQQ8HWsliHYnpR+F9ocBqEc/of6o\nwQ8IecZDEzX7fdZlMjv/G3E/cQwIY+cshjiLi71aHU5VeeUgH5ZTRlaluVSa\n1l0H3cis8PjAvALILG50vx0cQKnhhDLzH6YlUW2LglU1xqqkZAtLYnkkWT6v\ntANCutl3YgCc1glQqlcbPvJ35hYHAy9krKCkRnHlav9MBeaesVLmeMAL4VIj\nVJ1RTHlaXkaRbhGkM9huUGZrHNUBqgvl2i366unu2tRNuDP+N4CcV/mP44Xj\nFgzGEgcvF23V29JrrFaxUTvXeEq4Rfnj2QGsYE7ngbBt5GFLtw7uD87BAcHv\nsRYrQtbzcO/55qJaGB4PBqhTUG6lDVyCBDq3ZO/m3nRrJK2mCg+NifdgxWEw\n6WRfPaM1qIGlIdeK8QqPQvbJyNemB8zMW96zlpKz7PUoVNcWfmeG4MKo/SwT\n0HsVdmVCl42gmmzz8TkplQvD0NcERrkWDfCtU2o9YB9ZHf7CmEurbA+LuS0W\nSDw7uBbu+sK85FyM2Dn+nfM3jhLt7ZFSelTBWIflVkPGzb6RNygxvm2TL7cM\nWmhD\r\n=++Ve\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBrC8AfG6B1/CcFZj8/DwUybmLGmgCXN+cGNaBoQyfMvAiEAyBW0m/F6w4ax04hqXHJUKwsCWdtpsR/DsV70YdbehW8="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.22_1587724081164_0.9923120590769074"},"_hasShrinkwrap":false},"1.1.0-alpha.23":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.23","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"b776901046bb6437b2f4fefa8895ef524a922dd4","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.23","_nodeVersion":"12.16.2","_npmVersion":"6.14.2","dist":{"integrity":"sha512-TefXjhZUDaFU99x19nrR8cYiQQHunRcTMVp35YYT0c4J6uTSLvEDtVmv1U83FPp1mj/zqrw/G4BMgwiSDzR6Kg==","shasum":"8c5cfd0a04029e69ce67ad69bcf1b13aafd003fa","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.23.tgz","fileCount":95,"unpackedSize":24302215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqAImCRA9TVsSAnZWagAAxgYP/1GTPTgrWr6MNaGL1jsj\n48/EvLMq0NhLYkjo7iseoTAapif6HkjSitrsXCmEUfcT4yDjzbrqFrjuclyA\nXbr658jDKOtybcIDZS/a3nRB1AK9C4Xu6rfVW2O+TpkyF3Ac+6C9/nH3LA+N\nzlWAvfsuYpsB/mgQmkKeTuLMYq763dt6TYXLN4ua9LiuzqGrHPEYpD1K3u1/\nkMR4c8Jfkvt2EfczDiQk5e3xbOV8zmFULMlYeZJLhC28z7ZCkjpGWWvMVQC5\nYqKRP5pHEwHFLM3JRrHtpczvJj30lLjHDMzlk1ObeCTbr7XoQA1PZI1t2EyC\nvc7h3J/O9nDj2PrXyeWIt1J/5FRnseB1vr54r4lFn6S9qWQGJ0vWryui3FXw\n7849NpU6sneWoOPn62wm0LejE20J9iM0JoFEUO6C2WYe+zEdDjPxmI1VpYze\npF0jVh47bJLPACqlmEHLrcSjugV2eVjK5NPG2p+7bjqKI3zQTQgTgo6YTGwg\nRcLH8eLZ4gpP84K2rB7Q94j6r3TW7BJeGfpgyhmWQ/780X2d71Qx4wVfaBOk\nrKuNvaT23tb/huie0NlgGToweLL5qO/d94PLjFpbnpy5UKZRnm/dtu7Jf9uP\nHYkpVmohtYMu4qD/1WONmkvVPcu3TBLn5BkF9zdqf2pqAvGuzrBSldw79JfC\nzR8r\r\n=ZKlE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIECFF3u3xYE3W+OsbTPBP9euvUW09mfAWXLAKcfMpiDOAiBg5hxd+urzc0/LLu0svj6i0cgRn1pj7dlx0sko3kMADw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.23_1588068901654_0.5224074474813141"},"_hasShrinkwrap":false},"1.1.0-alpha.24":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.24","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"ed396f338a61487bd54da4d66e9832d2b82a0b8c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.24","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-3d5FBeYYVFLCQp+9XvFiaQ9QmZ7L/Q0ufGGoDQ+YJgzpocdoMegtnRIlU/uMlzEfN2eeZA/HayxX3rWo47snJg==","shasum":"67143e63793adc621d16a0b1e854e2e3039661fe","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.24.tgz","fileCount":95,"unpackedSize":24303435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqDwrCRA9TVsSAnZWagAAe74P/3O9+OYU3N4LezSUk7Hk\nBAV1cwqXyf0hrbTQLUELpxnzg7Jptbe2JRNDe/dhgL8Rs4zsFI+SWA2YObWA\n6Brd44bYZKDXVGKKgeGvZFlh8ANIEodFbdH9vcdNbJcB4QmGOIcxBf2SOlhb\nA7xgG1NTHP7qecnx3LuX89u65lmYKa/0oYUde8LqAgiEQ3qEq17D0K+/euvy\nzSazEBQxlG5CzbLZJPmKXkaBi/T0sQ4oHmFUgdJ11oO71mlFJh4CvqN1Oxm9\nXxCB62wMv0skHLF31gMvn9kAkcHIGpkGCVV2qdO5sNYPYHINsHC+Qf5gYD03\njL5fqKdj1YB0rIAsmjuQOkIQvoCGYcu+NmzTsAj0R1a+Mqx+vwPIfaiWFpv+\nIrT8GxFaGobFvjNKRDxc/96qOBTO2hmDenvNNu5lSFPj2cQkSQNiKmwnMjmM\nxa/ZpoxqtCa9QVWgWgCiRRKEACMJK12DzKtW+7bgPdk+EGoq3jqTNYUXQUDV\n4aaU7TzwNVJCbRVCTUWro4iJiV50vpvHwMxCd1KL70RP0CgryKeNdtrw63AQ\nt2r/qGLvI95ATeLCe2V/jH1R+NKxfBTO0xuWSV0CXr1lvlnleZCiSGdK2OIV\nLgo25Kq4qitpT4ANkOv9Q07DqhjoATA6vg99kWs5ry1qpIw5f1YiaezWMqFh\nI5s5\r\n=Thav\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHaNUhwR+Kqjj70xg2Q5kF59ZHla3FxXq9HWmjzvfuvAIgIEIZYFU3XtTvn08bas/+7wc+UxQjFtcRAnUfcBswyVs="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.24_1588083754392_0.7139932312977284"},"_hasShrinkwrap":false},"1.1.0-alpha.25":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.25","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"ca5de80be1d9bad8596170bd0451db3172120f83","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.25","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-04oYwGX/EW9wtdUCMNrLa3MvONDAMvU/5Oyo4rsIR1gQlyVkGOPhZkAaDwNv+ZfU66iFhyZPjpuEj2F+d6IbYQ==","shasum":"0de7111b29e5dd52a3d7b3b8ec4f9f16d02566ba","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.25.tgz","fileCount":95,"unpackedSize":24303516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqU3dCRA9TVsSAnZWagAAdv0P/2ugndjgInAHcy1MIc91\nrmC/N8JKBC58PD/CVdfxVoVXWYb64yDHLJgRi9T+TIoQYO0WMbuHYDX9q8mU\nMIrSPQoGhX58Bopobd9LqhtEpYB8BNRv06QmhEkxgGXA4yw3fMpdaTCR6owk\nKJpdVnVl/6flZ6TGm6FLvkSDUhsn6xPg/YvL12wjVa5/DMKyBjvngvGYO9o1\nEYzYJ/tNxoeeDJ4z9dpDA2vruQlSfdWIWdE2oSVfm9zhx+gg8F1b2BeLQtK8\nJ5Gi6DSRQx+7v4pn9pcm+Va4JRedATiaRadvGMZze+vDsqVgs+5xPTg64yVs\n99MQusSTsdPTqwfzd4f09Gmrf97lE8MioWW1UGCY7961O9hjjU9i7rBt3FGp\niXrKqfoY6iKiMCGlS4s7bL6q1Ee3F8jBaCj4y5S1rGwpyHgmefTe9AqAFGil\n6iyOWB7dgriTLQh2RlqWCyyp/9rIazlgJ/IeTqvFKqEprTJoOSBs6Y6h4mRJ\nZjQmAJsgNZMWt0rf2NTpluCGHVksnvYsVmg1+LQJVKo+O1zdZzpYGl8lAVK1\nl6byu9AOEos/gWsSSaHfdXRHvSr1CW4Qm/m91UKIj/lT6vzWgBcbW1IwFkla\nK5g1+yqtHb4I8jqsEXGzQerazBdcZR4Z8wtN6PKT4F59wW7TmqWlm3ItT2Ja\n9Ruo\r\n=6JDv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF4DwH4/gbv/b73kvLysw6qYqbPR5sh2Oth9Z6ZMfXV7AiAFk25tcwEM+BP0e3xxbSNgJARRuwKSY5/Xa5t3199KOw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.25_1588153820917_0.1976250415168479"},"_hasShrinkwrap":false},"1.1.0-alpha.26":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.26","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"8f368b1a49a521344b818002a097ddfefc0e1407","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.26","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-mJfQwxA2TmKv6rEOQje9obld7Xkpwe0PMHAzB2XzVhtfPmSIZFl0fPqh1HxjHVWSigQF8uZB6yniIoFPWDTpsQ==","shasum":"b4a0ec75bc20e94aaefcb58dafca748d1caa0df5","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.26.tgz","fileCount":95,"unpackedSize":24305107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVEeCRA9TVsSAnZWagAAs0IP/18vd6VejP35q8nvB+Aw\nWgzKbM35pATr68INeydgOs1M/+HgV8Y2mDRxdK/rcvDCiji4wYZl0wQ7cNUf\n4dDIhCpV8e11jggFaJIcVbmuWOXx3e631q40yZa14EattvutGQK4+nc0seL6\nRe/wKfQ0bKHiTMqBqMrn44cDXMAlp1+/fVWeuUqK54O6U98qtIz+t/WxseSl\ndkgep/LFTZ6NlniS2rwbAdvXpGxLDlUm1Estn+tZUi9d3/gklJwY44Hx5ji+\nhceIXaEuKpAOi6Ph75bHzCKSq6foTXs3KYjEN1WQ6qeeKfGaGz71TACB/Ouv\njKTAw7FsMUaANjS8gzrLz1reJHC9PA0PDRnUorBunELhcUIzz/M2B2X0a8rE\n0R3yzHZCg/GCbmCRhf7sGhJrBdQH/N/Z1v5vyF42cNPMqIqhNkszhvpEGck/\nhhxb0NkJMtVKQ4GVj5z+Oi1O4JsjLswSAleUhgGoy7IaDrifVkBiisLA14j7\nKge/8+AoLSNUICYf6iAzvMy752UR8odIaGYm9C5bXVuhsSQI/mCn6KQuL0GC\n7YDNYLk7WBJcLPhd6C1EWW5QvQxL0HK9LEGKFpyGnxFDZErcML7/ga89E4vY\n19HvGhaA+IQKQ3FUsLkkAChhDlwFUhVBoMVQ7nLbE3bdRVXYo0W/3NHXhNvr\nyY2G\r\n=2epv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTC4Lc2bJ+FnjAl/ztTRtnUvqz6qEiH4SHQz5eoVyKfgIgF+vg28jziqe6NLI7AKiceV5vvo+WwnFKekwnW0+SRvg="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.26_1588154653926_0.32236113431827706"},"_hasShrinkwrap":false},"1.1.0-alpha.27":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.27","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"ede2e8b781c7e0482c2decd892d51a60215f7d82","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.27","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-++GlUITcOD+bkYwL4DYJCbrWPETZPmxeiYZauYXG8OdSLW1kfdTeFQOEEuR4g8UB/BJpU7fyZsYP9qLk6QCpKQ==","shasum":"597a7edf959d0100decdf747026a1cab8315c0c6","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.27.tgz","fileCount":95,"unpackedSize":24312999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqYzACRA9TVsSAnZWagAA1U4P/i4XdwwONmj/Df8anS6S\nQNjha98b2VO7/WfN/tFgv0lKB8yRUYkQsllSFxtNcqL103Jp6r/JoLvG5j0N\n1hyvhvQwtd6iylvljoRNMDu8LG74YwgAM9kN3e0DJVjihka8H63LcTtoO55/\nASVlYs8OsOe6BWMyAftjd6jb1rS1/JWsE2KNpMpoTzVLFbWg23YvBRmfmLTj\n6h2EETAiaJ9jtCmpNgsdmyCtYsTCdB5mAhQVwfFRYzzInmuBUqAFk/Ky9B+d\n2SS/WgzXhXhZDsJTCJl4tn5VMydNoqJb4vKSUiMhxGHm5k5pneYGg5PKGTco\nVn2ua3Rw/shvZ2tgjjzy/dsqjDJ5p3Cq79sttiM6s/ianGAePdjNvR9A9wl3\nhkV7Y72Ke7GpbyKE3Q3tyx/wpTU7We9TD5wUGr2QjhGcpK30nwr0wCYVUdCy\nxLY0xJ2xKIrpsd4Pg5PEHobguB7QtXMr2Ero1kysF3NBbPp+oFtsxo8fuhyH\nPrZpiJ/SuOEs13IILnq2GJrmXRzHsAH4+YgOjUt2vil4BJL6rTK7aUjgPlmb\n/CoDkWS+WGSPVFJWCruSrUlCSZYyQOT5/vmR6O7YP1egHwl5K8KUbC6/f6qi\n/eu3YSGO4dxbjWnB0+Qd8KWLUuVxVCLskdJ7oKUllfrwovuVfFvWq7Q1c5iT\noY8i\r\n=UyVd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMGh/P7aKDzWSpjPTuqBz0xThq4fZ2KuWlt/UEmA6VzwIgLIUUTkGoLE2d7BH4mrnMF/JF/hU64rD65ntpZvvuCRw="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.27_1588169919172_0.43552544499606216"},"_hasShrinkwrap":false},"1.1.0-alpha.28":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.28","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"25446eb8c6deff22330a3ec56a474acadb2c4c31","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.28","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-9nWHNWxP3J8y+jBgOKF3XHXuN91AqDXpLH3qN2DNRnjKT+B2jnGbmGsHNn8rCorPbngVkWBSAGxCa/UkYkr7Nw==","shasum":"4e950758c105496004088c83063a0aeb314df13a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.28.tgz","fileCount":95,"unpackedSize":24290979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqZaWCRA9TVsSAnZWagAAcpYQAKBD8o6C32TQIKFj2lVB\nbl7jhpE9Wqd8oYHnicrG4gfMLmO+zvAX2bze9ElW77LtPlLiyuW76PMQZDR/\nimjRl9ZA88OV0MYU9CheaJfeV38ixPDruDulgwcdYyWR3oHeaHALHvyPu/RT\noyc75/+xahhEu7LHuzWuedbwM+WAgYVGjkgVKEKu7H++oB/2J00vQXezkYEs\n0mwumwiO3r6ErI2MdXAniOCOcrobMhPRmJ7H12Uks1j7ZvPvsC96yiKEVYg7\nmKqAX5sT4AMRrVQRUvq0qqBzMxDvGK9YsTUTdMkGsQ9+TXz7fUWymR8MeBjg\n2gSkbEvNwYYfwGC/RB3F8plI7mjbfusPnqcFXMoCJVa46gzdtEHzfsHW9EBZ\nufJjT7tkpqfFYs8QTJXvNCWROb76lwoKY0NGZRnJdEdCWU4zX0E4s3aMEnrc\nU3ZHkCfYqTfsD5Ba3JeJCXkqrbYpyWnm3ZRq1T+skstKIcyIq7i/Y+stHHi9\n2HNmrmRkfjuItZTnSUqmF5WHj0SxlZrn7FG5i+ktRlejC4nS54Jq5TWddDAD\n4oGBH37oOIlV/1DdHOEHuW8pbgs6rwF3rf50otFVVpKFYEbOofQofbs0ed+e\nZy9ecNu5AYrBm+7RUGo6vpoBYua5TVF8j0f3ijmI98xXDrBC9AeWeaUCyMHT\nEyCb\r\n=qqhG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCmgynB+iGkQYioXfAZshIC1rUUyjBFh/dl1ylWIK//AiEAwDKnHkMDv92uP5sRhNdnRxZWTL+3iFeVsyA+Qbo4aB4="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.28_1588172437639_0.27449965797695963"},"_hasShrinkwrap":false},"1.1.0-alpha.29":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.29","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents. That's it!\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"71b7a3d404333d9bfdf36e8a730b308940f10a53","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.29","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-ZHJkDN1LIgCi+Uv9CO1j/1/Ani//YfoxAXKdZGdCFJF5Fscw3EaDdXLnB/beqzSfEfDX9rfoznSvwwboiptw5Q==","shasum":"746243bd92d31f86fb9937f45e4bd68d837d5d12","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.29.tgz","fileCount":95,"unpackedSize":24296768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqsrRCRA9TVsSAnZWagAA5N0P/0UaylAayBf6AY2RD3BL\nplDNYXWxj+gUVTGcZ2iKxvh2NxRt6NnQWJoY0z0F8wlsmk2odrAQ/F6u2ceG\n8MQzXT94eRisgiu4CZx4PnXK32hbAasDD4Mbo9MdYvWmLbFURTiE4Oz2TIis\nau4326awC9YgaOerHsrUqq5m8KXKiChzUxjY6quxp+iJzaBxZhcKvhJZkVR0\n2y0RXgmaPjutQugkLGuFQb1qSmzS7Iyf0jouZ9HKEkN175YC7upbROnk1wC9\nZNdsg4lsd4G3j1kGCioHWpnKYgjqi9uazbuTqgIz//z1HWGFoziDlO/7aM0C\nEEAi5XINFlu3n2Qdsfd75RQK881czk/0m8mfwyzkOO3/QbVM4Pjl1kEeLU/M\niKl72G2V4sRmYLaVxTrVGJ4VsxtAUvN+51WP55nbMEAK8ba4ZuTNeHV8B/QE\nYCzttQ5hdxG2mQS9f1vv4z/hoXUQKTcaIWBq6//BUu1qg/BaR6dysf6DBMEE\n47FON9mj+XiWMV4pw/qdtH6t4G/fSOUFRxPLmNy7kepiz8aBpzxCF+RgZV3O\nYqmJYYC3dmacV7oEI5MvmFCQ6mr8AtcYI3sj4PH0s6PdIn3WcVqsrPvzWkag\n4IhzS5oXP9p0aNu+czLXTUngEpTMJCg3szTW/OvqdV43ahV8QF8VGWrWLEKB\n/IWB\r\n=8NAy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYB4dPe8arxKQvrcIzN0rNYs0TWxu4CLYbT/9vDg23EAiBliVWDtDVJtw6/TdI9uEZq85ycxjbxGaHA5xHN2SPlfw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.29_1588251343894_0.3790612760074985"},"_hasShrinkwrap":false},"1.1.0-alpha.30":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.30","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"cb906872a0f06024ee870fced061db64088ecfad","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.30","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-UOPRh00GS53NfErqXsFzXyuaPXnT4QVhYflf50CXHIooutFkPqXNlRUQqrIM7+0MqKsuxUrMWr/wD64cpktM7A==","shasum":"5a1de7523a88ec4e8a12a8eee1e18eb74f573877","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.30.tgz","fileCount":95,"unpackedSize":24308763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJer96ACRA9TVsSAnZWagAAwQIP/3LIV0ij93m1auUcJUav\niSYZGEVy/pa+tb9McvnjEWuSNuK2RB8+V3Z6H0CxdznGRBlqVin4ZUGOnzTA\nw3uN1exNlkljRwqeoxcHy2/H5J9q8MYCva843yc4txlAFIhDzpScBcWMw2ez\nIcVCtTn/QTDeWYe71Ae8LAXX+iQGHO/TQ/MVYxVtE4RK75U4Mz1D2s0NjrZZ\n1LmuAo7R/nWs93Xk53yrK9/Al7kQJjccRENjQ41qDvm8C2OZJW+ur+wATkWQ\nFVcxz4IG6aXAn50iJLJVdC4GTnzHx8e5kXHsk271JO9UgJ1REvZDz32NHYdH\nqnWikaiz3KAkWArwrxHk1QZuf6Vr0LAaTWx/SXzaKYZhwNlRXU3F1/kOWcl4\nkO1ogcPxy6bPogzVfKDXUPaM1S6zzdz4qO4mZ6USPliXfuKjdzjg9Ey/+gYS\niUrV/GssYvow/aQaW6VVNpWHvMPrGNTuU1KTpduqQ8GK/v4hIk9g8sKe/2WC\nPkJNM5cXa7tKb1q35GWGsUqfedSNQsTFTdNCHlWOh5mA7QMcrw+EEMWgAhEF\nZBplvinl3VGeG0AYJnmaCQWGMSVd6tvqUfFj5DSMsJWt6+JMSmImRWOGQbUb\n7iTYll8HxNXIrTum3HfcJE+bwvoqBpCHwBzvb+U+THvG54GiXmNAObuDZ04H\nSoGC\r\n=8Pu7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0qarU3s/EZFzUCvMSF2W7qxwgs/N4+w0H8Ma3UldRjAiEAiTnz0OpBZ16rDIFxYSmV/POkwkJA3Xe/+a280a91j3Y="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.30_1588584063719_0.519237949340783"},"_hasShrinkwrap":false},"1.1.0-alpha.31":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.31","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"7d9298847b497ac2f175165e668de8f2d99a1622","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.31","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-ePt5PR9gOa7/MhTzlNt0BXOFj/wtuG6gLZwom95kPGmWgFm/r6s8doFKrQrgtk/7zns5yTfC5laLUDSkJu/afQ==","shasum":"15003925a998e4f638ca2d8d57edb43170004356","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.31.tgz","fileCount":95,"unpackedSize":24309747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJes9OwCRA9TVsSAnZWagAAD+kP/3RfEA45MZEETexjaT/H\nx4f4TgGueFu48jAESxmMC5+oBBMvR/Dw1Ey/+M72J48+EMjd0vK38De63Sbo\nbek9FWTGlx8E7KeV3KXGugeAW9gYCHeuGiGd8RQ023a3F21aPiqpaY20yx4b\nVbeQIZ25mOg0ZRidg6anCZYLrcggimgdOwn6fVT3ZgSoip9L3h56LBTRmaQQ\nK1cD2YK6OVmz8NG1Ln7GfGWKqIwbGWy528bA9R55uI6DDCYQTduBWiF68NGG\ncweELGXx3Z3kusag+yLP+a7Y7xrenMP1QAgoR9vLGEt8p9xr3ll0BAY42B0r\ntANSmHbP4FxY/rcST2w3+/oi8Mypg34RdFutkvKXm44fBWvXDMTcPs1bdcLR\nv1JvfGSmREHtyl30hHFQoXmz+7pqLgXRzKFS3WoP9ZgCwV2cLHtdAx2E0oc4\nPkBaikkOAExdJQB6JnvkuhoJSYQQsG9gosgZzlsjg2mq2MSypz9Jchktw/wD\nER7jI7pxyvBxuADcp+e48R7TqyewKBCT/Wpc8z09pnh6ln7OxWM2mO396Gws\nPK84iOXrK2QLoB73ZnJ5GUn0t5hl2aMlWyBcNUgKffuhiCHLVqpaprjyqIsc\nMlK+aI/iIbWO3uurKJxgprvCohrvdeqgZKMEmPPUTYE8zFwq+dYHE0Fn7X7W\nejBY\r\n=SXAG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICM7nfEjLyM7pwnvFVytODHkju8La3efCliL+CxUqCsgAiATrclP3jicsPxjay68V7dawNmGq5X3Pxr4+kKMXqXFlQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.31_1588843439752_0.49635155981449786"},"_hasShrinkwrap":false},"1.1.0-alpha.32":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.32","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox-native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox-label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox-label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"ed6307fbccfa202ead6bd21b9a0981fe98ef0c8b","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.32","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-mJZTONsTpF2wuJ2016r1P49io6ksTkvCS6acYOzbFZxmOE0P+Y4x72soSWFkW6owIqT9S3twfRbqVO6+hTCj2Q==","shasum":"662d8f4050660a4087aac293fab09c8da3cb2075","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.32.tgz","fileCount":95,"unpackedSize":24309885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJes/N4CRA9TVsSAnZWagAAU6MP/R5S2GUlL4hx23VYkPNi\nsfTwZIZQyCHx0YRLR1P29W4V7zBGCOFkJyDayXxXspotEejnum5YauZb8vJR\n/kRK6QTJ5BTWNl0Iwx8Nt2WpSroiSOuT8hCaFmaFYeCoJfs+7UJiNLFpJ5U9\nTqrpejlY/o3C5HNhJc0cCoq2si6hbqXBQ2FXmEjyjY6k5dnLFfGdYwRRZocB\nFt7h3yGjNQ5O7L+5r1ZAyf0Ld5Iw9sG8rF5I2Bj9dKhYshzL1u/cqPT7fYHq\n83+ugVei0DdwBX5r8YH3xMMLA43CnsVVw++Lw9K7iv7pkDFVtKsecQKDcSTA\n4sswV7MnIwp+kK3P8kTIg5gljtdotzKd/MjXC2GK3Dj96H+zmg1wDsVzMJJj\ncZrCMM5v6DpU48YERCdwbyucpSJh/xMmmKf8XbPe47zCfuhCGlHUb57GG1FU\nBPutv1ltPP+Sli8qtHM4hkNiSzOQgK4dCWt34ss5npGozRhZCdUZZ2wRp86P\ntJT+LFrWWWt77BN8ymTR5WpCKHFs4KUPvdvkLObTnSupptqxF1j0pI/OMVyf\n0jboHd8K9WbhoqP1G439mDVrBdxriP8QAOgdQsq8sAyzchdn8bOEfth8vznI\nQsbvUnfNZazAOHTX3uQ5IxZzRdebXuQ7jK6zfKxYA0VB2LGIV3TK7dMbHJIy\nQDqm\r\n=RwEb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHFMY6P+TOu06wq9DYX6jVS/DYsi2+C94cGcpmGT0xd/AiEAsve4+aWc/NeELzEkyY1Sb+PQuHfmTyAs1ue1ccWY5Do="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.32_1588851575809_0.9334910514520631"},"_hasShrinkwrap":false},"1.1.0-alpha.33":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.33","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"5f353a030d51cfe530ef8b824f64765b8b1c7c73","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.33","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-qASTc7UcZ0xjpSwXLi0p72bFN0yzErjcMLj4jWPyqTyCJZj7c7ylMPkirOJlD8tzTAbPH+ok6Yg4ka0C2vUnWQ==","shasum":"40ff8e8bdde7494635e702ae97fb0a8a0b541974","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.33.tgz","fileCount":95,"unpackedSize":24309885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJes/p7CRA9TVsSAnZWagAA0ZIP/0W1/5/D05Y9H88hxiC+\nc/wdZdiYkLeFtltpQShwAhbBM6MiePA0fV1E8aK2Taj82SR68wrTcFZOw9PP\nI+2NaJ0XGrh3wIsE78r6wVPSiSWT417ol1K3eZhzceVOYUrQA76y0scyCkaL\nGt/+ufeVU1YntoAbQjFaJ/r11d+nPDNBymlr5iocB6662vMIiAE0pYAtq+RE\nFme7egrm2iRZjIOn+Po+AiiQgPC/fIWvuxeU+xH1c3XFdmp7Mvf/dXCIL3HT\ngLsgHN/5y0HvnE2XPZilHQhp/xNxFub1ZwqKDT7ZvozQ8ln0fgIZwBw2IU45\nKq2bjWKimwUJijU/yQbV6piH6/S4SoT1kOoOiIYk5hK2QSJ2qjXm6ufF1OXH\nNZZVRwTM5qfiREeES3eWkJdNGJg7yrOkJ5PS06SlQARrSOxrPYnJ1x48mG9Q\n/hc7kQOKlqBkI94PuN3AqFB1gw7+39JEc722rQv1fD7Bwhh2Ue9SiwGdNiHi\n41eNitRBm4wWLfZvkGxgIXiUZwnl3HWUeJPfQRtNIi+KAyS6qTgnnjlfOiNE\nJRJIFaDAcaR7t3DCYDMjAfsZxl7EuuoB9Xo5tXTPA8AFX663wbKxXHl34cEG\nnxsBlnRxohZScPaFtWRwvKSjjNHP6tHLEsgs0ayY8mCF7aTt8QkPWaS4/8uk\n2fIH\r\n=tY+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2LOzU1jYbdDECJHFXyNsh3gpdtmS/8M9LEiFNMWL+VAiEA53rYBHPCstYuLoRbwpMu4agmI/SKBFWqrthp2bVOG3g="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.33_1588853369930_0.911249268906817"},"_hasShrinkwrap":false},"1.1.0-alpha.34":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.34","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-svgo":"^1.1.0","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","svgo-loader":"^2.2.1","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"498223670fd541fc0d416aea5767c3da7660ebd3","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.34","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-1PsDobWPJbjDb6BD6elttVSkDdjUrQKk8lMkJwazkJS5LYd7L+VStBpk3IzsoRjNluFHA+CEMDSQKeIHGO2ywg==","shasum":"00c78e973317da022315889848da8a140e79b212","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.34.tgz","fileCount":95,"unpackedSize":24309885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetRB2CRA9TVsSAnZWagAAyXMP/jvURzPsY+lBNtd+EMMF\nk4+Toh9kyEuxf4EcqBBHwPhKz0WKnhl9Q81FuT5f8Z07HsRqsUAMrKU21ZHv\nRQgSnfEOAb0mTD5qfP+5wazy8jF/xKVeVDQGTBwKG23s1AcUqa5zM34LhrAV\nBC7n3j0mv040W50W1wPvJch1ENxAA8crBxcHzp77vn41YWjNFfakdmHs/oo3\nPM2I1hui/Pu2kD14B4a/3Tovnf6UZ7V/kpj7leQ/dsKrALKwWGVWyLes9AaU\nCt6UpZSPgbJzFZxXCCDSJg/I1KpUn/IX0ZyuaY35cw2zG/A7g0uAkoJhE32E\nBexy1vu6IMTZne61QuG9hXSpGFCVdTjiILna24WavcmINA8WWOt1pg3q51s4\nswPse1rF46wrB2krnXMSAzKr6m/3D+ZewPQyLUln/gYBiJgmpj58CX6I2+Pk\n1Mt4Ln8wqD10t8ZXFDjPKYe8Yr3oVb6/CUlg+LOvbKzzRqbHrDHqVNIDHGPu\nbNxcKROOCPVrbWF5bnjFatepIbVTa92pQVJ2EJwIIkX0X4MawHT3W5T7/H1F\n4Rjeq5oh9xMmF57W8eVtw4Hr/607Lwgfq46s3XNrm3Xiu0ssG8C43/0GHChm\njPFB8pWgEYqZNk60o5J+LavxYqyfYnmQ6jBU1nKvb5xYNH9t3jN6r91wbA4g\n4JSF\r\n=+G0G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwBd88CCHyrWxODJKHNgFCDBOs8JYnk+h1lx0qm9/NmAiEAnY5XY9FP8mcbamEqt6y1jTm3PFuew959RDcny8qEvKw="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.34_1588924533856_0.17622009633644464"},"_hasShrinkwrap":false},"1.1.0-alpha.35":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.35","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"2d71e8e07d8def062a9635d175133603d7c613e8","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.35","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-ISLGal3sOqShs2OabNG3KlsIpcxzKtPXDipW6PgHBfVCY34/89dJDIeTiB3T1Wg6GAHUpNx49CN8H4+4GtCNxA==","shasum":"a31e6b0a32c7de1fb8b326c0cfc7924baac0b313","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.35.tgz","fileCount":90,"unpackedSize":24315973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetXPuCRA9TVsSAnZWagAAtREP/3QU3MAMOVHzss3fW03a\ncDC7Y0gex2ppD+Y/KcYumIuc8wLoZ6dboqHqpYW37vq+AV4iKAyBKOHfDElK\ndL9nFnDRf2vrx5yU+RCgyTZ6nNMpCxfRLe9dngIsBdJ2MpCGKvy9wUNoIBQr\nDRjEGsmPWlMbnh8MEYiVxSgms68kE4lfJtuq4AhuNxJgeRl/MsnHd4s5zpNT\nfpMRv40D41ggcdMIGsgd8gv1wY+ZYcM9hYXB+SAi8153L0hzpb11TRB3m0OJ\n/WS5tVjQnimXw7KLEc9vcSAMkjYgFGyRIeRZ9lFOLXWaIQwYnSryMvNYmEWO\nZRIMOYyJYN/AJ7/apCJGR2P+qWlaDIeAtuUixcYlI4eHpKG8SdBnIRwEQu6t\n/abwWBnBQzg2D7B/WDyBcEMcGTsogshs0qG6kGvdkscDYFkRbK5pRH4XbJy8\nCk0p8qFgAGgS8KDk4Xewl9tPj0jj0FqQKvhSUYbokXYezVdywzR3E4pU7VLH\nl4P9u/bqujdeQtuxWTVXZ2PJTvjG9nvDnzeuffETGpUTuGSvslD8TFsbglby\nPl25/cEfktz6iWsEO6cN8C6t/VnFejFZ91yKMbGme/UKM0HjnMhgxOtImgAZ\n4oWssckMF6YqYsvWDmuPPdIBDzyCsrVx3C7QxIueVDkbGxybnZcEsFIUKsLw\nYde2\r\n=LTkq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFOtrtn7d9AZf/NHEvqmedLPbZMYaReEH03zd0MQWLikAiEA0YmVGj9KVmZ07XtfoIb87Ofqdrz/2pPiFtqYkHmb9mw="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.35_1588949997562_0.5024994855130931"},"_hasShrinkwrap":false},"1.1.0-alpha.36":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.36","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"b8e31db74f6f895b6a4c51811f228ce77e61e9e0","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.36","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-OdxmYbFemT/7b7oZKhCr6Xq9W2vCWR1qv86g1GG4DRtZVBBaOS+S6xzJXJTzbj7Zu95Ahc/L0OUorcl3J6sXOw==","shasum":"302b8fa434da66b0521766debf088531dcbc585f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.36.tgz","fileCount":91,"unpackedSize":24325426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuRu5CRA9TVsSAnZWagAAuZsP/A/RJjcDBtUJw8e3dBfS\nlVVTDhTlusIEE5rIucC5rwl+rA7DLNWoOMHQtRpRhsTfDeon8M4TCaqYDIHw\nhABt0tsH9bKI8BO4szzL7gYhmvD8nrJMW0IhEebyF5DmH8fOvKES7QIWm3t8\ngfLDYiJesOYzTgUHYzQg2PeUsBaZLKSpL3Ug6yifyZ17/PePNyR7wfEfGKR9\nQpjlHVvqO30CO3n3NEhPO27nyBxevNytsT3Sif5RB67dZWcVgFI6dWyhei7L\n1T7kHB2LQ+dEOkOZLzwlh6A+rUoDczxGHK9nV1if8LKoOvB5sT8KU60njAQe\n42o92m2mpMzVuYIo4YzDu8zpnsdpIZCNNH7pOxRKpIxsFCDAFO9itPaJfC4+\nEhf76fYmZVExh5liySntOrV32w51yUbCXsfZDr1YWTJkcEJNHO/HemmRQrT0\noQ8rqne5OzoqJaQC9IFLr1xdFrFICnGil396bIxWeNFZfriSdecvxWL2lTkO\n83j6tGrV2QEfXS0Cdsji7Ve6oLMoI/+CjZFXYIccfMJaS4jlDvNmZueyMfTF\n1GyifAfMPYb76ZLtON4+5Mx3TsWhZKZdp5TKMF5BmsR33SFot4GWT+T0budZ\ncSMbQrzV5/bLcFSXrNT5Lz05XSsREZKBrBAlHYdgtmGIQNkigWIR0V/s9La0\nahSX\r\n=iZ61\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICt9Dy9Vffeot3KtI2/JX+ZXcc2ljM5aO/1KdBuuGzgnAiAfBjH6xwF78S0l41CqS7p6rRgmeYmKDkpW3OrVqJoFiQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.36_1589189560967_0.4841574326710485"},"_hasShrinkwrap":false},"1.1.0-alpha.37":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.37","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.4","@rollup/plugin-url":"^4.0.2","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/jest":"^25.1.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.31","@types/react-dom":"^16.9.6","@types/styled-components":"^5.0.1","babel-jest":"^25.2.4","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.3.0","husky":"^4.2.3","query-string":"^6.11.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.2","semantic-release":"^17.0.4","styled-components":"^5.0.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.1","tslib":"^1.11.1","typescript":"^3.8.3","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.0.2","polished":"^3.5.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"2ab683e6cd9df3769c7f5c9126d721f6d3609977","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.37","_nodeVersion":"12.16.3","_npmVersion":"6.14.2","dist":{"integrity":"sha512-2SOKJ2Ih4XsFbRk+r0FHG/oQEuhTDjRTshHw1CfMeLkSRP9a+2kDJBPLUTtTH+wKtFSyfPhBH1dEWTX16EDQHA==","shasum":"5d46bf3ef250a61d572a2c333a66a4c3ab109e6d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.37.tgz","fileCount":91,"unpackedSize":24326265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuSs7CRA9TVsSAnZWagAA/iEP/RVg2Xn9XFndHbOjl4eW\nElyUOdzRiI/hEwBP4MWdJdUX/Mrh8+i7SRU+8gD8sxYkUr7SSR5mPSbtWwwW\n/jKHWn/ach0RO3CT6+jrsOkN5Azid0+dmkoefestdTRK/tS/b9z1U+TnFOxN\nGbhrAG9vqNhAnnxvcd1/ilRRkBecYHF0pJ+lQf3zb9VVCVDzwuCGTID4NvLS\n9dPXZqDZdA42Xe6BfLE9i/NYOT2gB4ZM3FNxX0REThgc6/Nw4gRhsoWOj3b9\ntHoi+4+VEsb1PGNLX2/YECfehNWwTMHZZIIwYnJFDawVqELixp38RI4YBLfc\n8wrrUbCf6V+OgciWSqc3SiiBD3Yg/BHYxytsmAvSORbfZkfOsporC1AVyGyW\nqmMf9WrNZ4aQKd0sBksM+TcgWX39Rwb70tW+6KrNBsb+hWcT4EEIJg5gSd3X\nTWRnBQP5aDbG9zvNWxHMFfzgCQ4rrKcegk9A24uRvWXZ+KeaW9GEEUCFTyag\nhzcI45KjcaPAPgFVYxMQuLues3rNFWgjC6PhfZ/RYDTKRsqh1vXx3FcTRq/6\nVv7S2G5lQh4iQbyqv55y7WK0qjctV/GowuvLdtZo6wCTbJa89qb3+ObL5bvV\nz2jR6+Aw0CnwbhIhamso2cigJWG00jyI1EyOiWafV2BJuhl18X8hG0axf6fK\n58mE\r\n=IpOr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJnesx3+7kw7n5T3stC0oMQ3G/s1FiT5SUDlzIScyqdAIgY1ZipJhpC0F/lkxTr/Bsf+MRrMF1rPC8lSoO06O6/+w="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.37_1589193530754_0.8796261415905382"},"_hasShrinkwrap":false},"1.1.0-alpha.38":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.38","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/jest":"^25.2.2","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.5.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.7","styled-components":"^5.1.0","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.2","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.1.7","polished":"^3.6.3","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"9485cab15db89778c2f825cdfd7d6be743f941f7","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.38","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-hChu7jwp/KKu4QCygcEOZTFcTsKH6rjNeMh4PXNcOQh6hWzC2OMWJMvUPaqBmg0gle4C0cZBrUAxagkFS7r1FQ==","shasum":"d845004cafc4cc3e16e3b2ce71249fdfdfa7566a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.38.tgz","fileCount":97,"unpackedSize":24326022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJex4W1CRA9TVsSAnZWagAASc0P/iDMoH+mICBKQQupICn2\n6YTWSi3EQTLz7V1q0EVVs9p/RMmgnsEwkFu325apg2A940azL8ksmSgNol5m\nPjc3I6DRH4Lkj8JUhh96yURU6Z6P1m9hnH+68d3h62hVHV0UQCrH6W1JKD80\nEiXhqEQur5KKdECsrYcyaWR2oyIzkSVBeoearADG1LjHGq6KdRrXEYnPmski\n/QJwKDqbcpEwq93JRKcjT0+UUt2OD1cWPLiBa/TzxC3fizKfUbGH3yf614Sf\n8nb+PQYRwOj8WsIASEh1+o06NuaPotz7ps8gFCelF4qkU5tDhaIDoxWX1R/B\n5dFTLdTrTX9oawekiUK15axfTEvv1Bq7cDTu+GlvhHiqm4g5rVptAcHbZ1za\nv06F9wbAmt2no8n7C1rjNoAUUaVLoMnqk2EnzzLhoNAHOGZZ9Htq/Ms03eN6\noKV9+HgUdFX2aWA1TsTYZ2kMRhhiGBE/iOGH97hthySGV4adwAZAHsEqXFvu\nKYpHNC4X8vE30RaizT+zti3Tf3cqTr6Rd0X2+oL6Ngqyu8SaW6jLZqDcfq8l\nN6BD1QTBFOOAXzyIji6CSNGOqzfSOl/szBljSTx7TD1hwMTBz4apzRl5Vpch\ncidTNtsqWIGUdzI1T1ksroXTfJfGycusyHyKMsaPw0pV/UsddMtURVXH+q9E\nIQCH\r\n=XBN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEybJDKdudT/uL+2evD2ETvuwpnv7U2dBrQ2gJWgMooFAiAWWBUpNLDpcmJHXLNvsfuWq7Aa4wFOALt79LMW2/A4eQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.38_1590134197073_0.5553887549466552"},"_hasShrinkwrap":false},"1.1.0-alpha.39":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.39","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/jest":"^25.2.2","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.5.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.7","styled-components":"^5.1.0","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.2","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.1.7","polished":"^3.6.3","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"90143b5235cd35ed9391d4e34793b46c47ead9e7","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.39","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-WYyvIKQsuX1Ubp5E+OP/4KkiRNEY3vrieKD8H7W8bX3GK7yYfHilQ618wFlCB0kgiAaihyH06qVvLnCx0Kkm7g==","shasum":"9187939f8437f26f787884b31a05ad97b4f0ac51","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.39.tgz","fileCount":100,"unpackedSize":24330415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJey97qCRA9TVsSAnZWagAA0nsP/3kTijuZQlgf0LpXv678\nUUIMOFCFsTfdXWUNFIGR7AodUqigxn6IDRPkso2KUteHZfmSbo04BuXu7P1Z\ndwFl3vz1QXZxHAoox9h9/TGGBctzPZKwpX+rj5Wn9XYr0fahwjQrsKWuEE8r\ntXAVN2ff7akul/7De+qiZAbm8yzjAeDwzCrMpLGxnW0OZzwug6bsoD0xN4o5\nO/IFB0JZVjaBDWiNv+jAPZISMApeWHX4MDjaevpViUQdnZlZv8r9/qwke6oI\nMxtqfjEI2eabwkSe6csr/5GEOOJPnCMDNAEA9UadqpXJlMRq8rSvmB4rcLO+\njsTyf9EopfdArk7psUO7CoVINIOCaKj1yIbyiuHpxQxFbDf/xXnlvhvqidro\n3DMhFpU8d7vyjFFPIMznY+dXCT26xK7otcaZB4Vs8oG9AJWHrnB7D49GgckL\ng7af4wG19K/gwiZka3dEQd8/Fk5xbu1OlsHaJG73pSXa2o9+ctol54+svILE\nD8aBujrVxb/d/gzhVRAjyFHffQ/S/Z4VCSyPZgsxgcW9Lqn9M2Tp39hoBDws\nognwYPaWFmzH/4ilTTyWjzRvQkW44+w6z7EoIeriyEUmQRBUC2qyxfA4cxV0\nEEODy3Nx78/5mWFZ6+1bfJPWHCuk6DVrGibsD0RHFssTa4kemG/Kpx+TGE+t\niEaB\r\n=o++n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcuI7wi2dDivZVI7Qm0Uajgn9M+Wt8fCiAdv0mWt0umQIhALbKyIzes9sYXpr6tV8yfOqSwYLEw3tArvJL3+wqxUBV"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.39_1590419177739_0.5794643721344164"},"_hasShrinkwrap":false},"1.1.0-alpha.40":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.40","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/jest":"^25.2.2","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.5.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.7","styled-components":"^5.1.0","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.2","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.1.7","polished":"^3.6.3","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"f5b87acf5923229c4c868bdc83ced9b7cd7075d9","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.40","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-3HhZT2JNWsiQ2f2dNxs1W6ZHjD8fR33TjsXo0U0WDO/E6sLOljPiRELcHvXIMc0eYUSM7fEdUEFMAXiqMQZiQA==","shasum":"eec738c5272853d5667f2f980182cc52dc0eada1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.40.tgz","fileCount":104,"unpackedSize":24365322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUVcCRA9TVsSAnZWagAAEigQAJt5pCkgZwEfb4IEZNZv\nITpSwjoeQEuZv199d0+7AHa6dReNsO1uKYnJDKCnLOGWu8+4VxVJRFyYBfBg\nfEEjdedS1/z6FuQ4eMbVQeqN738Nzp/Y0DZSk+be8ITqHPJmO0EteB8uzvVy\nC5Kamx+x64ebQaGj/Mr9qOCUJEQkSmM28edtoKqaGOy1Bjq6laL30Auagbmx\nDTB+sYSHUbvWUjh3T8T+jV0Qkm7AuyTRL0EfcjOrzXEk0xTI1qG88EAWqg54\nnBzktUspmAoc7wpfHh3wUwx9uhO6hUUFNIY6mshSZkwXoFCgV+E8acw+OzVV\n03fyAhN3+Zb1gVdt6aMlKHmhq3cDRRJPKz6RSCemNy/rVvZMizb9FvfbpGP7\nTc+yJqVuw1jRiOheqRZSRwfG62iTVcMP5m59eIXFNgUazHO0ajg8vdztOp9r\nvGdYMgRmUbuZe/vK6iXf0Y/fTIYY6Iw0B/qIwWZdju8gTbc6weq/AeiZwj+p\nCfT7F55kxHZRuI1WmWKz2jGjeECJaJNlG4VxD/56u3WLu67FJuzaN/f/m+IL\nCJi0ndFkTSoKh50Czu45qpbwSZAZ4AHCely0eiSnnrlkxzrDEaWPa3c9bv7n\n/5/VllbrBWmiXUUgAat2b/wj0QAJcrpvA27mwOSd23lHJK4oW21KYqEZPjLC\np7SK\r\n=7iEI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTe3Azh6P3gFyOMGlQsomFz0zLfu9SLsQ1dFJOwR1s9gIhAMT8nkk7oJ0hP+Tce210DFF/fTiDGnzSrLgGeEmgrX63"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.40_1590510939282_0.9816547238794968"},"_hasShrinkwrap":false},"1.1.0-alpha.41":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.41","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/jest":"^25.2.2","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.5.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.7","styled-components":"^5.1.0","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.2","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.1.7","polished":"^3.6.3","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.31"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"02df3f7c50c263691e75faedf02a8653889fe5c4","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.41","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-hQmuRBhdoD82rYxsdZ5qLmlX3SeXaar6qC5rOyUXoNGf0v68h5CSkrRHTOdGvM/GXTSXA92i1rBi8RPv8bpOOQ==","shasum":"e2311101b15d7ef3a706617364f511783e9595a4","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.41.tgz","fileCount":104,"unpackedSize":24365352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUqqCRA9TVsSAnZWagAAmtgP/RryOSvhCjrUFGaqO61o\nvZvsjl8MqTKOUrQe1dqsdR2DAgP9+gCv0kXfHgxKhfiGm9G8Pj8U00mqH3oV\nrFODJxSA4pjkACq8ixUjKZ3SB0onRpCA4sc4HOZhs6Ur94h1GBpvDzf0gD1H\nNzVKtEN4CVPJKfbD9lAdFrSc2nWy/Q9hVIMWxzUrkNqpK5wTXKxb+TVKFHj2\nUtY04yg/zHqqcGL39EaWVAixQShYH739ECj60Tc5ZojOP2g1XCH54Begc0mN\nDR6VJdzYtPf9uA1PNQFd9xdP7XtSpMULlSkoXulR+exW8pbeTDAA1S5DHQcH\nqYFUHTzuqfRn0xYPeEHJaeOzSfnaJT/cBd7YgMKSpBaoTROrUGT7z9e9kuwi\nRPWYSHq+ynpvknq3i2Nqco8gkoMiTayy3QqA8LGQha7iuU5lCNu+PygveIfi\neVGv2OzWZCf2+J95rwF78wC8+oJFXmIcVeL0/uzo/36cs3X2q7CpICA6Y26c\nTqtUMspIFyYqwLPheaREBOPFzRRG8Ak6nRwcPD1LkLhDxeDHn2an1bZWq/s0\ngF/xFQaNr3UuitXvEsgekUlOh1ArUSLA3/qE6YwxEFIPD8wgFyyY+ea1xirt\npsv5HB0PkDJzYYkaLl7AaJ36Kix0qt/YaKlgZ4QWAL5vtjrsoMilv/h0FFbi\nsUbI\r\n=V0HO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqMW/9agpciUheC3KV6IiRzWZ22v7PRW9gRAAKT4Mp5gIgAisvZOKIfMCRfw9WFCLV3e46usttD32KYtRTk9GTSkI="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.41_1590512298166_0.12560342255796897"},"_hasShrinkwrap":false},"1.1.0-alpha.42":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.42","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/jest":"^25.2.2","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.5.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.7","styled-components":"^5.1.0","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.2","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","js-base64":"^2.5.2","nanoid":"^3.1.7","polished":"^3.6.3","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"bdaedbd1f5f11e147c807a0fd734b772fbfcacc2","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.42","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-wt8E917RgKIX6iQ9ky24EZ0MXYXJor6+rreL0AZzvnykho+9cZlDAVVSpFTu0gRN1eZ0/nOqxQfv9Z8J9y9MQw==","shasum":"10b53f3ac00d71f5a0844acd5ef5152c25d761f4","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.42.tgz","fileCount":108,"unpackedSize":24385121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezj9sCRA9TVsSAnZWagAANr8QAJpR9WVCnq30f3a39gaK\naJhLQwN0mb6WtTahSUW1IngqlJiaw/N3al1TPfpt+/wLRWjZ/Ti5tPqxrFO4\n0y+8X+KU4dFn3ZEB7TLynv32J5Uop5s0ytYFgR6uWExWzXXuVFGlDyrkrK/l\nF03przR5vwd+7x1Y0Frm5kTyQUSO7LjGJFhEEvDTWmQB8kcTGP+EhkTMM32v\nAdBBUpoANGNiHglseiYQuCAIb60IgFcmM3u+R5rMNnhB9OPMDddORan6K2rL\nbZE0rwpU/vzAbjw345aHsZl5iXpzsfO2i29fO0M/hc4LJU3JW+wJdxAouZYi\nDBwgwAXO12y+BnkzFIDrxYyBW89PZbn0h5uJAr+w92paowLnUvaQ+kffOhaw\nt2ZNtwvmhIoMUk22COx/e80K/+odZ8YnNYybCluAt12Zrxj/HB+HWyD2hVUB\neHkfJ8K5f9wYFXSrzYzE8QcXUr3jyVM+d824tDxprTmHuV7veHHSciul8A6g\nDsHaSArxUOam0GklbvT6zMT7G46ApWxMPX40vAH0jDhtIRhxy6eweHjD9I3F\nKnumeOUjA1Hm4KY/UKzpRkQWFq6a4MqdhLlF3jFazlUgCLrHzW9SSPDRHeRZ\neOeDiUJCJ2f4HdhbFOMw+SYrG4aHfQqmoF/QAUWxaRmxW2eCZUmpx1Knd/uL\nT66A\r\n=tXqK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD55VSdtyCEuL+6Xnf1W7otfpeMqTGkubR/A7ssGrJ0LgIgVOLoboJcZCGQzVHdzqOEcfVGQgktOcVG7nE6t0iD86k="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.42_1590574955812_0.649444480020718"},"_hasShrinkwrap":false},"1.1.0-alpha.43":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.43","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.2","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.5.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.7","styled-components":"^5.1.0","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.2","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.7","polished":"^3.6.3","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"c84b886357165c674053244129b0fd4a1ba91004","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.43","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-nMjO02YuuRcEAIjxDybO6tHszLJ9tFMrbdufWFkVx9cG3rXPRvgRAO7ky2IpoLn1WCQgmW0LSy0OJkMeXNaRwQ==","shasum":"2789ff4cfb693352f1e3ad025925ba1251c2b7b7","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.43.tgz","fileCount":113,"unpackedSize":24409656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0P25CRA9TVsSAnZWagAAP4gQAJLD3MUDZAP3n/JXIuzV\nm/eakfgB/utgKcFE7MurRhXoJPDWOIQkMvDIdBW0GTYyy9vraR4aXGfHS4mL\nRzG2yDwGD0RmbuyIjv1m+hdlO9Vz/xpCXLaspjugM6Gg0khGzNIRL+Jljk6V\nNPuSA2wkTa3vPVDbzfT4ii36bhTdPFwvmT+z81q+xBwPmR7mMvWWhDd8AQk5\nf0Q21xwOSFwmqYVcdHDA698abkwt0razVU7x5Tv3bMuXjFmYbhsWC8XtzPmo\nRI7hz6bjeH74wz+/D1LqhWSJYy2zGA/Xj5We5lZAHZovSDT8vE11kJdvtPkS\nIcqQjxx1DrTO/4xUCv3HjjsgGPrzgAoof13UejWB6nIotO2JnksV9w6TXyrZ\nPcy5mJSZTycuyVKO9U7lniQsDNw201RkblES5zS37Ya8m0UFWiPcdSZ1qFcx\nGHBDn5JWYqKPZoPeq9LMmQ1bdgtzNihcgO+SBs67nnGLUaNv1YAefmakYVhB\nH3Te86grJywcjntpxC0Lo0TZWryX1FE828lP1mCxy5uo7KaOHuEUbzO1mqI7\nPaMqXHcjtpuy3QxFMYAyJUyyDuFOSpQudCGCMpmn+WiK/kYhNhbbjT50kUwy\ndhQyHJCnkZV61f4iOZcl1LyJklbkuATVYWwJKyLC8Po8L/Urp2EHSsCkfh+K\nQHLN\r\n=vCcg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlnum7PpyJm+p7n3o6B4RxpffWXHCecf+L/un1D2PQ2QIgKyO9zRNGykdUhDbN84f2SP38m6S3YhbH5UAmz/WjNXw="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.43_1590754744616_0.05265643964823008"},"_hasShrinkwrap":false},"1.1.0-alpha.44":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.44","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.2","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.5.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.7","styled-components":"^5.1.0","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.2","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.7","polished":"^3.6.3","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"e4b110a136993d2967649deb0aed18e8d13d8b3d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.44","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ds4CYrdcBQ6x0QiDpteOd62sbEGnkcHWaoIVu89a4C8YYjSr8d/vK/R/AQwjE+BGQQ1INpRlY+BDHm4b+pUcoA==","shasum":"35d6419fb15740c3a7e3161412767a4a493500b2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.44.tgz","fileCount":113,"unpackedSize":24411381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0RX8CRA9TVsSAnZWagAAJgwQAJP63/06GJYuUu9TEetu\n0+YKmm4DmpAml+Kn4i+GDMwLJbl8aJuL4rUu1LkjXW6Nc1vaDTKSIGS7kW2x\nXDkiSXuqTM+toyTiiwFrINaIEKlst3KJhk3xvcGPh/ueeGzsupzLIRqc50V5\nQyZoE1UIBWES7iSjv5K3fW8hQNnhLvTSOFTLPWQltiXBuwMSTSnklFnYRuiy\nHl5OQE8ueZCAEI/B15ekKdGpjboKWE39EZAyDFTdWHuaFtWRtJMKqjMfL+FY\nuKTO2WEegerVfm22CuTA4zQlzXC5qD8DcGMq+oHzbi16Yasy0n6tr2Zz90wS\nub9f2u8h5uRc6EkTocTzrVsk1KONAjsRk2dhNbauxqpbYZw1By/YuvDjE3tS\nHI70c4a6OIn90lq0aK/c68Nz0J9fEYJI/qINDqX7WPq2t6TXtZeri7f/MLJe\n4+xibMmkYDnSuJr2nhaFBSSWRRtIqAWx8bh94seKAbGBNmGKy0MGms0V2fjv\nkbknJihgY8IntPLJFFizgSNeFZOqQqVchfN/MkskAF38cyuUre9ZoWoBS3YQ\nrbLCIHLLHGswHCIEn5O5PzFvb1RtNCA20Bq9SD1+mt6Bc4kfVTq9AU5KA/5/\npccQBtfQ93sWacpldnQP9fS0nNXgKxUZHLP4UuSq/7xMT++K1zD1Z49+wXH+\nIhOe\r\n=ilRd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDemE2GNWFw8J7IoreaV0I0AI3tRJgC2IA8fwjT10SmawIhAKhDZW/KYJHunhspJNuacY41JMJn2s4NfQee07Osw3M5"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.44_1590760955844_0.9866227713002524"},"_hasShrinkwrap":false},"1.1.0-alpha.45":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.45","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.2","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.5.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.7","styled-components":"^5.1.0","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.2","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.7","polished":"^3.6.3","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"cf354419e3a58092377c3d629ca4f6dd6195fdd5","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.45","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-SStTz3uvnJe8Xz2P9uHB8mgh+lXu4Q2CamnGcWwA79e+mbMelqurzl21I0Ry4Q5rfe4BE1wAUYf0xuN+pmwV8g==","shasum":"5325087d510cdf1bf636da0ae3271c32996abf5a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.45.tgz","fileCount":114,"unpackedSize":24416319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0RhjCRA9TVsSAnZWagAAaFIP/ibu1maR6FOu2KdmzREe\nC/UdbGqY5aXD/bt1NcTbEuJHeoFbLMIouclMlG8rzFSbszAhq2P+/xaxNUnS\noO1ljA7BoOsBhnzKK4itx3gahdf0Azl0LSWNCKflAYGMJ2RLL45r32CVS1oN\n97rB7xRgll/UBCYTdvzhVAFtvkYqqTLc1888LHbu5hjmMC3162C81EZVjWDY\nFRkrwj1El5X/+Yr6UXVC8JuM01Fp0i8dymzpdtiTPAck72nzEvjTYTQUk/BW\nQDQS9+4e5l0pNkoJZwZ4AZm4SbGWC/VDepnXIYmc24X2UfgfAcl+BLMcEgmc\nkAbrFxeNHSrHn/UTiuD6ubD7uDL+BIvwDoW2utswmJWM7okbDkzOXxSVcNDc\ng1GbQjZIONthcKe9MVKPK2fMUryusf5LpAuRxpACQvSDq8WkVQQIbxhOS0C4\nrf4rzmx0Kcq12lUb3Uz2CO9hV+eIFI9Wc0EiN69jJeDz+5Qf6x0PqdjaRUJO\nMqIQalQzjc+iXalIHcdjqUVmVvVzhwO+WgTiDf4vi5m1gm40CcevIu40lA2Q\newfXNRegAklFQPFzEoGrUATSEqd5ytvtpFkw5KBCMHS0RNhSKX7EiRrSjv57\n2dy7ICmXclQFjb0rC1T2UjKC4S+vTT9CwsnJoo96Dl1WjNh+VWZv1LH5GKK4\n+qeO\r\n=rBTi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA585Ny2tgDa5FjCIHcos5cgQu0hYjmWCqI6x5tWWFFwAiEA5QKRsh0xldmykymgQpCf+3Pi+g9Aex/e16gVYFnO0oE="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.45_1590761570305_0.20472008172717793"},"_hasShrinkwrap":false},"1.1.0-alpha.46":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.46","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.9.6","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.2","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.5.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.7","styled-components":"^5.1.0","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.2","url-loader":"^4.1.0"},"dependencies":{"@tippy.js/react":"^3.1.1","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.7","polished":"^3.6.3","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n","readmeFilename":"README.md","gitHead":"a2cb7e9761868cf8d8b40cb3c6e206237cd77130","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.46","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-A+EqqTdU+R2/T5XkAZlTBK9J5HIz9Yr3aSpehuGnuKglzS4aJ6lXVBI0zenudlWsFqGd4Rw3u6fBe4D/62Z8gg==","shasum":"735a2572c5be53e813a11e8dbc9b3e5a3f985121","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.46.tgz","fileCount":114,"unpackedSize":24418714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0R8YCRA9TVsSAnZWagAAl5IP/jRndts+uTFucTbe/6L3\nBMyOmRanB/ILV4NwbEQ1ZKPxnyfraAk/BsbqMJ+UOIr/hdMi1BJa27lKy0uy\nJVa5V+bSnWYKiIeaX8bcm+OePz2df0RYOamx+xMpTHU/ZaGu07gdHt2GLVw3\nmEZ9flXCdGjgsl6uHv9ah49ZCXE36GX5cFN+M+Ri2ZGyQ4KPtQk8w+PhhfI6\n0OlNVsameP2TBpRWH1Zn9PtWjRMCYgLi1NDOcBMK8zqYt1Qw/9fEzNpDhEiQ\nK7tiQUalMJcIZlYTQp0S0gCdg0eFo+BnhMTRGRWlpnIA99zgMAFlI2g0SZF4\n4C3d6gjZqc7xLIXDbgvtGc/y0D2ZplvZ6AdJ6rvlxXEogRqUhYQZ88pIoGB4\n3jczf9pCMg6v479E3jdPYeuI+TZc9xrI3jPa9EATo6DpOIL9DvJGqeNB4C5E\nql6llTK03vn8A7hA3RTHtJ9L8Wa6g1L5o7sY1TxI6ZlNb3jMzVhP+WLT6Gh7\nzX8yhC4rcPVqyS0XN1CoAJbBRmcRMPq0A2TuhSmncmHLPzInWC5aEpElC2Nd\nKJRBOD35IRGOzhFOPdSNLSprKIiCooBE9XAv5xMnY3ttkbvjZWO8IlLghm24\nR+nCz+x9sqizMtq7ztWFm/g+jdHPeLvICUGUBvSxFnhjuCG95kGFIJn58F+3\n7doW\r\n=awAH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4TxnyERa0WXmA01IFRrU2nXiyo/tDSIoj4V+mBqvGHAIgSVm7CwZCBROIWArZ+fpbOXuCEb4teZASftKgrrLLsDM="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.46_1590763288166_0.16166071612616584"},"_hasShrinkwrap":false},"1.1.0-alpha.47":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.47","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^4.3.2"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5f995a81ddbfb0874403c3a4b103bea53c715650","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.47","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ziFjc+FQw1z9AlzmTEknlH06DLpIL5mAcduJ7aaQ90WzrCPgpQ3KzWlkmSXhsge2PLgY++ZVdAwu9bwhbxIHUA==","shasum":"f64f795ecc7d0e36869dd0f8cc51d7879b44d069","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.47.tgz","fileCount":114,"unpackedSize":24418961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe106oCRA9TVsSAnZWagAAM4cP/Rzh31Iz7BXJLbow8VnJ\nfd8zkJ3sBmDBw9jKpRPLtNB9wGjYS9FE0uj7sU19cQ62oIsNhHfID1MC/AKg\n2LPTum16BgbG1FXi3MILIGOGhwshJrjeczGS2Rp3PYe4MWY4dzkkOtYAc4h7\nf6fIJMKNwMkL3PrHOF3Zpi46d2uciZNGAcMEf7DOFLRSPIPdmpvFHvHNbzkx\nZx8I2HAixYP5y7xRZTxKcF5iTTqNBmRp4GhYX57yA0SrtmmX+6cg4KefZ6P9\n+8Slq94Dwvnk+Ikr74JhdsolFy3lOLrWs7eboCbhI0YPhe6WBD2hE2TcGUDt\nw/FXrNkqY1NkzTDCUFyQy317ZDo2dMzeH+O33WCaYkgkYqiKTBdzFJm5acLN\nQh2VAJsGS9vrwH5UaY5jr6NBNnO9HdRfFhM9l/ZLKDHmNascNwl6WXsS0Ctu\n2tKrdBM5LnVyHHGfc/cRutWBNz+/M5w+/9XqEWXe2ubIXqf6px52UMQ9Nqnw\n7gsm7YkzqRk9SZ5MW9ULgg+wNzWS2/kncExNukHPecQdlvKI4+UEDykWi9sa\nT3RtzjKXdyY2zeulVbayRxXRTeNF/uRLEBIMEuRomuyIMIR68RL8tk8JfOh+\nOdg6GhbSOGET1jNiuSyvIm4rAymjCg4/cnCX/+8S3CPoexpRzIyAN0Wv562M\nPwxR\r\n=hxBb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFUiS7ldZ0GQ+POIRRZviWKgIfnBcYu5qSF8jgzT1X9/AiEAjSweWI4l6ifWKhdf4wHQ7pZiJNsOt3ljxGqSpX3aK9M="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.47_1591168679327_0.39544692661253844"},"_hasShrinkwrap":false},"1.1.0-alpha.48":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.48","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"59310a9861a1b9e1ceb3e1b6017e8d2873e8a001","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.48","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-7eordEjJf0+WvfjMmbr5cLJvKrcE4A+K8H09R/IKlTUvofdv++0Nda1vNkTGA94nCvQkD2eo55/1dVlmUyMEcQ==","shasum":"ace6c971288ed69c8ced686b0af7737a756b3281","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.48.tgz","fileCount":114,"unpackedSize":24418961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe11QVCRA9TVsSAnZWagAAPKIP/RT9PQyX6cAhLxPPuUqQ\nIRWt98oppEB/wsjSVSRCemQMB6ZqITxV5SbRdjKAPW9Y1XkkqeCy0Wvqmnd3\nR/Ck5dN0TB4K4QIrw1KhZEUg5jw4zmUbI2EmPoZDhqKi2Z5YACLpAOumAexA\nwWRi19rInJ2zTjDAH1u9IWpTnPe6zSq0bWWZx5sev2XybogzYCSvZov4bvlF\nJVH1GJ3GRouG2AQi8XWTbwNVzv+Kwmys3TgmnH8Xx7MhHdpcSnAqJt8ASyxK\nVXZXIv+JO/xLdfURnHrMwxL/9iCiCMBc5qQrHsa8y1k6WMr83ZrgP+AnZC7o\n1m5LbkoiGCk3vjJgy4fXvx+biUpY86DNQTuoIRRg3wFmrGEI74Wgy+OqxPlk\n8x/3HbTtb1wPhDxBqeUKwhr7AjkdQ8WqUYMZhiceO/BRRIccnvP8pjc3jOpL\nTFkvBP7/jdmlO4U7Ki29uq8BKWFDyiAE0luc9LQUucIcBgN82pnTb6ZRA0mZ\nslJsGKBTNKxqKaFuLcCN8PNkTYMTmmG0AGS5fEx1qh+PQU4VqwEmcynrvVMK\nyRSrPC2fU10X2UA3fsOkWmwtNN+mQRxdUBONYijNThMEX9vyepttvE3XNH5/\nZhpeayGrhJ50IDZTwXyZTMa0ZNhLckwhLPFixNROQUDGSbKs8XdWVbSEWu3m\na0BE\r\n=xMZr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjEK93suM/RIShBAJTxSQjmc7kRuLa2C5sK/qRH+FiLAIhAPiUhNnxrPMsaHxTLeGO78Gfpz4rmpe99ctdPt/VoVWp"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.48_1591170069215_0.055424939332318734"},"_hasShrinkwrap":false},"1.1.0-alpha.49":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.49","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"d01b57616c8534a4d3527d4a40f1a26b3a62955d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.49","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-6QECICxPFZSUB5FAvKFce7ipLOa8DfoDmC7AWBe9Y5fVFfDZtH0OFBb+8N/LlAV2STA0OR2TfYXCZoFJ88GtQg==","shasum":"1ad28003974b025b5a75c9e2b8ce34e9b7dc681f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.49.tgz","fileCount":118,"unpackedSize":24435026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe17BPCRA9TVsSAnZWagAADhIP/1d98AXqrKOLlUbo2lte\n7vR+qMYGrQ8WiIjZVcrDTbEZ+72uZ8JW5wqOccOOz6eOJaOuX1mq3iEWeC37\n1QBVs+pTPNN2tZdX4akAJkzaTp7gdTeLLJ1EgwSVs1zVb0cJnrA4SECC/wZI\nFdYpi+yoyDuVMI9OhFIQ658HCr8t6wFAHuMeWqeDBQR0FpWcFjtgMImiLb6x\nWcrgGrc++PqEsbmol3XsJIH5jXb4dafcxn5fNLVVyA0F/TdzyVpk9tpVrkRt\nuo7+lYBZ3tHzzLEVAXwdJEqGiffotEHKAzflp35VrrTwehiVmdWC/TQGKuFF\nB2HiZhWMjOnTZNzTd+kOasishH3XIJsNDeu04+met+8lpTN2d7owQ3fw8rDh\nOAaU+N226W5mkj3nMLu4tpHAd0/IH5Qfm0iAV0lGsIU6xbEjPpSgODRLPr4X\n1hFDvI8IrGTDtzJzA7qyBcaeiq9zpo5ydplwPsLtuJS5HbOW3Gpzxq+GNo6P\nzjrxc7N0i+RsFus5wkfK57dIQ25fNtyPcaYeBPAVmTSOzYMi5bKPfteWsdnd\nw8e8EfQB07403P1klDGcEhvBjoD3Brc8Oy7UeVIw0VZboUpaXmVlGNgu1GWu\nGIV9Sk6OQ+eYKHSSqFtCwGaJvXAzcFHidWd7nOpQ8C/P5B5lwl0PHTefbxcR\nfB5Y\r\n=PEAK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHim7yR1O5XY43ooFDSfjqXZnqa1tjC+T6uLqVyvt2PvAiEA5ifh0vIR8zgK1gQpW5JjGscJYA4wIUm0QpawHvag7Hc="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.49_1591193678848_0.7254350265348277"},"_hasShrinkwrap":false},"1.1.0-alpha.50":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.50","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"809b4caf0ab6ac6214e77ff4ae8600422ad0c25e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.50","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-qGiZKd3kjaa4ey1nu/rEfojLHs+Gbaxteu4Wvkxlvtc3s58F10XiNuRH8qAxxtHTthswOHyOfGvv5aw1C348sQ==","shasum":"5d2c66ac7350f5f11be9a8dc414c26d4b973b119","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.50.tgz","fileCount":118,"unpackedSize":24443130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe171bCRA9TVsSAnZWagAAvCYQAJnMB1znj/BimugAyzUC\n21jHa++PXXGJnBC0jewi4eilHgksuuVFCLcQMgsus+jF3s0s2mLuXGV4GyoB\nfxmk6RYOjMy3i5KlCTXrUvVvsVGdER1vGPrrwHqmsYbHtC4lMJVXsZ2riAXX\nGnx9ACmlKHCi6UaEcFh4rg83AYgPeoQ515EBTu62EWlNI1wxNWAgXenx+EZc\nE7MsMg6JoOFRyJX6GVMLEgSuKLqBNIC26bkrMlKmGLcPAO/WASSxAxUKnsg8\nNSDgLwYZtw5TAm7gy3R18Mdb8ejjeODy4hfvOuX+cUaYCODzyccUUr8pemHM\niubAbKtuPbnKp4KJKetZ3HncDoTV4fOZkupUXFgsJWNytB/ugLFwURkGj7Zt\nymXqSfdvs8vkGGVcg4P1+sLJnPD3o7PgHl1JwBSBA0zmJbnXZK1atvNhWGWq\nw3zizjo2R0+u6JAFP7rMr8ZVy2PRgOIySLbWOaIKqEhVJLGgNzEiGbXvArjb\ndwrxXSiQr2IU9+7+Fp8zlhzQ/e8w+tBdEKtbrujSZf5C2jGTLjg6MX1VExwE\n0zUzg45RlFuVhHEppRfmxRu3Z8FhMkFzFwk2LebYLdDiK6MntGQC6mBi7V0s\nkFYL+OhXrwVbTLa7x+GRk/PLUtG4SbzWy2olnbRPF7SpZ83xsv4m/z2lNrTs\nRRcB\r\n=p1nf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFcvHmqPInYCdD4q2ZFxQpHBrCA/CcpeuWAC9OVZ8cWcAiAsEvJ38mX24mGN4NENHds+0H4BlaanPizmAtkct+L6ZA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.50_1591197018664_0.6721570967108306"},"_hasShrinkwrap":false},"1.1.0-alpha.51":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.51","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6eae816b3c03906dc665f9273f86fcba02a7396d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.51","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-C1yVHyZ2d/ce1CXXmMSXH8LvuYHLamg2DPDNBLw3d3aqoX9UHoFD6jmmh2i4Zzf4o4r2p36TUcmx3/rEJbTHKA==","shasum":"77ba039d373dced58e2a0efda9ab22accb16e80a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.51.tgz","fileCount":118,"unpackedSize":24443869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18vJCRA9TVsSAnZWagAAllgP/R7QyiN0GMHCo8U/BCjg\nMlZfESuvsejkrLhaek2e5VcEOag6tXwZ4xuWK7hnqR6RvyllhkcqYdyZSSVZ\np7l6fHPfu+sVC3SFiV91w97jJ4fk/3UqitQ9rDt5lGfBg8aLJlaJaK6ZmOZu\nEPfFpzmE8I8hsBk2PxD9hbTRYHSAV+F+uC2yDNw8B4ilMNgFJwvsecd47P83\nlOw3rUyCvC4GCtwFvUwZBS+80t3y02Uynd+NU8rzuNpsOv9c8KW2ckBTtjvc\n5yzFmsZZAqhg+06LoSYmddKTre9cVyI9gTZmqy+UsUEJWYH4CKZR0yxz83G8\nvlm7frtM06uFdPlPHCf/QtD1cxPC8CjRDZxG+Ro+wM6yJJ6jESLJnKt4jLUb\nIbLGP03si5G3/CM0SsCSd45nY3gNgu5g3tsdWug1Yu05evjkSX60SOTFA4KM\nEysJxzlJPWEeB/D5brEOTR7mw65D9zcPPugYVJLCWzDU0SXgjHCTsMncGHYQ\ndtVcE60ag3XF25rlHMhMhb7FfBia9SSS5M6alTrrWtH7ENj62oteAD6EIMu5\nwc8Yb0hwAjt66V7x2IN7qppRoowdaXKh4TSX5NdzSXt4PuuBSFZqn7Ci9/Gl\nYUvbGRCxWlGwNxGM3hYkN9hZcHpzvH987IizsPNSPvHKxZ1zpDPco15wObjO\nJTUU\r\n=csp+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUucu0uMIo0bEDBBFhNRogD8dOdR9Cli9jn+DYTCD7XAiB4XsOuQKt2Ocv6GeO+kuTMTQeejr98i9ZLlLkieMV9jQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.51_1591200712609_0.2036672400327333"},"_hasShrinkwrap":false},"1.1.0-alpha.52":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.52","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"9f365898b81c80b83787ce31efb93e9d91900e77","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.52","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-TnGuQ0wGz1edRVgvKzpqwcRDzI9c+36IzoveVs4amUh2bbjQLG4azEosk6UfshlOCo+6WkhTDkkseB+6HBfdRA==","shasum":"68b7303dcec91d20cca9d34623890dd54095e90c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.52.tgz","fileCount":118,"unpackedSize":24443869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2LN6CRA9TVsSAnZWagAA730P+gMJToaPqeOT0rEF42jq\nvb/RG8V13DuMRIR+VT4a10FhdxREQ7PRcOgrcQu0IiZrXEHHbFYXg+rCicw5\nDbt5NKGcniRG/L1Yv+t+UykJeJrwIKff00esVz3CVUdVNx0yKRV7MYD+ZqWL\nC6GjoEjUPzq/y/rRpYmeC27pbAbHdOr00X6wlnPeWCJHGUXxVVt8cfyi/2D4\nKJYhGomuitB5msYimMvGZAXTvuLcND2pspJjqe3z88SUr4ZP/1yqbuZSDHo6\nr6UPxPl3pfB/eLBYciRzd/B38ewpevErfio/YbD34YRc+Ftw7qJiatoJGPxm\nQWFylRVqTVN3tyU+buOv1oN3JxbOsigHv4St+N07tap5b+y/SX26PhRSMzrD\n8cCamYoXW1hth+EUo0pB2ide4/xVHdxClPglz5pE6ggR0r41oPMfMwGMwUDN\nmOG2KHOe2kr0PhD2jXXfFDX/rzwGLL6P9YOgOdRkBKNIYHKBpviMY+TxV6rb\n1sbsnMxNSYHyGaXttXy8o4nUH1IKxQYvvMTeThueXLwGI1tyytl1h3xiifKa\n1dFhJ0uzUN1MWgJp85XCJx1b6zzeYXSHzuPYKQUDlHLB7f7b+YH3/U6Zw89k\nslldEAlmpI5/+2SQzn1zn7hUAaiyLhtoHgrULagjOo06qv8/XRtCEVFdzTT7\nMPB+\r\n=wSja\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8RHzcQeaMCF9iCsbFDAL8xE2H6SA2RS0FTFYzUfZidAiEAp0zjx4BVZvGm15CNuxUJ1eHXYhdgajCfQug2kczJeVg="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.52_1591260025464_0.837886234799817"},"_hasShrinkwrap":false},"1.1.0-alpha.53":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.53","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"fdc00b27f48d57f8f690d4a67a374e10d9cffa45","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.53","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Eps0CJnastU8blVt19Cq6AYSUfhJwgrQVclRfFb30ovIXdTNCTIiTxdm86fZyKH3pAQTsI0DqRPqwKgftwfENA==","shasum":"06cf355fce9e9b8703d0853754859dbef3df015e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.53.tgz","fileCount":118,"unpackedSize":24462343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2QOaCRA9TVsSAnZWagAA17gP/A5phghtSDGUs4OsxruY\nLdzUM88gDW2PVVUymS3EZB/FhE34Opt2E1A1RwSukPaE3ZoLQfVtJ4V3TUGS\n/RgurHu+c23S8mOpFQps1/HTWcVcGtFytbveuVac/+HiBODGmgf19TJ03ziZ\nLf1UoBq2oASJxL/36XQzRqYRMYiOpqTrC6SxhTtA9wiFJV4wvcXMhDkCN0K1\nIxYBzTNN608J60Cj+xTVkzJP2WL9lSobITU/wlTv2c6NtOLEAnxnWbciqoC3\nLugdxUhneWeFzQPkuCKdvUTM0dsEHv7fdpPt3NM51DSIab0TwunWJiTJ4/5c\n3yjS0ZV8l2bqYiLXr6QW38E//OUPfuanuOZPctNKHX1+201evgG2MaVw064i\nmhmjncKWiS93VHq3uTWTVM5gCxhmlqw0QPSfmL/qYltKIGwkVQBosliiBMGp\nPxXWtRZh7dC6oJdaoqtvaLOx2c6P+ZBGATa8N4bdlywfZKfR5jX2ytIWl24x\nbB6o8Ci2ajdik6irEG1pMftPgb78SuJ8aAYiQpQZ+MlXX5Kk42pUOz9HWjv4\nurB2/Kna1uDXCCdjW0vHOLpB7k2HT9TmHIYzNwY4lXeogE8NwM0tkpYc4Bds\nhuFGm8wTAoXI5ySkSHbaR3FRQT61W/w4Pta1CTud7t2YQWBKNmmWid066Cnw\nKY+c\r\n=RL2W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFnJocGRBlDW4J8JIHDgv9YcOZo/WfgS0vEQ7Awt04OtAiEAsCxGn/aLTOOwTmBhfTVJ1tllRrZOpyvbdmuTnoXMLuc="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.53_1591280536337_0.26566604599078136"},"_hasShrinkwrap":false},"1.1.0-alpha.54":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.54","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"cc3cd3476d350fce07968d3d679f1d9ef36f1368","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.54","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-IoonFfNzwbDJb8GuMEc34AinEmGgOPOAUCE0VEfh1PFKuciSd+v/Q84ihkL9sRw6rgM/rJSwoU5fQcL8H2bg3w==","shasum":"a2ad6ce4e848ee0484d481eccacc105ffba3669c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.54.tgz","fileCount":118,"unpackedSize":24475652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2Q1lCRA9TVsSAnZWagAAp8sQAIO5ItpZbEZHdSVveCnK\nPzdw6hEte6JfdyjuVxO2IJyT97p++crcRwT6TPV7RDY36MTuRVFOIYtb57Ic\nBngFh/qSemogO9ghIVIwKlGY/+wumngioE1fk5FeJS8MD5tVsu6xpgvOJh2Y\nfdX2iL0BfE4hL00HAjlyG0QSKW5y8q7GGJu1ubhabv9o14qRXqWWd4A67BEt\nOG5MUT+O79P4eXUt5ZViR5ZfDR08zJYdJFi1RjRbSxvHOdoAOgviV6Zak0qK\n2pomcLQdFug8vktdJGaGh4TY83IrcOlhJqGrL8mCgkEJAkX+ybwrYKgGaPto\nc/yNcAKp+A0rH5NCME4JnvT0AitutQKmx1pgJV/2ch7RvO7yFU1ipnnLwNpX\nfIz4dCrT9PdZ5QEEszcyev1KfbHGgp5RjLGkyn0XYRYEV+VikkXtQcpQGFok\nEsUHOzhywsmWwK7igYkSrBs5k8ObYqu1nvHlCkn5GxqboF6uHmilqhFrWe8n\niNbARD3zINVNUB/cBXPs7MOnrWeptSvAxCU+hGdQBJAsWcLp0Vdol5n+ebQz\nz4DB48iS21cEQwS5YkvUXKN1zKNTtNemxnJ0rgj9+QTe7N22LaqomWXXwdMJ\nNYsNJCAguN8m2roXZCPLtbTE/Y8u2dNf2XmF86uIMD2a7HehiyBYe/r93pJ7\nVxKD\r\n=pPaI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7u54ZC7LvbluSdxa1zNBSk1mSSR5dlDkGGSk6ze7woAIhALUr659g41CdAp7WN/oTwjgDe0LjAs0Vd4IHWzLAShza"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.54_1591283045028_0.21271842356706605"},"_hasShrinkwrap":false},"1.1.0-alpha.55":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.55","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"3ab40eba9b4eb7a897e296eac156b3979474e36e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.55","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-1aJfCoq0DYegCWTKduqdAEvjFZ2TJ+tf8L2TX0rd7iShLh59x7+UG+uf0omjdbvjznvfEPtOgtmioUMH2cBXiA==","shasum":"a38b27b9d66503fb71f547c9409001118da3fc0e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.55.tgz","fileCount":118,"unpackedSize":24480127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2gMuCRA9TVsSAnZWagAA/CsP/1tR9UTug4cnFk6zYMwN\nR+lxO1mcc2x49DysuEvza4qppIu9ougOYJdAFH9izytuoFwZmi7D3M5Rst1o\nPYMIfdM7AAJUt8R5xAqIaJ/wwxHPEZzXxyB8+unNK/G1OEth84hhOm5kZOF2\nQZMlJgnxLdkICcDNV8b4wpJN2RCPtqtZt6+s8cd8u7emTl4Y0kAhL2NbeRjs\njnDiNpThvaoTLdUs5tYd6YOmiKoDqvCxmuVDPL7FBYLEGE2rLvqwrDV5Bifl\nAPAC24DWEpGLDiBx2gDZDn8WWrNXmyzKhsx4yjB3kUIPruG/pjwcj1K3z9H8\n5+Uwa7Nhf2eB0UgszZEFxcoqZEKeccocFoi4OV8NEZBHNbVkPphXk79mMxiq\n4vnAfa0ax8puJX090eJDbh1L17Af7xCqlHEe85hW+NctEjB8D2y9Bi9sbP9K\nV82kZh9gnyiHDBQlEWYrcbiu5tUtrBuQqqJrMxIUtGlUu9aGY3UX3ywblHOv\n7/YA7tMycxZWhpXNaAIzDv8YGlmQp0JXxGcOW1LMcMvmNRFyQ6MwJ80Us+Te\nTLF14MJVDUKFrJ4HTliHh8wIU3cuX/gIMllnQwA1Nk1rfB24TzqhYddoVjNX\noGCv0uhyuR6re19V/zoTu7WAoQN6OTK+bnmXaSxqSze/NSH6S5+Ugqq0ClYG\nhVb+\r\n=+I3r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnlNC7DYPjTY6K7NyzIiywbO3xXhIR9OwmXjmLUc3YCAiA3eYhJL4sINY3QLpcoA0TVVXuCJ9k6W3QnCoHZo2Phsg=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.55_1591345965755_0.2433019025812846"},"_hasShrinkwrap":false},"1.1.0-alpha.56":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.56","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ed9bffa8229598c327b06efc910aa7f9252c6f11","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.56","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-de/PqNe0lzTV/7JUI4BcAAd6v48k7M4NxUceYGFSOpJRC9/KYLpXdKpz3cpg6pzhaJURcZAOqdmzcoY7+0YFtA==","shasum":"6c020d06fb51222cc4ea429b800aee507aacbb44","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.56.tgz","fileCount":115,"unpackedSize":24476717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2k5YCRA9TVsSAnZWagAAgpMP/3z1ydIBUqDHaWBSryYa\nXWBVgK87G5tmmp/EiikIB4YzQEntnB166BsclV9ypnELS7h7r7e8YEHLEC7f\n6XluMS0QanmdEpYdpORzs2FSMI4POi6hR+8yuNGkO9YNAR3Sywd0eDrPdCyr\nUo4TVNBoJHNUoBXznyxX61ZRCkS+9sMmRZeupEibPSXNOp0tFis70tbMacMj\ndHNIw7WszobgU9RUHgMvBJSI+0cx9K+IfoiqHFOhSS0HXMTIpgupvK+hEAQw\neF0ahhpoQ4phGhJbKfce3FrJMiYkEqjn7O4hfiUwc3JqiT2SoxW2EzuesXvp\nLbl/5pRGz4Oms0ZbOX8x2S9Krz3DKL/ZDy34QTLdYNvgnBxoqv/fIMRsfKdO\ngeB06Rb0+e1FqsndWObY0K9NEd5xR78pxSXebUPNGiUmvcyzWlh1p4ya+ji/\n2yKjDOGhZZuWCNhouVtmTSobPI/OXaLVen7BdM1iBRwib1L/WDlFPiw0jlf0\n8C79XDB6g3In1UnPOulOoy/dQAGaBtVwxZ6A8Ce4NLGqAfaM1hu5hef+9WNP\n3XEwUTQA0JBxQioGSbt+6cqxj0S7IRiCsdqSp0AdamZvWCRfdRYJk48eu3CV\nFGlQ9+Q0nQdVBx1aRb6Z6HiTwztV0R8QP01TO3wT0pplepM9CN0poFaj5v8/\n1g73\r\n=8jRP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFkRWez4Q2XRLY3R5F3TOdzbiDhFu70NZx2nreZCBFjNAiEAlksC5JK0BFFhRIueczgXcwSzBu+WXcPaEudd3bhSMCI="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.56_1591365208207_0.9994567746075733"},"_hasShrinkwrap":false},"1.1.0-alpha.57":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.57","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f0e114bf4adea06b20a34b159fdce5cd4d1b896f","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.57","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-y/kSwTvWxnl7i2nh21jqNIS1CNTDwo2AL8cE+dwlGhsqv2WR1jmZWV70+0y7wE5enSgy7ismM0p3XCwcC3DgyQ==","shasum":"25b8097184714f41ec4e02e60e5864e8fcfcc9a7","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.57.tgz","fileCount":120,"unpackedSize":24520727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3kY7CRA9TVsSAnZWagAAiGQP/R0K06JG+GLUQkMeCZvU\nLFYkltE8qu2rP07kIC2BkveRmubcuZB8kzidccxMIaQNncdaY2T/lY+ncMRr\nDNtBgiIgoI2A7OzMN43MNQP9ts5USvg/bxGujwyHQYd8bZDunCSdafuOJDJu\nZFmkG5iNJXB7JKhKS23VfF0xJ7C48dikoo34CanLg2uZlASC5okuU4TFMfZ7\nKlSls6jI5ltMfvTIKMXiapmuwmy+WZF3cUtW+auBzuzB715xVvfwGei8pQmS\nlRaVcaDXLI7TZtLNedKEmEJMaC1YwVFUMN6EyD9vyAwQee461sQhQn67mD+n\npF0tg37KJf4T4jr+63wgadPUxSZOXjtcj/Sk3Bwg6Tskqt0OCkCoOSVXVigI\n2G8aYqBk8+bEUqrWJzAnEFqsZnlfUj6VFzcy31y9AIkmW0dAdFNRX/CSOI9p\nj9fovYx1UPCUy93wqrJgbX5O+0KnJAjoRKOvyXtblzSDxRvOEcuN5XlaS988\nMiLlOekYf73UwRACh5fIZt8jU3OAEEF+AcVY19Cwwlwv7+pbMeFX3TXkqGX+\n//K5TzKhjgQSaJvwT5WpOp/ft0g2nzsFx/dSTNH3Eg5TY8xdC5r5hJXwCDTT\n91JrWLN7TcA4vcnRGmWFBTGWfUcR1MqjLA7sTJ5noaZwO43sxWKCnrnw/nEO\nAa9j\r\n=Dbvy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfYEqsTTixH85IkPpckghOSftuvLnLzAGLHdKH1SjmegIhAKa8xVyaTmrJyPkfbxc9bEaNxL52ni7jgmQUOvMz+5vl"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.57_1591625274380_0.7822254658668617"},"_hasShrinkwrap":false},"1.1.0-alpha.58":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.58","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"813818af8a86ab5795fd1b8c21ac1cb4e65620e6","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.58","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-CO+DfKlM9/u7+SJ/k1FzIcv0KtmLKBTlW79NLwTAZ4QeZTFuL/uotIBDPC/21c3US4PWu0fZBrkbVL2RftKOfA==","shasum":"475c6041252a55f4a445298535f652cae9ed8fe0","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.58.tgz","fileCount":120,"unpackedSize":24521380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36M2CRA9TVsSAnZWagAAyLwP/2gdvjTLsQ12x5RTmIbM\nvkU9wxoXuTmyVU5VG8bBJHuWN5+J7I/93eEq/G4zfEtopgferhyFjIpW/JG2\n+sFO3PbyxYdbA+pKOk22zpfaOQ6Ovxnxy00T68/dCpfgX8FCDBmuPR0AzPfi\ncb9popnP19jPpciXDObHa7cgIj5D+V6xUdHi2NMcqdRIwDYw+42ZtG9yBUeF\nt5+ahK5rGV2bZoLUuckNJJ63R5zryMtYid2B+vHPLCRJNPf+rgglwtxBAfu9\nX/xSnVz6T7WCMTiOK8LaVm4d6fSuAAcsx2VQxKb+KW+P++mAEHDZ63LXXUbz\ns05k9H9shKz2nNTBJfpBSVfhVeHN8r/NLOkv3jwOwhzTdpMXVvPBVOtF1t8L\nLuIT8ChiAjSqgcvy6i73Gc6F/pmlFn8UsmiePhsRAxXQH6HQpljCRCflfRLf\nfi76qrP84fY1G1Yvr5SzGiWyXdn2N0xABj58r8d21HdIEarKUy75RuWmHVRS\nU/GsXKuZyhYqyfaYHmTetSxszWzn9TNozQtE7YqtfjvRAbvNXcqIiOVyphLZ\n3XofHmKtVHNEsHmwmcfUh6nhSVNV/vuqRvg4nOvlBUIx7iUWfSXzh1IptSA6\nL84HiFpUF8yX1Fe/mT1FMhEmioB0f8TbDt/DNlXf2WL7wfUyBNg5cqJyy8jH\n3Qi7\r\n=wKj+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBuLPPZ04vRFRB1toPbnKhJIwLf7JFCypL+roPhFzb0dAiEAtRHFcLUbk4ZkO53Rx+3U0y1kD73DrmPsnl8AKM4OFKQ="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.58_1591714613596_0.9784603324682863"},"_hasShrinkwrap":false},"1.1.0-alpha.59":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.59","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7f3e41f225699188425df8e6e04d4b1374ac4a2b","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.59","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-dwEWAgc8Hr6Lyr8IR/2zoZRBbvwogqtik59k5OTBQEb9rtGNv7px7d8jEPxxUpQBWD+ZHa2nvm7/MKFs4SNB9g==","shasum":"39f6a0a4206e87864ae8c49942aa93140825221a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.59.tgz","fileCount":121,"unpackedSize":24538694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe37cXCRA9TVsSAnZWagAA050P/1+BG1OkfrYRT1Wx/vdP\nnmi5Skvc3IAnMdJzbkCG/ooadyaEowtiwyz8g7eOxeT+wvX9BLc+gRsaQsXV\n8VFKYa0PY5X5wTDWKPjYmEGjpAMPwrqxFUcZJOnXWm903/eFnjPB8neIQigx\n2vyamCo+f00y5JbDIZbDdHNaJMwMVqVaKwbat0xT8ecGKq32dY6ftTKMynep\nVIn5shUcJU6mmkjsYy/EeDyL2RlGSVmSoEkoOJfJC/I7oUJNafaDgo3ivQdi\nmLcoYoajKpmb37HeXV/p92T+f1oEmkpkc9O0M+MDUoYSoZwT+kcGubpq+AkC\nkbEIiZxTfL2uOOUCYIURJPYkD3iuMVOzrOZCcBvR22nKJb9NLUypVdHVstG2\nww4GOvtvcCcksiNu782APetdMk7pxFoKN4kumNLeApFVR0cQC2ixv57OvLoS\nmELLrB+lhelYGxxAo44fsmSwk4hm1rN4hV15JsxThN2ADH3oBThywIgbiJA+\nJOzKAsSySxrhqRbnZ72GbLgNgIzbH9vJVaKvkm82gq+pwbN6V08SBhUOCBwu\nrGfJ8o09vGY5mboHyC0TJD9mjiX2XZrMiOIWIPZMBeMaVS5RNxZVPWz9244+\nbM9R4Tq3DaEsaIcvDHblOTvWuzhWrlv3jyIEIhRHAv9ogpzfoNvB0R3zOxOO\nEsJr\r\n=GbHd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6L8t15Vv7e32zSwteceU+ehFqiaOv/PwXou71VLt2aAIgRuA9CQBB3TaSJD/z2sj5BhXJf3Ybp98SJcbH7iXRzDY="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.59_1591719703008_0.31149192403614"},"_hasShrinkwrap":false},"1.1.0-alpha.60":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.60","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" variant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"77863c167be4ed0dc1212311e011c28d4b157d51","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.60","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-21KbQtnojbBvV+SQT4vpVPpQl+rMIVPzMPgX0BAmoGEfeF3+X0THt7vrIWHFOaVO5+a/3gDBkAkEFirZhLu2Vg==","shasum":"6aceea0c9287efa62a0c015a72a208370586a332","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.60.tgz","fileCount":121,"unpackedSize":24504973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4QBsCRA9TVsSAnZWagAAteEP/Rs0r3m97JZpfDNOfdbK\nA533jToawS1Cqj12FgTWcNwhoNmUy0yb/HSU8eFYfKqTDludmc2Mvf/w5UIZ\nwd311Ddt7jCiHJKq74wrpHhtrhPD7xjTnDVWXdCb6EAF44B3KiueMlkTSVPZ\nTWhG70gQrswu4Ve6HFkktNQdrI/Oh7X/i6y4rBrZsnFtOneuf5hvUNBqR8Ty\nSnscftrdX1cspJNINb3i4rOS13OxvkdvXtKyzU0DkInZy8OY8OeotoJ3ddHn\nFzd2rm+QTICBLVyZeQz8k3CZOQAsyKoFCcWk7Ya3/tIFrCjGReMsoTwtaxIO\ncJZZu5Iqc9l/kKW0NZV4F2UmNuwvGq/cW+oXIMq6NxhtjC56pR18DElUAkQn\nwBx09lS2vqcQNdkcjoMFkVy8ArOZp5LCaGg2WSN0Winkb6U1qsuAxiPg05A/\nOieANN2rD/7ueELmZOSr2Bb+bt8XEGzUHRf/iTNyWGkX8fpGKGsVlTYc8XkE\nd0XpuOTkLKSn94Pn/ft3Q7m8tRV3BYxEKZmdfs6xMEVaNYitMKK+3ZMhyGzh\n/op7uNPYZfkmQQs9kYisbRuGM2IwlP5bWS5O6CktvtDJnNUSnP72tv6Krs52\n639RA7T7JH7d5ovHyJjjzLw3AEewG92bkWnl6ISOiBA6o9KsZv/BWzVAPKHZ\nqBIg\r\n=NfZf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHFP2JMMEbSqdRYSQTdxvPSIYZ4Xym8v0rRdliSPXTS4AiEAmi8hYe/NVb2x3OWIjptF5wd9nG9vwT5YMpahdtZgWzw="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.60_1591804011630_0.8954563122814578"},"_hasShrinkwrap":false},"1.1.0-alpha.61":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.61","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a10bdc33341492d670853cce2ce3e65ff6ea7211","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.61","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-XreKYer1k3bVNuzScLPsizqvEm3UireRFwhg6g1rO/P54U+AFUoGZN1gFIniwzEuOEx7tdBuoUy04FGeWp1z6g==","shasum":"a69d5e6476f4f68e0cfd738da024055346a55ff2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.61.tgz","fileCount":122,"unpackedSize":24514651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4Q9OCRA9TVsSAnZWagAAj00QAJAGo6v11980QRvz/ywO\nCJf+9BCUUmPeckcH1+EItK+JylGEHB+JDc11KC3xZMylAxPwQE0vasW6eOgy\n6ApavcZP6tJFGzKAm5IkYQggbop78P8Hqmg6PCUlGgrDdtQtrceXkGUMyVCI\nJVOvYf+gbDTiS9Nfxk/O8EwjgA45N6f+D6I+X1rumg5RxQQipGqdtx3AIOFB\nPHxPlFzBzWLp76WavqJoPyY4Oa42eNrKSSsU0kpceTJ2pxSYSrtRouBdIX1U\nNQ/GZgiPgwxwEoB/deYITDHgVYRBr5P0IVVq/6V6rqX35sDKSdIVsmw2u3eN\noUc98XA962rPnScEknPMpahRHU5miVwAaD06rzWrKL/gpLfj1rlWzAkfy7Cr\ndTizRPyE8X3/Qhz06UpffgqEj3Q6qzzgCXJ1sbYPnCr3HQPpdF3FrFkjweHP\nWaTOKEeqbc0P+hhgk94ahf+R+IvavP2NbqvqufggW4umbrU1cWlIvmka4iqM\nQvFNJLZQARHOWPYjRekKD8jcYlVwBfZmXKH8OeDgwLDfQDW/5d0nGcVky9/Z\nZCRoogfKyAgravYwfw4OnjbU5CJ33dyUWUsXPu2A7E0tYzqYbLhidFixEyRF\n+2NpLDoB3IZNYlkLvo3biFoFamkcUUW0+sdBm+dLZCSGQdUHaPOAixzzTecp\n85Lf\r\n=55U3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeEEx7MQ/x2ZH4IznM9QQPWm1XOtLG04Tr2M5oUwIoOwIhALCdmCIYLbC2uKXU0AZ33kQmGez2HB5uvi+nRMmRnwZu"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.61_1591807821554_0.8901009372984805"},"_hasShrinkwrap":false},"1.1.0-alpha.62":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.62","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a2bb8adb658694262c89db0feb28597f80f1b2c6","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.62","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-AoBIpXhtIH2wpBTk1tOxMUpdTqWDKJ/du5Ug1wM2PvvGqsEZMWY4sAmDgq0xGs9iSdKV/U78nRWE7Y/c8b7i7A==","shasum":"5326dd705553499ab88fda05b9c8ab7e3bf91857","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.62.tgz","fileCount":122,"unpackedSize":24516292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4lrbCRA9TVsSAnZWagAATC4P/2eiiGgWU4ltOeIaZ+EG\nHWHRGT7PJBbVOMBankpTr/kcZrVJRlnf0FFMghGxiAxbwZt86pvboM8FHJrg\nDhCuQO9x+7OS4Ajd47Lo0TE9KeskwnmXTYVGXEE9FAfscTLAEMScWIpSCZbP\noRIFqsm8jUC/7VRI0R/62a5iyHHuX6tf/68IALYd6vS/brDAdbTgNV61U2GP\nZMGgtfi9aXFd2ycpQ59VjY5QZzRQ0nTRBbwS1yL9P3PwMbPm+RaSFuUyscte\n3x9zVMXOk6sM8AVfP+rAp8fwjqOAkuDniyiksPmGRf1pWjrH3X6cWGjOd2Ko\n7ALq1UTjXKWSX9zDBfqZBkFx0BHkgYSEgxIMS4zMWBI6WB0PTxmJ/A8AKtbR\nOmUwq4U6HVw7BHHW8fhb+iXRl5OcMgr3XvJVOgu9xP+eYMbkMzth2YtbAKw/\nzliuBsImVdkqn33hwdDcQ+dMKK7S+zzeM1aiqds2fMTd9Jw0qqJQEPD0nRR1\nL+DiI5Q52kbWGPSYlMo4cm6jNJGu66bhUbWLts3igY4luhxd/EMk/ikdLVgq\n8t5gTSinn6E+DLjSpHRkQsybRr9lzaBW6EbQR16Tk7o2Z/TIgfXji/Ked0ef\nprdj2HjcgMRZSy5wdW4V/IIuVZt7vvTDoCg93hPNy3Tz7dExFAM+85kfM3jV\nZyuN\r\n=ie49\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk+p9Uoer04D2vUZAEezJ2gEQj1OVEBWGBB4FAVq2qJAIgBLEkxuj1GDnyNnso5fNpNQcsJcjEs1/o47OK1yoipmk="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.62_1591892698942_0.6726100330690608"},"_hasShrinkwrap":false},"1.1.0-alpha.63":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.63","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7000604854ac2bd8197471bada3ed970d4875c8e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.63","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-/iVmkmsZCfmS9foj01EF/vqmMnt7zz+WDTU+MbvxqLerDOz1Ct3v3Hm9dNkgdcgROpJ3daqwJbzvcGjWqNi7Tg==","shasum":"b582d07ad6b5551f2dbabe42c4241567232676be","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.63.tgz","fileCount":122,"unpackedSize":24514651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4l6KCRA9TVsSAnZWagAA9rgQAI4OfwYFzKxyxcnyMbRU\nVsJOKYAYucK/JvgpK3I8ZjsR/Vg5/MPXMorkl2jHUOZhZKq6DEl54eb+Ei22\nmC4DfBMNG0wey0TSG5wlqkSdCQ1wdpCI1KLnPLQ+mHw0/hEQT7VdnT2Sm4qF\nEwjDwA7I4c5tPwOAVTZzPWjm4qqJ1VgC4HyfEX2LKvAT65YZzchDAu4ZlL2U\n96lSB/hRL7/LxBggZ5mUDHCOpf6QithWkWMZ87ecqEUEvIZQXbqslILLWud5\nzV3wLV8rj7bS8NOlN5gBi1OBCbnSTayyKxoXRrt8J53QrPYD5tGX9UDIffcn\nH5zcMt70EgSlyHz4jXX8bKww8EYX0x/oWCPemtTMZE4BVD6x2EkaZ6q/nMYO\nwtV7ApZte7mdBBkYRJlrNSzjuFqTucRQklqsULMkzjbCfSdZwEPTupqXQ38f\nn50HL9yNqsLXkip3XVmCWEhVqkgd9GUc2K+r7D0gOnslfkNFEhtdRCUtrTB2\nMuANrEAN8h0oCeWjwpU0qCCbWi7dxoPvQ1YR4APSSMW1R9f/dTm5i3ttnD1M\nF/hmSgnpsH+VUzrH9tlRgzQJC/0hI5tsVsbBXJqUyc8+ne3gwY+rX/5ZVKJx\ng/CIB2hUlZ6gzTUTcuD5c9MfaL8+INvcpesNkJ0NmunBRZQInurVxdup0GzV\nDsXM\r\n=ikw6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMgp67zphmqbcfhFPbMUDi/3xPwPxuT4DFNLAZLs5BZwIhAKe7bbezU1JNENMB6xILRJ3Gk+gUlfA54+kbJxJRHZ6v"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.63_1591893641781_0.6976630745471175"},"_hasShrinkwrap":false},"1.1.0-alpha.64":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.64","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"19b1e61ed04c64d407ef7df309408212125b9c4e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.64","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-PVLBJ2MqRU3+tK88WmH+WOQirpiQF6trItdtuuF0VhasEaVb9VNnBr65+k09ygAlWIvebhStCLUe9Mz9zm1HjA==","shasum":"763cd32dbe242ff17d3a81c9774e74e8bae711ee","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.64.tgz","fileCount":122,"unpackedSize":24519394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5z7oCRA9TVsSAnZWagAAWtoP/A67k/BmniBxJAh24u3S\nQy9RdIZw5axAJVvmzvno1G9FA0i0EqxehZAYFiIDCvgHgphji4vkBLeB4Cs3\nBdYwt6+wNzYzkFNP+exx9xOkymvAB2LdkigRCQ+QNsGP2cGZoqiopXN1igvK\nVXGY/H8wYtEAKePTC9HiDpD9NvkQ4SuM5nmQRFiz3lmboq4aj4acIcWZTT5p\numRPRnUDf/KlHLroFb3MEIOQjXRV+KWW8ADn6yzHPFO3TRoR5l5PVz0Vbs+N\na9Eow0mdCWyQzmE3RKme1bcxnehH2IIsCsuu6dfc5GeYs5FSsGwpQDq2Ccd5\ng7jKIwm+mjrp0GSlogT1HBodMTvzQEqqejynPMi5t4xOPwzg1W+Fjq5G/b+1\nTnpgAGgASUcNqen5WbMEWajKXb2jajtGSAYZY8QF/67G+qzyaI9YLHTwcaGC\nbRDrFCPoXOU6vbInX+Ls7K0nGoWrLlpSTE+/6fMFfdCEq1VclxJbE8q6HIaS\n+E5hpJEkVLt7dbFnf9egCtl26LkmEboXZdpAMxoE121TyVKg7jTRgtk7W1Qc\nQCv4K2ELBkBiDU50B96xcMuG++NnRcs0FpCxPKGmWT69wmZ5BalzcsVr8TYV\nIBhKxOqZ/4mKJE4OJXYE0bInOvsIcSboyDxhqqKJMLxmO3+jHiBZEQKWSjOX\nbHq4\r\n=mj8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKVCKEZCz6AXbssb2UX3G1wFyDjlrNclnZowId2herEAiAeXjtqG/dYeSd4bmNOw/Nhu/qaY5uhAYOPxjBjZ8sweA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.64_1592213223777_0.017130792297424424"},"_hasShrinkwrap":false},"1.1.0-alpha.65":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.65","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"3c6c26b6b71361f2d055b3eddf39bd63bf58b724","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.65","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Ws/nKrMIrWhdodoU37gm54gZxOKxzaMalZeGeRT1Oni/iY3q+ifd1gMcdHrIga11kno0HprpTxdqtu0yOl5j4g==","shasum":"5d1de0aba2c6d240745cd3d52851df97aed9aeb7","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.65.tgz","fileCount":122,"unpackedSize":24553404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe544rCRA9TVsSAnZWagAAVCoQAJUtrUi3RB1YRE6kZUT7\nmoAJCEFZvd3rvWK80zhuBTtIAlP7YeZXdZXCQsad4/IJGEPKrSX5I/8oIVkx\nMG4VRraYcA5lGrk632hf2YsgViDlIuxImRy9qVQ5jGQRE/m3/XIhNGPeEqjA\nBbBLXr3YlkxGJtH+FJbpXu72JW3HUiqZRfWwnfXIh9/+AgdJg50A8hAt16eT\nRl9/URwNw8Vm5FxJwroioiRXqPPDnr9fnOENFiiGvYyvr8vzBr3tvkrnZeLB\nGk5aAQT6pN6S/yeYvQWXDBBNQyjZUAVi24ZG1+CLS5WjsnUuUOkjfCAe0i92\nATbA66EZlSaHpEp8N7S2lXT9Dr/+2fZ/rbHCcD7TWZ0zIyGDaskpArmkW8Pp\nbt9gipw6jcqOks2YCMWmBOjJ3Yih8tS7YEdh5fER+zBHJNySLdz+3LD07WhJ\nr710zrHXmaaVDOnq796UYuCrTTCQ8PIzAIfMoZrk5FF5OrRrNr6dp8Zx+SWB\nENMBmtFNXVyeTILC9dGcemvy31PwUS9LPjnXiMQtN/wAjQuJrZe9U/UQDtpr\nCgbtNLi0BYqFxJXIij6Bv4roz1YhKNslaT3FEDrlYXQsICVJzsIi3ylKN/0l\nlY3/1lgipLKyLsK96Rr4iTZNBn7TnDFWXAnq4Hs3orAh+EVF9i91bCp6fLkr\nLL4X\r\n=FRJf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFClwnRQXbaIJzBGiaCWELjZXoriSAWBuief0n72ocN2AiBDjTi2akXe1M7HZCSuRIdlDj30FdP/6GiZc+JwK3O25A=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.65_1592233514204_0.8503360708069931"},"_hasShrinkwrap":false},"1.1.0-alpha.66":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.66","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"13f7cf89d35bb60386fcc1e9495b5a6c96c2b4a9","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.66","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-+BeOFYb0AaiDAbj8lurTACggO15bCDXbg8+od38gfEHHWvh1Z9W/prWKPYX9j6hzBFDFpXjwludAqgjNh/9O7g==","shasum":"6cf8818743dfe1031073346374505b208b3e225d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.66.tgz","fileCount":124,"unpackedSize":24557445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6K5qCRA9TVsSAnZWagAAmEgQAIuy+DoS3NY1kIIU5xPN\niSR3PzTvCR1roOFs6dvRdNpDerLXVYh4h+QZThk13cPe0JIVaOChsOHyrI2F\nx5IiLZZtE+7gUHLJCSEnfMtSsDiuf1Qxk0AYbgFVhXN8Sor78tCUoJntbtDn\nSYcNNf0lSisS+5gVi4PMLJjSRvMNQs3nLBhIss6WE6KZE79htba74ElmLrEZ\nGkl/aUm0qtKakHRAE15fqwUQ8AWsLBEDUEZQOHHs52rqSNVbwTIzHMHj5/7S\nIkQN5UXQgqcYNRDbFiCaxVl0H+ygWfWRpcb3ePyxOWcxDtkNZMq20GAe1gd1\nTz62BS6m3oW9DOgYkRxTsYPpUozsGYY5jKK6rQcH/0wXtIT3dpM+7C2EuFI2\nk01f4Hq2FpsKyF+3PI8dqDLfDHjGjALZFEfTl+f0TvZLyvWJ6HZA8zD4pa1V\nAR5hF2230djk2REerI4TWU1VxUdDtNHT/nQAhAgij+BSaBxkcIE/9KJ6vItA\n6nvOOfzYnRFEb/7YHCA4i7tq8lbd7+5wt1rym2MizXiHvj0tjh/V/gr9EvQF\nYR2K6y7np4GcQCaJmL/zneLaLN+VXA7ttaxeZW2SG+IHJKcMxptV+R2rvK+X\nQaHwOERvbYK0BNOXu5hEbq9W5LqI5K1/siG6FlG2bGoaTPjCks7kcqCxNJQG\nVhG4\r\n=G1qH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDKTeLsqCew7awWukkdB2f7ncZQVxznXS9+vJ8+wrcZVAiAbvfteXpAD4qIeL+vKV0Rn3mFUJLzYY6kWoY7URHbbhw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.66_1592307305932_0.060662750498893914"},"_hasShrinkwrap":false},"1.1.0-alpha.67":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.67","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"096dc8f6f1b8639227d07f7a08afbda6880bc4cf","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.67","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-gWBQr2ye1yjg9DSB9t9MyseG4C9L2iMa6v0FBC6qPn17RuyonTPoCZfpV+TG82KfFj1mgoAYWowDGMUwX0WILQ==","shasum":"cfa5a9dfe3621370ad166cedfac5aa379974fd62","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.67.tgz","fileCount":128,"unpackedSize":24602952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6LzZCRA9TVsSAnZWagAAdosP/igHTB0d1/6pyaiKTzRC\nVrO6RGvt1XLgsWGk4IdOR2O0TpyqyZhdOc3Sox+4vqpvDzP6Vy3CRWDLx+bT\nfM76AweJAs/tCPE7khxCXDOEYW/I3vuOC9DSIpTY4NdEfoAPVc6c8H49LMV1\nV5mBkzLRpbqDF4jLmKZDbgs+nxkPnR0+PAdhHPxHOliclboLAWGc9mudDABB\notg7MRaK/1yvOo12WaMeli7SGoLYtqBUoN4O+rvMDlDXLs3aRrPMknQxhUn4\nYabpTgS6aD5LeA5lLDJ4kkBAFgPWkiXEd4OPaler7kh1gOMfC0sOV+IzI/V+\nkAPi2ybAytzZMj8K5uFaLjKkgvY2jE2WPndfJSWDTmyb1RCKlfQ/emb13NYr\n5pzCjnJGXvMyKuPSXDksUcXGDGBZFQetcONjcWqUit3/C99aG15G8WxHw3CF\n1f0PaQE+ZEiD82ApzsmWnSRydxjI3LpyKUZAnZiF6QUXYcHwH18QgrSBY3Re\ntyT9z++jBwN4QSX7ObqN9UCXPKvfQ7CEk0vaEr9F3VN+Bp/tvK3QBIjXX9Yu\nSjKqZVg06ojyM1FSM8qpKx+i9EnxA0vOgak6FoAVQBKIUM2JljOuZeLO12Io\nrSCjRdOBeCK+aEIEtZ6pv+DRQXjmxKOomF0WLSzd3VvT4CNEl53a+JgBQWP1\n0S9x\r\n=1noR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBB43eCRuFuF7bzycAR2A53OpIDG6dXh6Ak5a4244NYiAiBrUUrVWrnm8bFKEwlEqou4150qV7KmIeVZkt6/ZtnfpQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.67_1592311000487_0.028160526564096955"},"_hasShrinkwrap":false},"1.1.0-alpha.68":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.68","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"0e0554ac952a59a9da7ad8f50137b2942165dba9","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.68","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-EfPT1MnOruOi0I9txvsxR1PFxFsQWQwHsReHBInrF/JF4FpMXENwDkD62ClIrUdo/QFv/iUQd/0/oRETIPuJLw==","shasum":"7e2922c2f06cb089bf22ac66abd7203896b7d671","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.68.tgz","fileCount":128,"unpackedSize":24572056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6gHJCRA9TVsSAnZWagAAUCUQAJjPP+uJbU+/D7MlvPQA\nKbNgzNByjXsuLEBEqlZyStLYMuDMtkeqq2jE90icp0iG8Ph9nGlQFcYZ1YXs\n5bYIKo699kMRP2QmFa+nN9jeBfbP2sOj1FyTfKbcg5YL/tq1DQI+CIW+Cj9m\nb3/teVIfyQ8xVJsF0eNKNHZWJ10E+2bVsDaVNSyoS+d0wZlD4UeWU0lyrrWu\nJaDqPtjaQqVFJsMV6aqFxC5nq3y56IB1+7kXqvij4u+PCRiXUgUHIRDGNqHY\nPaRTGIfLiTY8ijP5ydV1LgOaGU3PpeT2x+2W9+O5VzURvysRwiVofiUHvy2N\nfXhYl0GHOetFZHodewE5K/7GvI6/qg/GcSK16G0j0uZU6Rm+wQeJbPinj3Kt\n8NKgRJI3BbXkI9XL0gTNr5HIRTZ8O8Y7iObdt0nC29Vzv8ucti8FG9kUKmOT\n10jbEtTQJlOwbcfvWDTwCK43SrL7RRKKLwLnxyJVWkkPeMb3GvXf9GfwcsSn\nzMB+jDwCCTLRdw1HGvB4jnXMZ2xxxFaxG7eenYSb5pb6yAYZ5NvAjgIvXb+a\nIWDCUImw7x2qh6dG9Ky+cZHaxYXE0/XX2j5YGz5l2vATMgv6cmwIwI1s/xps\nrTG0XHxYCtPE6nhms7t6AnlbVSvulqaepYMOpwRlvB5tknxns4V2njR7a9b3\ntIyn\r\n=ypiW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWGqxB6MYE+ekM9/PMO/82meM/DbQjwN63PHt8F0An4AiEAosyGBzATnYmgdX8FMH5OhWAS9aHmgl/m+YHCPIbybvc="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.68_1592394185026_0.8326875766501804"},"_hasShrinkwrap":false},"1.1.0-alpha.69":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.69","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"556a69aa811979757dc561f59acc171b46fad560","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.69","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-44UWvzPocZGOyu5nb4H1vr0yPGsDYQ7mVAwWjH+idsO9bzTzTnk7BHHYcCujG/rfEH/3eXxUX0XL+AlhaRbSLw==","shasum":"0bf99c44933477521315ad9ec4ba1663fa0e0b1d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.69.tgz","fileCount":128,"unpackedSize":24572588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6gqrCRA9TVsSAnZWagAA2xEP/2WWuJveNsSOnh4o4enn\nFUDawAoNtrXKeNVdTeJJ0O6DIsBefUVrkQUh23gCQaZeKwUdTKFegSLaDLsL\nzopf7BHZUCkG8f2YEa4LXrzE/tu0QkWFnjvMeW9K+XmJZmnxNSYmjGMVcjgN\nsQMV2M8rd4hUmgCU+h3igNVL/rNOD1zTrGpeVLuIQTwRDS4VpwpzAaH5r572\ndkbeGPmRVtr0vLJuBnEr/VAN8V6WA//ZQMq4rBu6mvyfX9PHcXAGzt8UoopL\n/Zfu2K4uGmKqhZzp6pGyz7+iX+XU6CZwBlcIekd6HnvCBJv0A3kgk2PI3ZzU\ndkOgzcqjihyQocFm2dCgAK+kU5wGZGG1kx9JJOSY/kpZnbIaYZTD9L+wfblj\nEqG0aD5DWezMgFA1zGhRVdL54uAHb5KEi5fk2ExDoKq1S4OsejTbbTCKNbtF\nfDbv+8YG3FfGJjSf4TtvPrIuO2aJL0X9DsrjBimGVFBvAL664lwL1Xms45tF\nxqVGH83+oLGL95hvV3h7ybD8mTuVb6wvNT+ktfzzM0E2AfJ8WJCeuH+mcgoR\nllLilOekPJXL65GClXMch5ozf2Rp6ufbSWgVBr3ZJk+MyIn1r89vMJxGSCOP\nEiE3KsqcH2DvCGP1JTQ0EpX6ORI4RIiXxhPS++PdQSzfFmBNhM3jNXm4z23S\nvSd7\r\n=/T5r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpmhzBXKxc9wE3uA/+gDrktI8XMxobo8RytgAT+CYKpQIhAI+qtewRaW+2cBr/cDWIigIKrbVylQ35QMpfFLw78t9Y"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.69_1592396458227_0.06192909958131021"},"_hasShrinkwrap":false},"1.1.0-alpha.70":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.70","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5ea86200a72c6443e942fadd899183367a6260c4","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.70","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ofpCBK01/Pca3vXF6yrKKve1i6tzlC/yASVr9Gs0Uv6GOkihApuVM87pxMBjl/Hz9+ZZaPQdHLHUpSDyzXrQtQ==","shasum":"a85f032c23e5517d79335d155ec587fd99641b29","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.70.tgz","fileCount":144,"unpackedSize":24629968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6jwdCRA9TVsSAnZWagAAevMP/3bPHp/oI4HZYLr1ylLi\nu5hFfcYYgHvjqn+KssW+0AvPrlB8N/2pyfyz9nFcufwPhKLVhKIHCm565Dif\nIIP2syukb+GGb6W8X3Wx8QoGDlRvTLbxIwA3Lm/soCwj10fbzeFiGS9DXldL\n4eSCHBWd0ERHBlhPPrSiterPjr8HOtok0fXEFD4P1KQTUAML9yu8R2YTtiuR\nTF1QKqqp43jbm8urYMLJGhYEbGeag5bzj6cThphTL9SrfpcDcCiun390f63A\npH7jPTKPouacIUdg3A8bjWang9W/HoCCKWQWvWptwokwUss6a/7zw4i2HG99\nwB2B99royGmeuuVZfBx+3NT6anY3MAHxAFt2xYuuaX9Q0O69B3ZG/rozsD+X\nhjUL9YBr1m7L2Tt+ZF/xD5lQj6zcPggtwRfs5sqMlfD//hgqhoCtKSrC6pW1\nBQlCGhLPF0YLewY6eOWIM1Ko+PM3ilz0ahFWhGQzeczhJg3+BFeGSXQ6dqF9\nAxPqaPBEDnJC0E9HVBTkS98s8cAI45k3Hd9yPP/Uv5iCIL3L03khUI7SK7XM\noCaemA33dGOj0YyrNpG6eSNKEMAbDG2CvqpQd34xv8BlZHrKIw/6+30UH/Er\n8xDyLAAbQhZZCxg2tzhavb3CyCBqpdeqHgbY92l8kkORzmpT8j/HUZfUN12l\nPno6\r\n=93ut\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICQLy8FRUxmEGI6u1DjCBQaxCS9M+DHUDpvO9s6idbcmAiEApYEAkIS6RCBTTeTAeuhTgvrrFVNzwMtixZvAihywPeM="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.70_1592409116057_0.5132782375953118"},"_hasShrinkwrap":false},"1.1.0-alpha.71":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.71","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^25.2.3","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.35","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.7.0","husky":"^4.2.5","query-string":"^6.12.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.3","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.9","polished":"^3.6.4","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7433b59c48fa377e72fa887bd288d97c66928cf9","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.71","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-cMLboMUw9bkPje/wwzUXqFfCJzBveGOwAsePIVg4tiEF1YMwwZp3UTwIl9drJ3mirAnY8XUPwi/j1g+rqTAz5w==","shasum":"7eb8cd13f1c7f673bab79c70d52c53f4fcaf2d15","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.71.tgz","fileCount":144,"unpackedSize":24632102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6wrPCRA9TVsSAnZWagAAQbgP/jelDyjfq8ShfAX+5QxG\nJAV0jjAt97i+8G9Mi2W4A6sDP6fpMsL8B+HbP7yvYobNkLYQUluJ3P26VIt5\nsHp+RyoCforv1viUjGtldzEuZZO1lLerd42wj14EuwTFQfvEz3ow/VGF6v8Y\nqWSO4LX0jDpNsjQCGdWeMlU2B8nnqjM4CUM/5nFdZ9D2zpWyTj+1NH3sF7L+\npEx6jajPpiA5xAnBOOHbwvWyeakP8XVp8XgH+e3l+Tu7bkST8/tLs9QkiAXR\nBPqYi9s09Mp1c2peCVLKLGI/Ayox+5lawx+TVnXRa38muvhTyAy/08dVxUhe\nIXUbLA/4zKbNAaqqQ82aS8m2+sdPzVc/YXZnT/yIjZR1K5EMLnfAmBtREuQv\nOF79mx4hjgfrneEtdjpYuSmL/Dy+xLCKcMxkzyt07trbmDsWjkYzX1K4y18r\n9BZkmzu6f+cm/O2vZLSStIyxAx0FP20fZrOV1PAt1CKr2gGii/Uh03ZEo817\niKrKbMr7oUnyeWmDFh26eNMRzVY5cjfPORWC2QJTqRHBQKYxg2U5aAL6WjHb\n6LuCL/2PgNupfuDuUQ5Av0F4M8Svxf4smeOc6jZSaCdaY35a/uk/grPnBXGH\ndEDm7GaQeHlVPzNwxLSfEKLX8ToVwult736kDvQklcN9UZMop7iLBfoAe0nh\nAFvR\r\n=9k/x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChFnH3qeXpReDmumQ3QVgPfLqoMh96IM6Dp3Vh2FyW4gIhAPiNdVYqc5uVXQm04O0L83VGVyKYPVCWj/XfqGh8VF5u"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.71_1592462030873_0.06417858263242082"},"_hasShrinkwrap":false},"1.1.0-alpha.72":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.72","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","husky":"^4.2.5","query-string":"^6.13.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0-alpha.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6660f03ad8de20def783101306ccb2b7c65758f1","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.72","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-gNhNmjmaJoJ5Aa0iJFOlpnIXoRTzQM6Fteb1OFonb9cRfBvL94faqtfWiBz7msFzcyyEYR0lsnpjQl/axCVIqw==","shasum":"93cc11a2365faaed52b874a97d5edee0024dc4d3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.72.tgz","fileCount":144,"unpackedSize":24633433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/GmCRA9TVsSAnZWagAAQp0QAI3psC4A9JplxBxzSRSO\nxDiVC3cbUfoy/FgI3anoRllnGelEUvDCpbTMhp3JNwlAH4pepMmlDx0mt8gk\ngX+TYiRY/7/CGEt+IE/puZ0nw1QKxIxexhSqdPq/XaFSO2u8OfQj2oz2O+CI\n+TKoN2SPCCbX/Rn0m4yCamUXFHuka4o3eh5iFOELdkmTQfq1Qc1BMOf5f7O6\n0wNbOna4zgJsSJTLGQdaigOvoW2jVgisL+o3MPomv24i1HbJQUp/m3Zc8EIM\nj8kx94IjnttrUmukMyzV+vdbicp89lLlWkuTDGXbibtAXmVG07aJ9Mjdcwjf\nZnyEetZZ8dJv3x8U3B3UofPZzZjy5eB2p82mjmM+O8hud5gx7pIbmOSxjANy\nZsahe180NeSYXMH7M95HX4DxGlg3xmyU1U6cGbIDmZyVwvclBsG5fgxNBVcn\n0+Yi2v7b3VYV5smSqd+fRdcn8ILjcTngP8e9gZzoCBzd/1z3vLiosqa2wv1/\n2m1KfFbgf6PUCFSA8B0yehyy53qPftody59S358kRFSen3NwMHRwH0ASFWbD\nSGzn4qgSHz9EQTbQiTQUzU6a71DghEn4rdbZB+Ywf2k7cDiPeTk3IOC1xKRg\nABPy01kB16+TU6w/uiZTAQpQqm0U+ADmJ73yAoBnlkb+DivTqaDbhfB5hu+g\n19eY\r\n=XTLp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSdOXV5TNd+q9W1bKWB9OqiQ8L01H0i5/OzChxglokXwIgJk8RbG9ZZXMO7yVL1mvVzbHCKs9Sj3Hr645GiVKjPL8="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.72_1592521125869_0.615450684575999"},"_hasShrinkwrap":false},"1.1.0-alpha.73":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.73","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","query-string":"^6.13.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1a222fba58885b47d32e4baa0194c4a636571c8f","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.73","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-BHf6EHDhJ5vXodQYQwp1+Ej2p4iwSo6Vz0zma7UoJUuJ7wWUGZeAJFDquqBb2VnZ9LLCNZ1+7sS3ly+92SQ6tw==","shasum":"6c5e0539e69b85329b5e73c5a2bb85f0e1481dc9","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.73.tgz","fileCount":144,"unpackedSize":24633826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7OeeCRA9TVsSAnZWagAABfcP/jd5hCbYhJ8tCfu/73sV\nxpJPGbuqjVBJPAyi3N/WcLXYhrRp4Nq8M5ikEnMH4BIO7ko0yGfwMVSJsl+t\neuRWx7O/4UrwdcNFxAAT0HvFJKFg5kRrxHD/z0svEJosXS97QdGbOw/tgw4B\nILNkKHS3rrC020LBegNOe0fyDN35JpVmUlb/CIeZxO4vtb59TYj6MZz8/vFZ\nfIw+Kyq8hNNhHQX28V8+p6e3frF7hI0WENVi86BtH2MaPuqdKLd8S1jgrXNm\n5hL9E2a+WS9w3JINxsSWDHkRYOvmPt7LiQZAjllguMmmoRxGT3VSCruZDQG/\nT878elobWb6Isv1UKNOutmpVywrNIDfXzezziN5WHfhGjxWk2fAn95CpKOwk\nfw8nMJM8jLqJDZo/OR6alvmAf9Mo7bmz28mO8kpZiBDtbESAPlJKWTKIcVTt\nzNwYW5KvkfqOo9yPXFuXhDFRprggqkQyYHGoPH4yx5GWbUSyApG+YvWtTg83\nS3avv/d6ZB6LdBJEhbTv+Z+0nst3TE6xCxLraLm5Zt6cFKGyIk0VKhHVpQBJ\nkWwUWIcoqf2JEzTMZtQQoEpWO1Yge6XWg6/y6TL9AAMg4dL/9EDJB+WzklNP\nP7BIOydP1Km0tKqcMxf41Zwp6XHKpIXAmwjOSgyPMuUwuVM0WKAUm76eSSHw\nxfSG\r\n=App3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtq/yg3hQ9mEtEpUhoJkaVdgBW4Otd5Dj/f7bISAUHegIgX4S7q97YYN8hfeFkLrV/hYf1tp8t1J8jYU1RAht4qbE="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.73_1592584093286_0.1343306460731264"},"_hasShrinkwrap":false},"1.1.0-alpha.74":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.74","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","query-string":"^6.13.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8e251c016a5f9cb6d82bf5f493d89415821669ea","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.74","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-+9hYiodEJUV/iOwX4gP0pWRRMcTTTnBLx1QjeXWguc04r1DPqLkZJ0jayu/avf9RALRYd/tvCV33djT5tEGIVw==","shasum":"8207a7f832058bf95701c5252f678b7862a70a1f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.74.tgz","fileCount":144,"unpackedSize":24634042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8DuOCRA9TVsSAnZWagAAE04QAJvrpE0YyDDnt943XI3u\nvCkbBAUMPuYjoo6B5dlFD963Aa+o9jAg7tyGhr9s/XFIOheUmIHTAdlqCwyp\nHwx0XvcmOIkoLE5d09fd+cBcQ9k2Pxu8AAqhBxGmeTUFwvleDLgnGzUT5A0T\nkISbKPWMDf3AXeJnqWnDKFyO8pt7zIFzNbyGi9+Tgbvgel+ByFu1II6ErsCC\nPFdC1Cot2PZlA6m/+GbPqKT9KLH+CzABlX4bcvnnSjkpvpbbuIAzQ3pmLXSF\nQRi/tvVy7kqyObNWh2bwWkTYRVptZ4CdCi3pcIziIzbW7CfS/xmxlRvWXzh+\n8X9WzMTZdJzn7bvN3lK504O80IFgOkAxpvc0jK5QJKX469mSoLVTRUpq/dZK\n09ETP36wCA/idTzQzFOv8C045MipqN8ccXm6wStByj5kRrf2lhvFWfc+I3Uf\n0fWJKuc/xn0PsDhZ05mPa+K1PqAdCbLfo2ANztMC1f46K3GDjboaxqSDYqST\nYBrydeXM3edejtDKexTx4dBd6K+mTHoCqgWup8dSWkXE8kv843yeNM5vQuh0\nKLO747YVOcW0WGnN+BzjJXLapvaVheuR3FPGaPRdEBDwxUjzl5ujUGUyb16J\nAHbPImsE3ECpm3LfuifQC2Q381Q1L1ROd/mC8oDANEqHjh6X1XzT/57bpLEx\n5NVU\r\n=T/bU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCz3UScPYa4CBndgFV5B4PAVSEp8EXRIIPQ4SNAuRcayQIgdhDR1IjF8iniVbqLOfu62wWdVTEJBJdGbL1bFleUTjY="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.74_1592802189987_0.07653715421231655"},"_hasShrinkwrap":false},"1.1.0-alpha.75":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.75","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","query-string":"^6.13.1","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"de2c54a9e6191729386563fdbccb56c003139fee","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.75","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Vr/8LaaP1JHC3Auz1e5ztmX6LF+lJJwidZFM5NqEf/s4AnkD78/ikg6KSZbK6uF7EOhCHXbNXZ5ZK+Gup5wbnQ==","shasum":"0a4c9994f0f01c61a6e102a53d6da3c96dd21e29","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.75.tgz","fileCount":144,"unpackedSize":24634138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8GjaCRA9TVsSAnZWagAA58QQAJkDWdmVr6nb2QUkwO5R\nC7emF85NFHnVGJEqVeVebCumP83hPncwmXRpTSYZRKUxHlQ2RdpgfcttjXUM\nrfroQPeYX2Z3leIUwhozFyUE4BHoYnrKYj2V/iVt0CU4nZuu+r8xC9j4NypY\nJfnm6LMjL5gztI+msDx79iKZqOzpQPsQg04RmT4x7WCh3vElqIzQaLAOH8oW\nWyq3IK+IGZi/OoA+n1s+aPqymA0u7KZ/bUFpD9sEiLGeV5Fd6ZdZDXBWpIBx\nUZlA/jiJQusGkeOmNarITsyMrMqAhwA5c8Lk6zDJUX4ctuTCsAUTfckJcU7s\njNifA9oVSTJSVay579JgtD3d0GqUuwOPg/nR5tny3vqbzaOtooq+oSDECy/U\nUDh3MglKF7IryUi7Gtjv5uLpBY7gmOYw7+vmH+7jU/5F7MsyjLlCycF5KWQl\nv3ThbYkAmVngn2lbw0P7mDksYCg/eIrYiVv/0JGcODtONVjkfLPqD90BIEsR\nnsoCPaHVg6UsowHK8uap3W9UnRlm6sdXONgwuyTDeEQbHii3h+ixwlOW8pDC\nnEGJTO5WmFHoCPg2wFRLHnWxLAsxOqJyiIU2PMAwzSnssyjm7LG0WBLE1Qos\nyvpPo88W7y7jnZZQDA4feea3xORnMyBZTl02SVZNH6HI9cl1WIDeng6UJje1\nreCg\r\n=gJse\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWH1ePqzIgy4nG6JBOajz+94P1xvaawJ7YMMpUGAL9NAiEA//8md6EQaVu2IWQ2ql5nmrqz9abT0LYDMpm4rOJ3DOM="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.75_1592813785825_0.8279164402300323"},"_hasShrinkwrap":false},"1.1.0-alpha.76":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.76","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"476d0211720dae42fa3c3bb7cc22e3d0f5b4508a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.76","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-mHV4hEj0mUDoOj4JvTRIk685P/XPTHENh4rwfE3B8XYNjQq33n3fvJkHvXsqD7D1tM9gn7nSz9lebO8DizcCiQ==","shasum":"3b51c2d4c796f9737ca27eaeb600d33bcef71a27","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.76.tgz","fileCount":144,"unpackedSize":24634138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8HE3CRA9TVsSAnZWagAA9ooQAJYBRX271qC/TKOuv0hn\nMHliMo5ESggHqaCm1N6g4+G3ZvPg+/1vKGeblViRHhWWHm8awsW01wy5IQJy\njFugm1mOocOXc5fpcOKOW5JbhXNyh5lTEuX1DHiFYkeb7iSlhXU9iiOFDreo\n4J+qtOK4M4XLN8uaySeHndOiIL/YFSgm+bAZl1DzVS3SDh6R64YiWiWNL1NR\ncM/rW5Qmcnbd32EI8iS9IZaqyP+U0cG4VqAu6I4uNmZj0f8iTSTTH3jg5jT/\nm+FkJBQdpSY8HNQ5XDaOrX7StXPDwTXwj9VwoZEtQp35oYe2k/raTeZkoVsE\nuMF2POdT7rh2Fn8EtWQKbk/TsSQq6U8fFLSMoPFokCGck0pwYXbkLoQEc/0A\n6pAEt7/xQGIZE+J56ntqe4/rD58+TInjp9/S3i4kAi1sp2nyeVs+Hu2dJfyV\nbmWp/sYDoJ2OqmFPkN+GjdA0l+bEGeRuH4Gi4MVbDiPuzvnKED0bKNCeX0NH\nLUPPycP+i13NnEdIfiqFM3YByRdbR9YYMTIkg8ED9Aa2XHb38yp2+MM5TL9b\nun3+/eC6dE/ZGQk67KBNy9rxaMQoBRqjj2ICM5J2faBUb9zYJOldvbIXnH/T\neInEoiYfYNhRzD/MJ0/iW1nRt+lCv/4aVzCFJeUYMQKfQ4x1fImv3KbmUijc\n/U2K\r\n=A14t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKLwGuJvcSPpI4AhT/VVPaOmxxD2I7lQvI6YCxZyPdiAIhAIhaF84iFknjqX/q8MjsuDGS6xK+ex6qXQUusxZcSvmp"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.76_1592815926673_0.5474807438906801"},"_hasShrinkwrap":false},"1.1.0-alpha.77":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.77","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"66747b2176f8fe7457aad62b08a3ad3fe7a99295","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.77","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-yZ0KoODoyUONTWHK/iTRC0Yd1sUQf/MFzPCHpuEkKeRctqu9kvXcaeyJtMROnaBnoQ5ri/ElfI1iWYojMHOonA==","shasum":"39ae9c17a53b5f39af3d6e9ac34d5f9896ee2ab6","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.77.tgz","fileCount":144,"unpackedSize":24638701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8HZFCRA9TVsSAnZWagAAFVQP/302smuBD8OaXBU4Fh6l\ntglaycvT/YJRgyQPRQPZlvRaYXprJiPRkaev+o4eI24jaLnw0yIzTr7foiY/\nsaMaBkFWSddLEn6CKNI0SVpTMcRXdzV2eKi/dKsYcGzJhLWl6qInX48WECqx\nDIKDAhUCVmawTZ6kLCyxHqhBNlFVIFnkyojU4K5Gu3/AU9EslYaWdJvg08pn\nRlJtK7rso8kSa/tZiwdqIf1UMHYOTZnKpBOPV4CSnAcJhKjXIQ2AJ9xtf4kx\nBrn4WBna6dkcwQwqnZS8mAmj7AXnMyCpOVSdkaeAXSJfeUxxiWVOfAMoolo4\n14YGIs/EuGWELmsXD8sESRMkWY7YtjTH5oKvCjutrldlfN0wHK0lOOp44iUt\nM6qtw6zEGYxXxSAbr6Ae5W03qKXLGXU19axXCCD71PM9P7U4xu2T/D1+Z0XU\nxnZ08Awmqv/iYl23cTbaWGa++oYivkvLwR9AvA+R0w/1Bhs0fQPCuUO7QpLb\nG8JA7IrpeJEgoL4SE7HzNd1lO01E0aKqdLKP0ads3zlbJ+e+rtyEGQaBZSMj\nYiZNI7nAp6WmvfwGHDeUDTYX4uPhEQM7CHtMvHpdooicbeQ5ptU+KwC0ncoj\nGdOBu1BMH9SA3hsRpiTvlvX4DTFQAgcoVNykvZB4bR7WYhpd+kn7QaNidOKc\nuyTu\r\n=URGz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3138ieJhROPlg1cswtq4wMLQ2MYASD3ixxoKUZDlV7gIgOS6Tz4/FsinX/SKksN464leUubStBGD+nQdWDB/RVP0="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.77_1592817220982_0.3378673416953526"},"_hasShrinkwrap":false},"1.1.0-alpha.78":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.78","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5942b8ead25f737d66748d52735dd40ff217fdfd","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.78","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-V0EhUOejV+GFIANSXEBZv0IdfxhbEDxY+gN6Wge5Tg+C+W9/CHULQZFTEmKMh4Ugub+2RQz91ZZp0W+9el1yOg==","shasum":"08db428f253688d46832347904d981f4c9213fc5","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.78.tgz","fileCount":144,"unpackedSize":24638875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8I+HCRA9TVsSAnZWagAAkl4P/inwQmc34wbZHokTu5p2\nVeNwzPWxhzMRGuUJvkP76Z9EBLzmg5+rib3qJcMUdDEZoW5UVm6KAqiGq6jx\nwMP6ISs5rZ0RJP6xP92IzqSi5+/gD5krbNV0D69tX1Ti84oE2BFRTHWnq65n\nI2RP/HaAlMiVDcD7YDYnFtjZ70rXkPkY2LF7nhb9CtNPhYTxbnyioDNKHkjI\n8Aqtlc2lga9s/bUn0ywur5YUh47gAXN1DA4Pqkk3PGaCfGCnldLsDOQkd2Mm\nqQvgpxT3eFqCR0FG3HBu58qjRV/H6Vj5IALMSRK7Yt7Ce9dyGkxuVMswwIT4\niRIv3AHFGvXB0ZPYZdIRA7GMSMn/eAYWDBBLhujc4OXV5cg4XtgeIvOoQFE3\nTWgje8CPoPjJPcumaY8HveRNo8Vqo+ErtIo250cRlWEmq0xnFHvmQY2qdIwh\nI4g2VZA2fu9dF3A56ygw7kLSsckcKWJzhFC5AmdMjrIY3+P0yDwzk2XuM/hS\n2HRpV2/gw7kn+J6rZ8dBw6QX24acPxQuB/ERC4zHCfG6MmidhHJ8BNzWMW1g\n9jZ+6PROyTBlBqJdJicrVPKIcOxLwVdUcxaoM0y+BQGEccPk/zrzmS5Jcf3/\nuTnlZzZBvow4mtLGEbCpwaLY8/llgPhl8yjj1U7KHY8Nx+YWCz8pkeQTyBfE\nsuIM\r\n=tXt1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLctqWB42LkRhw+FiwlIvD1cMdTAS35AmZRs/TI10C8AiEA17uc59i/Amb9vHXkpAuGY+0Ibli5Jx4Jqg+a3glQCXY="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.78_1592823687263_0.9946123618379399"},"_hasShrinkwrap":false},"1.1.0-alpha.79":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.79","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"2677791e43c3e89ed14b3279b9591e586aa25cf8","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.79","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-7jL/UqAPbWyXupuhtriTh/wiGHEHxfzu5zdIotEbJoui8cixl6S4QyVxKGR1wKCtIiacc5zjLZLEO5EW1CzsNQ==","shasum":"f5517d5ba5efabec35eadbec94e7bae1671a826c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.79.tgz","fileCount":147,"unpackedSize":24666003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8NXsCRA9TVsSAnZWagAAy9cP/1uL5yVRYTO75KgTuVsO\n2mMz44DQxN4qZ2my7jESOf+XyUtJigxINYpPMIShrOqk6BilBQZ5rzHth4cz\ntIWMYYukrXUz/LBSksppY5rtuHI0Qxp5EBFgQgZzQ8Yvx2qa70awzbiwTBRJ\nrwRuKBZ2N/bBfjOnxMC46hpzTsubWoXvYePooEhXUMbQFcmiJb6j7ru5SlLd\nsQX6DyVApEw9GgXfBIqb7z0gIMk61MIL56y+QUcg/GkpN0TPz9VdxioNMoeF\nERJAXgf484Bz3LW+66ay6YNFWqUApDVMeyF1oHtGoz7ip2wppZwFL4e0aK1e\nhWm4hCEaUeHaoYxRF6i5dZlYAeI3rf5XoCD5O3LKkAQpaBgFIGic/FJGepdq\nfOCMJiT+nXZsP/zjHBaPGzsKZgdreozYA9/slIjJMyyzOl4VWE1iL2br8dli\nng1JBzvIzLIvn66tlJ6R0q0vwWaGcPbck7FbEsk+DbQ2m96gQLMXpFL70nyb\nbHoqOKNf8x8xGsq+YUbGpgPZ89Cyv2duvMzUxFyGiCBKAhrUMF1Evxi4+75M\nCyeUxwIbnG3QNCXfrdF7V/JS7aSmBETggNacyKxGb8f1W/7P0BiiTkcptDlY\nRdLAsXQ+x7hF6NN48An9TzJgYNLMek/0/8ElSBL89mfEpbhNPh/t6W16FHOE\niahE\r\n=fZH4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBB6fWHoy1b+C6sS23WFCI7MUvR0NE7Zcz2pI8jg6ux/AiEAoFKFeh+nGddcbsJSco3BZ73dg8mdfBSK584XjN3MfaU="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.79_1592841707792_0.6242973931169735"},"_hasShrinkwrap":false},"1.1.0-alpha.80":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.80","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1d6c886990d5f5cb7ca828aa1c2f22740dd6cac3","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.80","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-TWDCSg3qIUXHtAKPadqqf0ZGPHHrkaw5kAe7B8fqDo/+SNSgrAwGEvNO7cqDG4pUQNfl3aGbyCaALUWy6CAKZw==","shasum":"3fd93642feba7a0ae3865dde78e6e309177fcdb1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.80.tgz","fileCount":147,"unpackedSize":24666220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8No9CRA9TVsSAnZWagAAJKEP/i7KGIzLjMBHwANXoElk\nG4xoKzey29XpxTfO1qD5iQozQeu1kHfJBkiUSKBWe+Ht9j6LFRPkxWK25K00\nC8SozAO3lK3YeUmS5WxvmZE4V2wYuGrblfhrXXmSrMZt/AMb222aMxnfHpJO\nPSvai1azucOI/ICbWhgqnBR2vm+zkW2b0XSfv3f/G684vc0Bt0JFckhgHhBY\n7T8Ge93nIGvHaST4ShKTShSXsZTl2uSDm6J7F/Ou9+Xd2BwquLqZggC8vfoV\nIIdpG2hgYj6vfHDU9A2gOUmxOczA7R9Zrwgof6BAqUMaNrjaaPs+rpGTe3Jc\nOS9BmbLLbbBirbIeer/sgwRDgfEp+jVvnAc9rBo4cyPMZlPSmiEJwTePg3Cr\nKczj+2hzraTkytcu4Z9X0mCzrTVl2QxH/XvwwKqpiiwBMOSvo3FHbeSB4+Vo\nTYHii7YDJhBeA5vICG3HUyU2ESWRNV/U/nAXsaekBVcKM+sLpYbBDK2Tm09J\n78wA13wCYM4I9BHNcrWUjlvnN023P21U/0Qpg5IICvgW0aXZOsAVDFCB0TMm\nig5RokQukrBlpsZMoz20hJ1zDiKt0R7402bzw4WIChSAIeTz1zYldLn69Z+W\nHu5TZ39iIILuhSh41gUuQuc2aQIsQtRDmGxvlOQ8FF4loUdsiWdm5W/SoIJF\ngnrp\r\n=/BeI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUk/8AleZIOSozEuAl+0wM4+b26+eZk96nVvosphsjSAiEA8TDjBXyONv0hRZCb6+fWghqa2j+TFXZoG9W7yjN+bxo="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.80_1592842812259_0.8571643151176602"},"_hasShrinkwrap":false},"1.1.0-alpha.81":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.81","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"d3ca8ea95f26f537f6453610826ef4d313e47622","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.81","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-t6lo3sy21JlQtHdyp9y1Vtc2rs6z/wvEdFYhvDkWzAUErNb7kvaky+7NqIEvGZV3+DI+aG0MEST8tYXPKNV87A==","shasum":"e5389dcc560d8e68a8fc8cba8ab9cabacfc5d8e1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.81.tgz","fileCount":147,"unpackedSize":24666339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OMOCRA9TVsSAnZWagAAZIwQAI+POjz63vnaPIiUo2gt\nKD8FtPpkCsKWanjyR760yHUjhbxqTwmZhuMB5YIAyhCnoqHv6yCXGaGPa/Ug\njdgN92X3j88imy7NfhoLkNYEJrUAK1eyB+6OpRSURBAxQxD4UD+5RncgDoB+\nkhBZggq1L9OvE/k8It+aUuX459sX1Cd1eIkPbr0u/eSJFOEQX6e83KTsH7Xf\nswjtpr7Mx6V/bBfMUsWWwKhQgUMwgsEbJ8DviQHGSKT9kNRScTtJZTRkingM\nrbiSmlnyA7L8+7FU2iTclcenWSo779WRkT96PFk/LP+UUkn7hPT/1fbjqBxR\nwgvf021TZII8ezYQvrD5CO1pptNbJnYxGh4TmkrYFcYsd0iKrAM15yVc9xRI\nBNA0jPf6Yzqc+vOhZnWa9vk1PG3wqD55uLWd0b0MVB1N+CPc6Tb4bUl9XjY0\nepRuL0Zxvl+DMlO3QFM9zYXbZWns9sZOYrqg/axhtZtbo/pgdwoFdwXUUIUU\nXfRzocpQ1Gxf1CdZMjwSHIuuGfJXEN/4IDnfFlJKE25LR9dGAZIMZ605V411\ny/5fY+UnkG+HF7dkrfkhVu682F4pHWCDZrXluuAkC9qv/fcu2LXeV1vKjExC\nTGHGulpJPnkxvSJwj/PA1nCeJcwJV3vPPeaIPBePgI9nQb7NlPcxIL2kYKt2\n9F/p\r\n=Dspo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDf+1CCF9XS6eKPuwbyYCh4auEcaHdGwGagX1bY++o1DQIhAJHYxaTMgsVN2l9l0gkHEmbc7LSz3NpwombuyW/nDkic"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.81_1592845069653_0.19710869064048753"},"_hasShrinkwrap":false},"1.1.0-alpha.82":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.82","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"096f466cc6ac4dcd5b4f959f74ac36c561fa19dc","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.82","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-lGRIXF407s4HbqJuCOj4vlC4QLP2qNnamHa1rOXWypCfaLL16bVpKdMQGaeciWK+XYAjExNs/s0X3utiNLaVUg==","shasum":"9cb4e6d57f6fdde8d18f11dc2d19ff562f567262","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.82.tgz","fileCount":147,"unpackedSize":24672462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8aF7CRA9TVsSAnZWagAA2MQP/A49yJA14EBQIv+1B9DJ\nNoncj8gZ07KoU/rZU9UL9lysUWyMW1xdUs9Pc3WvbuQFKNYaOh8mVbH6ThF+\nQtmuZ+wWZTjOGBQLiU494GShXmoh23o8AhL7nCwar7R/ZYj1kIlMMxn80lKW\n9NFayTVl7Um9SJtIBeQiPXuCMbWnmK2+D6mnFrS5KsJp0V1Asb2GsYDJlHEc\n9xfRsQ0pYxxvQ14AepzxmLDeLv2VYZhoaABg+u/uxUB9MIckIu99th8PQyFc\nPiog6Sw5yPKYJeob4uDn263UvipjWiymJNAoVCC16BGoWjQpcex/s71ccbZJ\nId3ZkQ0+fJO8waoU8Wzi2klzm053Vxm96QNeLUcOSM24K5L4NsrKJVhvAZxy\nn6QxoKL8OGOT6dq0plX2MrrOc5kt9eXDpF4HYmos6l1+K6pQ/8hu8n7KLFSp\ngSmrpYZD8336LrJo8DOWjc7agabL/PlRAPa0Re9j/ypsfRJ021PJzhDEqISp\nUNlrDq/ID34qQrTyhdnUPqoSQ+cCxkzqogv//OM2i/dPDU06A/dU51XQH1d1\nYMC/Lkg568ocBNBbvEBTJmKjLPBNO8CgRAXB3CmSWZmbZAp78XRlWHWPi7Tf\nr6kwBSG0tCzFn2M4Eh5mnXraRtGDwVXf49taKEYyZg0qtpgG4GFTifcn+Zl2\nK38/\r\n=fiWD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXf2dq+qABfnGtZ48lXj+ASsw8n7bWCTVCFQjjzr6V+AIhAN9aZISc/rtylk/7j1gsGFZltcxnk87YAEDrukrtOm0p"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.82_1592893817787_0.3553010038849098"},"_hasShrinkwrap":false},"1.1.0-alpha.83":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.83","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f21aa998ad56dffad4958ee796582ad2149d90c2","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.83","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ZqSTKvrSKctRbaJ7Yqu5WXCVa0ED3v0rRC6nRqk22zQsgZ6nZBT3X3YRxhL51PwkOOIFQvxUw/VFbx6ovhYdvg==","shasum":"0c55f5f211d3aff5877bcf025f27ce9d1eafd155","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.83.tgz","fileCount":150,"unpackedSize":24683863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ckMCRA9TVsSAnZWagAAhjMP/2Hp5E8Jie6ZvPbxpeNt\nkmTmFT/LkT/l+Q8pce6WiyP4o4W0hn6uEbHZR478BJoJOvBo7JGGpaP2cFUC\nelrYcnPWdSCHpaLzuX/oxM9sVyiR7XBqLIATG9unhcr0ZpUH+iayRSfh1YAu\n/1a5CIvNLTjAm2zHV1ktft3jncrR7TDDX0NYReil9hfZYzt2O23WsGvkkl43\nWiINrJkZvlBEtl2xC/98JvAlUcgD3aFpUrTbDOdc5gDamd0zsNhueltswDLj\nAqNVzM3Ltg5MsuT+87ZN/M7udG+UBaRksGzCwoD+VYYCx+5t9TAnuflSWnCP\nllb+dvybfM8OJhE5XnBtIHbFy0RCPqNYOT9wjtZXKL+lm28MpOTEpMd63F6r\nRgGPNq9L8zc5AWY+ZV4jBXceaM9oVUHf6c9N1slasBmkxDJZw0WjhTxbWK4f\nzVBK3CjmRGwtKaF5vmnO4klP4NOoPLAngseyyUB9eq7d7bvfbInCL+X0q8VS\nJLiqV3RxxsLZKFXkFeA89vcM2q2tUEMwggcgEQhBxZ74VmRNAmGvI+Qv+L1K\niJ3h+gtArXAn/mpugwVEnsrK60hPmDTTfF2CYQo7tQNgoBycqvp/BXidQlEM\nnVWCse/KOR44oB7YT7ISa7apAaw3aZTwquviGAAG7KJg9hY/CNm+xQPw5uqH\nidKN\r\n=wsWt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGLDi+1r+bXDUGlEwa8dI7h2VonSSPb8yHmixfPbc1uAiA0u8C6+LS7KrjP+UsuNQ1R4SeMc2sw59+s/br+4IbnqA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.83_1592903946690_0.517623617377045"},"_hasShrinkwrap":false},"1.1.0-alpha.84":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.84","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"cca1ab4859d8f43b11b809e7cce9353294181ee8","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.84","_nodeVersion":"12.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Jc4cNhBTgQo8qqaxsxMqG7k1+x24xLOH7GSfgn6gHPZRu0GJI+glx7M3nyuv2jRwKRBDz6YW84RnnPVn9MA3xg==","shasum":"468484359f672b9adf218f7957a0b0f57604098e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.84.tgz","fileCount":150,"unpackedSize":24684007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8zOFCRA9TVsSAnZWagAA6NQP/A8QDtwa0LEYJ2uLhrnO\nXgGKsG0HLwa24SZbgttGFbEiOgZHA4Q9PMPfeqg0CUprXIz8E+V1KBRxOcKb\n7ud/B7TcXuC4IdYcEyV8EsVWUwz9RmO7fiy6g428Hvz/RGG+w7NhqYWAb/h9\nd+oOaMHaIVqZ8DetVTpw+evaJtWY3Lj04jX7h5JDw/TxmTO7bvmvtuMAXBuQ\nDBQOpzSSVDWam1QMfLj/M8dImNxU3oS/dfPAdJ0Y16/F/1eQp517+hB2PnJy\neDJirh3Yha5NN/5J/BPWv/wHA1ycfpoFIgq1dL3Xn0dNpPXYtpjeLLdDJlLz\n8ZbVQk1rCWT3Sncnxrp5ts9dylUGidvojga4nEyZIUfqWjWF7WNL+0HQAk9/\njzAq1d/m1p09JMmOBI2JRnyf0lOotWFIaW4F4dGInFNT4a+d4XQ9hPk4DCQx\nfm4a63DRqTPz4niWrRaM1ov/qyxQfv9Ed9crCZf2hUMXKNtXi24j/nzOtXP8\nBa21R2anqzNQfbd61G5sVrAShhhHs+H7y9ZPJL54f+lzVBbV75AKp9Gu11vl\n+XkZySyZvCPo8BuQLrkod52LmMVWeURLgwE8wH/PIj2OTh4+1nM8djDzyvSl\nmOjgN2skb0G2xunKCqDE6F9pt/CQn6ZfYLF7FYAsgYFItVs/z9jDN7ef8kGo\ny3kW\r\n=+epN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXXuKtYd6V5AVHsQNuXYclGKoIVEr4Xo7rA+1Tn52V0AiEAuqRW0le9IC/xNpvhRkD1O0VwA3lnQp6cHSEDxoqCbf4="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.84_1592996740976_0.6174721482721628"},"_hasShrinkwrap":false},"1.1.0-alpha.85":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.85","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5fb3e59bc4466f58713ab2423a908f8c393015b0","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.85","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-aY8NOVqsco+406rk9MIemkRkw0AJu4I68X6DTICsPFAIrw0GCqUT2FCeZIvHVAkLR0Z08yyGUYKpuycU2TnGrA==","shasum":"abd2fa55e82fed718f566d42d49a315afacec34f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.85.tgz","fileCount":150,"unpackedSize":24686099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9b7iCRA9TVsSAnZWagAAoAgP/A/lmhbShtsLyChijomn\nhJSlqGH5ANXvo91xRiHbDp6RcpLuoCse3QXgGFSu5IMHupG+vZjW3eY6g60F\n10aaOfxHTqFHK4cXJF//XBpY09uCPIfnA98KkYR+hBfhGrmQPPpeJA5BpRY4\ntH7CFaHBOZCPyx+O9vnejn4RkT778Ecn/xyS0UsFhiRewdKuT5RpifpXSBSu\nnNX2EhWd1MkRtBTBBv8dkyhlphvFaHFRCdXcGsnxxXc6PmhZesb/0+Aw186y\nzQzi9kULdnZZBXQMbZU6mJ9zrtKsHMxi/tl1L8SdU5sfVtn8DkJW/IWHuKWx\nypwys9Oe5Fjlmr42CaruQ4zcLD+sz0c9x9o/Qry0RTBzYrgkbdLLXXaipMhE\nXgoEDXrHTrUmXCS71A/hJFdmSdQ89D/Kk9w5SUGIAhNsoNJUT57kKThJmMlL\ngsgV7jnwnDfj4eQvftiPMY6zXAocn9c6XIWaJ2dwdS+bqA9Ym5lU3CKwU9zu\nH9ucdVjSMz95FWKFZyduTaqvJZYkrAc2NadbbMOovnojOiDPh+clsCmKxde0\nAPmW+aXNVr63B1mQ6boHLPRBUR5JlzcSYRN2otvFKzARLCfEyBhyw1riRPdc\noti1y1QJf3oQh7sKFUqVukgPfij+UEHoa3Cqz1Vc0XGDOJu+56ae2AWf5DEx\ntDsP\r\n=Xi+v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHp6sOajusKZNSXLmjMRCN/ot26PqX1L4gAFa9NAgbB3AiEAp+N/OBZm0A6ri39N5Hnveth8bcTBQBEtlbokEWGXJIs="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.85_1593163489975_0.9790113271420646"},"_hasShrinkwrap":false},"1.1.0-alpha.86":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.86","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"c158363cd8be6dff1ba02ac3112933a3992b5db1","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.86","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-/aqWS30DWUzCoGUPji7G7SSmvO4GD8EDBF6XGKRKooleuOijDsSWTF/c3fvgdSyOqPsbke+rAOxEAwAbUMNXsw==","shasum":"4af3b84e101eb8c65f3af000eb1d4e604f41cb5d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.86.tgz","fileCount":149,"unpackedSize":24689370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9hFICRA9TVsSAnZWagAAqEkQAKOi/miEHaJo4Y1MkqJI\nzsh2eYBEosug9zCSHig0eABiGXOcxHOeiWxzphO4wwwS+ZjmhL1Nm84Uuquy\nlB7mlDLEauBQTI0NPTq309BtKBJnZlDJjiwIyb7Y8aJPid8VzubzWqTQNX+C\nWMsv968+swjvrePZ2jnxphXOdPPDNBJSfsIkinlnngH2zSViB2/78q2IwYWu\nr7XgUSggrERuxNBUxYUWHyxH/B3NQBzkOaNnGm09Dz/ttS1H9ZQ/obYwiS4g\nbG65gcLbB3Zfc6Paw9eqv9mz+7fZaPzEMGHssq4vT4yUGMe/VscRwI/vLfoN\ntpPi453vUypnjlvy7TJSRTEoh1s111ECMNoQnIP0zi1S+2jHi3wSJTLKC6/x\nXSjssGwbDGbtYIJpBhAoNng4RaVdx5Qau8EByJLK8UPQEzU88lWUUSiswpxH\n1wCVRJoAE1h4ZijoeSyZgEAnsofeJtTZZXQgv6lQxnFCm4gcwH5U5WLUC3uO\njAokoTvSZ+R3S9V/QylD/PyfZu8cGpaC3otKbdoFZsmHf2bGFUxVRY6RCVLn\nZbqXge91JeBPBjj5xgbOYiL4bpLvVUei2bIF1JwLYwYW52WwR0fPF3+8Pw9M\n/JeaS7RO/x0NMW31Ifp1cGXyMoEQL10Zk3HfkGvlzA3LaXCRtCLF/bAlVY1y\nDAtF\r\n=Dgpy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrRZLCDfRH3GDbviJkMNOSgMkJoCpgQyxJoB5e+xDZGAIhANfu3/abluM2OwntGMOMdw1mSDgdBc3C/vJUUS4kwnKO"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.86_1593184583874_0.5042483971505152"},"_hasShrinkwrap":false},"1.1.0-alpha.87":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.87","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"b3f3099f65dd6d827c05bf0fca4c1529a09f906a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.87","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-NdI+CeXX9rj+1fT5Y8gChdt047spi+FSc0YeMDCpoxeAqUYuyPOv2SrxKTtL0TswX5aD+h1bSJWS6oAz/DDSCw==","shasum":"5532567ca20267a3b95e6a6996a3edf17c0678d3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.87.tgz","fileCount":153,"unpackedSize":24725662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+fZRCRA9TVsSAnZWagAAB6MQAJ5qwEqQqI8NbJ4oG00Z\n7D2znEJWwFXVLA/vhY/hNl5Ed6rz8k91GbfLPHHVijjB7lpD24TF8IGfKvH9\n/LFdYo36FVwglCab/FcO6IS9KR/d902GceB4r3lGXp3n6oEiGqmD2Ky4rDgI\nF1MCAAgQcgw81NAW/sQEDtP/t9zamO2kRF1tDTt4HlSw/xXUMf78kiQCGOQt\nROup5W+dAyOz0+6oXoZder7l/vfO5Ho9PrfXkyfxCe/I652j2h0rHSBnqRXy\ncBuJ9xr8X5WAC95Cf2F6G3ugnGjdH80wp4ch9BB+4otSmazVtJFhxNvjZGSG\n2THlp5NZwMIOkoytqpT0gWZRLjZxcAV+Cnq+hqix51J1/DRFyXlhVkKt0ylP\n2obCLv0GCfcBRDdvS0yr2hAiQxSDRoAnDcPx4d3IPNim9xe+/EzQpw0Fj0+k\nGP8T8/b+yg98P6B/H5HTaTPLIDMFRNYlAsyapNXwTmNNZ+l6FwIyRpfwHfQY\nUQ6iC8iokv0ACg3gntioIRVVBQpVP0qB60aq0Cnu1LipWsKoXdsX+ra++x6K\nKcApt64+jgmBjdg/lC28nnyNRYTFcdqI/4x43ZaaQLpBN9lQG4WRf97BFzgL\nYJY0QONF9DO5/QI/hFBhtd3yEChG1OWVWsAi+Jpx3pwtqD0lA8IkmlZEvnKJ\n4w/L\r\n=zWG+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhpDY+h/Jvp1sIi6DDzmLnXVVL5ecmbcNWjFSBso48TAIhAL9GRJo02LrEP00gXBSCYtuODQnvGeoXhI2lfCjMgadH"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.87_1593439821720_0.763416549773329"},"_hasShrinkwrap":false},"1.1.0-alpha.88":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.88","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"725b58dc5805360af03f1046952366ad527badb8","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.88","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-tqrQixVMfWapzxujZMOAPunSgHI9At92RlNLkNV3lRuEZW2ljsPh8tA3rkOh9hk8sXbYd7+8d52s++jHuBC9ww==","shasum":"e55b09a8464724e8cf28f2d8cb36717bd5d4e0f5","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.88.tgz","fileCount":153,"unpackedSize":24725322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+g7kCRA9TVsSAnZWagAAqWkP/1bvMK2T4Gs7rQy63a4V\nBOHqqRL0szd4bvwlKAib7yl202tp9QtTCIzzBS9sZxk2Lm/xWz/IYHHDgvbs\nMi2HFYnvcgCyIpnaiFZDtdPKMl3Ozi3I+8biRoNISzInvXQB4BBR6lh5CRwi\nmrIlos3KS+IFsoeUYnq6jhfhpfY4NV6RiSxolVAYiqHNevhtdgoMsxfN5AM7\n5b54uKsSzqHYLozacNamTWXJxPQY2IIiyji/VinS0zbYmoqkerUnCwrGoTRS\nc+jODgyiTbgZXB8dWayW1qIn7fSf9oBjntQRycWttewGP5+LPoKxuWtLQ1X3\nvy4JV3auLfkbg2rmP5yrlotqtjHerchCpG4je+jlNZGD64ElWqxlVaGpjN6Z\niKMk012pidXC/tgq9GrJ/50/0KyY7BsVsOfNBJF9xX7+x98LmbL3LeXGNLgr\nnKz3chDYoAHrm8pKZ01x/2EsRbtwxujVf2iwdUxqeRutdFhDoCQOyqK4gnRL\n9wPJJUd8+gRE9hMVIxmG0bVqqCAL/w0eAt6vCwnUf7+g4XJO5FHejKCQlE6u\nEBrAEmP6mFQ3cIId3rM0hjhA2hsV7KkBMyaWgQumy+4muC1RzTXoGfktACGr\nIoTgXrNGyFSup7mBXy6jGHutKJBJBaA/pM3Xzjs2UfsLtFlJ7GtE8Ih3K83M\nO8TX\r\n=ytFV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGP46qVsBh3HNyEIEv7mVVQVE8Dek5DbtfRLJbCQWF/yAiEA/X5dP5rue9hW+WaSYumfo+WQY9MLZ8Oh+wtjng/jd+4="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.88_1593446115288_0.9908649649317336"},"_hasShrinkwrap":false},"1.1.0-alpha.89":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.89","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"c2413ae8f9cdde33fac6d9932af6b8ab5e788b68","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.89","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-amUtth1Ta2KU042Ocpod8cgn2MfrTUqhVwD8L7l9GD3xkuraS0OrBDHLTEa7SHqzP4SlhQNkALsa6wlTrcwPog==","shasum":"501e443dbaed8f0a8ffebbad461daff28471e763","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.89.tgz","fileCount":153,"unpackedSize":24726541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+uDPCRA9TVsSAnZWagAAScAP/R4eik21FZC+tA0bTW+0\nwvv/EzaHFkKgLKa0pQvDK9lFDRo9JSxyBz6f9kcW/U/+YQY5o58a5kK0+PKc\n0M2SnXy7q0wFKv9uAfqhxHI4lUkW/KoG3tarhJd6qAHdiTMYyWB33I4jNzXp\n73zBFu09Fr3ix1+/JCoGTz6/ph4iNDz5OyIbyxNUU6mxl+FSSTqbwbYXIwze\n2XiOroTQqHKS/4tH8APhQ1+qZd8aYtjxR5Y8HIEACtUY5ADWXQmZA5dmC9qV\ndTuBTbSOeC4GR7JLncdtzNCzMlJo+EdeitcwgfLQwvEIeLzFE0SXoNRKorNe\nmmJ1+Us1dKADIl4CT9/oFTMeEwmLTB7/ZuvjilE+hqiFS7pqWCww3djdsQp6\npNjltBsN4DhMOnhX/9XeER/SRazoEerXhne5s47coOQLOw+3uMVlpjVuwavZ\nGVBfAue6L5yzLzfY4liaxelJBOYFswxXdHsYRmem08TvxXc9EcubQCT93yKp\nI0G++4ZPBwYXCMQ0BMUWB8xugUzfixoUXd+xowbKBcLZ7omccN1bsepfBvLw\nScxZTolKQKPekWnB5Ssgo5xpzR7sWls5O7lvckJ2bWkkEiVJavx5kqo7Z/8v\nNBnoYxI3wGYkoJxz0r4nOoYH7WrLGMGtr0Z1cxFZ+wY47RTRLggmaN/kZVh/\n6ctc\r\n=xSeK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrVkGGMjDreN+b+I9jmnLNBIbyABjU1RjFXaSKdsiuPgIhAKZbW2vU7uQcTp1gt8yc23295dWseKs3mZY11wcraOKo"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.89_1593499854171_0.9945654892143068"},"_hasShrinkwrap":false},"1.1.0-alpha.90":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.90","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"4f8f0f76ee074ae5d5ae3ac4a5e8e6ce97c38c2e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.90","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-oMduZiPKMaUc91W2qoRO9aSxggNPye8wYvZw+k6nSmM5bG+NRLxsp3+72y9EXXOWXwithZl4fxb9LyC97nzpbg==","shasum":"123e46a526fdd7e457f751ac46c2ed53f63dbfac","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.90.tgz","fileCount":153,"unpackedSize":24727692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ysFCRA9TVsSAnZWagAA/LcP+gINZorQPpvjbsNcTygz\nm4tk4jrJXWWWwcYzLdeZ6gfvx0Z4H3Daxw0/31XNCJCE1OG6oLMm6EU3CzuM\nqDRwQmadNHghxGMdIuKacdfo+K+9obSaifpGQcAfSp2RtbnKz3GUk3juaaeo\njH6gW6f2jyn/xB9z5UvSCZ2ewdW+GvI62fY3YJ0dUH1Qorm7/afOmHRQI9/r\nbxheMuJCoX8LvMZ6lYzMKPW2Zgimmefd9nliv/bS6NYFVjry6qWvPb6GvL1w\nxKhVYfct/qkOJGqiqwcO8cC+fh9+DWf/4/9MbX6BQYAj5NSAtkCiDHFAdzRw\n8cSnqNdVRMX0G3FJJa1B6eqWUfk6Srcn8tvytU55tEZCnrAqtm77HJ/9Cohs\nD4sPefP98grQYk7GcN/6jj+mJBUK4UCfxTaGP4NFvh01FWOOxa6KyZcnOuC2\nP0+xb4bsNpIG7ACxUbj5Lp4BcopiF55a1gci5BdKVSWtAqhR6c0JgUN7mKay\njgatMG99cHuutQ1PZ2iF2gXevxxYFuY5+3hGM9O/n3t7c5swiZJZurEQ3j7I\nfWXlgpNMasUax70c7ua/qqirxKCskJQZM3nm2YIeddroioEletmJeGEGf2qj\npl1Vim1zM/2b+an1mgfauiwpdkE3MjSKVR8TUICiUTmWfQ71mubat/sr3jY+\nNXkq\r\n=ei6Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9tFoL73dsOFOA3Pt19YS2alYA1QgWJ2U41ADo/bR+LQIgPD12uc9kXZMtcR5V3oStCdzZrzcaJzPp2tYwz3DgAXU="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.90_1593518852909_0.199107688833164"},"_hasShrinkwrap":false},"1.1.0-alpha.91":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.91","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"86a0fa59f093be09aa65cadaacb4ca411edea7a1","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.91","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-vgvpAZmLW/w7G/QH7HWoTpgC/5I5oV5bmXL8mSEMUNvGVOrJI2HYQwQFOxQKP3iE6b6ESPNEAUYQkaTjwhdQEA==","shasum":"22774966cba74bdd0e839536d7232c7760a27ecf","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.91.tgz","fileCount":153,"unpackedSize":24727644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1N5CRA9TVsSAnZWagAA7ScP/AzMmuRiFfvrQK8eCV+Z\nwWzjVocDERL77Ed+3oY8vwARSOrxnN+JQWtYcRuANcgI9cLZQV2tIccvWyPn\n4slwVChNi6ulgZK7Ss4mGbA2Js5Lez0isaq3Kbb/DTyJB5Lycg0JIjKhUsV/\nmKYhMYD+Dpl0T9GSNtexrpqWx8xbH685jrmrDfyin4PcfK+FfFZf3MauJKOI\nTRkVHywgtv6MQBmg9S64XtwYePS2NX1eur+qd4Cs7BeYZTNg5Z0EusQ34doU\n7Tafacoon1gQ9obMEJu91DuRIeoCRlTWJd0EHTzyrF5LifVa9R6JVpnoDRuc\nCygjFVwt+nQzsey8fZsxEaqF96paSW5OWrrP4ffPXC7p9DV6ZDfun6nkFuK/\nTDiGlWf3jLghLMBUBpK7IwaWTD+Qw2Z1MxICajwptWO2qw0kzxQ4yMMVEEUy\n99xc97Zuam3/qEwFYzQrtukzyk00S521tB8Ft3YZ76tUF71wo4+FT5O7aboa\nvY9HxeIQFj7Mb3dcrknP3f2b5GJv1blrduCjITYAmutbL/0D9MNI1UPlzMcu\nNyP+O/BKrX7fsk2gATnXm9BPtzBq1C+JI9TwCmbaL572RyW1GLmITvp8VTf8\nGJcneIN4FF+Ujy4eRuCGXYauWZPHNNI6R1ivFIf0qYytEkTF/iHMjhmZuWSj\n7PLV\r\n=r9sh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIFoM/aUBbz3iYqxBHkjpXHLb6vbxZKSKX1Jd9Vbcc2AIhAL3lXaYNIQCISYe87aGe5pKSOKQys5AUJZV8JX1kBx03"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.91_1593529208482_0.027377743242626318"},"_hasShrinkwrap":false},"1.1.0-alpha.92":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.92","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5195d187c8da308d7b5bcaac67ba996c3f088b62","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.92","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-QpMT41ze+FDiopeI+bgHuH2qlKaOQATw5JQHD73ExvP37ewmH3yaIGh0iSfVMeJByHTGRoEP91pKrUTstFlLpA==","shasum":"dca561fdde269777abbe9519c9bab686873a47a5","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.92.tgz","fileCount":153,"unpackedSize":24727728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfAzc7CRA9TVsSAnZWagAAxK4P/jJFSvB/Vg1OCtvdXC5z\ns90K5ReqrpFDARPvNQWgupgk4L/fCb4ajQO2cHEZfEzM1J2bAKUhFQMM/U5f\nwDVTm0uW7odp+7okzSaZjtg1M4QScRGZ48bE054VfrZrrWslTENh9/8NoE3z\nnt8JTaNvlsOQ8vqnq++8IU3U5w/i529AXdjcilLQuc75XkgL45tGmVrfbC9m\nMZNcRba55fftUyCoj2GVe4FYV7EcsUo0o5+WK4WdIhWFLh6GqM+w1C0k4dws\nW/70Jpu5ti1se85LwvsBow/8GXQs27deswtX8gV+OOLQAK1H3ULDrf6Mfu6U\nA2EbqFyWKhkzalyfaGZ+ZmUpSeerQinqUH8FopsYqgsOHp920wRBVZqatD1D\nSHkbty6yDaZ7MRxOqX19bZJ9jWkQUziSNrZOXGbGLyYBtz/AspJpAAGBMZkY\nZdAFeFDeq+Q1VMS2c9GOGl6Pptu8mLMYhk9WX/z+auhv9hatgv0Rjb1lMKDc\nKAgP9GLiYdZEjUWR3F9ei6UvaYISl5+cvBroSltV9wxYyFpK7DEyrmjogFN+\nUttu4kOVj0pQMvN5IK65Pk8T/kWX1d4TK8AhhX//je8wp0r8lyOQRaA9pJ8b\n6HNB+KWU1V6zp6/PAFPOv4VJU+7rGKTGapUUe8oUhzLeo75pjQXMjmcshRS8\n7qNK\r\n=+/QK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDut8SEQoYWBYaUwzlBMiiKHiF67AYnyb4ZPzjstKjn0wIhAL2BgWxy7WQD7gjXtK07TbmF52rnZfq4kIZgEqU7BN+v"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.92_1594046266724_0.3555148773219807"},"_hasShrinkwrap":false},"1.1.0-alpha.93":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.93","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"4283b123e07309774b0e858cb72e7c1775006479","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.93","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-5UQDaW5KIJoffPH9oSi5mTBfIpdmVgBLt4wnsLRNZwbyyxYL1BxQkmhTPSTWXuX2blTfbtpIWAReRxiHMlDtww==","shasum":"f181fd32a3441a0cd15730ebeaa07e99fa9131a9","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.93.tgz","fileCount":153,"unpackedSize":24718011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA0ceCRA9TVsSAnZWagAAw4QP/0iVfhsPUveq0z2rR6pv\nPkUZFoWWK28R0XiAgubaEi6nMVRqhz5+kjSaOUTnNR8Qg5D/gpvw6kqXE2SI\nkIylp7a+dwSz1yEd92GXlP+8QheVoJUAeGcbwmmgtzs55rUCzKzlGIfbnfGr\n1DOhGxJcmYazw+In9cdfeNvI8yAlyDu9IeD80E1EknZCC7tpoS684tHiUCBZ\nkhI/KmpONUBJHm2YlcZ7aMwT5tUiBrGLW6PopfUeF72wRuOz++wKq13NQ20M\n6IutfurZw0AjOZI9SbbEBBmkGEZJ/aVvJ1jimTOkmARelUQ3NnTSg5xdaBZw\ngV57OfDcQ3bO6veqQkUOBbc9JbidvgNx4GN+8H2S3IXRpE9eCpPMYS2cpbMp\nU3c9WMiBHBPrfDvm4wOyBxis68kOsCIHvhBJVHi/qkLWDPfbFYxBMVTFozAc\nccnsBkezINDZ1Y3+S+C0iIiTxnsOVZA65l0zCj4yqjvU2PviV6s8y1nJNcHk\nSg3DjyO52ySJnRguxTuxw+1HlB6H1v3uBlCRK/v2kNqfOHBScigI0Cq1PrYc\n4vG4uCHaHD3OL2fbsm2AfA69dS+gecbsOz8swCRyf+oQq9QaY+4mgg1J2L3m\nYFrtOF3TdpVnvzWuuWvuEdIBd0ftDONtFWvnRmlqnqB33MIqeWEdxWcqyzt4\nfMC1\r\n=vzdi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPcyXTiUYHsuB5ESZFw5AWqfnXlDIJHFbd5NTw01zl9AiA5C6VvIIaihk8nt9E4i4dqd0HwxUBtsSlZYE/cCqI5GQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.93_1594050333294_0.6667101004919114"},"_hasShrinkwrap":false},"1.1.0-alpha.94":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.94","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"c94a8364e17ff362d489fc000a7ba5c4b2476c6e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.94","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ArrvC6xVEDTUOeaT9IWT2aSyAXyIzPYcs1FMbJAJswxvNjAIUUBuh5d+rQYACrc4hKpadaN8kbN6PdFLHJjD9w==","shasum":"736bb6cde5ae27bfafdee917e7ba5e4ca62cb3db","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.94.tgz","fileCount":153,"unpackedSize":24724631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBEyLCRA9TVsSAnZWagAAQGkQAKNP853SqLOxQv5oCLCH\no3Ul7j18Mljae8KXA8+PnAs3cnAs86BNaerak4w9G3AaXQFS2WVWD3qI6vgj\nP1mZHWxqLlj5RUjFfWzY2vGrfs/t/sKsoyBtSO37o+x8mcGJdYqWZ1IMtRDt\nt4k0lhlKe9YA5EWD+CEgiH6cKgh41M8Qr8IMg2aQ0DH1QQT/FBCITLFV6jSj\nWTxRje9/ia4Nrc67oZg5gUPhQc5e+1fsMKSI3G4PrHAos+MjAbd/IQv9kgIm\nZwNWaT0HJmI7CMhft6JLYkzOD7CIBY/vE80po4ZlEBavoYZWkA5Y0faQNraX\nz/1Dni+miuxtdXcMLOPrwqZtA7Ok+f9H4aZc3va3HD4eI0XUid8ZhRvnRNAR\nmbeOe/NAo6pZuaxmVETG+/kelwtGV49LFiNjhy948LIKf0G8Y2e/C32z+OYG\nJzDATXcNt4/SrhHXw2zfiNXW1uUwvIcmtB/CaKooqw+hsh4UXklRgmP9d9Y3\nz/K3PXMI0s7BlGnebZmggUP48S5JpNRNUmlDvXoB8DimMNmW0g5L8Zn1RtXP\nJhhX5MK2+vn3mxTXCl/AXFbcxAlSQrdl0LV0CRf8HgdqAK8WCbxwAnn8cFbf\nQMiUVUMuCO5jPrBX7AtLXAKC82UeUao7Mn8x+4xvPqn0iWm/M1jm4J36NLzY\nnYAu\r\n=ozbQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv5NJk70Pva77tys+yK77KUDCehH7fwxh+VoYOqZqM+AIgLrB+VUbOqaPKpNlb4Rhhxuo4BglY73iJEtv4LBIArqE="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.94_1594117259034_0.46670391251043486"},"_hasShrinkwrap":false},"1.1.0-alpha.95":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.95","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"c7c70ba86d2c1817804b60b09b4d34843e3155d4","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.95","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-iK86syqi6+YLjxY/bhu/+zaZwjeB/NVRkWMl3CXkQfN8O6wRPmNLmMKNVzaVc3LTAgKK9kMyVzNL4dnHeWC0Nw==","shasum":"25fc2c9e98496862887ba42cc5b120b40bdb7b0f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.95.tgz","fileCount":153,"unpackedSize":24771496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBIFvCRA9TVsSAnZWagAAGAkP/35zA9TpLcHebbLcsMaJ\nH1o+2w7PK0OC/5SxOiaem5TVflK6egujSEPY9Gj25dMCjNZIf5lfbbyAGOVQ\nHuzoOpIQ6lYedheLyI5aOuDsFVjTeUm5IBFc2AFg+pQi2WD3S4CUj9Nkn0TG\nyGh4NsolwzNxZjvOGLZEoFJ6iMigMmgqHSoz2G9hlhLcsEqIw7xXMCB9n51E\nMVQQCy1S84R58u7eEJmiBTd2ymfe6kpgx82YnAsEl9G20TLHSxkTWwAGzBTO\nBEs3+Td/tu4YYhvso4dOLl/yUlyJtCRySQFbbulJa8BJo9Ckm+CwdGlRC/oB\n/cPcOg0dUpnU2KEqL4Pp7xk1W3oTun6eXydSF6KG9aFz+VcKBLI4P4GEYStE\n4OS+IORFGv16daaNn72rq/ABJJXvxoiJ5hauPiGw0SyNOYqfcdpHvLFKl+yD\nFVAZViUKku0GQ6GR1lwl4a1OB/Xzi8X+Uda9DAF9yXgJSa3KBiSwqp4tzYes\nEmAm6aT2OCtcVyi2UOVTbAQcKLXUlrtIwOKbFA0b9eoRA7bIPXpfX1vrZsua\n2s0RcEyWSTrQl5K80Pbl1AoQ555lIfcExRuLUwoZ3kOeQ+DxuTVU5JvnkZv5\nKn2dCe68SUJv4/YDHEmKjkgF4QZGPQK5I99UVRGDfD0Z9AVqQ46wBFTIKE1j\nsnXF\r\n=3Bhf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCrdY31vqLute3Le0B5np4xt77nDI6c37hD7DZ7A+x7AIgLeS7HiKs51EvdhcRSi8m3IPXdDS/oH7bLju4korye4w="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.95_1594130798804_0.0842230622215725"},"_hasShrinkwrap":false},"1.1.0-alpha.96":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.96","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.2","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.0","@types/js-base64":"^2.3.1","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.38","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.0","babel-jest":"^26.0.1","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.8.0","fork-ts-checker-webpack-plugin":"^5.0.2","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.0.8","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.5","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.0.2","crypto-js":"^4.0.0","js-base64":"^2.5.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"2ccbd5eb4ee7576205b04c94968f6f5ad742d954","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.96","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-0GAEX2A+5GgAc7TkQFgNNvzGA5wvdFGcHayGTQRpL16k4i7XeI8C1Ce4BYKJvzK67udYm+aWdZqrtWLl3SUyrQ==","shasum":"9b5a0f1708a43c96dbadc1db967d1ff5df1f2ea7","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.96.tgz","fileCount":153,"unpackedSize":24781999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBJkcCRA9TVsSAnZWagAA7QsQAJsniON+eRCxOgfJQyr2\nj3KNQHzlQeiNwPs8h6GYpum3W0B0aDgaZUAPBjRqdpw93IaZHbUY/cJ3UQAW\nFOhnli7V58MLRiorAy9sM+nLwpQ1MVxtH9fMvnde/r7mMNVHLKQ0gl47+qKa\nznByyXdZ3fmgHn9JEaAnSNom1/Whb4/xpDYtvSXQ+hl3Z91lYqmByD8QbVeX\nb12C7yio3BemKYcgBwO1hEn6YBKFDo0N49CA4J7t0DLk6JKIkWA4oDJyDeJi\nvLJ7OCMeDt4DgHNZ5pSNvHqZsTvX6dwOmd0xIcmmJqvqCplWi77oZ5o19c0O\naCFksUce1TuW5HXg/KBB0C/iJA2dTqm67QzXAiV1/F0ekx2+nPAaNmbQkaoR\nhIU6NEHEFX7BZ/lFjOuaz0USCbAXKBR7q8ZYSdVwIFLcp07v3TRilxUIzzvf\n+rS3gJveQAU6ctZ0cnX0p61s14bpGU/OQZvtfisyRPsiuVOIk0fX2YHucuZV\nbxTsWHh6c7S7gdRuumteEfVuChtJXakNum/r2BHi2KbWhHKXpD6URpuxwt4M\nxEN1l8hqbi9j6OeePzRSQTYppMi57cwTiZnAbQb+XbCg+z2+qzFwycCDBGTb\nvxkK6ss5oN27Q2vohHtGi27p4HUgp6CVE3v1Yioa1Q6ApW5vwfiJsIijYCSA\nsoDb\r\n=pDC3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCpR4hYY2oNMLSuOn/7OjZ/CaClDlubqexqMILMO3/ugIhAIrGjv3RY+tcTdtNpA28XoiuAF31ilykAQuQBiLjr2bj"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.96_1594136859829_0.6340147740250128"},"_hasShrinkwrap":false},"1.1.0-alpha.97":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.97","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ff4bfc23e91ba49bef48e3ec50cad2580eef8760","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.97","_nodeVersion":"12.18.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Zy78Y5USuTsSheaJgAbK0fYHhwCxVteoeM7obwe9EiTrih8G2xA31zQSSPo1oFY3Apn7C7PEfXLR3o9ixYPPuA==","shasum":"26c739dd6ff033055485fae41c299104e0e5d9a6","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.97.tgz","fileCount":151,"unpackedSize":5069396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBYElCRA9TVsSAnZWagAAZbUP/iJWJIvCOfJ+0GKKCFS8\n4UHjJUgsUlxITt/fY4Rnopiz9bUtz6Zz4f3D/0wHkKgRE7EtItliS1JWKQEY\nRaPcPt5xHBLf/E5pnfy8OQDUL4V3I7S7LZYzNruDuYRAnx7QjHxfcflCkx3h\nZx/eUdNyDyyIRu5rsGZ0bTBTsa00tq5zPznx9EnYhusONNxkqgNhhJ8zXrAG\nGjU+07B8Yy0pLxrvqGHOh3zoBN1ax3OVOurDAkvEE8OufFw/dHRFIbMOtyVV\nlUDFusQXLmN1YjVF327ZHfsD306Kgx3XN43SvkYa916vMTNAG9wvAvHc5F7w\nSWMLWiCia2QfWYcrcpP2RGKAx+Uu+BfnBwPIHApGdZr4CP5H6kM+AP8yVnEg\nGXI1eWR5EWitlDjjaNC1+aevl5a88bbsrUe8S9LeUZoZH9PsL+KF9wXYBzcG\noD8uJF/LULYfI03z6/EzqYJVQtBpv8K0lUTitQW4DFV5cyNlUxG6xxv4M3Wb\ndlj2hUuUkNUwKc35bDMXffgfwdfqAUAZ2DbVC7ZrnCU2zSigqzUBV/2tLJB1\n6rOxFLvHC7HNMhK0M+wlLrxxFxIBoUlYnCo9Q1ALJNc1lmx/D4j/M3YRVFfK\nBeM/blvM6QS9bIS7wrudTTZlBYTNodhcEgTERM0gyfWcz2XfzAx870cxeP0D\nDIXb\r\n=8UUd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF58Z54vMy2sW2xjxwoa90a1uHaazC23TzjmCQw45PapAiEA5ixUjb5XxlFFj1ec374Av6besfmNm8hAAbFF9Yq1pPE="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.97_1594196261076_0.8295161073341746"},"_hasShrinkwrap":false},"1.1.0-alpha.98":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.98","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a37b8335984e074f26a82d4e81ba93af029f2985","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.98","_nodeVersion":"12.18.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-afSztzgtaFI65no1ZaxLz+pIv/vOdqpqWwPVZ/NlI9ZPFGWpGmSU+tpmsk/yM2izxaFYxL39umPht3Iej30LAg==","shasum":"caa25fd5cb25b156fb25181bae3d7751da94efc2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.98.tgz","fileCount":151,"unpackedSize":5074078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDINeCRA9TVsSAnZWagAA7/8P/2wD8Ha2+QX8tbfMpXF/\nFOfQkTHi8A9dDArWOZxRqK7SR5KrBcGveep2eUZTIoLAg1NK17sQ5rhm4njp\nYQKKAc+5C+wb3Wrk22gnG7gmG6/0Vflu46pzsS6CClml3ygAnak769eDCfUI\nyjdh4lP2roVjID/SYhDDYI+eS2XSCVZ8Tn0BryGZPTEgS1sfYaS8NVus+J7B\n+98nPN1ZWIo+xhDOk9oAPctBtSAb3UnmMb3qLa5bNCtuUaX2SQNmL7RW9gK3\np99ZMqIj5g0NMrt/nCTsXI3SpS3FiiMkxf+Leps4rDQT3HwtgMD2e7KcxGWh\n0Noxv6i13Q57/F1+JpB2U7B3LUISuP9rCNfw4VTw4sxv5xeJxaDv7va3TJXb\nyGayKplH/umTlzZwme5IkKPny6zHW9N2KJ58Q88v4S+MfuRMHzTGLIrGOa0t\nEJqf0a2AaxEGySeK+3XdW55z+ouhsza+CPstmugLdinSIXFgI65vitFKsjS6\npECtBD9GYYDdZ5BayvPH00nTXupxPhh0z+GXYfZDtLzbXP1C6RNsNwRsML2i\njPVx1B7GC6iGgCBbUB8X8r7wB6NVWnfXZjJUwFRnFIxLJwZGAjvZvek+Iobi\nbFuWsuuv8TGLmLhtvoy4V/xIxFlAN46rkoj0EHBezz6vO26/V4a5zfs1HySD\nxocC\r\n=wTlI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCit9z89mbNOEPFPR30F5JkCO4qdeldY3/do8OUIukzXAIhANuCQhxuIOZPBklHZknRas9ugOw4nQn7nWgtOUn+wQyW"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.98_1594655581715_0.8373537603631251"},"_hasShrinkwrap":false},"1.1.0-alpha.99":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.99","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"c1d203fdf7ae0363da0a5f1ac024e1c629de46af","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.99","_nodeVersion":"12.18.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-SLsYqvKsn3zlw4EnStgZ+om2Hf8vqI/T01BvedwYBDqeuoKEjP1Dq4HryyhMI9qOOpgqa9baCBDkVEIyy3GKcA==","shasum":"7c25204fb0c86b4f9e0ae232d372c56bc9a51896","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.99.tgz","fileCount":151,"unpackedSize":5074436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDbqfCRA9TVsSAnZWagAAhF0P/RlixGndCn+8bECE8iQ3\nhnrktFIJSNqp0HIzi3yjoySdT2yXcej6TOz0+cTOg3IAat+Ao2cryYWMFUnE\nQJsFaTYG0h1JEvG3YdrBpnfdOM4ZQQkSRkhiR8OtJmoYX+CadLlqe64MO+0r\nS5azhulGVT2pqr1Td6sTmS3jDGaHpp21kokFG/QoxYanAmq4/1Zg3GksvV3Q\nTYlFpWF/i5Q0zTzppFkFUaKkEUBbE1sKkyMg+/E/TAPIeEUPeBtIB0k0xKC+\nSUCl3F57eCDC+wKTgJpP019JVuNzslfk4XRykq0L+kDzteNfi0yM83Luc9g0\nY6fqkXvgXYQ/RAXUsI5WmhFCU10993Tynb/8Wvyml/XjTzd1YFPvaQEDt476\n0f168yVuc+MITCt/OWpe/xDh0WeoKnhURlEFsLWcSRLAD20xbwQPRAxPNxE7\ntoMhSxJi1O4ROM5otTyEpWcjAiEaX2gfMY1Y3XST1eqGSCG7xSr68PCIhFQX\ncVY9PikwTxfTFXFNwL5v/TVcxNDXKfyC7R2Vi4bQz/uVr72v0HvW+Wy/ZVf5\n3Yrjo5gr4d8Z9mO9dyHXmLwyrHEYSlA0/UeipWtVH5EfwW6QbaiZCubnV/eL\nK8IL2ZV/fVJWW/G8aw5axnPTWoFW5jpdUc7GT30SXTl2v/r+MByz3Clst8AG\nSALh\r\n=cMYn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKQz6GLo/e0n9kE0ZiAfkS9+f8uEyq6upaSkiLfiIwgQIgVtbtazrb0rmg9aJoo2q2jK+HK4xsfG4BSdY2Oamp8to="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.99_1594735263105_0.8580101836871912"},"_hasShrinkwrap":false},"1.1.0-alpha.100":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.100","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"033d5b41c086719c56106e7494cd0fd436a2da54","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.100","_nodeVersion":"12.18.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-OZa3jZJKAkCWj0u9vvC85SEDFGyhIOtVtNv+DCgA0VsnN6+XaBse3w+809xVBOtiZRefkACriM12jOfrbRHRyw==","shasum":"b43631fee14d2193f35c3a40974a2d7b7ec2f15d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.100.tgz","fileCount":151,"unpackedSize":5085231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDdk4CRA9TVsSAnZWagAAuzoP/118o5Os5ZO0VmwaeqiX\nSPC8Jj9Y9UPVrgICxSmxAOo1pYNFNnjukzDByRQ+YS/xBBQzBl9Lrxhix9mf\nyyvd/UK9QSwJygt0hIMOSImmO8x5KTceRpfQM/tPF8m9tLQK8N8b3Nl4k3UR\n68FDSoEk3A4gbkTJvRI2kimFjDGVMMuNBhQVHqqjcUbKSw63DvVAFd9DVj18\nuN6+KmF83XDTw8GqYbhtGrQn4XDBUW6TRCS3sHpuJW83tXgmnv16JK6R9MEv\nZ/BTadL2K2CG+jP4F6Aokm4KzxQuQuyacLCkLUZYTpzQ9CMVZgVLuFlR6EOI\n+evt6RuvQVGddf9sA/0ywAg49HbzcanefjJPYvJO7//o0pEA+TKyw1eRJr/g\nBLv4TSk3FAQ1ymGrjEup4Fbkmut2hj9ntXmMQiIUvW4CHgYMQPjqYPWO8qLc\nqM9rSU4pd5lhBWswntADQCs9ViuFxtx5nHstOue0p3A66jywalWirsO20AXL\nzaU9n4noN2V2AayE2b0X2tn5ivdQCwjOtfGhZmh1vWH0rV/cSFGDehQr+UJ7\nsm+Rma1bYWuhkh02xMi/OAxy/pYWO9R6UUviM6UVP/ciKSk7pMAPr8rWpLGu\nf2jjiDDx1y3XaXGBlKjRK//oTtsxrme0bVM8avWelTg1s3YRtLN2emA5E/eq\nUye3\r\n=Gakd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqaNhIebQZyGUW7IeVm8sI0/cV5FTueyZ4ShhMvnKa5AiAp1gJiCev798X235crWVTwOobERJfJX4+YapOHWGcHFA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.100_1594743096121_0.09044172917798843"},"_hasShrinkwrap":false},"1.1.0-alpha.101":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.101","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"609311496b5db129343995e72b6537fd1f6fe4d3","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.101","_nodeVersion":"12.18.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-5wV4Uj9vB39YIe5kWgO7ODKQprK+fn0Jf9JRMRYXuMvH47obLugZrntknRgmVis9Od1nQZQYilJXY+QskhLnTA==","shasum":"59377eabb6b48682f9c0e22a2e2aa53ce65df253","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.101.tgz","fileCount":151,"unpackedSize":5088883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDtU3CRA9TVsSAnZWagAAxicP/RQavLaiK0hnTuUTThy7\n5Io3OSNkZZrsw9J+g0VlwNVHaOUmzroFpFmwTPS/+zXakTcqVfcsYXPLFtBU\nSwqbYZPUL28A2pCmsAnlPpoIjGVpFD/Gm7k+ZRgiMry1AoBnAdtPHWz9nCqy\nKE1tT04bTxHzmn+oyBreYD+QiSTHYd3GbvgQ8dcc99IX4HJPLvC5fQGxPP5a\nnMM1e38efST5kfJ2sO6vDLdTtEV3T1fiRYvhyX7qw1tMOvB0wnxiHCsgDzsx\nhKluokmZ8YHD5tb8cMEnlxdKjACs8dCVtWXZrT/cYMNe1ok9AaiFgjKWLN2N\neitPxQax/hbtIMwk6edoRBsCfRxSPPEZbvp5qiSsTZTreNT1Ln1ylmPED2t7\nQdAzlFR/1j3M72aw+Hm2dIZ5Ja751eBm8KkC1d2sYHZiTRCKCxgQh7e3DnAd\nHyKiGvycRREDE5mUPW8yhRJ9RhCJjVq3xT3owSsvtjq9FAGt+P9QwRWzC14h\nnVF8ZclELzZXzRizzE+qkcey2C33uD2DCOC3ixXnm8XPp/IDPXa5oszcLpNB\nL5Bn6VR8VNabXhzvH4JtDjhqvxFQiSmVl90qUMiCDWR73ltZ7/582Zk3e7vt\n455bxwEaxtq4E3dFqi8Vn5GT1Ax1aEFduDJJcVacFFj3uy+99EwrX0mO+n5j\nvCW0\r\n=zg84\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIOF3Lhu5Jx/wxjUo9ArF+iEU0zzN8hME2G2MPHi926gIhAPUQ4pn+gz17EV79Fz9LiNaspMZ03DAVErGQbsgmZykq"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.101_1594807607061_0.5808412272531898"},"_hasShrinkwrap":false},"1.1.0-alpha.102":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.102","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"accdf983c52fb205f1f784fc35e14abb529f1611","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.102","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-5WOwUDst7BcljTiBGWDm0OYm8leIVy8Cia6GRT0tms4IuDXaW6SV15IJr4wkQNa9vddCBkVgOy1jMChA+SWy1Q==","shasum":"54c5b7553ec92b170d4181a4a02e2febe2a30c4e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.102.tgz","fileCount":151,"unpackedSize":5090252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEBg+CRA9TVsSAnZWagAAZmIP/14q337NUhJ6fLBpVEkg\nB/zgmqdn2b0b2ZGPJaCV4yoFFSaeNCdfSCAvUaiPa64uXqzq+SkUz367k/Rs\nKSbLd2zOSankK6PQFH4G6oqZ2PHOi6/MD4LMj3Jx+VX+DOqU/NCcRpHMJpNs\nr4AGlXfCT/0voSxCQnQTPQPQNOAIY3dfKrk5fE1IsyjRDtoHBKfYlHtTD+Wt\nS+kQ20oEcvE8AF4l8JalmSVcWULiVJLwGrA6AAcEJrV9oYVPPkNuvG+c9k3F\n34cuDupPnuxcVPkp1QarhZcRddjUz25EwF+2dNxcvW05UMTu30mj6KBTRtyg\nCq2CWn3zJk72UssMc3ldcS/aGVw3oaXsKuuXvKw/qe3ldKJ0biuFFKtk7/wg\nwNxmEbjPA3lNxE9PXjR7ue6Z9HurjjiyJQ8CIlr3m6asV8raCL+EwDKvui44\n+ARjG8E/fWDCOHkKOL9C5Ul0ABboKA+8CFA/A/UIAWl13MLVB7eLJewBteeh\nQOdRZXfZ3+n3OZH6olZKanShRpxHmcUYXqCO8yAKtx55dBb1w1+9UKKbc5mg\na2N5+4R4/e7M01u+i1ZC2JlYQ38ROhqNUEfL7tDrBFyrnRUVSDYNwPhKKC3A\nvACZlmRaW4qaGR9zw+OegCANyipCJZSBrCE/GAUVAnWGQvBuMR5y/zwFUYWw\nd8OE\r\n=4E9L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpkBNbvGbsZT7YeJMr1TtufSVUqp+yA1PISD42zZJzEAiB8Upk8nBTO9SpyFqSluVyYqaGOC29p+jmUijYxalxfEw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.102_1594890301450_0.29955293515780457"},"_hasShrinkwrap":false},"1.1.0-alpha.103":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.103","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"437a441cd88575fcc5d3f7512b1f72c2928eb55a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.103","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-ehSGOwZ4Zv0iW79BEZITC13tTOiI08yg6UEUw5ED1K0uJ1oCMix7V19AYpYEoYgQ8U9m6xQOYObaUj2J0I8Bcw==","shasum":"c494580ecf00e29b2476c3ee7b29aab7ae2db823","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.103.tgz","fileCount":152,"unpackedSize":5101408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfECzHCRA9TVsSAnZWagAAEFgP+wWBnM7tOQ08lwuF2GF8\nXd2mVEAOiWiPlpBDT9zOkzG5hxawCPzx+XX6R3nWDS263Jy2wZ6TU+L5zqMz\nQNyRsUMucbqMRXplEMlYGW93KBDb3wwKG7xj3vEONJPJYJYbKX1/aoe2L/YW\nWfG3TmJlxm2kBV9SJ8KCzJ8YjZj1IV9ZH8GK3mVezUTZKcitZZg6xyqH2JXD\newv1R++qquHrLjwGKHfohRjRlcB305eIfZs/NOSeQmPvk0LZ3PYOkzNMUnNu\ndbo64NClvI6VdbtOi79qppOVleizqrkRsfz5gxcYgcRP7m7Bm1KyD1c4LVS3\nEnZF/iD296n+yJkXfSVwj7qatH9gRf7KY2CcQhUwfRtbQFYJkYGwadeIMLyk\no8YBcECmPWUPeG0SqTzLmzDTRuzPrfvDgmhYkz9lYwoZv4PXBo03AbrTa11y\nASnpOy6v9E7zwddIGk4dAKie3m40QxZaQvZk0lmhAKOhXzv2dovHnnREqtNN\n1EtnnuQjeSPL8qWh5OLjbAEiOEGiU+UiU8Sy5RELoeikR9l9laJBYxJQUB0/\nIBsSwlZOA51SDQm4EWJvl5ooNx95Y1BWa52tdUEZyExCzLKt5fJ6mHoJKS1a\nTqWeqCqbfNcH810bBZE3zc+KEtAE70WIoFcMRSswJk5X8yfbbt7Dpo/I9xx+\n+02l\r\n=BdIO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBaWKJzM17uxKluojZVDB0sERY2FHERXOORncNxMXMIAIhAKt6GptgIZh7o6G71c9uNBHWAqcpkIPABuK56cKEHLdT"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.103_1594895558498_0.3468111720805811"},"_hasShrinkwrap":false},"1.1.0-alpha.104":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.104","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8ea6d5fa8f4e8976a86d8b243e0dcaeece9ac391","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.104","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-JKX4V/zcfQd8R8ZhynFg62ehQn3t+hBxxHs3gig0XP2lDd+hnobq1+nqwOlZWPAeTL3G5HotFBgnTEq/TIKZ4A==","shasum":"095069540f073b1a270ada1b3dbd0704dfd4040b","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.104.tgz","fileCount":152,"unpackedSize":5100729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEDDZCRA9TVsSAnZWagAAGs4QAIaJbVi+o45HzRbhuABD\nfl78+H7QvW4CrWb1tVrcVdIpp37P0JMXZtHpnLl1hcaWhwKTMftUjCK5kRgM\nUuvnUQsRxKB70CZoc+aPVRAcC011vm3L8ZN9wW74PdxO66QbwMbR0plj5cyi\nhICLlaDPxKN825Bh2lujzEeo4RL39HFioUMAfDPe1ac5LWd+gCGM83Iuia5x\nbm8KNW2axdMFJaHNWvrOWZpzf2NA/DoMrWbsy9erBy8gIfNTFK0Py1HujL1+\nY2I/7AnxER4FLv/oeeE8/hhzfYXoigviBPmtasY4M9wHC5vADi5zNS+YbJYV\nPlhgVQRVgHQQbsKI/hMaCrXsP0sK8vsXuPeCbtGTz1Ru0EfjLOS7JPLEvbn2\nxjlFqHnEtmAijMt87iIv0y4dMn4vbTow55dhJcU4h7N97vMXfeJw8g5agxBP\ndh3WcN5lYVtBo9NvwKgRbXWMF5hucodnN6V+1qgJA8xmHNvdhyM1DE0d+Ntl\nf6oy1622mQZUViPxQdqV9L+T1tuq+ETTkDdxczLSFaswAREA/ifIaOke36IN\nU9+VvFOP/JHhWx/WsYehBK0EmqPNal/XB96zIDGrPXRcyJ+jlOhqlwPpiVRu\nMSYOyNrs1KB7ptrAeDL9JsgL6jaEE1gsTrCgN6SqA0xhGJDzR95xrZ59wiaz\nV2Ue\r\n=YMhC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZIaBQxgpO7nZBzFXJmXx7ZUCjKH6Ow4ffgIZ7zqqzSAiAxUv+Zdk6BQjL8P2TuLZpB8I6WIn1cU/QhCBY8XL+t0A=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.104_1594896600927_0.7505957342375293"},"_hasShrinkwrap":false},"1.1.0-alpha.105":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.105","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5b74d50e965e97da03a78b548039b276c00c84ba","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.105","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-D7H2IZZcE8z6n2ZhkMtxI0k1R29H1NC9FQXvDudi+mKTCrl/7W9yd/WC8QOVDP5x4af+Xr1lQIHZxwZgIvegNQ==","shasum":"7592478e8fd70d832843490390721a456f647a00","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.105.tgz","fileCount":152,"unpackedSize":5101332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEU2DCRA9TVsSAnZWagAAz+8QAKDpkAmP8Hnz6uPrOkPl\nRquYJ6dyV0eCEpIQ1oGi9YNW0kaOpkDy47gJT8MWqIr5VaFjggG4jvdIbl0t\ndC6y5fF7T3WFcVwQnp0r4KBjGbFQp17uJ9/8U6pbx3SJEaDENcqF8nK9mq9C\nWB9uWIRjGr+RW+Uxjndf1JOxYnGGox03urn4KM/dNK+EnqPoZMHxElBl1KsR\n38fE+UmJ4Du3KkYncii60SM8aFEr1BzOew8b8l/sNKsR04kVnvykfwUIrtor\n5zGHcQPZdXLK5mOoWkFCQZPAB92DC3StVA/qiVFtl09BScNuWSnjZJnL/z2/\nWKJQ+Zoz0l9DzRjAu72IPK/4BibnCE9iB0XA6jtcVuyuJGAvmiBT5klj39qh\nSZw4sVZROMwzF/a4hknNWZ7NEqQY1cwhEcTQMXcEAvdZkXEQ+X3Qy497sq0q\njsmAP/Oa6JW8OLHAacW9FyRXsMUlugGTynWkp0C7fBXOJzdkd67Tc6Un6DDZ\nQbL+GD9KrenTT33dE/QdD7RrZle5z3jFE1Ch1u+/7YElV7KDVXAWgsW610Pz\nBMoeqwILM57itIcjEyyaqehIP5jeArsR7AG/mFJkEJ4RbpI2jiCD3nVE5Ho+\n1JrQoP1EXmOyGskqLNTYhHuACe6aajZ3bl5y5ty7rOPNWNl4Sr2GkartFqfM\n2doA\r\n=R4zL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDn5mr7zKrNvgG1GLmI3edcqaqDhjtAEznFyb+Vh7LpAiA8eFIYJbAe/pHtPqaH45JUTteEBW8of14++UpWVFoMpQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.105_1594969475133_0.16442275963624065"},"_hasShrinkwrap":false},"1.1.0-alpha.106":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.106","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a3cf1d802e6010f5d425eabed8be811bb3881c1d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.106","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-1Ug1NaLIB9J9Hcfa2gC4+uRguyZcBE6j0Z8ocQf1L0njokG2BaGXPufWg9k63vvSINY/j2rHn7TRAu7p7I6kRA==","shasum":"fc3cced0298a770d9e167d3709492edc43a374fd","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.106.tgz","fileCount":152,"unpackedSize":5101347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFTp6CRA9TVsSAnZWagAANkwP/0D2W+6BdlFTBgOZcTK+\nUQXM97ir8UdmVV83pGOJMNtAjmZtEtOu/frUGVKBN99Dy9IM0FMRFpnV2RdG\najQhX9yF8jGJLFKFkqsqkMQuewqZfEU+fvNZ/eVFkdoWAPP2DdEDqlxrQxa+\n2s9B9cE8X6QzO4Aw4EBj0yqUNwYfcyEu5gROwMjNAf+rDxz298Rxqn0/tJHD\nRphCqPgmHolon/4o1lH0f74uKN09SDJ0Q/mgw9uYApZyKuOAR2VFvY+egAlj\n8oSHFy+hIy/nSlhQFfB+oWQ+pQfoEhCKwN3fEQQnzoolvP9mk9pcYtkFMfGf\nODpGqmmiMB8ZjxDzwTlevJDPKMF1iHFRA50+iEvqyTa/d1PmjFpkqtnVdY+h\n4YFC3nyrIQ5bX87tA+WShP1CGhfkFdng/iJNiUOwWhOM+oEnlhu8/jvZi2M2\nsxDgrrsmf1dp59o1TwwpO75DzraUSqSDnJUCZM4SDetoAut6IqLSUC+F7e0g\n9+zT0FR88KI0h63NE1PSeq6XXF2k74QzaC7MWX9c+B5ssMT0DzOabGt0FrfP\npcpTsHEC50faGnq01ZhDkyp8NkDmwrmmRlHBK9bapnPfv+5y/V/TjUi3BQ8y\nn1Sn01IqGl7ljMf5nhZa/gxPHBEnD0r9f9cKt3JZzYHVfpxGjdEKu7CqLY5S\nLDtZ\r\n=2YBd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCsBGiT0am5mdUPjtgR7zhVFPQG2FAxfkwcCBO3Bb+wAIhAME5R4JrEtL6SNxjmyq9kvCP2VHjq3zqs6KORFH6XSzd"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.106_1595226746134_0.24627313521087868"},"_hasShrinkwrap":false},"1.1.0-alpha.107":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.107","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ef0a624a177bea924239e4aaad1564162d307bed","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.107","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-XyRWXUNAfs0WBgFabTqOOJzc9/JEMBuu0+cCDRLycI7vozY3R4uqNuDkWST0nWbHaM7EGxQxt5NtnThHILQyRA==","shasum":"30b2ce98952d74fae3502f77e9b5fae76ec38a4f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.107.tgz","fileCount":152,"unpackedSize":5100928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFrX0CRA9TVsSAnZWagAAMToP/RcbJQTW18p+PLEOiW1S\nXoltyhUCmaJbamyhYMdOvkWSwb/Ppxs9X+yNhuppYsxIXUpqGFB9cIznKL4V\nvOGCkn/JY6Yh3QDVj+Cai3NY5mifx04fcerdjqk/4p4inK/F8lIvV0EZjfmL\njAjpShs2Ch5yV99AOTB7+a4Tm5ae3LUD7N3NKBHKvnywDUFZcbhYc0X3+EeA\n9LIAqik6S+3Se4d/cmOA4rUh/K/SVSOg4J4nQkv8L1g7NHAvLcTpDP/BAL5K\noiZlygi294UIAaGOYx+BqM0hXHQXqzOuyljOjc8leHr7ncwCBMRKc1swWnnN\nSxzf1qE8egXxDjIGMdwuzweMcxV+em992AHms3qFih6F4WUh2nE2RdHK0aqt\n/tvDqiQEv2kr/idM92ZDVgYcL5tmeEZIddKkArJOo/qZlVYxET79fVZhRBxM\nnplHiIQYfBgQQ7dGVlzGXqZQmIGlhlcGA2HSYDiNx0VFREv0iQKwKNpwYLrd\nM7LpaxwKkwMbcQ89ebpFZbC7b/vTXKP9HBGTNjwNuMuxaJgzPfM/cL/TV8T3\npEErybd6Yn7l9n9w0hVjJAFBV8fX/zjZ0eoB1aQMKBUQpy9frUp3PoFZOXKY\nEXKNg/8wmrOtdJN60Dalsm9tZd9tV3QbFRbCJIaLpaHjfPEc4cblZVE4Mz2x\nwtNC\r\n=bNJF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWetvyCd/KaUtnxVc/YZg40bQ5y+l8HvD7C6UTGqfMrwIgDAuGosGXaCwZNPB2rec+DshQpeRsPuvEneb+1nYy/CY="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.107_1595323892394_0.7491993248409408"},"_hasShrinkwrap":false},"1.1.0-alpha.108":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.108","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1abf6cc037d184c7fd74c515e241670ae52c497e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.108","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-eGcfnyZy5vum11FKm/znkVL7jjIqxJLmapNiZGk6oVDKhWuI7MjzEola+nSF4lv1eRDPIvJayRh7jwDSaMbw4w==","shasum":"27981e61fcdecc1da504d9299c33002258cdfc5f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.108.tgz","fileCount":152,"unpackedSize":5096987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFrjwCRA9TVsSAnZWagAAK/UP/3qNKKVxuAUUTY572Id+\nNeOzJfbGxqZA/u6owRXyIjUkyJjuQNSbxnr0sacYtNAkSomvrA3gM09HwYkW\nRwxXDT5xrhtEdq9ylo/9kXzLenIZjt7Cr0zRrRUg6F+nhiJEBI/tCxy7mmUQ\ngu6um9ExalMO8MbDZhO70E9fxGefhnIGrEPEWNiD8Bv6+EOWlSviqXxkv3dP\nW/Od8wB3bRuiXnlWrVckBF+8Olv16G+S2+oCZJo9dhne13XJMtMOYLDhS3pN\nr9UAU5IBNm4YyZ5YqeJG+xvohS740MzR6szR8H59l6y4KOxqV9lHqYxuKm5w\n9XFHZzlHlgmvS71kSxSNCChVQC6FhsdjNyxt9MlGPyAhJvAfPlZ6eBXzuyDK\nU67cvDsmtIbSHIueV8ZzOp2a4uFFFWr5ir7m8i1t+dnVFSV7w2lQj1KgtkOO\nD319SUTdcEzzA7Hy0utrgk6lNP0je8J93NsvABnu1UBI3HtBo93BrHorJkhf\nG2K4krFY5RnPnW92GeIwq+ij5grnraK/wZDO4DWPm/pJYLDDMcJikNUxqAeU\nRxxoLNOxQVhm0m7Zks2lrzkxdjRnFd/ogHV4kBUPxKd/k0sIcV0LY4EUtvJW\nOCGiv1xUj1yk809fAzlSGwDCB+3i2CZG+IdYnqu10M9S3og9BVWcarIC3nHp\nPzEY\r\n=UvWk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCes1k20N+Sw8eYtyE+fG4eNTGsNUmAPBU4ZYKhbrnhpQIhAJMQn/3OR1wpFlCAbjIHFBs5K66JJh+It62eBHN0j5X7"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.108_1595324655731_0.13421463705079106"},"_hasShrinkwrap":false},"1.1.0-alpha.109":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.109","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"debbf4630b3b86f1ac8067fa9bf4e7b13a3c3db6","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.109","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-KKUO8doHXsaAXMdMDMZ74Gi3YJvF/andvF5ZN+kFjy7vq8gLBjNNtPE6J8aON0UFx3I4dWnziPCtS5gNN9xB+g==","shasum":"ae9d77090cc995976bd0043498daa168805ef41a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.109.tgz","fileCount":160,"unpackedSize":5156077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfF+67CRA9TVsSAnZWagAAGNcP/A5Z3Is5datAuIWXo8vg\naUdnP5pZV9YJ2B446adTLsjrL0tNHxTK3/ZmgUEnAiOlK8PKS1Q3fvHRcWfb\noDLFIg9OQ5uARh0b95H7Zh+sElZSfCXGElPfuzOnVpDVeQ8PPZ3k+cvW3ltT\n2ul6prUayhLy6bcNPx0RGIRwsumf+4xUZr7XttEsSKcSqGucq4t0olQ+OnTv\nvQHmUWcW6hnCsS3SKco73xhOPyTRB+yOnVPWrwlTgk5WxgACLi35viX7vtI0\nmvoG1HEDE+DhFPsCJNdIUYS0btuPX0gioHjacwZQOpf6Z9xn17c7zjmc4WHs\nZeXEZRzJ18SGg4rGmJ2cqV5PEMwdQHimYjQTSPbrxVTzJ19WxHpCSqjx1wLZ\ne0h5NiVdUCCJiYhMXFuzLK0NYJZDw4GUUAUCKpshY+StQozcMVNZwi3v3MlN\n9fy+ujm4H6PSQgCEb9QUe1fomtv5VmaaT09NemYFkba79FSAemZ5MBX8+Zsm\n+NibgHbhS4Gz6Bmr0EYHU+0mo/U7niLuh2AI1Xf03Y9XcLsGPWX4oxF/e2ny\nR7Smtge3nNS8j/7vbFeKOFW+IwgcVNpTuLtX2GFn1ajiK184RnveKTqSJj0W\nhP/ZkNbJyynpHlBhL0GgHGm5b/TdKk+efnm7U+dSjXR5OII+RxV6uCyt/8gQ\nKqdv\r\n=Z8aT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3UW7fF/j7/XpEOD9NyFRnVscMcntdYoH2ABLRjccSSgIgbAOUxER4up9xNxx9hPp7vOk8rj9U94c4FeuCDa/UsBE="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.109_1595403962724_0.5740019950895694"},"_hasShrinkwrap":false},"1.1.0-alpha.110":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.110","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"202b85907dce429bc94a8be9af40f69b637c40b5","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.110","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-kvnfZmenbP5fDiIdU54iluCwNcQTG+tVYYXzjdoTT8i8Fop6ZJI3O5LdOnjPZGGGFC+1EKnO12m8BnhjxIZAvg==","shasum":"a206b44d50b7e9795ae08e34c59b9a436ba80c5d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.110.tgz","fileCount":160,"unpackedSize":5158420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfF/NlCRA9TVsSAnZWagAAo3UP/RyPwzQ9W9qNTCye7tqi\nYrR+jaFj8IguZFyDY3EyguBiJA801vTlHZt+5K3MTt7h1JFZjR98yzXx8c3N\nhKufzd/mvECLVNubz1LNIm+2LYjN2ALgIp2dvtKIMqq/J17MySfR/Tt3xXKn\nfpFsyLlCC/cLXSGRC90rEl+ejWfibWA1FuVl60iFsq3lP84Y8Bcw7ufPSp/b\nN79F2yOWiTF1JPq7u6DNeOdfm58I7OgOtCx++c4SF3H4JL5RRVy1iZzdiFzX\nNCPXYq0ujMtY1WtIXILODfBpbJg/DfYx4jPpBB+ZMDAISzS3uM2jKGtONvf8\nvPMJpnUTfs5ajlVgJGCCLcUmTtK7mnp0E/X7HiIHoRkqm4Zbk06GOJ/hzrli\nwfuGTHqVwuz57duiiIArztA+rmf7/9wb1joPo4u72EfTOg+tjsuXr0n1T9A8\nGp5U7ZVheeUoJtJysC/i1xOrSuTA18ERbR+VrwY9+ZeSylslXvC6a25HR6gL\nAmzW7RGOgLlxAYlFu6yqEmtLHNFGge69/nBFLo6okRKcnmibv7dt8ohwzXDb\n1otJjylIUNIEXYkUIXJMsgXgb/xWxofpPvAGHBqvNWiGOpM9tFsWWzGikkQT\naedJrDULJVrmLbosrWRaDZMaBJVC8dCNS2jPcEih4FwHWOSIlfyN/uuOE43k\nW7Vz\r\n=fmzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZCXSVZJ1JIJJzwo7UCt3ABvjvGBcQPzozBdW3pgqptwIhAL2ZVpYnn+zdE5q4RkZ2NAdo8txaRVf874BOtaxacO+C"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.110_1595405156622_0.13008023777037403"},"_hasShrinkwrap":false},"1.1.0-alpha.111":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.111","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5a1f4df90c9d85c5fe3111758c9227494e1050b0","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.111","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-UK1LmGUXnEzB2HCcv7WB4z+Eq4SCU/QkDDdqLB57TLG6Un/uKTmtN1jrZrYpOGyyO+cUq24IAdcVvNNyBBq3mA==","shasum":"0b5623b68605c8a294aa70f596058fef3268b459","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.111.tgz","fileCount":161,"unpackedSize":5178304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfF/bACRA9TVsSAnZWagAA4OoP/3of5NQPEUdreTZb4joW\nURYhjUkElpuNxclqGHKJQqu3SB5OAU09TtXHcAmtqX2vEkymjtihzEwZFu1P\nUWEPkZfLuR8TQ5HRyFEsRfraMECxoPf2RZfiNFbSP2NsHdsGNzjbYSYB5g18\njh4882HiMGOQh3pDIkObDmpdpzfn5aJivckHiMq+Z1KJafewq41CprEM8C33\nQ/kT3zskOgDNMOcIxqf3Rt480aKJB3XwwxofTS787Zn3Z1oM06BBWth9Q/WU\nluLqEZoXNP4Zar17IaNZl5Mba0diBtjllI4XCI7jeTVfaFXmeZggCQIpknR6\n/Qn7fHy2VbzcBQZrx2Liz5gPsLeleE4oAvLdFIrvfcyhpD46yffv/mZ3a36T\nXjzDUvEiZjDpYe0WlYA8JjK5xa3HZ88Mn7um6Ga9Hu70XNdeWSgtCWJaBNJS\nJ77j5SclrSrnqn0Jwm81SI/f76mTQy+jr/a35rfhfZCNWrGMhRHkbJ9GYJ5z\nAopxQyM0rr+a6zeggsrkG8CoJXq5Utj25emMzXMvsV8sORBXjF7lI04gRFPY\nC8zRcEIm1YdP4BsYajgUu1U1XA9xnfdfPyxD/DR7YxN4OnffyM/57drXu+aL\n2ljHpO6javg3g8uVTF3FmyJZ1ocTyY0fgKchmr/aU5r0GmuISKGZDyYn5Kwq\n5NTq\r\n=hbff\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZ8k8HnGWEGmGXYoV8xn8Vcm9H3hsUqExP+TNb1CGXRAiBG2huiGtUXKt5D9IKuCgqcUxMKMNEjTfF1Jcv99nFGDw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.111_1595406016224_0.03968803450565095"},"_hasShrinkwrap":false},"1.1.0-alpha.112":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.112","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"08c125bf5b05b2b3cf479204af37aec2ceddc538","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.112","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-XsVRyTroTIMdIKx4zkU9qMhyEP3o3W29mqO6uOpwf+0CSLdgGBsPARrq9zw0woF+UQk2vPK3lhiP8RgAkuV5gQ==","shasum":"7246b15c7525f15f7f8117812bd66c57fb77a15a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.112.tgz","fileCount":161,"unpackedSize":5178346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGAtjCRA9TVsSAnZWagAAaDMQAJBr6NznO3YfFBUgQTX0\nBGxTXvoXNMNnzciYyykzA7WFoy3KDuOa831I7dOwNTsV+W7b0foEdh1R3Mt8\nZ8DrIXsky57lIIDFicgBXjyuyRxQ58bL+XVrQHFzMV3Ox5M1xIS98LKwfjqw\nQFNnZfaiIRnkxtjHyzbJb2HWC7QEL2t3Yto44VMqYGOvYwSAqPYIjEPfTwOA\nsLgceWvmSgGBS3POqag7l7qnZdf9D9YnxZh+R8VzkqNatgUF3S5BKMYrp+bR\nMIwnkwnKfRxkO7kaJJI+5onl12f1r7ukxWSJpFEtEQUTypyIgT/CnYhjIZsd\nhyMkNyZWXbNUT8pLpBZrKm8a7NUIibIWkvPti5R9LRaC4jIlSnP9MHgjBUqh\nHUY85K2oRaiePWBPuODaknvhlF2ZUlCb0PyZPVPN7/JDq3L8J4b/9+5Cl3UK\n/hFYJl/jwqs00K9Bwv6XJHujUZtm5V25j2cZCJIh8bjU9Gz4NtTs0GHl3w6N\nyMZK/pwTVWKb8cnyauQLOtsq21RVByO9KFAPD7dzopI316OMm05p1gmwDrwW\nvJxk+f9incwqzU9gE0OyEl848omEHVzcuNRJfjL44zmIjkeQLLYyrThX43/Q\n42Z2hG7utH/u3Bcb/YYMH04CT/eUJH6kGhtDj9p4vkmoNV0D/GpwHT6vRJw4\n9QrF\r\n=nfR6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiO2Y63eBQa50SKWThyusqzrywalxuSt77kpRxowgk4wIgDNCXSpZeU0lpPono6nBGkC+J9E7mXdh3uqOF66itJIo="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.112_1595411299394_0.756983712247635"},"_hasShrinkwrap":false},"1.1.0-alpha.113":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.113","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"4c80072d8ac721b5c69287d304b6617280166009","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.113","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-tqWPZptArl8Zc/dsBbOqv++rbTs5UIeqY3Xo4UgzVlCN9ybafxarOusFMfhRuR9IxMlwQMzZFJ0YYw+gAFNp8g==","shasum":"bc5fcf759dfe4ab9ba338435ec407c0f3d53d4b2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.113.tgz","fileCount":161,"unpackedSize":5184051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGCRtCRA9TVsSAnZWagAAA5wP/3EL1bgNAFPTVV99QQ3L\n8xpslUWucG6xbNRAbz9Gr56gZM92a6XLpVpuP4pwzb74y1ROxOKwcSIsQBVb\nXvZTrNQckb2/eYKbkoSsk6TpbxOD/mcbc3N1/xatWEYx607KOZ9pMBteD/O3\niDt63n2UNXHKjBcHAMKEGK/lsGOyrPM4W86JFG0YGQgmDG9phjv1mw+hqTDS\n0+yDbKGWZ3RlLvEGx7vmB25gOQ+pa5K+b7BMejamRQCCKsz52dt1YnVR/xZx\nMkAnbJVvnJ1opB6H2qvR6a8n5Y9ze+7y6nUvkyxz5GVWou++Ha6UsOaIazIp\n/6qBXINGVGvdV53nMngc/ANPHAsWEYX3UDoBwVSMovY1jwu1w64TELrGnlTw\nbRfjUCJlTp4GFbOuGo8E4SnuX59q/zEIUBZL2JDdfKrKIgGI1v6jcpciiPzi\nQtnJ5aX9p5ktlLspBSWHWu6JkIw05wXGszJgzqvuDYkUg4eFTqytE3oYUDjX\nBjd1D12+5VIlWqgehtTuQYsCiKRj9WgqgDSxXHcb+rNBAjs3MrOrqezpuLQh\nqkk6qSqKSn2vAAH81vE1A5i0irotV5wNY2fINscjnzAXeEPvt4j5hffmEVYj\nvR25KMTWq34GAjLyXfwtKaEo9rhuAIbmAzsQo5ZNIeitVAIEeZVJTlG0W2e7\nG4ui\r\n=f7SD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH1XBzubn8oG/ugnafu/2rh5x6/A400JTSNZZYRQnv9SAiANlBNiAuzkuKkJBDivdtkYBANCTGzHrtL2SNStNc1rfA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.113_1595417708651_0.9799786413505556"},"_hasShrinkwrap":false},"1.1.0-alpha.114":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.114","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a45c526d024d36f789666ae4e26aa148951ad459","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.114","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-MyLf0dQbDcWkYoctPvBvfcav+lz7iYXqWsSXHw+baHfvPKc32uz6WAnYXlfYPO6zp83aCvXpqhCIUwTeYn1NvQ==","shasum":"de8bb3738d0aa8cbabdad7dfeae4e2dde5184ff9","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.114.tgz","fileCount":161,"unpackedSize":5189568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGFrICRA9TVsSAnZWagAAjOMP/1qMFBwlRTrCTS8eD2lZ\nAAwMzP2aqQ4TRxRiDex3OJsDcTZnWiHYlPLDZl7LVc2vp3gZ++amGj8M0V1o\nZBHD2FggCwKtYgfeBSF2XK5P70paMmwPaiPn/Gha+stP26nygOrP2hzYXfsK\n+fHD9BNrg6WSndRBVH4Qvc811Rjo3rJDtayEAt1mUW+Zgw94nWTkdvbiGSOG\nLmtKMzH+7x69wsKLp+YhpLaU2N9MUMqSDN14eKIqJplCp6fbx/br/hGzEtvg\nr/XrcpZddQ4M9ofkEdMbKfspwweiACateehAoOysDgl9fp9hQ45Zr3l2uP8A\nEFq50s6kx9TtGHZH18dbqPZGb3SjDYYXdO4pr5Xa/7GyxNT4hEiCuh+MDXpk\nmdtwim8TsxEPrKh4bUX0VmYhJt6XtKBInT9sO2MdhAn3nyxnKFoHnL5tkMLs\nvvKc8fx48JJWttw7SiElhF9/gc6GO663+rmkEOvqLMs3+TB5EuajKluQEs3I\nOTeJCUGm2NVdrd9jZLObqdm7VLyvHlZA/XNHNXdcgPFREPtKwDj+RtJASqhh\nBuPGp98RABM7anrDGwEdiANaF5evqQlAsAoYi3mskB8icrJfxgbJlTbYOQ22\nvg/k6TK9vPaEgCLGxen6g3MUbT7a+N2ObM3UKRMl7sZhSvs3i3CDWbaRcgdX\nqDDS\r\n=kaS8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvgnYu8JrdN1Di6lWQrUXZP1lIUV13aQGQxC1KFMWrwgIhAIf+OjQfJJf+TrffavUlaxa8PUbbw+c5OL0kAA4Ae2v8"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.114_1595431623975_0.8381624353493453"},"_hasShrinkwrap":false},"1.1.0-alpha.115":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.115","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"38bd3b97b09f99a77480bb0e087d9ac32ad2b8c4","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.115","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BB0qmnfu1SdsP3yUsyP3XPQG4IjoOZqIUFc8fmiRMQrnj5EKkB10SRflGFid7RQRMyAM+NzK7+cpgyaPtgY0kg==","shasum":"1f3876cec3132ff8561dbcb26a6afa62b256e94a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.115.tgz","fileCount":161,"unpackedSize":5226637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGGa1CRA9TVsSAnZWagAAQCwP/0pMQKTvC+H4QXs6Q72O\n0mYDb3q+YDXYHfMF8Pl66TZwtKOWt7P4+vR9HVMW/uYkcNpOYuDgzu+A/6yG\nAdr2sGqXUWLfpwAWV+VPi2VGYwcS2VWXRDvENlgjpmaxEXXWZkptnzgLukfU\nU4UyFR9oTpH6T6zKq/YX0gqSwqoXq9YVbrU15JtkCqyJDoeOcuYymOMDSA8W\nKWwjZqIKfUW2wZ6lwa9xwBJs5oMACaXX+D+sZIYNa6I7+Deic1FcSlmk9gGg\nXusL/Dr5SFnRVMJODCb1KWC8L8kKIyRFXI/dA/ui1TUIx8xzNh9OlrojQ4aA\nLd1qPg6kRyIu/9nInEmjFQnXOqfWwFbuuE2W+Y5zJu92D/ynwLlOR7Nsy/rk\nzz9V1d4IvbRU7T1kYtteWwMZUZnhAm+XCc9zqGYz9N/1fjiHpYzN5B08Fag2\niFA9G+40PnCWPL/5aEaWp2fc1vuOtyLv/FtE601uiXPghUd0gNtILGZ/3Lr6\n6emzH9VWM4xviqBzkwiieLZT1osM6pyxkhnFcNF7JoHgK6Gt6rBfTrOcw9Uk\nr9WxopbPd1k8ZBBuUDS648u6jqaXQtmyWSfhv2uVG+A5l7LpH4RGVyPZucQI\nTuPLAABQr4X1LPGtvPICuaYbJoQT387wcxbS+LIL8TV1W7ztzK+brmg+C+FM\nsvtb\r\n=Jcjl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTdrHhsJvwE20nk3USQ+f+sQKk0Yoa7RT7yjGRUCPF8AiEA+LqZsSY8t/fWQZlJdBQ3Yk3Q74y8XU5ptlX+05rCKVg="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.115_1595434676393_0.8137254786446328"},"_hasShrinkwrap":false},"1.1.0-alpha.116":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.116","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"9a68cae5d5d5684e5b8037832c90cc2933414949","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.116","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-0lbCbwNa8Ck9BpEO+TTmj3K79iHEMsZUJOKXiK+jNueaHrT4l9ynwxpx+13CUm2XVYz62dUD22uwQQlO3ai4cQ==","shasum":"1dd0763edac0d1f02c6001024a320ac4a193c71d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.116.tgz","fileCount":161,"unpackedSize":5242440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGT9ZCRA9TVsSAnZWagAA6NkQAI5alN6qoCGmD3xAvoMM\nPlQY6ten7SmaihXtHL0KX1AcYjbQyJC0LdNexdqyxdjV3pBPCH+ypsPFFxVV\nITfySah+CnXWkzl8ZxwBWornyaS9dEnVCL30mTN/dvbOBS7ZDa6ECFbk9K0t\n0JfvC+4/0Sok+OULmUAQ8bFbfrsmnPPOOyVfJAT0M1rdCoYdyo0+8zNbv3NS\nWJe5qjSP81XDFNAYDbbuWj8FiPONq634iWVU7hQh9NYRtqPPp2u3y2F8on7D\ncf+GYf/GezACLj9ZMDFwZFsW5BcXoiX+6f9TN7zFoY8Yhz+UAdzcxw8yi6y4\n2m5GygRU3SY5s5KHhH8B+wS5FYtaCmnKLQGssNMokgigUvaT3Yon3+FWhzE+\npCHnNZb1NMOKSB0rGzgLENmcJubX0EjZg4C1XkKXko6FnBulOodMv3lv36My\nE3yecn2pTJbq82gnpZSU0xUmPQ+gXLSSjTQwPzwTnGPMr3wsnCbMtffGOE+1\nMcayaQag6fWn8JbxT96lii90fceYpVIgacZ28OW1pALpm5HGVywUo7WahJoH\nCY2AN5vMkFHTs7YV7JBK5jA9cUPmd5YeB+YnhedX0s7xReyw/lltv9EAgRi5\nxvNgNPBD1rWPdqotGXKjTZLyninkuN8dfkW24X4JTdciwzuOMc1bWknjT6/N\nm7VX\r\n=61y4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBQFurg8FyW8vjrEf1VHdpQI2N9GOcVALSjdohb5PAHAiAZnysDAA1hIVVqhJa1ACeYv+kReKzZLjfFTKncuFH8pw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.116_1595490136587_0.9410243721758471"},"_hasShrinkwrap":false},"1.1.0-alpha.117":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.117","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"70381fe497c06171cae6cd8a6e9c48d2449b51b1","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.117","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-VZsATO73D5W+d67VNcSHGbqeC8UXMYXLH5hEv0lWJcAmPnJzwM0tPz0bCx0tkRQSYsSJGqj7d+wrj0NeCCj5fA==","shasum":"4ecfe4b0c4ddc3fc44590c4d834dfe9ada055a12","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.117.tgz","fileCount":161,"unpackedSize":5242079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGYb0CRA9TVsSAnZWagAA/w0QAKIuTQt7cAmw9IGxcuk6\nx0SHaeXA+Ql8E2JRIpBUPPzKGhznmJ3J04F+CVWux687+g40heJ8jRs+iQxS\nOrhaqUh+V3AjMvPRzIK5CjTxNzXOp+c+4HXrYtTiZXwGiGNOwvWIUFmvraGJ\nYRWurTfkMzyqbZ3peMCkxAlRSutCBZMMjtIUdVztxgqGG0B0T0RKRnZH7qW/\n7yJqkFd/79Bg/Ip4CGzU0JckjnpyR+N+cq3gSlhp/SpZWJYCvbtVzGdlFYYR\nb6dc0y+GXE6voE1/60HuhyoSlQWSUSsHtxY7ZVL9pkuaGqO3k/2eXy2XnpHK\ngpDNXIXTuDn3pkyxB4Qclws4U6Hx6tUIdGzR7SN2emj52Y1VU7t7z9u+/lt1\nodxLdb25JRHSvTLMO/S1m1ge4nvsw00Aia2j+P8UZcUAWPCYOdR5jBRMqw/8\nixjf3BjYZ8sw21Xyb2XkoVSyouppKGU78MGYVmfHZsJr7rxx+PqV1kU+XKV9\nSS5PXuLovSmwZMexl6zbU3St45GW/BWMJ2c8S5syKY497skh1V2gjkueaKpp\namUtBQ7iZON8D0P4CCkerd1XsoL39rBB6hxfXv0iWlnP3egJfIkwc+0CRhC1\nQDivMwniv5toPltw9nINNCH0J2Tkt3XIvIXytDjkoGWNnMtg6WTvbXIY1NxA\nI8MX\r\n=BDxu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdRM6LsRkOn0riD+5PJMRQTuWtGGoZXj5rWTe0H47XeQIhAJQ8bM8yw+vKG5lg1TyqsbEvdpCpfAZKcM5/cJ6vp1TK"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.117_1595508468324_0.8604380181990425"},"_hasShrinkwrap":false},"1.1.0-alpha.118":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.118","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"9b31da28a12e7a9c668b0b9a840307f5789c3141","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.118","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-xwUEyNnLkHFoD6yYCkZ6gFHRNIzovgFq6orNy6Ax5qr6or6+LlR6xIOT4CaxCh6qxvZe1OdoEHQjscaVxuf2DA==","shasum":"3cdb9842b4760263f2309dcfc882fd3b22eed5f4","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.118.tgz","fileCount":161,"unpackedSize":5233871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGqo+CRA9TVsSAnZWagAAOtoP/175MdKnZPVPhpCWObzQ\nV4rQuRmHh/A39g+pEBgz3FncTdsEmPhDVALKlp3myc9RAeoUomYwtGeRW2FQ\nl1sGSk37B0SnfFZ4xGA+cAOMnU01vFj/dBN64ymAvoH1sI7mdh0E3R02wI3b\nDgTLAtw4ZyM9tP9K49Cr4wqpAFS4qWZSFCirNRfn6ZYU8dYtYDYU2InCpZ4L\ntA+XsjkKGFaf8qa7Y7p+TWm/s9oyaAnueA2il/90AfiEXSROMD2jvaWLIc7u\n0Ftd6YHu5UYmRI7MeFGytwGG7JMLQjsUhGZAHHmIBuCrli/izBJNtSI6LWhJ\nO3KU3sN7jmn2MXkCgwd2gwLcKnNwe2RpWxSvYM0cGyHXZJEuVFydl12sNdHC\nF9q1WlaKyuy0t8Zrrs+9F9hb/BNbj7dka89TWpwpmF+LauQxuCZZEZtWYXQJ\n5vzafC4HgDlzbU/cEYG/Z6zScDC41m0BIKIHwuHDY/DpnZyAzOwvvZ+4gbtt\nbHrsV1OXgj3/kdZdtSvbjQ9rQYmz6OqTv68RQr5IRCTQyhiQ3trXqPl3Df6L\na6hqbYUZm1v/zqgxTuV4r7ZYyDzgcvT1NUZlBjOeQC8G3nf/nUkGVuE/uqh5\nMPcMNt+gXbQB0UCZAlho/A0u45R2SjwiViRIfnTvtWsR6R5sWpWBN1M27uPq\nzx4W\r\n=XQwU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKxEOCavorAHjUVTs6NKWmf6jQjBX5wJAq0eYmklzQ3AiADWQ3WfplIET/1IK7HLBZi1KiSESEbIjs9TeUIPYrt/w=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.118_1595583037864_0.022887601221348586"},"_hasShrinkwrap":false},"1.1.0-alpha.119":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.119","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"d6ed9162edc15950d9871ab4af6ca843d6503dab","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.119","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-5T0IJL9b/s8+IPSkW1NDm9P8RrLj556Ybx3NcwTMkTP6EToxbxSYzhSbByjT7NOMONItovv3P/OLAeWcHW1dQg==","shasum":"c806c9095cd92b592cdba67e914ff0bb53048bdc","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.119.tgz","fileCount":165,"unpackedSize":5262575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGtAMCRA9TVsSAnZWagAAP50P/2/TKPN1F7ozsdeLJzKQ\ns1vfOy3GX6gRBTJvq3Y4jgb7PhmFb3ml7MCs7fEkSniOi+h0YyaLQd7d0g5j\nXyxy+eK9PVFsn2pmPysk7geV9+q8QsHEKGc9RqUIKawI/lForZszq2rAId1v\n/uatG7QYPRsuYx+yVVIf651gnCaSjtSzo7rZaZTKYNXFFNKmqvkV9/8bU/g/\nC6EoUvywyOAkB91uztdGGQnDhRqYoR1rAPF/pvBKOpENEM+0GJY1k9Xxcx4Y\niCtf8jT7KMw511SndYAiO6fCsC8kIKjoTcFuh9wcHUntYLj0u9vHEMzp8pZK\nJCd9VBkKL7tWu93tb6PERVh/mXksn+65bMYIEl+yf00DYIPSr8MdwYeHiflV\nLXMaKAvv1a7NgxPru1ziaLCyv8tLZVoHvG0jH4Ehcvo0oWri4t8rNvx326P0\n0UeJY60vD2EEAyqm8vZgPA8Ge+9hCtdwtoh3iI7QXpZESL5aubWRCrQnd5Ix\nbn1EG+8MkDNiK0A6GbRCOsQ9RIyG5HOzp0JxHxQZ1y9g+7L8wHlNPx2DKeNx\n5ghDBf9v0A8IOtsaSGQGTKugwOfPX1s94uPpc6wpaxQhG8QaKF+Q+1YaJDcA\nonsJYEnQFbvQnfv7RW9PIdCS0GyzhoallxGYOaoSp31T7QoKh1/N82QMxb6t\noiLl\r\n=nisN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDekfANOP1Xla7ylOZtTZ87UwU57s9pC00sLfZdI3wLfwIgNhQEYXfGcgwR3Y1CiQez+6oOjMN9WsXjeb7Qygp+Kxc="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.119_1595592716017_0.6100241693811395"},"_hasShrinkwrap":false},"1.1.0-alpha.120":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.120","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ef465a26f79fd4fb1826c64bd6bd50798eae14b1","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.120","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-poaxNvgBE5zxkNw46QbsfAax/B1Gj2zcVfqIi4UCohCxsfY0l2hxPux2lWxdivoA6dBVUrAyR5b4bMoeq9xEzw==","shasum":"884b1d6bde6db6d2ceb51cb913c648945fbe261d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.120.tgz","fileCount":165,"unpackedSize":5262575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHrpJCRA9TVsSAnZWagAACD0QAJv+f6DIWJGnaQnhV6/o\nGLG/qW/MW6wSasZHRogCLS19PD4Uyq9W+/4qsI/Z0eiymP6c90OqxtEglYgC\nwPU8871hHWgro/EJ8oSHwKCw4LsBdcPycx8bd+w+KZ6CoIHlNpV4SrhkKlZs\nrYR9OUQ6J2e25AAJPaY/hUQh18Tx2+XNxNy3aCjdhlzwYSNnIg10iv6adAmF\n73AwQubZRY3D3ktNktUm62rcAKf01mEwniPq18GF+FDndQK4ddCDr/sDZ2u0\n53nkqHA1ZKbcbHMQyowOCuMMhaUqzBKbGGp7LT/d5zYjdJ8idYmn/67TrsVc\nrDMkeRbaDaBznfuxQR16lZcCEMDpJbIvWL9/NyCTW6WBVXvgVqjUxGHLbVLQ\nfbCftFh2ycm9RPqDEqpjBGwhQI2B0jdwPIpUWxI8IOf98CvAgxeWWCMbLRdq\nYZveiPTetms0885mhyuFBjQ+FP0IlpS/Vhyiv+ATcDe42S/TxTTdsq+M9r0y\ng0Dl1Sv3OZGdLN4yG25QCLx65AjXtHkVAAaEr3LnRwvm9u79ZTAvbljvcaBf\nNhk/HE+kCNE1N/OZ18uwu85NccxpO8DKSB5Jk9T7C8PxAPHb4io4SXIoxGsJ\nfCPNvdGXzVJv+TfBld0CLB4Niyg6EtyG3EjvQJw0xuPT01lMZvCc07lqNDv+\neQDl\r\n=I0jz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIASiCDAAkWW7xOaPGY8u86vmst1faU5C7ClVRHpcJ1JxAiBFfBftCLkGtxtZ4i9bBjXWLa6OIRPMPLaoZNo6Nd8QiQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.120_1595849288888_0.427094584023352"},"_hasShrinkwrap":false},"1.1.0-alpha.121":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.121","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"40bdf6e8d78998c452054eaad2009cc967bad394","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.121","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-tKo66blCtMwGfUeVbTIyQywYGlc9sCe9I2PwGvGNSo0STZdEa3CHEog+5nZZjt0ErGqk1vKJufe3g15dHd6WfQ==","shasum":"f77f76ba3de437809ddbc8e7a8ccf8b0c160f0c8","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.121.tgz","fileCount":165,"unpackedSize":5264720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHtXICRA9TVsSAnZWagAAE5cP/REhiDtOQGkgpE6Ip56K\nSzowbFpBRPZHoGXney04n11Wcsj0teLZoYDNHJlUTfCgaLRZgocMyTUR/MTe\nQcDA0mUQpT2i3chsF3ENWG2tHrpe8KxXf1dmr6tCVnUD/Rfe3ZstXD92Z1Sq\nIwHzCe427qB9KOcrpjSQrfyRO+WDXVxddm2y5i5wYkjFFtahE+7NwfCDqiZF\n/VEKyZwUdG9aFe7qJirlw0KOGAI/inmdaTXj5xEykd7UhKhVx7x8qsdHucvr\nh9yErk+u/deQd4psTdbbpLtRBSfZy3+KbFQdIHG/lgz20LKMatWIwItTLmK9\n6h2K9yIM5YCEDm7g8YL6nNa3JhJfbYEdK1LBRGWg+mFZ8O3IqQ6CdkrmhJXc\nU7xbnhKr6UWlpz4mV2U4RFPl+072YnOk+o0fmYOGX9yXbilNWacEqa3vASZv\nNIAGRpqI2M4vObHALyeazgZLGF3LxZFvRsqos5ARyX9x93vvt5dvaG1GnvdC\n52ky71VTrbF0QvaUPDQb+GbO5IviEzjMACGfhIt9g8/IsfTYlVjPZwimwW0j\nbcHYKW1M5vGHaAt/uQgipGLrUqx3H1JAF2O3q+3w5ZjRKVkRlhgXRFFsmTko\nsI3g2QOHbPCFi2d75lEMlWg/SpapYbO1t+m6L6OT26r+QGD/o5J1DFvIxCln\nLhYa\r\n=nQ23\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRofcCFSwd2kvkj09w8ZDZ2lhQR1NAlj85QUKhFAzQIQIhAN2iRjL5ktkcJSCnO4lQ0Ou+3flHRPOwYGJxf9SSbv+0"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.121_1595856328159_0.5778181123040065"},"_hasShrinkwrap":false},"1.1.0-alpha.122":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.122","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f1c279753ba6831772020868d2ed02cb7f7d519f","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.122","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-4zKVk2hWNh4eIj5uV1iMdIurGdVGfyDMIytTchwbEIxErotigpCANe9v/Uw2kvKiO4MyTfjYmK8zM4QCbHlLhw==","shasum":"ce641e1af576deb8a37453e0ea97871040b886a3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.122.tgz","fileCount":165,"unpackedSize":5266367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIAfKCRA9TVsSAnZWagAAbSYP/380/WAO5SgSZTIhMyOD\n0Pe27vXADr2AaE+t9udUmziHaEoBRnDZ6uB/ifJWgJy1/PJzO32Vx1YLzOL1\n8vxMcKMQvrGMaMSO3LoFIzyP10DA2twxa7M7DU7Qv49EzMiMgoJDw+r1vhQv\nIn1FIYrQWPg5bgD/OLNhJM3sP9B+PRAGS2EEllqU4gGaSJCbLT/HxXOKrvXD\nNgRurzal8e7BRzUXqlgMD7Ittougnj3tzt89/rbQKobnsOMwg18eiRYLt6RU\nHDVh/TbYuIBMkSXd56XMR3ruxZTp0LyDLGYyFu+EMpFu7iR4JOA/B6fi9p4s\n1G5GbrB1lOEH/m5BifKAz1BWsXK1HMbrTd/G8cyme/bUNV+si9nuvf11Inkm\n7TKTD3vdX9ChorTFK6Z0kcy1B+7qrjq6CTUWNz2unjZcbuVtH2dutcoSVkj9\nIkZd99HscqOb3+Nj5X52USODaZGqb9dzTQOnWrZ1oYAs1JX7BKaeQ1HMuP5e\nTNYDGAiqRGH8TxrNsUGLy7HHARxg18w3oEwjzoC6MRWO2Qy7anwlosYsu5tX\nHSR0oIttL0gvcp+oIcNENM1RK7N9DOJE0IJ/vkWm07aBaa98QM1tTiOeiaUl\nvRCeIZoDJSydD+i2AH8gCSKM1HOaDol5bI3+EfMBtcFrlF0SpXbeE9R2KZFT\nosaO\r\n=muDd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjDiMHV9sdVNPPrY22X/9GTSGQIXqojQ97i+cNdk0UaQIgZxJUfkQYvteJngs73QNw53mdRqtZ7bGuOBbWaHXBUN8="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.122_1595934666060_0.7431790527731261"},"_hasShrinkwrap":false},"1.1.0-alpha.123":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.123","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"2e6320601f0e3b535eb09c33e26f110415c83e35","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.123","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-pN51/wUelrdJidxiGkokAIiTwsXBJauUtlCO6LFNP/XSiWO/opqe7heGarzic8iF0CAeA3zVj4R1qUAex0cSsQ==","shasum":"54e1c5ac2a72c3727af43f7bd791b528e2d3b397","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.123.tgz","fileCount":165,"unpackedSize":5270142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfITKaCRA9TVsSAnZWagAAMd8P/13791ZiEu83+PM3/0hg\nsMmH0rFKMYL2chLUlv2gDA3eyiFArzgmQvWG4Z1auKEPy/6zsWuY2DBESVPv\nykwFAeCh7vr9dSKsr/z8FAJJnyITYWYQN362YQYK6gro2UE+Qey5qQLNk4VV\nZBeT70OaSMsaWrCLmmYR+9qlF7YYjlWaBpbJXLdSSm20k6wB90vYkyzEY8FY\nlmkDqYTT90YDZt5m2jkwiSwe7uE813lV3+9SUW6Kz5pagg30c4H1gqxLISIM\nNwExQ5+Thj4mQGMW26zORE0XCmn3Sf8DyhaVRUNMFhtjzRgu95q1KQph5hfv\nUQZUSuy5DC/0mlgV1FCW+wwEkb2kRtRulxRB0cYZhW2P9QuBlOItc0yGSAHq\njb6gP1b7IA1I23ILi6YFROvhsDHBSEb/kyhR9MvpxBYgm4UMn50FCQwP+W3x\nkwVpEbPY/9zbdkwfxUJF24WVblVgytEt1bBSuA5pk1qHgeFXFKQasz63Mdr0\nfIoLu0QeBd2y4dBYjkEdFDo+XFkSULnknpLhGht0l1W9JUu2nykqG1H+MevT\nnB8MK6HDsjUMt/6LVlYx2/iww/rAtTQuwfVIzo60Fa3vhsK89iZV+g1xfhnh\nSyXorWF4T3omjkZBK0Ni49M5MtmE+utwMv84E/iEJCOPZFfZ0W97yEBtZK+5\n+BFx\r\n=Ttpz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2mxxDOXXTJwwpAgGh5LyeDTSqU/IAp2FYBD9ggkHvSAiBUPUY6w1VzXgAm+7x2cF+X8g3RElx0e6js5Fd8WIP/kg=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.123_1596011161698_0.22669818077395987"},"_hasShrinkwrap":false},"1.1.0-alpha.124":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.124","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6cfecbf569fdcbd4826978acce3ac3c893f7da75","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.124","_nodeVersion":"12.18.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-7PCmdX678lChOtRhn1AuaNLx7ZIyhqwhzq/dii9ORVGIayFLg7gINIrolq3KjSGO/7jVI7T2a9DM7aeDmFcfgg==","shasum":"2e7abd1d43e0f4d8a9f7d4ccb5231e78b06e34f1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.124.tgz","fileCount":165,"unpackedSize":5270326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIZLCCRA9TVsSAnZWagAAcegP/A3w4uD7vMOTPI5K89nm\nMZJIOJJJVtoys7r+UlsUmQRe69r1rQaQSJnf1z0GcfM3bFBoLv7GFIILmu3l\ncSguqHC7/8aDaBG/CYZ7I6eT6DGXB7eGJo7qFfyR4rlgOOZZllgog813W9Qr\ndajaLxuIH10V14xBjcPIRPUCWFH21OqHTw8BQkH8YreyrNrmXl00dTjNTAdN\nG/ys4kL1ZWI11W67FbaDontH6JM9I4H31sunIygnmbUMF2NyTHXgdgUxMd8a\nhNDlHazcgJQu3WOH0hVhuHt142cvQrufDySgDGmgFdorm7BmKhqANi95d93y\nQ+H41SC0kcM3HR2CFQ5M1IC0LX2ikiIzgb5Hm3ZY1O/MT5VY+f4gpxs0gTUU\nAaQIpTOo9EJKIx2eSfDZdRY20kAA76dIEOEjXZCnVMYSVbpX1Th2UMRJufmN\nddhOsIapXdZxicm6FFCDIIRcnff/DKlCWPWMM4JBlhRTt/mY/lVFJz0UjDmi\nsFJP7V5STDiZBhytH/5hZ13m8EZWjE3h4kSWTacc1eq0rf51QQWGqb5Rk0Na\nVLyrE4plBNErQobapHfXtC1KmUy/G3S2jSXTmSPlv49SdK2pZwBWcc0Hc7D7\nODpVSTZF6eYj7FeScP6J03SIR6l94l81XUchUrPBGvThA2kBmIqOkuuf+lWx\nhv1c\r\n=YhKk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGiNmxtRYNVa0zCCYmoKBrNrrpsbNMweZsmeG0wT+ToYAiEAnNeTXwS/ZDO6uf4WfMTwWtjitunpxtfBxRp3B8zV8D0="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.124_1596035777463_0.9333485421142216"},"_hasShrinkwrap":false},"1.1.0-alpha.125":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.125","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"07970377fa6d383de8806ae017425d364bc03906","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.125","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-oxIYy4qRKIFIOAEN0iCfTbuzCus9m8Qcn/1Fg5cTKbcvkbzuKIBPiIAzONorIrxyTf48wuf29S+b3ZpZVMJo3A==","shasum":"38e8599f916872774358f533580397e4f99489b8","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.125.tgz","fileCount":165,"unpackedSize":5277628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfInyFCRA9TVsSAnZWagAAXqkP/A2dBhMEn6kJheuaGTjl\nqaLVU4mbWTTTsuHY8eQx3QQh7qXstpJDIBwbW8/hcXm2sKeHyTwPXMsaxbxi\n3PhuD5bI3qqm0bIInbOr79BGjJF9L6AAbmwp9UzwXBMmaCvgNpSzbpYAhpIJ\nXZNNdNWLxxb9OXqlks2gBtDe0+ptOUk1Gu2+DlKIQaJ/8Q4+MOjIW/aRdwj1\njduCZWCOpS10WjkhIPdKKp7gtcexah8FesD+YVlpjpDoevssY4T8+Ih32yUr\nieNkFTeWDyz1JQdD04RrSP7l99UxwhP+60oOxKY+czsyIqb3P765TbxqmIcc\nuzdi36ggFbcIgFZMjcsa2P1KDXe+bXs/zVveqJxjz8JU+A+a5QYWz1xm6Brr\nf0tHqN5wUuFfXMM1VUnmqyYpttSdcBaf6k7aIJsncqWBZYKRiLVMxCKpXiRV\noDE2s5bMpvS5nLhfWSHK85p+4B7ggiiSMQmtQbiaVeEx5vHciedx/qd5Hx2R\nhfoo8V0wdIk3w7dQ5S3VPyywKIOJz/p7fK0DiCKeU5J0YnRje/5ogxsHJLCg\nN6eXwF1J6QxyWsM0qKbHr73Glif0docWRAsxVr3+rv2eOL1JP8s2awlXgwh0\nV3/SgXp4ID4A1myJnUK8Iq484mW2eCLgqRTh3b2uBx0XcQfzImZqFiVzB4vY\nhEoA\r\n=kMQj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENG1W0XVw76Nuf1bRE6RSGTao7bKTf7y0Vk7Z9pjeBOAiEA9W2fvSROYpzCWZzWSstfY9vy/qfVmYwQl521JsuACyE="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.125_1596095621111_0.4050468825544864"},"_hasShrinkwrap":false},"1.1.0-alpha.126":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.126","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"dde9806d974bbdd0bb22cc4991b5e61f25e852df","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.126","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-hjqASXPxVPfm3ewRuvGclUYolNE89wuEx2K3Xs9nJpusZYtVCzSwr4PLxzcIccq+1fxvGcl406t3Se408IaSuw==","shasum":"3e049d87fe01dc4d88ecf46465741b93c97ead1e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.126.tgz","fileCount":165,"unpackedSize":5270611,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI8yICRA9TVsSAnZWagAAebAP/3kfoLwOui0tsHzDakka\n8ivDi3F8l/UJJGTyBNKCd1CzV6JTIY6nXI+AmIwXhlaTWg4OMWYbYyjxF7FO\nL5KD9PaIv0UsUukoDVWtNYRry7ypHSgp2oGdivZxx/O077xBydG3ALi1lBw4\nR5vUxZCIA0Msw1lbfk1/k8Viw5gdpwIlIfOK88Ai4rIWIJdyuJYmLiNhjnTq\ny2scbYW9t+CPIASpajM5HY4glcxZOX/lr4lb7ypwfFusIrJMIX3CDMFRDnRQ\n/z5jTSH6S9UkDdZTh8rVuySZC5+eqPa94PILfKZJsHpkckYwtL9D7zUkHoAs\nCpVAihgPVTIvK0sBIiwX+IZx+bEjZuT4F996KFvwMdylXDBi1uGsRezGZ6X8\nANIdVO4gIxtG6CQAGGO4ZEky288jJHgIevqk1vtSUz7rOFF9hc07ltFdicL4\n8VpBfPHJ0vo+3DRR0OxXgTWpYthxE9k9A+Do9QOPUTwmn9aRI4hnwQFwcCpe\nZ8E3rDAi1scajxPMGoiNpu/fftP4qSX/iqAp/+nRf4L3sSkTUeT3alhClt35\nE+VmiNxUw4ud9NZaesuB+fAaUglpgu2DCoRVKZvsSBdJYQE/1IYLhnWdq0Mg\naWJITwHVDErZKkLHlPDGsgtiWi1IC5ffX3pjoi0pPmx71BiaNY42cDDkEu6M\nYLU+\r\n=78WE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIChTyLRVagddmcwrHmVXE/xF91XuvbsHCo0F5kJqGrh3AiEAlC7bMBE7G8yf2vu59aAxlIVCRwDrEvA0t5JIJxPF78A="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.126_1596181640199_0.5406688337324175"},"_hasShrinkwrap":false},"1.1.0-alpha.127":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.127","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"3fd446f46cf0d31a67333e5c0935df43d293dd80","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.127","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-LVWE08fjsY3USLNEEm+gWUUq3c7IExJd4Z4WiN/FjKXzzWYZ9o/l8i3wHFHSlgruC21uAQkrOVv1+eRqevsCwg==","shasum":"5e2cbca79e57fe9ff5627ff45ae986d271dce337","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.127.tgz","fileCount":178,"unpackedSize":5336753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKPzmCRA9TVsSAnZWagAAoloP/3qVQ4o4o2tHO5WfBpAC\nMHSteaDlOfJ56SsKeKKrb834kMfvJ83YOlm5GRK6YLCM55ts9L3Am7rxKQ8O\nyHC40CmCPsjEXHs4v6lZ1ToRhdBWxnGoNmCPpCZSmGA+zzMv1rVsHm3tGgxL\n96vMpUFw+lKHAitDbUTnA5WN2QB5/9Lg6zvqsN4WV/2qZPf2X6h2cd2PNFHL\n7KccBlaktMnGTUosibZaXgysqOqt8Rk3cH1v5f2khQ2tJoOa+6K6Pl/FUDjs\nobaax7jmrncjdJcfdLbZ7OrfIvtOpoGcDgNFeXlryw0UM6Ayo+vR3aahDPTm\n2FOIXcvZ153ci9DggU5pAuikwUdCHEfNPnb4i+UTkTp7BkTtlsUlAt8GDTwS\nqHl2Tm/GXW2jRspDrWR7bbb71vXQzcyyQCJrvWa0vl4ZLs0XTAaJL5r1ViP6\nuViukTj2SDO2ju7fTrijMtCsV6rZoPHWXOgH4tiu9LsKflLnQDIXwO/a+Cv5\n3Egdbs/+dUpb179Kw17YeLxHSkQWUhx/EEWJDTtfnxN7RlU1gTL+NSnfHxuj\nSwlHVxTQzHKYs1NfGj6acmka19kGE+cL3zKa6NWvki6KpiyXIzmUgIlmK93J\nQ6lfAqEfuIGRBlOcAuTaXw1O3YxXy5bOjWzop2OGPe7xWqSqDlW5E/YvxFmE\nwMEU\r\n=ar5u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvrtXuN6j3I5v3D+rhWAQnTYId9FSCK5ujieyM6GV1qAiEAkgakZUYTUGiJSw3MubQSTFIi8vQFZskBM7ZKIl2lMzw="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.127_1596521702182_0.995338452484247"},"_hasShrinkwrap":false},"1.1.0-alpha.128":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.128","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"fd479c47f4f03153a0e0c9da27d2b0b2d24b472c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.128","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-O7UBuipBimoQcki51hEr9VKDjEJRMtx78xAG7BKe+H24CUp7/tf07gBvh1EU/XJTzb12qOpmvrVK5Io77r9MlA==","shasum":"05cfaf5e763edc873af31966eded12619787a431","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.128.tgz","fileCount":178,"unpackedSize":5348749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKVtOCRA9TVsSAnZWagAA2RIQAJYPS8gh4f1ABFkOysR3\nbuE3wNj9k6bBSp69e1LCm3ullU2rXCMEHFsQBA0uF9+SH9JdOqtaOuANW8lp\nFALuwFT31dSZF2STz2qCXF+fbA0O0x/9AXZxx0NSU2j12D/VsN+uPlO5Nb8X\nkNNVqccVBPJ5TKyjMzr5GJKmk03Rt92YuyCZ1W7Ke73wHCLuxARhlCIkyiG6\nyEIsSzF292u5NFhASlK2r2YLKvQBNQ2fB29i9IjlnsSDcnUH27K42xONKabD\nu8p2OvL+kqnsU9z8W+FpuLhq1LHuHT1kqDeZrdt8P/dTrxLuX8mErtpnGIun\nx2rdSpGs6KE1wJdo/N0zYuRc6iyuqq388jJzYugm5JWl04RbdTW2CSHlh5VU\nJTIJF1x46HFhDubxiQKkFq997AaPVXPRpouMG+nupqocR71zrvgBc0jn2dgR\nv+X3bSIIptOGDkkwM7KZVJV8Jzd6PutLsjH0zoi2iIeEpo8Gg9lxzB3yDpls\n84KQ9vw7kCsp6RarhuHl2d5bqtLx8tNIVHQzOM0JRe1Af4ShWOOtEG5DREfN\n6vr9XR9Q7bZHkNk4pLLlH0sYVVDcIYS1mn5uxA6QpZF2dVIRyiP0TFz46TJp\ncXdQKvPphylIiRhpMcs4nOnEKf/RNgtuV+RSvX5Ys2SY3FpiWKgqUIzHVJ0o\nWW3X\r\n=QJ5v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgIM4vaRjewphqvDGwzCT0/xpSx8iBH8RNI5vAOovMEQIhALfkfcCRhSxZnk42RoGfuJvb5XYPnN54L7BADIA+0AbQ"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.128_1596545869900_0.7094441264488194"},"_hasShrinkwrap":false},"1.1.0-alpha.129":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.129","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"3b958f11d87903f0a4db5672f16c60db44d24756","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.129","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-+yIENmok58dXcUPIbfH5aqOtBaOleHfpAwoStGmBc6NJ2XZvb5kLzoJoEr2miVcXGIA2b1Nw4HM31MlupqYvgw==","shasum":"b8687c1ded17cc827c8c91f702a162721c2bd7e8","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.129.tgz","fileCount":189,"unpackedSize":5381461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKXcqCRA9TVsSAnZWagAAPJoQAJBm+pXLKuMs3c3Fh+zW\npiPQJvDzQ9HGUhQ9g9XTdXJNBkAyzz6klLyEstbaO9G4nBSJw+z4nZ6OLK9z\nRw7plyIXj2UXJ9M0g9XoD3fzMXHjdoowjLKXglDIrddqo8rLaZ+Xf28pz8SW\nzhv/NF2zg8hY91GciSa4agwYOhFszIfqGxPg9bJjaK+Ym3I6w1vc+sIwwCKs\nOhW/Gm2cl0MvtZzw95/4YAQiHh9axNfw5LpyiHUbvohPYm9djdOdHR8e5X/3\niJAXm05oL2I/DlTICs8n5mATqqak47WA16FREB3vcOYBnegXxAuNKsAteLNd\nkegh0VS5dqkB+1lwYoa9qp5hJ4YrXucRchfZ+2pSc+7amXgSDMAKFHg76TtB\nPbgo40kO0Cf6N8Jk+k1OyHF0ZZRNlps0GuOuwBzltlIc1tfnEQXt3xXX11HL\nErmuWcOaeIVb8GaiY3asb2qQCd6IoqPug4ys1owQrJydzR0lnF3o9xy4mkzN\nhBUlb0ulzSwOQjqFERlthY32JxxvK+46uR9F0B9OhLAPwmttsn3uwQs7twSg\nMqPRf1Z1RgqfyZkDOI4mywIplm7ToJCUChpl15hHPF8yVohHLT2jhDA2e32z\n7TIjT39aMfoIUvCDUJyUttERE35V10IYzdQ13W259qzPYdv7E9q5uU5GY8ls\nZwvm\r\n=2rh/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC185GZ3f8i4+NQTyU0m3zZxbWET/U34LxCIlUGjebfmQIgK7+cgPp56IjGKk3fhTgAml1FA9QF016u874yfixv4jU="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.129_1596553001594_0.2328632034666287"},"_hasShrinkwrap":false},"1.1.0-alpha.130":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.130","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"598b438d09e8a7faf0969721fc7bb2631191f105","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.130","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-eBuA+icJf99x165RaRvVmclVxpzHqEpDTPN6xHimf2GuC4caJ8OqTwnJtlc/4JH4RavBjeRY607PufJ97JSAqw==","shasum":"129f267d7240cb639f5e6a4c36f6de8c50699eda","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.130.tgz","fileCount":189,"unpackedSize":5381553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKmzLCRA9TVsSAnZWagAAdawQAIFtV20LGXYkcX+CiOMm\nx7T4hIimvjv9O6Rv4zmoN1dUg8L9eGS2NVKchmnPBd8j4DFOlJ9XOiHrU6uL\nGWvAfkQTgOvkauDzw40HpEojPj/xHG+XLXo0GvHoxM4nwiPWmKkkv25fZqY+\nU3I7xhRTwasKhHyMeHYn+Yiky2SOA/sVDEeHA0z4nolCzKLFSz01FmYMA3Rh\nX/r45jo3T3hTmVqP3raLXTYERKQbonJ4Y4le0AuqYWQ7CDyi8mK3pr05mIJP\nv/H0mBPNNoCKr7KxQuNacai1J0mf+PAZ9RRdgnHIEpdcJFpuG/83JhC4XZlW\neR0JO8w6LNYdL8ARWsYQ46Qte81kAQOS+2+ybck5JmiT9tjHchxKwIunjGLk\nZiUw+VbhtTwazYrmtFKKMIwpaX2va6/nkDYR93de21OB2woWZcB2TLInGPOK\n15Q1Hv1Ungy++bR+BiDJA2K77oVEFrc3Dn1HKqvxEyx7Qk4EZ2gvG8nusqKh\nwtSBUK5DAnAQQsadrwxOcliKff2ytcmDeMI36vLJYJRER4o7oIHGiF69L7pS\nTMRHljGhcO2cGjhiLV72zSF9eqBvYhtqXLkXTX9euNqaGzFBsz99F37Y0PAe\nPV0vHl9LlFOXa73ofQiyfvKK19gbxQLUe/zbhSHNtWJf4vZV6sTzkFszIYFf\nt+dC\r\n=peV8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL5MbXeLzlH/HZDoA8geNeX2562DK6SPv24gvkxvOSogIhAI2I1vwqDTkYlBr1UCMDLb5U1ZXta5w9Pc0pK2zosc1J"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.130_1596615882795_0.08103389307481756"},"_hasShrinkwrap":false},"1.1.0-alpha.131":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.131","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"71f8e891aaf182555029dd75022e5f9620d8bc26","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.131","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-U+/6tr9jT8xXcD6VkhFYDvPJOJN5PDrMyCZIJ7aDNwgHpWVhrKZzd4w+q+bRk5YFX+O30pdxwP7hGYzUWbW9pg==","shasum":"e009d7bb39e642f0639a09a1f86bc00a4ad187d3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.131.tgz","fileCount":193,"unpackedSize":5414157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKm/qCRA9TVsSAnZWagAAvU8P/jIj/wDOl5ciV4RCm7pX\nlO+4MqLfC00kFAIAADIr8Mf5f2HzS7H26fXtc6BMzsU0tpWhcO0lyVmZfFZd\nXCjgkywW9btESDLdvfOmk5PeqhiNsxk56vXDDminAeNPpxpeO+do5aB7xqAx\nCp3+8BYTXTxKgKlPQWlrLCZNISYAbDSy7OxfYLgesuInGKSGwfqE8+COaprn\nB1eHpGREhPsUM2+uKIK3KvVw0+5topTVDdjz4xaHMaY/Hngltj64JF43Ozgr\nPiqtZNAW/WCuYdz5jRrZedV5vx7h9zuWrKyRzu3gQrSzxOpx/zs6vznCUkLk\ngh4ot5qNfSQNS9KRD02qyneAvVvV42SdWRVXeYPGxsCik0+Acd6XKUZun2ZG\noKJk4vQwUoNuybEF9e8PVKUBXGi+kaunOIfM28XG7gq33XL0q5QRzBUZ2wGp\nd1laJnaISyKLbUeeDYuvfR5exuSa1dj8AXmrgfLFA8nJma57wT6TRh2ylCzt\nVDJTIchsOhRujnEBoccm3ilSf2IKjZU6gmnrenvD5gUrwcn0eOMKVpyLAk7Y\nfUJVa8HR4vZWLalk4WoowASeWqZCmxLu0ngoEmFCXZoeKG/PycUgfRLji3eK\nx8a6fmF+Z0ubicL00E0b+xmuwX0Tse/CvekLOq2ZLIwzImN6vLg25Eck3nLL\noHXc\r\n=nPU0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1RiRIdlDKzkaa6Hixl0jvr9sFjaw1+5+TC/WE5EmTGAiB506+TNvJkN1EpoeWb7LqXwxViJM2Kqe1VzXh9khUtZg=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.131_1596616681667_0.010096412791325005"},"_hasShrinkwrap":false},"1.1.0-alpha.132":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.132","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"fb05a63c2231901ce19d2f7da3238a212c901aab","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.132","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Q+BKjZAz3aee2lJ2UeJv1GhUzFgA4CwPb2BsZQLB4qQX/PwpETaEUOHzuvnBAr5nM6tiyaiFUDI34fveHhUiSQ==","shasum":"0051d14f5ab423ec38f12a040440e6cd66460ab2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.132.tgz","fileCount":193,"unpackedSize":5411507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLNxPCRA9TVsSAnZWagAAziEQAJyTURqkHTDnYobMkfTO\nx11SF2DrMhvLGiIrkKhSuxJ7mCd3pY/mqqQj8NfRNqq5i6qRblMZhxK8bxDL\nmRQ1Awfsh93ctxiZ5tuYhJ9ZOwcm4R9qqBiSx9ereoaw4TssSALMQmUEgs5o\nOcgKbpUd9LPdY5UaX51SeSdCk4aI018iv48Xbf4EnZvDpnJsvjMHeqWCwxny\nTvexjohwODaMTL+tjgE4P3ZEtjdcQZzxz+SWTvPbb4zgvTjeeIHNqoRVejsZ\nDV0cL0yRrRzIB/AhaF16q3XCgMPgluRA5HfAV3dYIhrg5F9gMnkS6TaZUgU5\nGto/KZkDpzovbhdMjcZiPnqpPccU8aSU5tvQca/IEMvBrXJOWHpBkNhIuMwq\ntQ6gxlBCQ4CgYlbYadJlmSmW/YfMmo8/ABUtBSapIrlPyhxc41utgHBqWkfW\nhxXW4K1cs2u+6HcmRyjQoK9g7/a2WUgqIynxwp5/ZSTO2TDSQXtz1sc+/pxG\nxQp9DxkkZZOgPRh3HjCPk5/FV7sYobqv/HkQZpBVY0bM0VmFv4hD0sPI13Ot\n2DuBwUTpoF/mrgNJQgsYgqgmh+mjTlt/YZIAdNEYKdA0m12biCs0AdWIr5Zg\n8G8gtxHj9tPiRTlogZgL34TM1aszJqlFpmtFYA6jUWUSj2YcxGR6db23+PXL\nBo10\r\n=fJpj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxucavoLAesnauwTOEZ6wGucjKZXfvUcF+Hh8LjzjxzgIhAL8VExoIF3Y+Hw86Hn/GDnxch5gOILpWUeQTIX1bEYjI"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.132_1596775502793_0.3166711833749325"},"_hasShrinkwrap":false},"1.1.0-alpha.133":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.133","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"597b17879f08d58bc77f699f5622184090e3616e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.133","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-kqs2ywqRHG94SHkD2TbDJbJsMan9ue7Qiwq8HAyl/slOExwAwcDpXUBYAEbWi/of9L95BO44UljHTgfJq8IqSg==","shasum":"3f80981df44f7af20ae1ab9dd228757febb6e0af","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.133.tgz","fileCount":193,"unpackedSize":5412108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLRG4CRA9TVsSAnZWagAAVFAP/RcHkHAd/XnLe/Aiss/V\n563RBHUJPN9aXr9D685u+BrKaOg+IZiNgHWZiivw11w9Sp7y2KNPPRoeWph6\nXgFL4zmUbcK2ZY3qHVjrco4EyN5m/Z62/YI0UFhsIngkFyZwgdasXspL3AOJ\nencyGNvL4AV9UxSxIi142z9jb8NXIf8d2dUaUhzo0iagYaFP+UTMRNB/qlbH\ngPyDduKendN31PF65zE9EmJ+3Ub4e3qoz0DdaEZZQuk/KX6aL0FbTEtdBtOl\nsbFC2OR6qyb6dszqzc78SP9BdHhnJj/NrtU55knif0LWFORwv0u4FrfrYl3Q\n/WEAN1T/TnxeYXi/wG37MyL+aVa5K/kbJQTNA+7Gz9FnNNGEMUL2eNXU8xtY\n9duQ2CM9UOz3w5t9krgCtDmQpd98NgcrJ6ytEkQD2vulwxo1fyp2ZrFCuz7+\nY+JUSRoAkLc4jFMzx3+619xx4wVKPpBLbKqXeW94n8YPQ7GZPpLaH1rDpSug\nW+JOJjdI6j0p0O0Ml+aTTXvcpEF7YzA1N/YXi15LZuYoiXP2kpsIUU+nNWc/\nIJr0xtDT1ZDQr4wj9C63vMj/zDnQokjLJEArrCJ4gjb/TDzlYJCcauUlWlab\nyDmQL+smbtVGDhTpJwnVODIOQzzbrFdi4dy7cib73z9zmTGiRW8l6+JfoTgF\nV5Ir\r\n=KXkW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4Ec/XQjF9Tc0H22KRgNrqAnCySLXbBrLejGRg288+agIhAOWEesqP0HftDBKf2OQRsEzOC4nxB/R/tU//ampUCdlF"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.133_1596789175554_0.12285320636980357"},"_hasShrinkwrap":false},"1.1.0-alpha.134":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.134","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6c6cd8ea7c39de25d2da0939ddb9028f926975ae","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.134","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-RF4JKK50nw8bMKE0s5Qr0/Wb1N3/g0NObqkiqe5pphDKkaKHueRNVfiej8PW7TA3xTO2fulHIgKpeip09lh8vQ==","shasum":"53bb85bf350c9fc44618c78e5bc01b092c59ed74","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.134.tgz","fileCount":193,"unpackedSize":5408336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMNMYCRA9TVsSAnZWagAA/BMP/Rg1NBElEgUpfkh9ppRi\n+2HBHZ8bdnkguxfAbqpcbj9NQfWxPaDqjDBMR67G4nNjNkETVVIMwN/RBKhi\nMdx+Cn1v+N1jrHvNI+aoU4QrvPq6Rau0PHpdK1W+c65DFg4GaoZjbJb6V5qH\nw5oqXOxXqt57BrnzcOZnQtk1q+WiMvpRXXxlgqfUB9pedgDkEfl1HvfBCWzm\njplJ1oSu4TD3JecRrYVjQf+BUn0214u391i5gwez96iXyTUwqJH4Snr9TT2Y\nsQ4ugrfzUqbhmt7293RgMoQHhciKNSd2/B5C++GKRBHxL+yqMmfYqkvJA1cC\nn2cmYjezXj5Y2SU3xoed3RHFOw46IbxkYoKTnd+qkhcXYj7rfwKaptnBbBTb\nCuJaRuVavI+pI/11ILGfYHpFmaXPBUt9ftESK00DxsL8cizONrtnrkTAZEGF\n1iG347uTxGxy1YVKHcTnBHvbKfxojIIzoO1LKgO1qlCGlMe1Sdbn9fNW79UE\nNNzzkHcOMyNriQHIpgi9ajpQG5a0CoyjKFZW9RS1MxRUk0Hb5jYqGdg6RhCb\nA3iUVlsiKSYFVVFYJHZf/dYAwibG/t0chnOwBQfX2TR1+U30s5+uav+0qqhE\nUKCLNvIReWPEgZKmPkrgGlOs1Q4UzQfyZVAIvjew4l8qq7Jigp7oJ3cUq7Ts\nS1lx\r\n=NrxZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAS6jonahY8gJezrnu7auN89/vUcp2j4Lpxl1jz/Ez+nAiARtR1U6jQuhPJh2ZY+Ea7UF4tSssKCbi+azgeHMjbM2A=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.134_1597035287950_0.8306526060398047"},"_hasShrinkwrap":false},"1.1.0-alpha.135":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.135","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8f8739011284217635027984e2510bead6d92a5c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.135","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-E2l+RNkuAVYDT3lLU9SJ2nvb7GgFGjOMc0xmMTkNXRx5v5bQELR5xzWXkKs0YsU5DzTxoJwCmtEDRSbRTF1ATw==","shasum":"cac0556b581c1ec5a3dbac57e92b512ce1184723","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.135.tgz","fileCount":193,"unpackedSize":5409583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMQJUCRA9TVsSAnZWagAAv3EP/RnnmPvWXnmQpeY6ay3f\nsOitbffxtLL2t6oS+GptGxgKnlkv7qO0pF9691oJgbyx8DJ2eBGG37V8Omu9\nQOrranPvSI1mE9rcUbpVZ//gnOO0M3fMpVpCcU2SyxpDFU/XkDJNYZlGwvyE\n90RPc5LEE0yqmAYSm6DG50rmccj/sv7V5SG4esOJLD5kjp4JXLLR0j7tvM76\nHcL7sVA0DtyHQMbwB7BgVrYOHMwSwXYVb2jePoeky9ngS/WsFwS3d1kppEbB\nmdPtDRzePwNZcQjbBbju3QhvehK+wk86OzD0h7DEl5XvVlJ2nwCuogbeiRtY\nw7+X2kfdG6mkZ2MVzSmGwbgSOs1/UQHxCFOVVheIsxzIwh9tLgrVDw5DY8yW\nBtFOF+qy4XaTjQW0V38gPHmVOyafDQ/OLQfdTa5LmRQrSTDXwcGDIeeakSn9\nOjyGn2IoOv5z6j1vosvl1OV3N2xjq13jgBy72adtSgliB3WA9ZVPDfTeVfJi\ny1AHa3Edol8HOruUsy0uDrNcqbZXTM9K1+pejTucUyb9WDNHrcn8uyx2pxXB\n8M8RVERa+LFjSXRYIe2rB+/FXoUnLzh3N8iJynKN55ebOXXediWK7H692zAl\nX81hfumtRrt+B/zFSN/lHZwYJeIUyH0liKD+V5aX7yklwNT9kKvuj+ZnLK4E\nCKDM\r\n=cu4R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKGT1kk5VrtVYJB3UB+7ChPhE23TToJ3U7uxUl9yEySwIhALdae5ZElbzKmpmY/R7bnbYx0ERKweaLjPy8jsxg9c67"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.135_1597047380091_0.7542180431238192"},"_hasShrinkwrap":false},"1.1.0-alpha.136":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.136","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"2cbf9b0732fc4805d03b9fa190096c734343779c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.136","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-PMICHsT2s/So8eAqrkI9rEqxXl0aOOb5lXP9DeUOSx1XIZ1XWA4jH7b85PMssMb+Ii9899S/xjpXGMNt2S6Dyg==","shasum":"c1eb32f1579b69d8c6d4a8664727a1f10744f07f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.136.tgz","fileCount":193,"unpackedSize":5409598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfM6lVCRA9TVsSAnZWagAAKZoQAJ7MRUv/SCTl2t0uC5i3\nilidde+a8h0uSRBw0FPBtKztfAUoxynPkJ+uVfbHO8/Y7XVOZwOfKmqPdVCJ\nxUGdaoXGcpeExStbMX0ffiIJFUoKLKER1hMIRxk4E5G8UGhK2Nu1GJCVxsuA\nY0bPjdE6nQZ7Rl+Q/SPFC1/epDl664wj10wJagt/2fJcpc1i6c1w5iSZZuQC\nf5dqVGAs2D/J3Aerl+uZ8XLHjnzzPaPGT0jKX9/nY9uCEE5zKxz0ALVUYVTt\nogYmg4fjTMPhv4ctCLW0HOplo6Pl+jDCtQDncxiQEMd2ozaLO92XxQpAfsNZ\nDLLxt8pQN6KtWw2CDsTiVwaMCfP1GQivILy9AvA5Va8nZJMBtTRqkaALGSp5\njGPNSh7uJN13lviw7yAO9cBM/teCVaXsjptYnJxYPCUTS8tYMnukq9ZrtIm8\n+0jZwzRlH+egXROzPl9d9dB/+hmoEty6VVCjE/TOeXp6nJtGw0wB7hmQrqwL\nQQ+BZXT11fjMG0PIoQ5E6Bf3o9R0lLLWrSdnM23aIGjs8TLYjdIyk4WRTbT8\nH8/vKAvTSq8D1bm6H0J4t7BrGQrmwUfrlifWP2P6bSayutFgQGoeRr1KnbV/\nZTGka2FG+/9TQDVc4bQmrkndhQ1mg8o0/awhXc9pBDMKAh2EAUPe83N6XDwR\nm8VR\r\n=9xK3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk4nyZYj4zuAkieuYw5DfdhVUQH8mWnwIQ0Ux/QUZdlQIgXSHiTg6Y2auEtXW/GM/Cdhc8DivoL5nhJAlsv87b/C4="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.136_1597221204971_0.4771576574672207"},"_hasShrinkwrap":false},"1.1.0-alpha.137":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.137","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"01e1f679838c82b43c32a70ef5dd157e174703bc","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.137","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-2D2rsekxZupaB5hzCHx5ZzVcawuxGL/nsD62tl/Motl+FoY/McwgWJu73UkBfyvnrwEHEY7brAUZOy4hStrWWA==","shasum":"88b98cbfb4c97154050fd30e31adcd12acd6725f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.137.tgz","fileCount":193,"unpackedSize":5408731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfM7czCRA9TVsSAnZWagAAQGMP/ij+e7PJbN18b9dzkUjF\nbJtLEYCr2DmtA/qAz6UXPnPay9rqnx0EZh8L+Bht2pFB24qD1CG/ezF6GQhV\nB3M9cWqcxU8dyII4KeqLOob7MQOO6psLiYU3qWf2RoystGBnKFN1xUlJ0uI9\n7bGuomaAh8RsMANBXBdpcKBRPgtUnb6Ul9JBvlgM3xSPLsckRqLfW3WQVGZ6\nU4jNSDM98oL7RHpNwB5c1eY/3GmSgVvsimeGCJj5/VsYjZb+GxfU9FYJdp7H\nbqfDRvQInEXtOAiWxfoWTxM2pv4Le5AP6vtrD8/Za9FffOz7daS1SwdoQQGO\nO1acWs/B8ZsbVZZ1oADeP4gUefNgoumpd57/zWXxzh8lCQyUcKbaCHKD1loc\n9eOtXKIj7r68SBiiEFEovm11zVey9Xd//bC+78DkZXLxq4sT/H7+/SE/2gwO\n5fV2HE6T0YDXY99oD8LuBEW1gaAxBR7sNEYDTKKQ4wwR+STmuf7Tw9/Prwf1\nfwTx6ghjTBjgEmVTSNa6z8Zeptnd43p5hat+QNQSgfOHpIaJ9iKZCztVXHZv\nFQJPjaqXGzYKbNhWHP8UQfBIc+78VQRTvMOxqjDwA4K64HUtj7VQGjclUyEH\nkW8p3BYZ3gkaoRDWTr4xITFVflX4SBxgT79vxTlPBYNh312877fYGR7GbBeY\n+Ehg\r\n=90Ry\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHbptQmcBA4DRlfUJ+1sUKp9EziT6bKHOJ/S0+6QyZQMAiEAyquFHWf7lzO9tEXL7GSJvz+bxoMCB+Fv4evyGdXkjn4="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.137_1597224755291_0.7505913804155613"},"_hasShrinkwrap":false},"1.1.0-alpha.138":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.138","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"971cd51a7f054148b15fba1232efa4cb059786c1","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.138","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-jbbJH/sXjFS3PkTxmKVNLrShSWjsUp+n7qypnuz3zH31WQpFpnjKYxT8XkgnsBD2qAJ2AUPEQBVJeBEzqXSHlQ==","shasum":"8b08048d1f9ec928e8237ed8c7127af163a3e5b2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.138.tgz","fileCount":193,"unpackedSize":5417704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfM8LNCRA9TVsSAnZWagAACO8P/3zB47jwXa8oziBPChBw\nOwl2ViIQNop2gT1hd9uk0s3lxuj85O/urY0hqSoTO/Ix4YD99n0EjhIpa/dR\nBBwFiJzlpuUlR4WvhsFlWiyR6fU2dlQeay8RnfhSUQnUivfs+aeqQV25ERw0\noafCbptBalAgwlSgZHSK+diudcIk4e/qZsO8JDdsEwuIsFORac1tXG//fiEZ\nXToJWKh00zh/Gu9rhhp6bGGhe7gr3W0pbO/fKC0tQ6WjEy0+ZkKGrYE0LgDp\nCHqQDYnPhNgd8w7XmvBfWX8vJXbjLja5tvArpSOOcVajhEx982dfkk/znbPs\nvVj39OBeR9xrTqrdovEVItjgN8qbiHg/njR5aPo/7nGVxw/S3NxO8+IKjCSu\no3HbEFeakP1M+mJcBgGUf7PVccSJ/wObgHbENBmWpNvzLRb4dFFzllg6JNoZ\nmk3CGVYbX8dd0Oa9RX42x/VhGAeKtZqaADE0o7wk+lOdkQxNqyzh9xvEeeuX\nPmF4MHkSm9pe/nM8hXCFgP0rTpHhyUtfNPgJQjABrOFYfysx8wC91BTftUQE\nlLVq/gEyAHh9LMcoIMxpAk46mYB6EdakrsKWFfs1CePVfNBCaEDYK7X4U96A\n6vY3UYOgFuaXBRVGu/E7fym8IY3F1+83bpploG7RbaEvxQI0Jkx4Ydhzp7cM\ndjMR\r\n=08lC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIB2lzyAsqQtErLjjo2MNAz2I+qEeJ0phaQqKeIQrJ/wIgC3tZKcwcMSPsNjae0kIZRhpUTn9ky5rcY6qQJhQpFeo="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.138_1597227724955_0.7733139461372269"},"_hasShrinkwrap":false},"1.1.0-alpha.139":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.139","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"37e8a70024bfd1820c0af319fff4bad5c922d295","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.139","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-3TPj65qGt2XkCsN/wC4kHk1GsiX1G880ObmXZlKqxdnuTKW6OE3RjP21jU9HEv7IAnOEhwwlxerfHQ+ZAwkJxw==","shasum":"ec2163bc716e64ce12153d391f76efcbf0ab22b4","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.139.tgz","fileCount":193,"unpackedSize":5425087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNfXaCRA9TVsSAnZWagAAo68P/1zENQAYMyaN1jeIFJdu\nJwMVQ7Vgum7JIl6Zj6ZH3Axeqrzqy72UjjKpyKT+BV9a1HP1GpXqvIvANKDT\nBkQTduEtSgo7ALb/hLlb609EjvQ5Ym/ctybceAUAfNCu9FmgcK1CakD3rAc5\nR4kFwlE4NSyRtT4uRJXjH5KWVNFVR5/gZ9lztMYZpo5A791WPgcwV63aXJWl\ndXFg7h8hf99n4lhmz8SsECZNm2LUcM2JoegnBOosfAn9D6Bjf02RP2JohHze\namdxllScwyP5Lu5DjlG1NisomyWDX5Ld4oUHhgT1mMRKGBQzH0bj+s49KRtN\no1EaIuixTsnLTR9LZvTqt6tC8JMElySszHz3xjLgMzci7/ie7kj2gC+v600K\n/mICIPYPE6BwkZRnkd3btzo7tJBy8hbZ+fZM1aJg4eFc0du1dfIr7qBYplOB\nG8Yp61O7J58he+A6srTE74ejaLNiLSbuHBkv8NKBeIf9RyTLrVJQcvwCEgvk\n8dXeYJcJK49yqQpIh7vqa4jd+PjUA51ScyknnxOPx8HF5uYtVNJcS/aEc05c\ncPbEOETNWpA3dRoz0JCxnIVjRYSQZIbF7bZy2fSgs3y1nk/ledatilquUzq1\ntOo+6zl/1UWrnhUTsSGr6VTMnmqSLyxq9822DOmiQT+Uqfp1pBiEo8BWkdYr\nekft\r\n=ohAR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF629dAgcZkeTd/gFUCfXfDN5bZfFeMqEF5mNrU2ad4YAiAPbj/rTeXU9DwOBPR4fM8eYr75G3rHNH5cnz6AgjKmdA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.139_1597371865732_0.8372323723269322"},"_hasShrinkwrap":false},"1.1.0-alpha.140":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.140","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"cccb992db4843ec0398fc8b93d78e2d4597696f3","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.140","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-70aDCDSx6KcpAJSRsG1n9WE6YBHGwvPNc8gMYTz/Hzumpm/c6l2j013S5LjluJsLB32xE61GNoFRf2IPiwAk6A==","shasum":"24061d2c334547bb7acbf4902247f0fb83eacb17","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.140.tgz","fileCount":193,"unpackedSize":5578636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNm/ICRA9TVsSAnZWagAA6jgP/A5zmr/AJ/XIk0gGHT+x\nG5v1EM031FdI4Gd9ECdEMneV75CMFm0fDZ6HsvGbgIr/wYtzjG4kSdm1SSWy\ni/H7TDmNNozG624wKWGSD1BmnU8tpkg37BnT9oP5PyFGUarAkkSUYnHkz3c4\nhZfklBwTIHyaV9w+ei+YuPZREY/Zp6oSGfTjLF/sw4q9jpAf48eL1bNhlLew\nazbpcziATJ3YwyRAXn9VIqDATu49Z+cqiykv2/DMZfoB49rTqgDA+Hjab1eu\nX+E5rdcnUxIfzGg738iZ2uQ8Socg0CrkonSR+v9NRJFJA/nLsJc42IutQRNK\nrSh7TuZ6nLE7M9y7vrAFyb8qOIyCMHex82M09eHTopXe3gaNjHJvP4rFujcF\nRWjVDDHw0sOuWNzVu4qDLcngUd8U5735hRFHZtlAznnW1eE/t7qa++C/IQz0\nnsGkFIA1nVKI+HfP+SoDlsvp2LqWhNXEmg/BtJNtxoyNFf01JSvm1aXkIxmA\n5cbKEkBDqGulqQ4QNsBsR/jtFVcJSJvU5GCY7Mts/l30k6UHv7xxLwplSAxT\nChxBS+chVWK7IEbNPZAtNKyRWLg2WVMocqhWT4ZKEVn3+AY45pQTeIt+EmZn\naaLAYDnnOVG0fNsQnP75aKQAsvJ0AQcS7wCKb/YqVVL8tiJZdImoOfAcf1NH\nZ9f2\r\n=in5L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDD0kvRRTsFwAwOQEpeC6DAYuGmrLe1Jor1KnuJPJsFtgIhAIZNgcQNeq39SkSJ2fGOu2npqOBzLvrZntFVSZwigORV"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.140_1597403078869_0.7114595280331868"},"_hasShrinkwrap":false},"1.1.0-alpha.141":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.141","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a3fcdb4cb764a48fb05fd2a8196b17f52956377d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.141","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-E6RvutokkEq1IovbupmquMvJ4bKSif5j7Of4hY0XTawQ57ALnPSmtKTRBgFS5G8mmSUJBvtcMOqXq3l4WT32bA==","shasum":"985f1abb669cc1de501bdb9f9bbbde493424dda1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.141.tgz","fileCount":193,"unpackedSize":5579945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfN9BICRA9TVsSAnZWagAAeGAP/2LmnIAnxreyZAo2Crgn\n1DaDm477C/b2vP2q3sh5GU7Z5SkqEjkAJdWtp1yKvIIoWpAzsA/lhaGGTHYR\nDE4hdkiPFTM3u1wOcaJsD2Bn0cpOxS3QpbiqDnZGso98c/wrb+7VCX7VeRaC\nATuRKXTfTFUGfDkMA4bZf4sxJgjvcYdu1fuhh076l5f4RVPjtnbtLG6oHBBg\ntlCL5rSu9mXme8WxoM+Fkebqq06Y6Igy/zAXmVht387hNuyniT0/qJBFJb0w\nPDZqCIs5wvLnjprIDT0rb/TJgrL0F6okkxn5cZp+wdS3EsMPkeNUYR2EyuGJ\nKZA40aFVSYs8HETcW9ebsShT802pBwCPp570/Y8tE13fcJy/YWhcG1nquRqG\nu1Kemr00BjRTKYFV6MmQgkgbYYFiYAXtIXwF9MswzzZpxG8IT12rPeH7wxlS\nXgLu5zMEZi0gCXCpD+tZVlsX+pp5+aRXJ06LSEIEbcmByOIAYaa2ci/3S7Yw\nPQE4VFKDNX+ukZCcRGKlBk1EXcU1V902/z4mdeyWy5IiwPb4UDOOP2+Ldqx3\nI05InkTBtlmnd+T0W1zoIyLZZddWZMQavlXxdldEAbIi1dybXKbJSTN0t7ha\n9DBz+5j7BLOCx0Yi2H/0gZfwdTZk45AojcQaJ6dzWa9Hd4POvvOrA3iQHkz9\nR20z\r\n=+874\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMr7xZaSk6KIh7pous8b8Xy993Le96jR38fIi2uXZfMwIhAP2gDnP6YE4RCOn/VoZxEwKQxyfwypqJbAyPUHci0SZX"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.141_1597493319369_0.06749606711506839"},"_hasShrinkwrap":false},"1.1.0-alpha.142":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.142","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"54a808ca16e1ee6072a4b1ba0fa0da43c3d18ffe","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.142","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-5iflcT90sMOjhIvd59mG/bZGc/7bucBLW81mBRKDhhXJPEM6kX/jXO4+yYGNQAzqqudYlQx3xtnoB1rc4D/o1A==","shasum":"936456260627e87cae975c3856ca6218865eba06","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.142.tgz","fileCount":193,"unpackedSize":5579346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOAprCRA9TVsSAnZWagAA1eUP/jEXJVJtGyXOS68iU1DV\nDCffq1dDETEg6mbME+cd1TYmnTig0Gx3zVHs1iq0pK3jHNDB1aglETXv7iLR\nv48PyN/mVZq6WSBMwl0X8JYSta9RvFOfAJxmIUjKKtsC4swHu0EsTsiTsOcs\nsDGFEAmPVDq+GPyouisDPwKWGZnNut/Ky74+PmbewMZ0qHm34S/ZeRUDneGG\n21XYRkk93C2QILyw9q9GY4zQa3sx4vfpa/KAipjUwgnLmZFCxUh1pmDAmnjb\nqr8w293dWQNPEZCvgUt21a3zVueTxQsETyygcYOCYoGRaOA4BsR+Oe4QKKCE\nTfqPc4uhihappNcFW4E6iPYyOvgM2LIZVH2v8cyqYg8c30GGe7g/uJKZjm+p\ns8jvzq85ynD0F621irSYEoCGb9AEorH3f9MJb9b/cPeQE5hf6cHB+JgOyhQN\njNkNZWChvzNPK+YYCQVQXVgbpsImC4yErW8PBtyD/L8pBFrRRvADKQuHhM/V\n6iPw4Q7plkVdow9oWovaMook+iMtaIx0j5XQdv1/OtkMXaLuEyr5VUhWu+8f\nx2/Oga4bEPP4vpGefFfCsHF4GSEyfhfX9pXQdErtLDaCgjrWNeNehJ9NzURr\nUYEXVV1EeRbAXJo4mXv0nbsGPCe8p2f6j4jeUp4JXRyhkNTVHkbLTadPA31q\nAaOR\r\n=XCiQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbq/nndKUhQuzuy0aP7r3skzC5d6VRttTjMbtUY9NP7AiBmcgkseuHCYw1iEqgUzEhSmCbUMHUUNn34ZZqM8tp3Ww=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.142_1597508202811_0.6704821061845319"},"_hasShrinkwrap":false},"1.1.0-alpha.143":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.143","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7ddf07b7b3141313daf3db600e0732e58770f183","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.143","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-4EHemiFtU1uwFSJ/QucrlbgeQKyL+upe1SvHhlOV/z0s7ZWdSauSj1TvXEOEPOtShWH7b6Cuxvn7wo6Ry5UhcQ==","shasum":"7fb6e36843eec11406802c9e8d59ea46c9cb391a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.143.tgz","fileCount":194,"unpackedSize":5584026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOlmfCRA9TVsSAnZWagAAHpcP/jpkkrNxqlJwHK3f6RKi\n+ijFGtGsSrQz9tGCL1mSCqaEifJfVqyZXNO54DHyrngEbqQs6k3UqQ7dyXj/\nPM9l5CrtLEdY/4xuD0+C/bL+kY0oI21X8qGOT9tC10ATFJwvXGrbgGxxIw+n\nwNj7Sq7n2CVIxeNn3Q31LoSzXZm5nECihuPsDZ22Vdq5BUTJT7BqzZtIYWgx\ntempKzZSYDQ/fWsxV++wHkSG30EWLQwFRIcmXWQHZd9JgfPIFXngKh3ML2GN\nT3PdRYR0Hwsu2zFEwdA+s3qk/AFSr2GMsl9R3HsbXVIdiyioaaY794hM5nXN\nqMgiw5hQ1j8r5v5EZi5+m8YKnu+1wWzzHtR1bzPf9o4861Zc22ikls3rs+Mg\nxJ98fHkGjFzg8TKY5nAOdxxzytF05rlZFIpkJLBIQtetXIFA3ysJKTZ1uxLH\n+L3mfFV3V/4G6fTSwtvACKF4T5TM3OSI+1m1nDuocwF9+Fwl3h3z5qzhzsE0\nL1CLXsKgVZBNG8dkRjMv/cuFdDHcHDclyxY9j9s5O1OTSmf5mFVNfI3AiPR8\n+OscThxsYW4GEIcd0VVON7QfQyjMrP6+yn2hamHOKQqB8Q3fyaIrC+8iqmBI\nL/HvYHE/8DqH06K7Yzv3tKc2ZzCW1A4nXQn96if+AaJdt/ngkCKou2KuRWmd\nZphJ\r\n=fRVC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN3TuskqNYddBSkrgNs+t8Icy8yWYed+h3RM/t3e22XwIgLvorvkTnPHN7k6Ftxl7/VX/+MMRCB5vRGaA+MH69+p4="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.143_1597659550668_0.7940040831950996"},"_hasShrinkwrap":false},"1.1.0-alpha.144":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.144","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"94b06f85c6a742340c71b5d90ca6acbe94b0dfae","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.144","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Mu6nptmnUKuxhDAtooPq7blRTpTunX1MUBetCQmrDvTNcURl7hKXN8F1/sayUQgy7lo32rACYKq0TzoU2b5aCg==","shasum":"fe9ff858b43503c5c5a20b4948f23d0448fd58d8","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.144.tgz","fileCount":194,"unpackedSize":5584336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO4m2CRA9TVsSAnZWagAAFo8P/3TIXAshrvv/YyphXmLB\ncqiXgye04xxZMzdmPvpPL7sjmCf346ZGMvXfP7RBhnz/1vxQwMIpFGIqHBpu\nbPjZ1ynwopAha7wCRFBpnLgOlf1V3Fm/+dyXUOHUl5kYZK3TIAfsnxj6Uu+d\nfFdX3+Sp2SsA/937zQueBCgY04/1fzW1BOZDhkbI53Gf/gkNTyZkd7caCWFh\nocvLCgHimobiHAyZwMUZiVJEm1Y/hZFFP45YNddIj6bpnkq1HihvERNRlCIm\nKDiQARy/k+RoEEbR9QPXTyZRkcZFdvkFh9riWAhFGtrYbkoA1Ez+pi9yZUDG\nWjmfGeiqGQcdgrrGlasiPjX7rqPkNHe4wwpYYIeF9GOgqLfrlEUiEQVtOKv3\nFVjQ3lUhZ9iN/RfRdkh1NLe+zxelZldO4iCY6OqQFIwliuE2qYCoLaOp6L6k\n+Gu2tSTzgSAtWi82EnO/liYL9gMzarMGOYGCAl25+oVGoCVyuNIFLFfMHw1X\nU+AN5qKiH05u6zi1cVdBInqR66D8B4nRQ5uUJ/lue9AGdiAsXYbYYGNuCW7J\n2mkZYUfhqU+MQuyQQzAIO/n6RcNmUhNPwSLWTzvvVc3JfCyRmwu6rqNNzWvl\nSD3vidirHCw/BfKBqG1czzXyUMtLGLKcVBUjxtae53psCPZRNH+u4w9SALLG\nXwI6\r\n=OIlY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGBnHoLUboxPV8FsUftweIQlMO9bb850n9pe9+T+k9UAiEApV6WvLwNMBIOgLt4bZF3y1TymtBqK9t58IByr2YFWT0="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.144_1597737398154_0.8921262927502154"},"_hasShrinkwrap":false},"1.1.0-alpha.145":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.145","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e52b1dc99d588628689523104c48350ba60f0b7c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.145","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-pO2bpJYUL08VPbIBulya/LzEP6KMh5iJcuMjsw3gPW6xy6e5GOaNrErdDf8K6CA7460jKcwZXNJkp5YiBje8qw==","shasum":"369aca47a83ed2ec97e6ff46d90bd059614d596f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.145.tgz","fileCount":194,"unpackedSize":5584491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO5G4CRA9TVsSAnZWagAAljYQAJSFNoPISJS8JFbuImLA\nlXOO5ZVnS5T+qxbduvLAZindX+cHpZbbTKW9BodBJ0F+3RzVJ0nLpGj9OnEM\n9tAxgzX+HfbhS/CB209ui7BSSZWpE9LaBxFJqJ4XaGBTRa3pwYm2Ahhakx+8\n2k9S6/HixHHujmcDKitQJK0cFOo0a0oIVyRVydZ0K0shCtsIj5Qx/VNdJjQN\nI8s7qKd7AT3yZ71FWzPU7LNEnQiKEzH+V1ZVz5gpbXyrdZ8jZFLn6omWR+nd\nuFHYgd2o/dFh2ajeJHFRiZ/cUCx+OjYwq2WjwkM1L+65jQxc5R/reMqs2c8m\nYASOZNrGL4sojV3LoPeJUEtIR8MR7vyZC7KjIsJ32dYWo9UN9TvftHQ1L5F+\nOK4mGvSW81HWLYT1ldjsOfAkAHG6HSLNMC+oJG6OLqPC+XXssA7e8NvbBfvP\nAydCF2vXUP6Vjz2c3DkeGLX1iSHISVwab15Nkyht60FN2FDzZh6HSq2bLSLX\n8GGj4M5yCOHgGWsDc2bXBstJBCxTDJM612ZycAzDIt7ImZWYwmbtKk1qyhJo\nvQcD/zsz2xyCDWPLCZp0Ijz9WliXy5DgZiwZBpnR3pMsEHxMiC21xajL5+cy\n/f8NcOW6CN4OHR7DHjpCRFmBfw4kn9C/3/JPW6M/OyCRCFLvLHxYk+lHsoHi\nlrsM\r\n=E1du\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHuqFoE9R5lMhAS4WasfJEZN11/akt8RuvbbagubWdTxAiBFI6eWVEFrcLfu6YCbnLRDMMoWldEu8YQzC+VglTRtJQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.145_1597739447326_0.6478142295170892"},"_hasShrinkwrap":false},"1.1.0-alpha.146":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.146","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e7e988564779ed0c9a320b91eabaf347ae7b51bb","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.146","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-rk2Rnj2C/WMU/cSgNZdhCOfGDVZCVc9pj0H1nnS6A1CMLLKKL24cYBE4KNPBsKnwXwRKVZ806vEblXxkg7uAGQ==","shasum":"6eba9e8dd5ed802c2fb47897cc43833a6792b739","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.146.tgz","fileCount":195,"unpackedSize":5585634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO7gTCRA9TVsSAnZWagAAKeUP/0CTjgwvzKoRIaxdze70\nbAgGwCB0EPWvGMeWtf34TanY8LOOIZWCVQpyuaGgxYWkkQbVEEC60eXyJsh8\nIpdBi3YIC8Arik7WpFPV21Tkd4Um8GrnS0kqQoHpUfVxATP0OEKXRQuLFV4f\nxoFbD33UjxahT9kK88qxOK4k0tpfuKNXacyLK1dWZ86fkUMe9GsBEn60h3oR\nJlYvvNoLp8Z2st3LAz/hclKnnJvP0j6wbwGP84utMgpndA591bxQzOkbb91x\n/MV+8fcTst/OG0G7NWjZecwfpI8G8LSFLCdBXQiku+KwUK4uGpBieHfSwEaC\nwVXb9qJKGu31+ddwNeB4fRaBxsm5oxSx7e01alV8QqdagCmCKMuA26kf4Blp\n7nJl4sMAc+5SMujtcdWsu0LwHwnrPPoc/jzMwz1bFoAQb6Payj77brU879it\n3/yBG2RssrO9FDg0f7cPi8GnTF+tAdytBjb54IsC5SmhF+wBe5X9KxmPQuI4\n3+5jBPvijMKManDAHzYKbRU4VkKsKJi7SOcQtkCdP9BjGtW7k26uCu69lspG\n2HXDguJWChgQK251kGFgsROuSzNillppUc4Em2gmblmU2fZ9Bm2LqzHtoR9b\nqLiMPidkFoGurrhrcyFCDf1QNG2lN4qzLawQ9hTyMZ6nx8F6pCkLjwvFrtYt\nCj2u\r\n=ttvN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMoy6WTXdpAbJ/Mg5QpvvNfGnKSmfr0EQbipIALxtOaAIhALvLyMGDjvyq3iWV9BTGxyTd01mkwf5Q0me3oHmAGVC5"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.146_1597749267038_0.9278783161440065"},"_hasShrinkwrap":false},"1.1.0-alpha.147":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.147","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"94e5bf9694b6544fcb33b9debb9da63624fd94af","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.147","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-KXl5EWFVckUiAVFyYxuaArxCHFlYliyuJmZZthCRDqk7Quxeou6ufSDIR92MhFXuVaUqLmwsutZ88vV2c2+jwg==","shasum":"8268e4c545b630521a7ee1a44a17be1c13553443","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.147.tgz","fileCount":195,"unpackedSize":5572055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPOIzCRA9TVsSAnZWagAAnFwQAKOoJrB1jBO3/W/rjZod\nYpCA8rPpZKDQEWFONqaYkNX3NJLC3CqjW25JyO9ladlxre9YdDvcig9X5rxI\noZKXSjG2GeDi1kf1hU9pWdbUO16c3y4JKRwHBBzV7xgLHsJo0gPaCazVy+mU\nhGmAah2JbclE1TcRdxrV6/+f0Ci4NUDiNidtLsOScXLMyigv0xX7K2cX96uz\nus8I8ZeeKvU0WL01VZLeCLigZl+6O6rHNKrpnrpnqJ4HQBYmNI6EALi3c3kl\nQObEEr5zVLusF1yWgwIryF4rYu2e06Yf8VSLeGFxJcGFtMUq8VSRLnkxlxbR\n8S+W+gbEhxMMmOJG4bOp3dDtdqPcheLzGpKMCjcgiZEv9+Ap2U2GlmvP9T98\nr9gCzCGUrDfnGYGRpog0O5jpP8fuxi+nm1p24Ik4jk1rVg1znskyZxFZbVt1\nZoZYcWnCGhxMkX8rdWbeTjB0c2J9dzquGufrPubslZHPsoiMBkWn3AB4JGGg\nDNsrwAlmxYPHvIqO9865nG1AutFPOGQLaGTZdWVMbAlkKrePmgnIyn6/zfrF\nMbLEKkomsZjmPL9yp4EZ+BTsRc+TiwjeiIwinOwVm2Km9WnNa1mpBspA9boJ\nzlLee4q4AeSvSSHi/8evBzXIObqreatDYue0E/G3ummZ5BQdksWQWQP9bszt\nzQqk\r\n=Pi6o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8D0o3J7ixDSyDqWIisBire45iIxEmYrAnZme2lgjCpQIhAMvFqnKonjQEGgSrKY5TksL01A/SF5uUoLnWwdzuPbmi"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.147_1597825586843_0.716774830549781"},"_hasShrinkwrap":false},"1.1.0-alpha.148":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.148","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5215c22c2f8646f81173f8d48ceea41322414d25","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.148","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-YPibqxmtp0V4r07ctbARS16f/U+q5tDtwK73eL9/rGw6VbdQj9BSknp9wt18hAdws6uOTgbsfMa2A1iKE7FU9Q==","shasum":"dc5b55d123a09fc4a5670876ba436b010a098a3d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.148.tgz","fileCount":200,"unpackedSize":5613794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPdGaCRA9TVsSAnZWagAANQoP/3IMZ+i7RsF6rO9btdkH\n/4MWQJrKBuKDK1PcVejzT8XAX1NBwrss7xCOF8i1X+ji7P0KYM3MHs4tfIbS\n2riAWVYYwDRfZ45L2R5HxNIQJvSGkcbLbMV8WU3eRXVN2Z0bYBu1jdgWnnO+\nZmjgLEH+ysCvnyvm1N3bpCSI82qGUCqvAGysS5Iifj6qzclzCMM4DE/4qItM\nepj/gFfHvwlS1xHf3r117gnq0S7ipuNj44CLR11kwxMs7+64QYshrZ9R65fv\nzHoI25gGSaiPQPBdiYBwecmweO5vdVssw2YVxr0sShWxrBrNR/KZUbc37xoe\n6VmvfEkS3ySOvyWQaHadc54nTI3v8UJSiWp30sok1Dwf87c3zElS5MaHv0lr\nUWnZl9lqjOWhMpkvPkJCo3PvVNA4Pg2TMwYwcWrOQwKoJ/xEjXxzJRpi6als\nvXtv+XGYQwWF2SnsSheM64YRG1l5+tt6sy2VmArX2b/B3MVjEMtD+fRaErw9\n2+WSW3KRdgjl+JSMSMAT+tPRWkZgFUdK8ept5avVC5rHBtacnWyuvjt/WTcW\nf25imhN9lgyXh/+pLc/KtFn9ymm+eOYo2EKq0DeUu5dz57ZEIq7xWFGp7mwT\nziXfCMLUuZKHUloL9a5xrMk3A+UM8R9PiHnCEqfjbOsobcj0fSVWjbVmDh6C\nCiem\r\n=CsNh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcCWPkVAU7OVrq5pCGMjjWzrbFiCjqBd07HQwMuJkcHwIgS7tFcXgT2LUPmzhGwOtvxMEa8uswJha8AtCQXP2qvkY="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.148_1597886873239_0.5311246370934721"},"_hasShrinkwrap":false},"1.1.0-alpha.149":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.149","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6228465aaa78d6d9ab58331e69a2a45853e1d891","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.149","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-KLPL/1GaxxFmFYJ1ANl44Y35jKo7FAxFvw4IHk1I/+yKozXFG7gZBKq8cY1dRk2ltleaTOVDzymEh00CwinreQ==","shasum":"4c6b38cec2900dc4a459a081caebb2beb053ac76","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.149.tgz","fileCount":200,"unpackedSize":5613965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPmbkCRA9TVsSAnZWagAABEYP/3Q9AagKLA7Jbc5gJde2\nUmWJDNNXSxtzZ4FhmZeEXYkS5zvHRfaYEO702ZcfSBA5xfcqPi7KnlgMEdDF\nIkNwM41lbLhqd7AqRE4SeQ81hvoHjnzLvz33gLZ3UjAR7b+wcUSEWZsKrGA+\naiCao7wzJIE8L2tX++SuiDxqixKrI8bc+au2dKGPnDXzkY6OVgUAbSyr5bA2\nKPi3O0D/m1vkElySVk75FiAAziQzZi3akRPBBtD9k2SGel44znVKD7htm2lO\n3sk6CaX0MyeXsBS1ARbtkRF/bmhj/expBlU9btR19pnn2v8LZFCdbuGkmkie\nm5eO7kmkiN9sR2PggQMIZ6AQWdM2fIMkFZKBrgX5Y6KvpOtlSdItMYED0UGD\nYioYtI0fgYrRTOPcTCebgsjt6tBwDJsYk9FZioqbAJRVjGTox/RFBOnjP6ri\nC6DWnsIeWy7E8leAncv+T3HX226H31nIiYKdpHq4QQGnluGDwYJSI3GnKgyo\naLKaMRe6Dwi3HTpN+fdJhUzRtlUZ6WkIcRCUiM0PZ4jb7wmOT1P1hE+K0KbW\nno1CMPovdC2UdwQd4VbY/76Twwv2JDYh9TemP0qz0v4TqI3G6teDn/FR/kbi\nNIVv3wcA8jSCDySGZhCtPKGe8PrzwnZKom3Sml7K3vTqMnAh7KmdfOBF+gQ2\nbwzR\r\n=72dy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAuOv6g+Otw8ear3//XIkD9Qn0cWd6I/keb93CkQraAvAiEA2xWSNrCxEey68db1EYxF/49DtGvYZb1Fb3bwN0vaCmI="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.149_1597925091285_0.829348227148736"},"_hasShrinkwrap":false},"1.1.0-alpha.150":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.150","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e91f4be3a0c0d2c76b9337595c7a5698bd51d5db","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.150","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Uvy/Hrfpe+pt6C04JWQk5Fd/mHsRRZUFprMN7ZgrWMDNiVPTiNKuJHjoVszPWnE8jcKtf5+/jmpch+kQ91KWCQ==","shasum":"4c8efe6f872df9cf0606cce1fed54ccbf854481a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.150.tgz","fileCount":200,"unpackedSize":5623439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP4JdCRA9TVsSAnZWagAACJIP/iLF/iQRDfmAoN6iTLZa\n+caayLymyus+D+ew8OoL3cT7l7R+xT8se83q3cMoBEU+0K5foMyVcF3Jyi4C\noReLot9wXpnmoVI2VH0vthr+XlRBjPrsFj97rXAwW+zhnMKaJQOC/ZDYxgOs\n1Vqjozpi/hmSYsDEIPjOtkxD0DCkMxEVcK0XJj2lp6CW0vAGeHLpPaP0XI7x\nD2ypozIFj+NWp7/dT8LldytsATC3/tibGfesV++hWpfrx+/TxWYEnMA8nK/Z\nQSBTuqKpqk4iwuayYUpAedxo7mzf3XFHcYkT5b2288YxS2+XFZ5KOpUnzty0\nG62443Ai/AQ45YHTfL7sHZ1N6JxDQHq1Zi1KrvbE3OcpgHl8RuXffLvNjhPS\nCHbaziR2UUBTKrHmrDSMLvA7MFZWjOL5zOBErcrBUCzFfF2SStAUDGs5yOeW\neWdk3MEu5+JyoNCJE7OilzXGCmjeKEiRAuTaNLyKwIIs2LKstn07z/fXH9Lz\npaUGhtWszWsDxJ15/ABuvTy+a3u/64jBP2IH/iU6ygTXk3TqPbWnl0Dc7cQr\n9evBXYOhLl5EAYdc1b74FGfaT3PzJSgO80qn+BPRJhLQRfwLasADq6xOC3Wd\nu2/2+xTVJNABwPGPtOdmhDhwQAnX+oyqVOv19OCYzXvDpPG4jKlLb3bmmO7d\nbQy3\r\n=MQZC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2sHX0/deeJp47+aWhSmTs+Wt8HIW6SU4mZVzckFRS9AIgPmZkMl16S2fQdFzrCMphuEf9V9MgtAJaDHQZc1/aErg="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.150_1597997660703_0.5592941347572378"},"_hasShrinkwrap":false},"1.1.0-alpha.151":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.151","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e5b72434ccd8268f12042c66bd5e03f4df6fab4f","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.151","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-4yFMHPvyBgE6+FsDYUJd8mMmgZn9vNoYR8jeNXfxDR9LjX7DsgG2V75P1L/jeZBqLA7ADBEihFMmw3MtmvdjCA==","shasum":"d6e444f6c62b34d2a33b825a425663583a2da6ac","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.151.tgz","fileCount":200,"unpackedSize":5632186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRjyPCRA9TVsSAnZWagAAEREP/iwdiwM7NjY+3xlk+6Eh\nbty+hMPvz5pKv7o1sJqK4sLsHrxV1Z8P4OhEPiu3ekYxHhYrdqK8DyvBg+dS\n0KOrVE7TQXzWl/9tXF7C8soFd9KFMa7d3bHi0IcnXJii66/3DRhWIdOpPcKT\nIYXHp6npgRfBnefX0zqTIbHRC21WzgL1rjk9Gbb9QX5mxtNQKSFYweLJVmiB\nu3dVBJ6NlHBzaFexW3gqJ7tRbAGcIrBL5i0SXDg+3Vmc8oTgcxlXkTRIUrmF\npGWqP7y6VrtplGoc23bNfPbDw7sFK0pp+5nEEYv2qrFdtOC20BNhtY1oImWn\n5wy7nZy7hLfxORRCTOuV/JCXVNFw8GoDikphDNzYiCjcZpvYh72lPrCuoJaV\nWHqQ/fKe5DXpi3CSFABy4rhuZsDWPbzBJNg1N50Gz3kHrOorx+WpOqJMr7x/\nM+diH8tFmUrJS9d1oH5GuzFSBkyFx70TBt8zaZtuMZkHmwEwNsyZfS9O5eD+\nmvZw2BS4ka+JEtU/vd4nMT1r90Wvciq5J8DV5HQE3Gl8Xv8ygsFNjXmzy+J5\np+vZjYzZ/BUrUcfqFVI6knXaW4TH04Rr/iNRDtmqX2LLOTt7Nd90rRhCskPA\nZmd9PTW2Sn6CAwi+2YbVMI/qy1x9Pkof7wX1S0n9yoQdAJWMaNoDtX/Wy1fM\nYjwC\r\n=Kyos\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCz8nLK9sg8dwBXjd1KeJppo7v6RUomO8flezO7eK6HPgIgVzVdF7pHr+bQ8P8cONGlo366sLr4ySv6f2X0f0WC08k="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.151_1598438542525_0.8405040046982819"},"_hasShrinkwrap":false},"1.1.0-alpha.152":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.152","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e1e83dc68838fc7ab5c08bc893fffc73512c293c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.152","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-4ZNIBK9UJZD25ZV9LrU7pZqnWc5c/KpEuZxpa9yt/aDntq05kNc1IClSXzzCP9JVK1Hct4U8lmjflKyHmEkffw==","shasum":"0280430e7b4800dd7f2959523c16b0065eff7509","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.152.tgz","fileCount":200,"unpackedSize":5637010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9UhCRA9TVsSAnZWagAALT0P/0aK1XmbnQ0nt7g/J7kH\nA41RTDRDSMyy35MyBLl7O8qROXlEj3dYqr4E+rhwYnMULRu+SuVNCqjWd9mA\n4SABOp2xv0NYciAKAhAfxYK4wP8KJeqCut/EtWM+mzym5d/wFOb/B5L8jVT2\nq/eEQVXLZOx3kwig/OxX7lDj2O/T62rp8quWtqJp3Vc6p8jwqQMnT08H7TK8\npsBz81fjg6KsOd19IqWwI0MUonlHQw+y5tLq8x68PEj3pjLP3nkaGSzI9J6Y\nT8pezjNblJTSPoGjPf9aWh+sD7r/j+azdziGL9VcmuLYyjySWyy1BAKLHaXH\nZfIbcnlbf61rEW5oqChyWHhLXfKAkqTYqneO0huEPiyCTC4In2DWeYljEzDJ\nU5n5MZjGhr8l1AERX0frYICFO8OmntdlfuFqrXDcYQpZfuuKdQVWm1lP6e33\n2i40A7Hqz5QcEdWY2q0Jx8hUv3gz/3dyG/KvLRMnYMbaPimVlbG1h8Cg0oUZ\nluzOJ7l4nhs/l2c7mv1p9AAuCeAR3Usv6bcfjXn54dSZIXfGX217QK2lRvR/\naNgz8rZxiZh2enPuP1OogHnaAsLEytqbY8NVdfCoU1ihgxjphqPREzStEvXD\nqIeaqNbTaltrBhQ09TsWW7Fn+mypmwZVgl9Kf/rAoBvOn510i4n1U1XSzAwa\nbOKg\r\n=0y0H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+xhR4w7CT0pF1yA/E0TjqN9nWAJTeGXmyONdAGeRMwQIgEI9EO0U6BK6IveiB0Fu31ce0RC1TJzv6JVaSJtPGiJY="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.152_1598543137071_0.0008973591005061454"},"_hasShrinkwrap":false},"1.1.0-alpha.153":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.153","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"4031e49a46c4e2f35708cd6d5f1948593b72e79c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.153","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-X84VUrYuQAxWXq1RkxMMWPNsp6lF9otr5QQfh958fnGNz0hRNA+Pe7V/ht9kfvb/ok+/FW+RptUB/vQkR95Wiw==","shasum":"bf48e1cb5733a6d69f2f21d60a34aae9784e7af3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.153.tgz","fileCount":203,"unpackedSize":5641447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSN0LCRA9TVsSAnZWagAA9YgP/RN2QUBlU26UYrxwP3Cz\n6HP8lk9/RpA16f8orhUmqjOnwinG8FmE/d7zKRg06j7IJicbviH6LEHG6tBu\nlMB57oNIktRK0TyAwIThn8K2HzUWPIIpAayAqVyzyBssCF2yueU+g7A1EBVk\nTUjlBGckeu5Nu1oiXKo7KUPU+OEJCZPjY+dpJgaGPEBne253yW8x1rt9DTAN\n6H6pXg34nY7AYJC4XQCQBUE24Xvd/+2NkkU2is74hTQJjF312dExuXBSHZOn\ng/uMjfMa/nW3h/+LXv+l7K9+oKw76HCtu5nJUgWu0EINAKU6UyeLWhrWte0v\nyqbw1LDw351BAp7M0OuM+m3A1ZgzMD2VFDgcVXhofBTvJUTYfbYGLfWn01LS\nYs6Lqalf+mbxtzN7TwXxnbIERfCYwzTCculgYPCGxR3t90bmAl2yuXh5e0g4\nAaIBYwG4pZBjWThNbQNPKF63UkY4wOKRZfkfqSN36LWtx05sc43fFPVLgPXn\nXOzA2gjeTIKmRBq4bMApkF+vwRgiv136J6IDSn5bTFAhOtCby4gUjrv7T/wi\n6LYtm19hRvZ3w9AnICH7KlLsyjdkJUB7Ko7INqoDI916hgbGbqxcBCPXpxvy\nC1qLXemwowoM8phlKy+kVm4j80OKQo4FcbhWcPZiN17RB+R+yWzoRK7swX30\nSaOz\r\n=JyvZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELqlwPLxBeV5FO36sBQ/uBMZIPir4IirS4XQ5arUZMIAiBSw4aegIcRhXV0AoGHW8G9hcq2CdXPPMUerEUINJbzyA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.153_1598610699106_0.23525637441002"},"_hasShrinkwrap":false},"1.1.0-alpha.154":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.154","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8c8f53056f243f1b3accacca02ae9ddf39ece856","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.154","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-8g/IoYQhTmAWeRjwFZFlyGrFMl3GXyYIngEsw5Gms/G58b2dnt7yDCz3wPnxbG4KZG7i3FC919fTBQlPS6QE9A==","shasum":"a19068dd621c8941e517fe66cdb57a18994066df","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.154.tgz","fileCount":203,"unpackedSize":5642360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTJrECRA9TVsSAnZWagAAYe4P/1hN2sSGQdTyJXiXQF1K\n+EmTfqu/lHtsCUY1M0DfE/Tdl5PpLoWoKNhONBMYm3Js/WceOVutul5uQJuU\nUSOWEOgsWw88V3MHiYnOYr+OEfu85VA9CXgeLqM/eQbCLE0RH4uU8CbplMdp\nQOYpVIv6A5ZhR70OZ0XAi9G9FkERBts+vrRKfd7tO9/Oqg94P3zoUa8MU9DC\nA7h5dRvBVZtHuam6OBUl5Aumgr3xV5FHj2qzfsMSKgY/XCpG/r5dy3Qq+2ok\n8cb2r+L/aoPARM4UHaGN6HxlS6Y3jcCvQaLS4zAFo+OyujuQmbiIMYkl5x2k\ncQqAbORRpa3AIMeHjiGdkIGl2OubXpp05zXFCA8uocmJXeoPwhDewcT/ZGRc\nCbJqZ9lFgNLNQ28GE7FY4IgdF9zReeGYHiVBullCFydITZr2oKYIIKdhWLWe\ndZXpT655O0iVh22cGExVamvLcrEItXzecfE2BG+kvZDT3d9sxVIoEVT9Pz7t\n60Sg8l4CqqHZNTAEUMcW1pClnduOm2qqBt5XonZs0k9CEBA5b573Su9OyJxM\n3qipiKg/8jRXiGhKD8HVmDL/+FdH6U5orB1b5dwuuyAIIj5d9fdAQDb6Layx\nME/wP1e3iHRWLBVrtqt1qW6tO7HKp87zFGpXSWSsu/aoS8/OO2uN/QXaSkwR\nVQnB\r\n=GTiO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHn4k/wH594lpXQpcq/zKEWhGg2k5CWw3zGy7DghZYzTAiBtvMVAtZ1N2Lj0PC2Im9e0G5WDXKbcnJdQW/N6/znybA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.154_1598855876022_0.6841640211389715"},"_hasShrinkwrap":false},"1.1.0-alpha.155":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.155","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"9b33fc97ac3d8f4e091c27ab410b821a028f2e5d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.155","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-OSLLGSJ0yRNfmpQkuXW1F225/I+x4dOUm+QJ2W+OaUHS3wUEAQHnu0IUHjO9cjml4+qEPei9zcBMce82jVBYdw==","shasum":"9a6f4f4d9ee9b02b7430fc15ae0a1b05a5c56fc2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.155.tgz","fileCount":203,"unpackedSize":5639552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTOkICRA9TVsSAnZWagAAQTgP/3y9Y25TL9VcRR7uBBoa\nDdr9qU/UYs4ar8uw1kmlb0zNhX1/sT22yVNkbNERZf1y1u7ZPBDRVd5i1Rb+\nHy4XPQJgo6dYs52cjyWwET/3r9YVvcT0r6LL6PMTXYBM/0vL+f85FUU9dmVo\n4GCF1qmZcrjH60uG4qo3tGIlBYkj+PcA/vndp4ZsMVBdJSIY+wrFznv+P93J\nCoCgZH3+sk4yxQLgCsNgmWAUm9wkVYSgSri7bVmEh3V7hqsEUdtcuJeEUjGy\ns5hOI8VY1f0w14s3+gD2/XK0wRkB/1BG3PJ/18Nrgbnos23SQ7tpBV1q/GW/\nlVm2hLQWTtoHwkXVpmyzNlX8lDyNKln4z/jcVPVN9LRWMntwYCPCu+hNhy9v\nXMu3PJBbt8JDIyIIK8r8mrzUKb8GraLBkQ3hNuyaYCgwXlXt5PgfyFHYuQGF\nTkrIKAPUXSBhIkmTm1afu+35/GiRmUsRgRGibKnvtv9/p5jnOu1/sxe1DzaO\nyVaKnyOxQnmenGRDk201TTNT8KY1gJNwpV8Wt/ajiGXjtbwiD0BD2wgcTG56\nOwsh33ew4XYXiemHYMc9wVQRJWua+WaMEsohC4drtvUFSHr8XuTUdgVIQQe3\n9F5UKQqZIm7uCVWvGH5PVvFYepfGsCgBH52G5obaaDDZkdIVA+SQI0TOWD02\neHyC\r\n=qaQq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7Cs6J58l1yTVejVD3cXDhk2oo8KTSWnqrnDikLhXhfAiAvVxuk49cA8OpMdGC2XNrltBkIe135Uo3WwNGcOuAaqg=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.155_1598875911566_0.5125549375671097"},"_hasShrinkwrap":false},"1.1.0-alpha.156":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.156","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"05dfa5b7d4163dfdc642b237e2874d9018859afb","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.156","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BGHC65A1nYknVzBGPNK4pNxnEb+nx8A5PU/I3LDG5h4Y0SXmBlBl8O8NPrFzxtk962SBJ8VYS+hG46H9IbvIPg==","shasum":"67e6bfa59676dab04d2fbd866e7b21d6370f1d20","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.156.tgz","fileCount":203,"unpackedSize":5651917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTdcICRA9TVsSAnZWagAAEi0P/2rWK7mewd5R0BaLNsRn\n652aBfaxoqSnlQLGHUIBQp7RNI3ZXJxXq/QC+g0AQvsSE9KvZju/tNR901EC\nJUHxiZUHlm3d04lr/TGyhTtFuY/sZI68IcOhAwdEFCgwWPsgNZBLj0HmUzCY\nJvPDJSPnrCxfNtuPrB4TrRgHMaHruYmd6pI7fDjfS1P8shz39On/wwHSBt7l\n1Rux4uZzHhql+0xNlh8SqSzcoCr+K/4YtsyI2WONiKmnmaoB4bc8vXAocZHu\nVIYvjzjMsx2jkkJaY+kXjDZUerw2j2pBSXNZHPC2QfksDlCXafLdsSlNjU+I\nJ3vwcUnenT0Un7vBIJZOKoHdRkAiF95k0g49Zzk9rXthzdwFTLCLHGeien5l\n9U67cN5qRUWiLEmIK2MnEIKemkm84RjNOkw4Y6/QBDpj+zO/PJmXtZGDeoN6\nLUFWHAs0782b59t4GSFXFnG1GIcpcLcuz3KTbXewev8HstLge6mEVBjD7GV1\nUWIUQ9WrobGwsXktYqXXmWuBjMSDb0ep7AA8/gSil+vJ7awTuNFQFmxTTxL/\neDXjCobIvb8z5JkpfyqJqqs8L1w9R/9m8UZ9Letp+sewUXBIXDgJBlHiNtnu\nS+mVwxHutQRWUqFSgQqOaOAbjFadh/5rt8CzL33Tr1fehZ1uNgi1cxhVXO9r\nuM6L\r\n=oojt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9vk1wZsG8EVG7hNYdOE9baSGtSBzUP/Ch19OqWzJwNAiAeywB+NVNpril/f2flet6Vj9WvsAGpk+dS+EFoBfudyA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.156_1598936837198_0.7720174565836739"},"_hasShrinkwrap":false},"1.1.0-alpha.157":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.157","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8e451a60ac39926c115550464b010951b68c69e3","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.157","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-pL9zWX9fPxS2WJnBCf5iWdQQaNXfqb61DYRbsSE9huhFSK2yzpuldyiEjZu1hHcMj8LTZBceclHFtlmsu+ASOg==","shasum":"f8b3e8154fb49a1024cb791327558af763ed15bb","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.157.tgz","fileCount":203,"unpackedSize":5651992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTgbuCRA9TVsSAnZWagAAuJ4P/1Vjb+7CUPvoEX1XDfJs\nM/AEs7Mh5txhBdsMYdKqbEmodiusgcc4hGVr8OlPoLLqOi79uIVyBw+i70b3\nAiMGUkb6Az1oW2P23i2RESMAEzc+4G4DJr09gFb92SL2u15qGNLYhVhF8j2I\nqpu5ulfbk97mhGt8JUMN9VAww/fSbLjm+H0DBRKuNTU7P8E1qYphkfA7Q9oN\n2zx2fQdaBUUtuR5fjvZ7Q+aVxcXXtdfEsP4qPsUlY36ZmsY8Apfs0s4G0eua\nOz1rVglBliMUlEfOYB9wqPyuY+7XBnBS+BEFm8Wta8Sd1X8qsJviq4tSeG+b\nmKczf5RAcXiGP+ZAbpPinrATa0LO8etFBvfo6V2m+y0KqUea+dNuzNTHxdf3\nRxbYkNHwKlNv+oPDJNw3LjQoIqWg0vvaAjzDFdGz6pWVNlmNrXAjdOnbHcpX\n3T0P9+GqiesLnE1KXScH9HyoUHTB9nYlh5MZ7HFtCySj+++/qlICVHoNxOYA\nPldisWNnG3vrpUwyZAFqp8Qzo2tppHSWoI6aDWhW02EkRETxL3Iyi0rgGao1\nZBcgkgSr83DrX75o7jv5daNH+lCEXqshbxf/FSdq6mRiq/FCQ9Fv/90Wcv8W\nknhke+nT9Mu6uoH1ee10AD3tSg2NaXqiKV6OJ8HA7dEf4nKpWLRIpDU5pViy\nHcu9\r\n=1KcA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDphkrIgw5qw9eYSLtQ24qWaIAj6zxRKM9Lr5zNMQBMAiAbm6KmiAYmzLmR1HJYoaB2h/aWocZZR8wD81YMns9YyQ=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.157_1598949101159_0.8866883419460618"},"_hasShrinkwrap":false},"1.1.0-alpha.158":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.158","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"3b2ea92d23e635df0d2f88b3d3af177f6e2129df","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.158","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-LXvyQ3x6rlsGfq9rh6qv7eHUjfzs999U9zDTIP4xoye+BIgXGjQx488MTqGyMzHda9YDRcHmA16sb0K0hgWxXw==","shasum":"705937cd4d72419fdfb81c9bb462ff330aaac7a3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.158.tgz","fileCount":203,"unpackedSize":5675366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfThECCRA9TVsSAnZWagAAd14P/j3jVoSvQl0neL+3ODa1\nTFSt25f3SVVUG1hpQX/KrQEPytUtk8/8pswl7nae7n8tawSe8uMX5In4IWGk\nQj5SAE0jMtIUIHsZGF8LXpBE5ewRA8YVgou/GFikKqpOsxMKIexmncVmsgPa\n5C4UjwAiVNeVdobEeiJd2JPQ39mZZ3IgotAaqCRoSxit7Fi2yFffsJRTat/f\n8IfN30kJn/iuELa2o88uvU+1wfbPv4JIfRMw6ytitvRSk9pu2xJnfOTgdAIu\n3tmpFrURKAuyIXg3PjBlYF4W69dHjx+e6KnU6pvDHrPLfExxcYrioW1RyxZW\ne+lqqecoGbPb9Z2oLoS/PDItFb9s012VH/bHwXrat5BWgBzEyjEEF+OsI6p7\ndS/wN7Zec5NoEF7g4bcr9ht0wITL4HW3nhVsDCezfkwJbsWhZu5amXn1H21X\nfRvbbkg+dcYpE84kmEuSrtGFZ1OUMsAituMAlXOoMsFTH9BLQ41zERlIBuMS\n0jDRT0pVw0+4D9mNUfOroVHHTeyi42eHJoQRPQf+5M/QmvwTOOsTGCfTKc0u\n0nvx5bV/9ix2Limob6ydFBE2g2yZb46+GwAVQ6p2mu0MDHh2iqIdfxtaFekX\nxCEsxClDgn4m1eNTG94MJS5Zeewe9Wt2tHzuj9kT2iRWBALe9UVH/G3cys8o\nq3AO\r\n=blOc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpK6zpVgVl8nhGZPeegIwE5xnJC24WR86LEP/gpEGXkgIhAMR4Y3IMBQXgkqblRKAT+LD+JUvshI6WYIIpRHOHV2O6"}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.158_1598951681723_0.05368576601357322"},"_hasShrinkwrap":false},"1.1.0-alpha.159":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.159","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e59f888d022adda8a03ac6d5d133ae45b52240e5","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.159","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-SR1eHgJGK7T/oa9U61N0PT2uRZALTBh943jO6Qf0LniUFEz82oGa57jy5VILwfTk03sOBkYXu853SFN0MRXNOQ==","shasum":"4eee51aa8f24de898bc8a16d33d878b617bb0253","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.159.tgz","fileCount":203,"unpackedSize":5691702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfT2RFCRA9TVsSAnZWagAAmn0P/R0+g7QHS+diObRuVOY6\nDplaOdHt9xyCA5fHMOshWN/WTK3fToDGVMSrvBTHAEnnllEFiiCZ/KPxGitx\ne+ryCwagVxnO1kyHRu1urSkvdNLGW0RM2hjoRcCEh0wG9YIBvSGqA5l+dMD4\nLX32FEJK4YZgHVibTS6eDuWGCihP2YI9hzFDr6HYaFyOTQFtfM/6m2N01TeN\n943LSkYmKTLbi/rTRNhgW78sMQh9NkwX5NUu3BqLLtfsfLepnvzVfs8ha01s\nWw7InYnwnud71mwoWZW90FNKW+xLfo0eLjuZXjG1/jsKE81lHN6EatCxjCM2\nUqcK0k1MC8RNe7xsNkkCPxtP7gVqeUVsjbROJaTJR2sVpkzdDHgpDpZ471SY\nMfT5x2dwKxdMlVNomBA2Ag+DKJkYydetQqhGVuwqvYcDPzTIKjeYvDBrCI7J\nxGc5Q81RS4jcYy9z984d391BujlROQjh8y1EVZ0kfjTibNABSqJ4eL0TFYgI\nuGMO93zyJveuX83deeorXm1K1oHR//JPq7h6id4iVdupnQDDOWFdUWS2zD3U\nlE/qNlJ6MvvwwP45dQOTRLDgMzbffHDBWcWRYtYe2loPVzia9EnMvrtfhUvS\nVzEl969GLv6ryS52WQmf5m3WmoYa3vItPM9Z+DJoALii0e7nGKgJFc0sO2W5\no6v+\r\n=bjYP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqLvaDxJAZ6iaObJSUKwq+51SE0C9dvuafUAwQSVhwWAiEAw4hJhmyLrxmqyjMn895mODDcaXjP3+jAgGhZ2czZeXw="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.159_1599038532329_0.06471837624145471"},"_hasShrinkwrap":false},"1.1.0-alpha.160":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.160","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"abaae7de38183b874eccb053bd66a259eaa35e95","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.160","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-2hWA6qVnlx+IC6UkVyi/fOivz/CjgnvnsTEIhuN/+SdbnBPpD/9Wp9jyCGb7PWB/zJV3IJaFAUI2s1Humv86fQ==","shasum":"baf92d9e892c6e61cf1b9a3cdfe5b720412328e6","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.160.tgz","fileCount":202,"unpackedSize":5677710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUIKRCRA9TVsSAnZWagAAHxQP/1IJBJrarw+8CXGjkcCx\ng/l2KAQkDRmWNl3EFpEgx82uhoE3ebtzzybZTWoo++9NLE5mZUGiH2vyerAA\nobZRNaXy9GbrKdtJA70d7ic0V1fLn2tZ5JbKmwpJBVGs6m0SBxecZzuuEIlQ\nMzGMaTjqcC3lTxdn+9wqkWeR83h54Ye4O54g8Odc4AsRl/tJY+aYu/cicvP/\nAtj0c/T+G5hDcDzCq7OG36m7uABhxd7acCy4qnXH42tFVVlMHDGbtkHIadLq\n4R6pk6scTEUTF659oC8fmcEfTk9n24L/tvTFs9usxaMrBMvQ9woNLmq37rBO\nlHV1AkGpiXYZ99YnNxBBw7yFcmP1QU5vCJe/ZaxWxIp4Fcvv5rIyhoxZpHFL\nbBrmYRc+ok7751TsOak/YGFcKubyVtBoCilzIGrL7qXrOPRkGC2IqJkgPT2G\nWDYzih5PhxUWgM4DDyy5yQ2cU8flq9KqFmMaCToWDP3X0COvrILwM8Wb1hZS\n4sIvJU6+aywTwjbxpLzQK5ti8ctxyJmh3hBjyBflyCr3m6GK6aTHHyzzwsbe\nNgxcK3PMHLJ7CwKkGgaVoMUE0Q44DR827lQfGoX7xvejuezSy6kH4/ZmOPvc\nH5OdHsK4x0Q5bXoPULxiB/eA8jxT2nZaXMpTP9KP0a8X5S8slWrde7sqOGxr\naSuC\r\n=m8g6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYqTUroFfzr8KbqrBG11NNsl6OBOKn/XcPw9ykVQKTxAiAYYIJy6QGh7MaA3Y6K8q1ymbypdnjuFKzbsdIkF7mNlA=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.160_1599111824903_0.8817675298464256"},"_hasShrinkwrap":false},"1.1.0-alpha.161":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.161","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"0e67353683595d0acf08b9720d36237511ad4ea3","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.161","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-83IwK6Ucx/aJAl56dLd01Mw14DBsK2SAPeAzXMhTV6I+Zj2z+Ae3OJXPNXzmsJdh/V4+69g7ARwEMLGjEjpPiw==","shasum":"a04aa868f61532e0b06b6173e7fcf9c942c52bc2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.161.tgz","fileCount":205,"unpackedSize":5675705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUJmDCRA9TVsSAnZWagAAWhIP/1OzqW76yy4uTAeB94Ee\nV8TehEG/oJrNBPcBDN8QAarfPfIPx7kosn4TjDXKF6ezVf5NcXKMyuFhYxZv\nHNHv/r2/QEKN0HetrIDPvxiZ2qteVLVb0eE1K3ckNkdgPLdS3tGp1r62P3AH\nLQ65H1Ayho81qcM1I2h3Xcrm4dqr5OZOX2BpH4jYjHubdcKvOP4KC370jE9Z\n0W7TbLdd3+lt1owS5ElFkd+y6LDqdkMyAHe7Ai8TrmlK1k7/hGID/9atW3vq\n9xIPEno3U/LVRo/iWXcQCh5KNVSQSJbSaFWYzVJzANuQ07AlrzMD7MxGPziO\n1ENe/0dBKWIsOurbJcNgvHmFZt/k5Q1gskqcvP9ROVTfipW9KVoWVHsxBsKV\n2/hLsbAA5vXj7YIuVBb2I3SH1RtO5JgAednWIV04sGx8Y8QTbO5+Lr/v+tvr\n4n0olgbiQXim41Cg8gsyp49bISIohmk8tsJ23DjBODsnHIgeGYDJVn44N81k\nL/4QX0JkY/COS5DNOt8hWy4j+fpuxH/XW2MfWq2Ji30dvKJ3esu0CMojeSBx\neaOotPZSBXAaGh6PqhI8WEByj/gh1IdOKpej1ZHsCb1MyLEOq36mKkzuMAuW\naLu0+GrdvArGceg/1F9lXugcPISCsAEKiI0+aqT43N9dvHVq9Y6HbstsAt2j\nAWon\r\n=yax0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICozuFSLXfq7WlJOvUoMc+POvBcTJYeJdM1Jok/mJSsiAiBsQtvJEip375dwFMGSpYrP8UfZgxRXGSsekG4+tAICmw=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.161_1599117698546_0.319822993207612"},"_hasShrinkwrap":false},"1.1.0-alpha.162":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.162","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"70aa157ea62b5708487ba7bd355142ac16daa61f","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.162","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BU3ixFbFFK9xfBwgNuH/lq0tA84e8KY50cJLPrdzyLW8FLJoerhK+OSSdpnqY/Nchs/Hn03dmobhsvrbYWxReQ==","shasum":"fa35c00d34fc561d413282b44307947f16c9bbac","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.162.tgz","fileCount":205,"unpackedSize":5681111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPGTCRA9TVsSAnZWagAAnisP/j6AYd7euBqOS1iYSCbG\niqKRmK4OiynmZoeRWFNFVDY/fPBEM3gVON5PtKfiiat7NAVwDbAvecfFSe5Y\nlu/fA6taxf/sL6a+rnxKZrq0lX+ssS5OMt8pOAQTlE68lf3JslBGNFF011Bg\nx7gHUDoY7hBI5wJ6E/+BSopIQvqwIy7X6PZHL1YcV7h6sqWdMsOzjgMbCW3W\n1dzleo1VdEaEFtvzLwJ8XaViDKUH1AQ4DonNMNhE2C9DsXhU+tsJnePQjVFE\nPn0QCib4ZaEr1HmsQ7ma6Q/o3lPKE51eRtJqZeX1qgz2S7/BFukWw8B/MlQP\nJOI+uzZdvCLXShReav1zYAkp+ceGe/pVXhMPuRzXIVvtJW6BQrhgkokBYW3e\nT/Mllp97jKkYaLlZOG5ULeoeRs4RAAg/vOyOfOeAldsfRp8puVZqpYf5GmnB\nDGUgGljoQ5KZm0WTVmKIcAzknoPSmB4OLWpglZriACidYAC4+NI7tvCj1arq\nqpzrwom6BF9I5q06L/KJG90vRsUl+6KFZx/FfdAFCRFd1PS/fY6GYUgTLQUe\npXi2xUeZfXI1ci/G4dAJZSxN2w92FHM8T6YpvmJ0Xy5eHdWW2bCL8mRkLvLo\nTAbFa7ZftSmgeWUkQXRWrCE5ahvVmncYqkRdPWjoNG7RBVGIEe0S0DmfxJ19\nE3/M\r\n=JGjc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE5zZj7U8jqexB2zO4wLLNk8lded9ai+2J44KzXoxO0iAiEAseTJkKyklhl42asC3sFoph30Ev0Q61tXFPVO/Z+UDhQ="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.162_1599140242450_0.05748605702524223"},"_hasShrinkwrap":false},"1.1.0-alpha.163":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.163","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"62d661433ae6243dd5b699d0306a7516f65b2882","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.163","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-LyrHUNaIEOHxzdwkD9nX6Kn2wEk4aY+uOUPKskGSd3Bnb3wv2JlYWP97qMnVnXFcJ8rejfyHm/zZx/sUboE6mA==","shasum":"01317f3034ec03dc6c8551954168db6e8e54138f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.163.tgz","fileCount":207,"unpackedSize":5690623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUimDCRA9TVsSAnZWagAACVIP/iz4/XGgXMSCSgupOYoB\nP4iELtWWZDc5oPp7v8vKqJW/o/5E+ORP0w2Tx7iXXDBUX4s6yTtabnvLeSxa\nLQ9P2fDLKetU80UGWb7YgbcS+ZavVgDU3lnkuHM5nsSDgTiNuAY0Ifd0nY77\nngdr6imRbcWg0639ydpK++tyzYYNtSrIiWsuXRC/QTKdrAbLd/GtP8PbJair\n5wVvmobStKUR0r6lpfenhmIbE9B9nT8TmkZNyx+w3ff+ZW5MNvmC8mcBd155\nlojevjhoJZAXhlTPWAzp/55MXEJMOo6RsQ1kldAUWuKQoLwX2I1vGNYPlXz/\nb+7fpudnWf+3LQ/zlrQAtz8sD3hbxMxINy4QPxJ3ReNflW6MVPr/KY4HaS0i\nwpauAKduyKoA6/Hwrd3kvALW/ltYNTrhokIE+D2oWtay0aS3W4SS4hBZue0P\nMYJfAO8/LPwW8V/NIorbn9bEX524OaPK1lUdnyF8xTWEmmgy0eSNT8j4LAVV\nhGp45aOCDYBCRZOvCk2tGh9F3fp3M3keQPvdqxzn8cTAM5EDW+lbsuYcyW+h\nif6Jo5kTqPiBG6BBZaHhGCL9Qpsc2q8z5AeTtvMhRBfFQ6PdNPDQqd0PdTbg\nD44UfucwWoJZ1IHaWAdXg5buhbA+3WYFbOAfcNqkUoVk/fMPfsTfoOrNWdWk\ncqKj\r\n=4o5v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHBNJmywZEPIMgDpMWsLPALNob8soaSs0Ko+u9WNdYCeAiBa5WSBNSW25M2pao2mvqFHkCMMhHPOLxT5YYavqV3WAg=="}]},"maintainers":[{"email":"binance.chain.npm@gmail.com","name":"binance-chain-npm"},{"email":"xzjcool@live.com","name":"jasonxiexie"},{"email":"me@lukep.org","name":"notatestuser"},{"email":"me@rubenillodo.com","name":"rubenillodo"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.163_1599220096310_0.7674428760856384"},"_hasShrinkwrap":false},"1.1.0-alpha.164":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.164","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ef3f92b5a80bff9951871b666a992fd7763f94e6","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.164","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Qyt1gV8WKao7ZP/4UDo9l7U2pwiIad3quESo3xxw5KoOCnZa6xes63qTYphPJG2hBQvFrXcEVYpVJiPRsxe97g==","shasum":"824b34658a277412ce51d81cf338f56d3da17708","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.164.tgz","fileCount":211,"unpackedSize":5710841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHu4CRA9TVsSAnZWagAARgIP/ijyl32sGOjwRjgoUQ61\ndOLCDKCzmgbx0QN3CQzcV28nUyzzT9/P/p/OEcNwx46rH+37mxe5iafgz/Vc\nHb54cmzuTF445xrf/rP6oDnvkalMywuxmiRHqG07KU+OmNjNVCVnrxipI/aa\n0GFIlO0FbB/j0V48I07xPEzAERAdV0zBK6C+CugtlBxms/7veB9wgKFzojr8\nSHoEbEUEeEwuy3Mp2lklMWcGPcoM6sF+bjZOrI8nmOcVc/MJ9D5gnOns9WA9\np+sSblBu1AzGiXCnJqpZH6I4gHJ5C5ttZ58P24x7kKfjE44E594/oygis/Ma\naBDWeHiOQe9E40Y/3cUCD1dg7Pmo9LAvCs2BesRq89JeSLJQevY6TLNUAt8m\nrJMltPWUj3q8zou2G74RdLyS006FZbZeSymHij1csveYGl9fzY2OKpiAcf4/\nu3whiQMVM1ga/LMZr+ptzewqAa35dQONjkTS7c4KyxKKfFn4DpB36X/TzDFM\nAHw9xEJENiinL5lgeNlkfz9sicmKi1fu65y47kRFouYkjiSXFRjimSoeOhUd\n0Os9jHuTPBLWipHDcOo1AYop441+REIYSNXSSmHm0J6iJd6XsKOTl6s4Dtjf\ndcQVKKOqXjwFoSZ2nbwiw0l4OuJdG/Sh0TnxNQ5GJmsGIGiNmfHODvg5VEPm\nvZON\r\n=saZX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBbdQ3QUw9uVA0zHLZqxQuT8YGZbvyRXv9qVkhYjV61gIgP1OGiZ1ALq0tByAdeL663g07KxA86QULG/UQJdcFuS4="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.164_1599634359584_0.22224448724786505"},"_hasShrinkwrap":false},"1.1.0-alpha.165":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.165","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8f3d19e25573c24bc41e9bf415808a542c033d66","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.165","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-4EjPopSSQe5mlS3EwkV8q9fJN7VT7m/2i0wOzoKvqOGhUuRByvrhPkiilpTVHzwt6lQ/srqJIBSJbefCnLBCPg==","shasum":"3518b2aa27b9f38e8be10cc21f45fba2e9a4b6b4","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.165.tgz","fileCount":209,"unpackedSize":5727601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWqUWCRA9TVsSAnZWagAAbmoP/i+98HZLBcR0FOHk2gtJ\nTLxnPUHHCLSvO5GjHLCT03SXuomvRB7OWbmVRn2lyelxa87KO+FhxBsMatWE\nYjFME2Q1QkxwqoyFyXGbKPYuLdEhqwxOeIpnI8AOGPckopgfc9fVnZyGiZtA\ngJbZtA5CpsETT2Tqgpe/aaIMcs01s14q+NT6ymDe1fxBKbaAc/gyS1/cT+8b\npgh9NYNQAlksiMwsYU9eQgRoOuJIau5CiqnXBrtG6gOUZZ0zsN8j7W6LaYsf\nTp/yS8GGEB0/Q9+BGODMMJL+ZtDuP75ppZX+zDF0DbsmyTvEUXyLQ/FPslj4\n0sQbB7uAoxigwAYCU3H8NVNb9tclhCDN7/zQADJA+ulDu1tXBwNM387jnQIA\nXcyWHWn3reIGeGL+5sNIMCq8nUR29zn4zOm+eNN7AUMfWcXykb14+vyGuBrb\np6+oh7qvonrPo1fnuvYyl90DD7b4c/OMMJc8fVHi8Yz/oXNxr2nD9NUiccI3\nYOvXmyE0J/sihgAs/PdhY0XpeLltR9RDKM1o94PCudMUD1GMM1AeAgdL/g9O\nlRSpvJhonvesN/6S1LsEg+E5g4a2ARY4Kfd8x9dFiyG6yZaRgpZuDJ4Ac9YC\niBsN4Q0J7DLD3iHFjNc6fgN4cdeis25TNcf/7NX6ET6ZIH8N8YgEP+LijUa4\n+PYq\r\n=Fq/p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbseOgP7bsxcK6CabzJhKXMiE5dIdEwfDLJ9T9ZFOGsAiATXXwz154qs/F8ax4RhZwjAed7VmwAuE5T9S5Nkfdw6A=="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.165_1599776022308_0.4413735493957194"},"_hasShrinkwrap":false},"1.1.0-alpha.166":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.166","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"97b13bf4159ccd3238bfb20d6efd150931a808ce","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.166","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-CGB8h7HVvd0Gsg4TC5DNhlkB7hRxZqUvwsTtpqU15zeGwfRICCqhPVthwLgWNwc1eEWZAwTrWHSvW7tiWK0A2A==","shasum":"2123d28cec3b323376c796f2d6dd4fef174c5400","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.166.tgz","fileCount":209,"unpackedSize":5730790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW0G7CRA9TVsSAnZWagAAbNQP/i35HyW6MJFTlhEkGEXQ\nAye8mPnNWxq5iFkJUHjVDaibX9SxfqDTcjO0WcUT/w+eJxahvmvHYZMJ1sxP\n9zqxwtBC0wr5HgoPeNUaODNv+NajNzNz0QoHSoe8sRvHekAc8KnvspGZiZ16\nkni9HsryxyQrvkXMPPd61CVuCBFwUEBKLQGv2LiCkMVymhmO+PgNPQi1GFOU\nkw9bm44eE5LbX0K/jucWFC6JffZAi5RDhyriA1nQD4u9/VLUZ+/s09IaNBbU\nqFyXXsYErfC29jqi3f2ThSpnfe85njkDKRpkJ2yXL1Wnctf8oV51XvYRtXli\niQz3FMraJ2MhVeXnXGmp+hXdwoMoNMd1g2wSLwEfatnJFsBK3g7UDG+jjkFB\n67N0cYzl+fk9FpRyuLlErkR65jinamrDQPWYlQrgcIvtYFxcat2KY8/JY7WY\nZ3Hog/b34zjd4ZHA7PGI+hFARGoOb2vV6hOyfGawCyeDE3GfhgmQ64LMAOiT\n6tDrB/OX9PwCO7g3bIGffQbjq0W+N4ugLAxsSVHOI086sNvGEUl/FDwwbpb0\nu3x0kM6lnvdfXz0V3ISIvUP6w9wl6lLLOeQ2s1vuFEXKvnn0RiXT6b4Wx5mo\n8JCtYsKmsG5h9ThQ7tKwRj4n0n53RMfwXemtpJguXuHZLdyiIoCA4DM64Cf5\n+5Pe\r\n=bAcy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1zw7GgUm2KU/icNtK8P0uwvK3APfqlVgfL4j6a8e79AiBegfS86Kt4fofJjzEKtaUBAFCl2TnftucvNy41qHto1Q=="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.166_1599816122942_0.6901264533759139"},"_hasShrinkwrap":false},"1.1.0-alpha.167":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.167","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"58bb934362717c81859dacd76cf460e6b1fed868","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.167","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-KumKCFmUIzAqAjNYcS9oK55jjby9sr2Yz4BQzUnMxSUyO7ATjesI68Z92YiHd5mkltaKzj+ArwBedhVlwZPP7w==","shasum":"cfa0f910700be332be78d292a0392cd72962da68","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.167.tgz","fileCount":208,"unpackedSize":5732402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX0b0CRA9TVsSAnZWagAAAfQP/2M52F3h4S4b+4oVY8Kx\nnTAACoysu2x5Yn/tf6LJNebai38rRaRA62o2AAHxg1G7CDMoeJMYEmQgUvIU\n3fsblqC3ONq+/IrQ+kJU71sPLUDTF3tCLpsy+iG8sQoX5FXjCeClF2GZ29uC\nGnVaucT4MPKZc2+6G+ZVJ3uRpZC+Lzhoar0HPg/LwciBeoTfTC5eHDbljCzD\nxwzJE1Z1z2nDToPSVBDthWRvih3NECPevoDJCh856UoOjTlGtbQWrDPkwfpc\nkyoIk0+/RTCKO8RUV2896UGOf8BDh7oHHxnbJQ91gtkRjJa3YHwdsyH38A4B\nT0F7xpS5dJOo+Kj4GZGUG+OaJ4pFFytStYluInyQRJJ3eIA9hSvZh2h877Os\nTaOyzEzXBOX2Wt4F5keti3Wpbcr8ZRNWkF6BMDRU+TlkGcmqmecfbfKvXkyu\nw207COfoZsZDsiOjVqUM+PjWIajudda0qUyG/RfWebEn66flj4wezjFFcWz8\nnRlBcvxDfFTXxlKXokWJ0ZSD/qb2eBVJxCpEhLP6muskiSbzOtneJ8F3VrNo\ni3cFFIahzFaklWdLDo4RbarVHqwWxJlEGF4JTk+F5Rus6D3a3ZJfb1t60GZQ\niPeHjCb00vqCN2sZo+fHaYL6WPyn+0qxDJJArrfAJEiP9x00N+G0IfZ82xdO\nH67v\r\n=v2bk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCePZhpYApCRqQbJep3UAu3Rs2weR00DPYFas5yLHbvqQIgR9l4lWgpQVEGCOnKu+nVeFDz85sItlIJzuD63konch4="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.167_1600079603795_0.8137652918473173"},"_hasShrinkwrap":false},"1.1.0-alpha.168":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.168","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6c0f968c77dc0638a008b1825c121f10f31a050d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.168","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-8KNB1u3jgPntcMg5f7SQkbrCIQu+4gnpcU2cAQ8vGpnsLBQeeeeq/F+uXB5P9xgO6Il15oEjg0SQmvCXfrE/JQ==","shasum":"acdabb6cae8da07b66a04a32af4daa7cb4909cb9","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.168.tgz","fileCount":208,"unpackedSize":5742236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX0zpCRA9TVsSAnZWagAAvzsP/iL1tLlSG4DLWXukN1zU\nZM2ee+ehY9Alx4I1D/zRLqVn2dzwInNwbIRDwxh92BUx73BWBjPgG4tY4KXV\n0mDFrbHtNHHndCALvtv6uGkHEf0GPDbO/7pp8vR7200wQIqMdQF+NmXJRQK6\nLLcLDdFEMH1heH0l5CUOcc4tx70XcbduM33Fa3MBsRFMVlQXmHuZCx/DIFbM\n0YzPsoylhsWBgnnspJ6x8bWI/rxZ+6RxVbftW/NSifkwQXb9ehF1ezjqF0tP\n8ChMZ5gRj/S/6/pgCm94V9IA2tbHEN0zAnynXj/FHLP8xQb2L8DaYLWDEeEk\n3BmeHCriC4W4OwTgqWZAStwOL+EmPb4r4vPbNRCtpN9dsHwh9XsHrqHQJ06u\niv4pvCBJwG9dKXEutmOcpOOuXx1up0Ah0cg8HqHEaTPPKRPYVW4GGc3Q5W4k\n/E3JF6adUjeKrB9I5xNseEE4+12+8TkBpDrAZLm/yVLhqbcZJAeVhDJ7cVL1\nBg3ljR90jnhotF9vMblO9nPtM1Dc2vkGPLuChPQ3BqiMZaLYx39K9NtyD6jM\n2rrhvZ1Q2yiz2Ggf6rCE0GRpSRx7OidSRQYmgIRtwE4cnXQbzRDp0uqftSsc\nXcmu1ffKgYNjP6Jd7qW8XRqRCASMHZoiHh/WJNpQtECcddIPZPn9FDrwzA/B\nX0Q1\r\n=2bxn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAk4L4oY4stc0mCRd5xQ5EJU9jXV84WxfGClW5ENYgygIhAPi0b1NZs5pyUVHmh81CkH2/8EYnXfrpuNmnERChSMFc"}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.168_1600081129002_0.31099604763716227"},"_hasShrinkwrap":false},"1.1.0-alpha.169":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.169","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1b5d5d48b1c3f2a7e9642870696985b11586cb96","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.169","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-f4v1afDvXVW81E4tcpvp/tZmhpfx/tuZl4tBI7/Q8kMCvT0utEwiUysQEa5wadMgw2NF/FJRq6w9NBcJ7eYMoA==","shasum":"6c28252863c99ea496d3863ce0b7f498ec1c2e55","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.169.tgz","fileCount":208,"unpackedSize":5750515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYGOUCRA9TVsSAnZWagAABfYQAJ0CabVbwGxi9NOODxUZ\ndos73gdLwS+xrASOIlHwm9sfxheq5qIV1/yTMYJYdD1K/DdXd9k3K2ek8xVe\npd1lnPp80u3YAy0PLnqexnyZIHAjzUKCjWZZYChhcUDzAwAMb2HDJc7d+ink\nqB6ksLcGz/FXyS3AdAAoVy7o8kVK6ItOZp08xNy4Zz+C8kdF7Du1FYk3cK33\nTsJBLJ7cjqRY/TnKLiS6OkJG/gU7/yp/lYcF1Zs+Z6j1JMv0OtsXkqMAuMM6\n8c3iWWi8zWrHd2OS6gNngcKnmxbBtnRv/j54ER3aLVlv/D9dC+8zL6VSfo8A\nbpQoBFcvdUo6f3/2a0dHbBEGmHwN3pURnYEDH5eyv5CIvy6hoOT1Y1xKRNwQ\nZsQkq9geAhaffUm1A5e/4Z8BXQWdtdyGiZjWKJH2GnrLE9fOZBSzKhWGiHLh\nj+FmC/d/0+q8VVxUcGblflPSdAtDACvBzugcfznN3gedOgjKr85PEWLjcpT9\nf8BK4dy56uKscKQ28TRwuWexIdxxGTaUWr3wP69ZsM232u1mJMCmVOSCx7xu\nawlyiEsOmliQr3/K8J9hn3jO6HxEl6FVcKyvum2wmb1tuNzwew2HYSncmZxj\nqKWx7WMXq3FwZWqi6A6v/1INJRc8OGCFAtKkT0WNHRF9L4JeGcuN8BHf54mn\nCfpW\r\n=1s7q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClLGq7KZNv9fLTc5xo2t8++FBQHYruVVjQgUjbiOfy8gIhAIAv3vbNFexPCq69TD2EaFeM1HZkspv1DyVyMdtCOCHu"}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.169_1600152467705_0.15876567088837334"},"_hasShrinkwrap":false},"1.1.0-alpha.170":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.170","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"13ca10ef99d60b193fbd0b9141ab89a65e3da4da","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.170","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-stmtv7orKTtqiBGESik9Vmi/WdpNqwGoED30FWk38ay23+GL02078z+v/dk4sjc4cFsA1HaO3DXsgfRNuqxqvA==","shasum":"0661ce9994ddbb7d0bdeda68cd71c0bdb254005f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.170.tgz","fileCount":208,"unpackedSize":5759000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZHQdCRA9TVsSAnZWagAArZAP/j7Lc+C7Mnk3WwoeWAGI\nvRTd7vlEVtIbgSbimrsOUKfNNMfMWvAjDCN2MyKuFqA/6oB9EHT/HH6frgtW\n9tOEsrg/YDrKsJ25FdBqDvbq6RLfpQBxCfAn7rTNijK2H47jhJFHA8hvoEb7\nycsunpn8HEWIkkfNi/bO6CGCdNoWcIwTPozrdSntnPsgF+u8Cp1bYU74SktD\nCZm5B9ZftSJzZV62YusZcCSAAOTy4Po+5MYstF2IK+/7TFbUuXw/epxj43A3\nR+kRK7mIcGIaYEbC/5Z3xR+TbFqRRnymxzNw+BOkyqYXtYhMsHxZBpCkbXKj\nO5WKxlZ5EUAYzshX1dRFlZqRXYYD/Fko7g11OHhzUyGwOMYOn8bcQ15zxvJx\nkuUTNZ+ohJ+duFN9TZUSe5zFJ0J1QZqCe3FzhDpePQV8FiICUmz1BshOkuSq\nP62NRpyOQCPeILVn6aoQvmsQSvaFnLgL0DO9XCcoO3OkdV3FIOEyCSq55a4L\nJP4E3SMNNJmq+AB+n923ZRNY8NaUS4oa0seCRWQS+6yz9zaZ5HE/Hb1oIxUI\n+yt4QH3+gNDzf0OTwNZnqonwYBPGuaVyRmQ8SvIpXW5jc4ofdbW+9cGbuEod\nnNueSutioFyL54yin4AOWbBLFDc7RJTAkQqqav0zOnjiR4ssnP1Zw4b0riuF\n/8J1\r\n=4u9+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFhvdlGQ/xKoD5GY2oHxk91hkIwB1rNByuuF2wGZgs9QIhALHsKoEFWAui7aVU1yix+/xxfF5maMCPQ9joHVJfutP9"}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.170_1600418844689_0.9459385934019189"},"_hasShrinkwrap":false},"1.1.0-alpha.171":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.171","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8d1be1dbf3ca5f8d76c3ce53c9f59cf04274a823","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.171","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-EbaoSkfF+b+TVjGgjOSgL/Va8yA7YNvuQB5AArmR7vF0pt0ggObfLsz+RxuTPy9KiZALEw4pRg+SSub8qXpzAg==","shasum":"adf178f3bab050132dd06686ad55fa864b943aa4","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.171.tgz","fileCount":208,"unpackedSize":5769353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcI/kCRA9TVsSAnZWagAA+oEP/3z/A1J/bbayruyG7fly\neb4RRxovl7VanZg0SoK+e5dByN/YkRBYzL9fCi9h5Jbf51A0cPeihR/4FH89\n7EInKdZo6kjLwdfJkVcAFk1aIGX9ynqoij9qLRdp2fIgwczWlPFWwHkz4LC8\neFwCjskmcY55XBrI0EzfgX9JmD8oXNrRuO8XP18F5zscVkKGyY1Axk5H8/bT\niEJD+TwjWXS2L7bGbFY2fsqS+GiVk2AUIls1Ss8o+HYcUSHDONUKMIRcEL/+\nN3xlkJ9+jyTVcSKynhZgXgmUK2W08F1ZJgwoh0qUOZTkpIWVVRA4/ZAgdDKB\nLH7Tg76FwlXTI3dfwpa3YcUU3wwBC96/Unr9aRgd3oZLp4CVeEOLX6DscmMH\nzo3ihSG9ASAXUUBOpHJQ9NQxIxn6iIx22JhlZETsJ1i8VuBxmmkaouXYxX5s\nCKa/LqJ9pjYK1ilO7wYogRWz7YmzU6dbVdEGzxDETtw1PYB049N9IhJTqHHV\n+iHTHSvs+Ekai6ElqclZdqZH4WZ0/WeA+InGQQm/rd0hoOXrssPLeem/FIdp\nOcRuShWgv0a3LRDNj1YNDVpTBekuIfA3OzNQ0dy8NVjMKSfAPQBzq4y51xT4\nwRpzE93uzni4rNiQWUTdwXU7t59f7gADo/AVePu18sJNJsA2jaLnM01WDrLm\nkDmW\r\n=3fNf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsFcT7aqJ7Bvhf59/glWHpMuBzXpzByGp2sE/FphFeaAiB9vTsu6XRERsT0TqyOoLPL8Yja1k2LvWikxegm3Et72g=="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.171_1601212388230_0.8485983598984441"},"_hasShrinkwrap":false},"1.1.0-alpha.172":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.172","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6a441ec2b9649441e9de73a381ab4ffd2bea2ab2","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.172","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-CmhzxYb1TvaS/2AlfmZ5xrPDBGqINp8+6ng9eDGPYEogZhkz/XP2+85NMxQYBYyOjG2iJDmtMI7etbeg6ntGVg==","shasum":"60286f9e82318b00b169a940756c2d12c2c2ed5e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.172.tgz","fileCount":208,"unpackedSize":5771428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfccqxCRA9TVsSAnZWagAAMt4P/iRENMJaZCkyvocqT/G4\nh5x++yeYZPy9kJf1MB566+nTbbQtPBbPpELZmtDGylBBeo7H2q+eTfvTqFIU\nAtg6N+6dQ8zazFhmKOGAzCjvwssgTSGrBdWoKA+/M2+fhYyhjIhYEBW21tG0\ntyarGYLKVcnTUIvMzjbjSSqB2AVWXUSMhljhk0PaS9h/cCkrPvsUWHpjsvzn\nNJEA/sH8Ze+cLwOTkLx/emv1NTOfDAYpPRt1G06trTS8ATUQAau+5uHF1CEU\nzJNPbxTfxKATqP1gnXWr3ug80rbJSITqDenx7Rwd31UWhSqwfMc1mOCXvf4A\nvIAyqc9I12vpMO+L8FhQZyzClicH26T5JvkOuGUybR8hR0LhqEVK9gqH6Isn\naalfloXlFDzN8bQZ4WIKnB+XffRw0D2JeWU7do44KRrCWisXbImnmFT8M6Qm\nN/gcY3JCO6kv5xsUGNfy31zSwCNw1wPaJaK+4xouOmtrgFpM9AkzwWyAy2cS\nARAZpDZLox9SgaIktZLyAXHCIoe3WTmBQDHwe4JyAvIbBKnuH+ydvpPUH1Sp\nhrZZ7Z8Ky8gOJzFMzoXXeRfK3RUHVfp1G5WGbqbHnYsePbiMWiJBqLGUS4Zk\nF0WggRLgns9P+tNOfejhUrw38haYn1rRYLkbexOmjXc6CYZn0QjTPWhnBoDq\njO7a\r\n=5O4w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHQwu1wywfnHa1HOAWMg2s9xvwNixuqsvZ1JfEP22LYAiEAqs447jmrqY0m+gv3udd12CPNoVYHdnhiUo43QGZj6I0="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.172_1601292976800_0.3830684286634376"},"_hasShrinkwrap":false},"1.1.0-alpha.173":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.173","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"d2006ab46d8aed4395d1dd6c2b5d6c3ae13d8de8","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.173","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-zJK4mkJ+XPvIvNvF5tnzL9jSUxNFO5MRCnTnkkaM2WzwEFteOKyBRX6A+iQ+yq24N7IusIl+IuQEi17nBxnOuw==","shasum":"30f858891ff538448b98d7f3f09026fed10e301e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.173.tgz","fileCount":208,"unpackedSize":5772506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcwTaCRA9TVsSAnZWagAAH7YP+wdAlGd8ULHshQHhQIqE\nC4RtQKtC3MIYNzhHrbkxi2MsiD5qF9vgVALHtaTc3xkfC71vlQvtpxetCLyR\nVbb/+gz4pVS3fYizde+V+8zfTwP2jkkWImiqdpzXPevqTXjbWcHgqcHbH37p\nCeV690HMk9rX66jKahn1jYcSyMu+dHWUNXTTNwiAmEyY2fa83kG+Wr7IHoqd\nDsqGOM7DCZ5ekVpkVOWUAoXeURvxbyxOrNWThrGRaqUEzLTjJR8sNnlI+lGO\nD2X8RGRrRymGdMIGE3Q22QZoskAGpYLO+9KxKzjVKpBy51ck1N+bJaEdVDVb\nUJB7c/+bwbdxK/QhcB0ZkfYArxjo26V3J1oTMz/6cF6OpnB1x974Q8+F7n5L\n8Wsq+6oHEDKtH4daTO2a/tLSdWALET0MyAneFHxydHi9ThbQceysfJLRP4QI\njnZJnloyzMUOc+Td0ABCRI2hY2KM2mvhsgyHv09ZsLLVo7lJfTMWKE1NsR9R\n4vQXxOEvQdwf/zZORqD7IN+2Uj4nVgqt9edMSk1iLG97SC7l1RtQrLraXR9H\niW43aLI6zaYVlJTmy5NZX/MhH0h9EotUqKbR8GfrApCuOUMHiHGSCfYAj4Ij\nwiTQEe42t6BvguaM/qH9RHwKk6zKBTfzFbotmRl8soKdipNN9Sjjf15ur6g9\n73SF\r\n=xxKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0ZSKfxddAY97Wv6rrJNMJ9mFcvNx/8mQd3EhCYeE7qAiEAo71K01WDleuwUyFedUTaV/ihetq4jSKm+LE0bf9Svnw="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.173_1601373401959_0.44146914628830425"},"_hasShrinkwrap":false},"1.1.0-alpha.174":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.174","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"2ee8ec3dac6a682c119eb5b9a00736bad0b70d3b","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.174","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-s+eC7azKZfN5Cs/VqoaZoTAR3G4S3FAzRxRO7ncj6ghgTW7dgBLAb3IuyNPAQBmEOCeHZQjJtbQ4Edu5YnY9dg==","shasum":"0543528f2564aa0abb4db854489e2a7b86be79f3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.174.tgz","fileCount":212,"unpackedSize":5793199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdV0bCRA9TVsSAnZWagAAXWkP/0EcAdZeIpGk5fbYmLsw\nE7cGu3YNoj8P+GIUt7MkmNICloGkLvRz0elM32JPFnBwIDr5qYGLyOIK8q+7\nxyvtIMM2xJ8B0apz/0I/SIMoNE5jy7CJFBXmLq0atxky1iaab8W0HYrH7TA+\nuI7cB+qkWbqIZQPiIQKtEiBnqYp+usjJkhP4cGCxycJrX7FpueaFBOq5OfW7\ncPMXh7zsvE7MpVFsFEGl5nI3VzQnlZ/CyOWzV9Tz8pPcgupOtK7Z8Des8bqd\nAFM+2xE+dC6B4wsAfhVsSljURP+k7w2NJsIxBX6lIx1RtzfEOg5DDE2Qlsyc\nHgkWeG//MnaSuYNNvUe/rlfTLtZ726FLxB0TXOaHuAJMMDslvh22BAl0r/js\nlcPbnOfV0mWQx/eHy6oMonPlIHywa6wDf7dmqalFricrZauVDYWgB1yzIqNu\nST9go4aIifACr0+ocikA1dHl5gCPNcGB/bDIE5sLqPcrnC0OtwCAYsNCkWn3\nR1PX/+9IfAkGGJacj7SCgF0q31ZaDwtS4Alk5WpffKdtjTINQAr9ggJ+RVlZ\nhgz1I/jj4eZspzFnQOd22uE+gRrZIELAO0Z4Z5bPlQpwNL92539iZ6+5x+JV\nzpSWzyx6ew9PFTJaOs4fjL0bpfh++4HH3eZgYioKXTEM8xQ4FTRL4K02aM9/\nyzHz\r\n=ehDx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3syaJGXKJxkFSRBOnO+6zwYaoA6LQb5pZaMUAT9tElAiAIN/letHGNQqb958j7erAjAMueT1cW6zkFWTZo7E5QEQ=="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.174_1601527066281_0.6198463549236688"},"_hasShrinkwrap":false},"1.1.0-alpha.175":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.175","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"d97613a5af7ffb53ab2a8edb6ea599f2af0b6a43","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.175","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-89uE9ciQRb7sJenSLN/fNQC9Y0BiB0y0YC3Db5c6/k4Uzk3BN4QtFbFaGupcMAQCqTEcFsgVGsUL+pDCpLSMvw==","shasum":"364a47a3d48ee06c87f2fa1fcd04b3768ad1e990","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.175.tgz","fileCount":218,"unpackedSize":5814397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdjj/CRA9TVsSAnZWagAAPZwQAJTOvQa2igOot2KEeIFZ\nPE1tetE72AcLVlah1q/TLFBX+lUdoUn3DkKp5yJyCA18gOE0uzQG+MdGeV/P\nNq5vkYTguPYLMggs/+/SsOc2xdxF5DU+D/kZOQDztVmvgGWAVVKfdV6SbqFd\nh3cjKFhi+Sz3SOnCzmOu27K2E/Kp+JXNdTaHByYvXarSAAGQ/1rszmfFn9kb\nNnRgJGokKelanDMhHaX0Fj859KbRB0C+MwFcn3s5HyBfqMdwtLU5o9oYZHiy\n8dZZTNzvm5BdCRmwnXwLLGuC58+YF/KKAYMOqKZFXlXm9OBjtxg1z32vC1F5\n8Y88bYkem8MIpnI230ZbmZ++hLhFdFtnfvL+mCavkdG8T7KSd5VRKNj7kJVJ\nkVgP2TsF5DeNF7idwuG0ycyTEwgIR5BV5585b4Ob6xplQF4gQsLA6AXF32eg\nSggYWCriPbvE41lVzNvmEFRDx6/sc7lKQcI7vEQJvoYr5307vvhbQMqivDGZ\nglUEmLKHQbf3k4L3uClWbTjjCFgnCjJl8wXIeilUJW6HaW6Xk8tI7cQP8qNd\nMSxplfhj/DML2NlMc7o4/S83fSBuoSf6i/vzn7vXXFoTZx4R2YFbg8eDtQWH\nYoQJxbqTsZwpBHTh82npKtWRjnJfHHgrU1OfN96Qidnu1uwmf1KIsZTlLBoq\no2tf\r\n=kjim\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB1JkvaFWJjNJI2WcvX3v24AAlIs14qDCCpUSS4X3sjDAiAI679b0B2HcUTMlgG3p9KzhF6DjyStv6amkvmkWAccqQ=="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.175_1601583358771_0.06080533470862748"},"_hasShrinkwrap":false},"1.1.0-alpha.176":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.176","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ab6aa9255666fa437a77d06068df5ed2796fbbf8","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.176","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-3e5kHKkPVBDHQ2Cv2zPYXt3RppdJcqKGiunlNIMOEVs9bM9PpXsEktiftYbxKO2gmx6uNF+dVOiqwr8xlKCXVA==","shasum":"b473210edb490ed23b8a1e408618ff01a6ebb4f1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.176.tgz","fileCount":230,"unpackedSize":5972960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfevjpCRA9TVsSAnZWagAA4IgP/1+/vlUu74ctVjEVpJKn\nLlQmwcGia7LK83DxhO+OFEHClJp9sCE14g2miKGF9Icyn86hp1vW/B35lr8p\nIejWgP0ZL5MG7WwcjHv6IVEXOkWNoREEjOnpryzEVkd76dwCfvT9vl8tbCOv\nYxK+9yzU8HE2ybZhSI83AL9CXsWotwaQmje7Bd48mABw8qFsjVdQluid7M0W\n46tWYMhSAVmBUl8B6IVOmagTlpQ9LA+sDLgvUsyKBuIsQBpleTJVto6wO6vU\nomXCRseR1j37SmHCDR+GpE8OP6ckiOZ9jkLoAa9fa0kudFuSYiiGX59oOG4u\nPgo16b7WzRFqt7HPQ7vtvokNX7fydWSrkTldYSczzU7QAdPvJ6+95FLEPJKl\nftOaafFG9KtbInKHdvY3tTIpkqK/aaVN2ozeJFCQM6S2bNbTh4PMHzsvekrl\nmqXIwqP6BdS420UI5R11MgMPp3Hx3V7nxrKWsGOdo6GQLUpEaMPyI+PpTduL\nz7SSB4qaCKQ05Y+O6fxcP5ovfxMv0rDUf/PGt30kC7yb1GbupkWpCKy1ke4e\n1U0EGdrjvJt00/Vq2fUZ2DHl+suFbsUk/J/K03yev+UXlPw64zdipuRLHxFt\n+cQ8nTu7L1WEzkGcy3vC8abt/GcJsBcvZlcafeHNWo6/pPfUo4HWIIFOIAY0\nLMOb\r\n=85qq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBvOBD9rn+tzuwpB5xV1kI0o1zKT0bLu/aoqlsvNT3+NAiBm/YfiumVcQXI3SLEu6R88p23lnLpbucePbl7DUXVm5A=="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.176_1601894633269_0.5608159449949583"},"_hasShrinkwrap":false},"1.1.0-alpha.177":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.177","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"18df8cbe6a49ed2aedce487f27f5f7339941482a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.177","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-5IFJ/st1T3Mi92Ly3tsiv9bXPkaWn+DwwdphPG0YqugCec7Yk1+YVpblS/zxaZKe3zDfm7fvOlirgldPFvrDQg==","shasum":"ff980aef0e1f4e71a21090bc767755bcfae88336","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.177.tgz","fileCount":232,"unpackedSize":5992463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfg8FQCRA9TVsSAnZWagAA5rUP/jsaSrzNN/TD5pSjJ/Fx\ns1MP+UYLW0oackLw8i9x5BDMp5YwRVLO0CdlSiA+VMmUiScJ0Kr1WmJCz6K2\nTmPlgAxyIZAf1R87ZVwzYvbsqGTqXPDjRPTBsyLKbewemcKF3wNr9/ulI2lt\nXPYGqPmD+qibSCRXJlIS/eYl8DYst+AoKEggvw6Ou8iKsbw5z1bN0957rqFt\nvDQwUmjv6rKUmTKrAWmn1BhMagd3vBWlzrNtrD7oMVoFLfdzyzkO4xsbhO2C\nvAhd04+hjD9bS9O8+xb2Nfi475bkGHUBedCfpLlcaRgVJ33e4mSa4TS5I7pR\nethP2xmF8brdYN8kq3GNIiymERs15PdnR3F4JqWJz71PI4xuqRpVwiMs68wB\nuHgv+42dsbBonUUg+qZ1+3yDbpFR00uD6jVqA92+3snc0lbXXPbPpqTXqog7\nlXPsLJ85CB+vqswIa4nGFgY0ds17gsLdR1AGVIU4HA0Io3cXMPtaG4FJJhWH\ndCmSQovGSYE/4qvMyJeKbu3hm9Gnfk7XNg9rFuS4xwdbJ5rlpRn1kkznPo//\n5cyqe+u+WfpioOgGT2qXbKz/QBNvWeUP2oP9pOc3ptMaDsM4csWDg/pUh4Jm\nmwvHsyEyp0/vAOob40TYR+SS5NqlcEunXIx5oW4SQj85Xrwza4tmpzTivjEe\n7uQ9\r\n=fsgG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMup4y8Xan2EwzCz6ci4JU16m18kOWXj09SWs4VQL6YgIgeIhY6/yS1hAbqBfLy7d6fJKzQLXoy9sDr8aHW/cip+I="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.177_1602470223630_0.7346919097622959"},"_hasShrinkwrap":false},"1.1.0-alpha.178":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.178","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f7918a8f90454053cd310d7a6ed4917d68a23f22","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.178","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-v42WBEhm+9mpfpdFh5Q7SnSmNdd1VNzL508jmdxXF7dC3JrfCEmxxmM1Y/+gXFL4X6wxVFfRq/UnI9Wuk98Z/A==","shasum":"605926bf17d6efb8b1664da3300e33140148ce73","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.178.tgz","fileCount":232,"unpackedSize":5993848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhDsvCRA9TVsSAnZWagAAPE0P/1y5+jvQdEUv2VT8WsP8\nwp6UOvZ1JOUaJfti3jMi9GDh34j/BiGmo61iibzo+by6qPt9QjpwNgGhmeoH\n/NOP0gQ2t2zNw+193xj5dSI0GaMW5Ln49sDc57602/1HdzHsZiMpqWmRNf1L\n8zP95TmOPZo8rWoL6rN8h3a99bOivGxGHCEFoiCNbcY2B0Tq3Iw20zHtFVUM\nE0lAq4WVkKcC9/qCYMWZKGdshmXidItPzyOXxNUjdE9Y19InZ4+Qa36bNKVS\nR1+caQekZfZVJotDLU3WTbkVou2N37UrSOwGTPKLovxUsMK+pzh0BxBU5rCF\nQbqcEnJeK2Ny00uSO/e9NkrZ00SfzremVcPNBz3OwVlCqoUoYCpM2wYX2Ibe\noxN6l14GGGJQ3ObMwgXEfpQyEjONvNAOBxGd3u8n5dVY0ARECAU3s3jiczpg\nzeIZjhE47KftiFXOUVZ2ayRfEmqVKbDpqQ4+ABHvGk4rcBLa/4Mp27FPDKEN\nL5A6Crw43huWfAL9D48QehXeRDrP5JuuNsPk3RGRIFZglegc1AC4GU8hYTpo\nrY5oXZziXIVEnp1I3i8sOy02oxuIAV3inmALnfTPiahsT5+EJiaAr1ZiTj9n\noQ4t/+Cb+GULIburUkGhDQNYo2XD1+mPt184ubOGKBxujqaCnE2aiuUlvEMT\n887J\r\n=T3Dh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF853bmHYqtya5Or7mFj3f8hZo5ejmR0BAiptbUiGhEMAiEArlUe8X7eNAib0Y2U5yZLSSHw/WD1LmXSpZL0ksDWxJ0="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.178_1602501422916_0.8216591002974531"},"_hasShrinkwrap":false},"1.1.0-alpha.179":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.179","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"prettier":{"arrowParens":"always","printWidth":100,"proseWrap":"always","semi":true,"singleQuote":true,"trailingComma":"all"},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"459b76a1e2c704d2ce550d9d100e8d8b30bd9375","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.179","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-N8c9KURB91jv7D2g5vWF0S+wtYykl6Nit/J8OnIm9xDwCz8CaYHFpl51eO7HbwDxfOTs9Wwt3SS7ZCphI6vonQ==","shasum":"242ce0d88ea4a6a5fae776d291766270afc7858c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.179.tgz","fileCount":232,"unpackedSize":5994725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhD54CRA9TVsSAnZWagAANnkP/i89IZkT2MPy6ekzkcv2\nXeUB68oSfvqFBPI/Oy9Ct7tc3HrNI2BC4pZdXuChAzBEszCimZzJ0OxNRmlo\nqTKRy6zVKQgmiOgoJcYbrvST4ywVZpv+ZmCrzw3Q9EpY0YwM9vpTr3Uqbtr8\nj00SMOxWpMJ3XAOBefC5O7og/JmfpIJ94kfnj+6TOZBqkXxVGLBIzz03SXcU\nHf0c6XmUZLw87DuiH8uXzJbIfsye95ISjC4PoJgfuvgfHqlIcHroLsVe/LV5\nFfEch8WgZQs4Zw125J6MIAVLvmULwYKzYYjZi91tLwkS3zJkNAXkXhpeD8a2\ntms5JX6GKrNFYoqhsLwuvEr8945OjluS8gBo7l0rU7r/KULs6wh7aE05HL+v\n0y+nchWkBF2b5xcNOG+ViNGlhqH/zKFxiYXh5HKf6jdzEtRyle0mjTWI8Y8e\n0O85l++t7+Q2zHMl/9KX+G90Jvp/zfD0VWlGeGeDCoSFlMqhD/jZIpHWoNlk\nzRo7BA50egHRcndgdKNvYWAan1cWnjhTcs6tpsPngOjX9yunw0M+lck0OEcR\nTNhM9EkOYyRpJFRlsw34+8Vh57Em+pLJTcWyCI6f5NtzvnMne0n2CwP1O3AV\nCoMLokTcfB92Zt8wyj+EWKLFmeqrTJIRSVQj+htKrJ8p9ffgVNimDgtNeZCL\nrLfb\r\n=x3TP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYHPQymg1eZIrFTJ0K+WDbw7/hGfrmWvfwglWOpypNzQIgD1a+rwXU+8LtpfZzN6/eBFD68jU1sQxsEXEVeES/B1U="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.179_1602502264161_0.8549685936916636"},"_hasShrinkwrap":false},"1.1.0-alpha.180":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.180","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"0e4a818bc8b2ae65a85948d192ab3b899565e57e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.180","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-S4LwVrbpA8hiRGLg5+hVd4xDLz5VgwNDukTPea93yAEdRT4w0GVZ53BZ0sav7MP5RF8Dtp3Yhxifwx/ymJkCZw==","shasum":"c8a28487803280fb97f666921814356976363ead","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.180.tgz","fileCount":232,"unpackedSize":5994603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhRzQCRA9TVsSAnZWagAAN9oP/iI4ZioAY+aZNFhJ2CBk\nDfFHOiDkZX5KYzqCSVNC4jTEDq80nTE8dHyD3wspI0XaKxTEnO3rhA30ALzW\nb72hx3w1KYly4v1tPjddogoAlOV7nFrT+SxrO+XTxltj8QUIrL640KuJ0Gif\n2FOPSwG2UWwyo/QJWk3btx0xPVzHxaZgPejMUdfq65coqmcnD7dfCyS7jngw\nlb0XYQH0V1YBskMAVCDQidGgEb50sGXxpNMdzikll894yBRY4+UQVKwLlFRV\nK6vP6On8wz9FZV/9cfqs9tPi3DEp5EFzm0lrSquunz5KZa4fbDGBZjemDzAD\n1cfHAVD/kDcl97XPH4YvrxnNx2jy2CYGZDWzHGFuzIdA7TOvI9v60KWsIaVj\nsNojQfu6Jibj4h8i9OoTGxf0kPKAjpMKlmCWtxBXsMFAB+QJ8TIaakB/FOEI\n2pJ9jhm1MCMxN7EuGuuDcX/DhSpKy0dsPktDHONdF5m+00zbpAuz2VAY0SI+\nRj+1eCp0W4ZsryyWzZ4111FCc6NHNKBsNHxLTnvP5Ulkl7oM4ejC2iSj7Tmm\ngwBtURpWMArtnx+KS6t0oil1BVd+W9ncuar4sVp6VGtInt7JJ8Oa4VPRQ9vG\nGGIfo1Gf5F1qlDXMcqnajjsRawkXVUvQn3j/cDMj3j0VsafZbaqhCdNrAjxT\nTFDX\r\n=XeeT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpvpRvYgTCbKVo8vOpLMrVUudq72vCl02n47oZfyIQWwIgNcxXybFdsh5iMT45SZUtTJDOvaWnzWAaieswD2rAbLA="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.180_1602559184292_0.5798652816995422"},"_hasShrinkwrap":false},"1.1.0-alpha.181":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.181","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"614d7544394bf445b2c130495ed61e9978f62c85","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.181","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BMPLpjzQ+7Ph6XqIxiGidRJuU5BfLCJs5SPlxvBrY3I//GYSMo6mfUj4GKTjtzDX6WrV0ZV1Jfyju0oDyz1WSQ==","shasum":"a73640adfe17fb8e5579336d41d01903bc66b255","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.181.tgz","fileCount":232,"unpackedSize":5991364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjThyCRA9TVsSAnZWagAArl8P/0tN4V+meEWtx2aqxcJN\n/2iX8dLS7ik9H3Y83iRus/Ub9bEGn/QK9l7XdHK6ryqAkq/9RMKQZ49oIhpN\nstFlKnt96p5clmFDd2raKT3/+Csjub23rzZunhrhCgDQCVYs7OGUIkxAz2pP\nIbCay/9waWWkpnZ9rvJjAotbrXa0pL4q2sejASFz4SKMxV5ulfEVX49zCat6\nLy/KaC7su4Sn9ghUjD1GiyV6xNtDkwEa5wEnjakd+LaiBd1cii3sn09Qg9mg\ngbffIcjoikjP48k7VQiqKeZiJuFBJZvYlazcVjDP6hRwGtQ1X0YrUyf5Gf9O\nO3w37ZIxqLR4uHaCRUe/vS3pZWV/dvOFxAxK/xjMVPYjIX72QDVUROxEDdMu\nFT7KiYWWZRiQes8/OTIJcxnrElsvYWVGLw+QrB6NWmlCEiTfHDLHitKF0GAq\ngozYcwk4qLdfV8+3Rw9bGpvbUfUsU3mfkQ2yfO1Vf+tyYujNJpjtPA+OoxoW\nKUoPA301BadqwDLOfTDc7HBVrcH21qaiDzmEVxTjxg+19rQIKVQrguhS3+FT\noUPH7k3xpaJdy2LYTYFCNByKqby9TpGyF6hGgDFhF0oudB1fkp0XIPrE2l8g\nqq4goR0D87Gkp9JbSSia7wCJnLCesdp/hwdG0ktFMfNbaUwPvDxnWEoI8Yof\n1g8G\r\n=eFS0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMgHU0koJSD788sgVght8H7+Zul2wWg8yksrw/5NpODAiBpQ491zjYECA5msj5i6585FaFYxfpxEtBq9Uc1b2lEqw=="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.181_1603090545396_0.8536385567676195"},"_hasShrinkwrap":false},"1.1.0-alpha.182":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.182","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"b7ce9546a630e1f4329bf6703714ffb1747d6e96","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.182","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-61b7GDtxjDviSGY4UmlZm5KCOuzfgQ0QB4OQCM5kNbQG1aRNrpI6eu+S6FzmrxxOsENsaQliMr6dtfIn3lQMAw==","shasum":"68f74abcb8c92b7090968fb0680f90fc6df0e59e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.182.tgz","fileCount":232,"unpackedSize":5991768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjUzwCRA9TVsSAnZWagAALQ4P/iegWhjA16Qcai7unodb\n3MDIXUBjB/ONPlHOnREhcQWdj0lNL4gyQE08QOp+nbkHRGZ20AwhAN8jMtX+\noHoYDEPwC3WtK4a/qCNZF45xmhkrKV/M+do00wL7V1ixfcKIfv5ET2eJZKO9\nczbmBcqOB+ufcSWbS2NCUbkwyCVVZBTe7c4r1WiLutaXExVlM2l04BflYddp\ng5/9BXGg26bKmlv4D32GRIex5fvrmiwOxA23PK1WuJvanRN6uRFlsFCZbseZ\nC1t1Za11rScu/WFbJxUDb1UlworRfJqQuJsJdPEymPDF08PXzZ5KX8Z/KOoG\nzSBy4l5HHxpLaVVR+/eXRXQX1tUqjiaiIquMJ5n+VHOWQpInwc8vRKbLPD4W\n8l7TVxGA6x1RjXwxfRLnOSpJYh5MGWVFQk5PiAkW1Fq+ImJT/sG8UinWXNRB\n8ZIkVgD/tgj5N6fOEHtQ/PBzQc3LZwEH/c68dxOINOtIgtBu++NQWFoF7zG9\nUf5zqs7zeTXfX/9Y40mmEe+JbfinE0MaL3EZ9WWBBymuD2daC0U5RsWF7G4p\nDEcSJoNfHVwMEQ06CmrFmqlCgphlPhyUWFItTc8lbNsaMY6xqp2tBx5iSCXb\nzoRbM0mYQOzRYTLZu9lCXAZy98AP99YX17clpjSq+zkzRsWjSte1TY93hth+\nAt9z\r\n=sPWf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3MlRzG1XqG4IfnRSXObOOG9TQYkdEcTdbF5fVkbH/BAIgQSSRXmAZPQEedTE7LI2IbWBGpCibmhG7FLXp1nO/DW8="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.182_1603095792203_0.42538837698732346"},"_hasShrinkwrap":false},"1.1.0-alpha.183":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.183","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6e7c355ead01c57dcfdf5e2e97192e18437b394f","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.183","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-gdJ+XxRGi14RSCap/Lnmwu/NyBk6NOoac9eVmgWqCkxud2raud0kBrQot7HjNMJfOAD7V0RdDRElYGuwuU/2BA==","shasum":"fe921220872c0e31e63f73e72b55dfe53929f617","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.183.tgz","fileCount":232,"unpackedSize":6000384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjlEpCRA9TVsSAnZWagAAHpkP/AtPG+wcNckxtnWYJZqT\nlLCrknko6K6qCQrHkAGVS4rth1af7j4IurZ1zgy+GsEbT34qRS1nmgj534aS\nC4wdrnlZVG6yO4NnhL2Qm2Xn5P0yb8vKVUF+16Ga6pc8s8/w1YTpegtQhlPy\nK/OaKys9HeAo3CocBTh93BrAd7oE1x99ydMqdxBo9HxcavWfD2iHr4Yb9raN\nWYnAAmhH4Tc7dFLMzX3AH2bwfO7M4pAAROgGSF1wJCG9rYACzVhST3YO/7wR\nfXrDg4iGmmwJoLbFt/RkbiZF2utSvGuJr0YA67i0zAZfrjBrrw2aXsto3fOv\nOyInxdfqmMyvWUR3DTvWe7mxT9x9ugZXoCx3ZD4UVTO88Ff3G7lfqoKXl4BI\nUhURPfH8451ZvjlM82HL6aL7orylcBK0YqHQWej6++V2IyzQZb58pXCyRxAM\nndMuNEiZc1c/8ong3pYI8TIZJKx8N/+hw/hadVPC5DV8BMwoxC1QCGJhW21d\nfE4w0TzKmOxmmEPofERJkqVSK8ZPPhP+dIxCpOnU1ZNDWErEvoR7d1b/bIzO\njDRZ7qUg4j0BWLjLW4vvydqsFd3kxmM9a8QxtgHkXscRNmoazyUAqvkbFyRt\n/9/dapRH4tafko14Up7PrZWGTvmVCeM6+ITGLA0q4pLuh8jmd2aa9NBFFiFP\n7vte\r\n=5IpH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/0uge3aBATQs9EJc9iCt0VcWg85TEl6pmTkweaZxSqwIgZqUPlKlsV+p7VT9i6B1REtb911c72E1kQ7eudes0zA0="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.183_1603162409075_0.6583514645706752"},"_hasShrinkwrap":false},"1.1.0-alpha.184":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.184","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"636ccf755084e207fe4d337af52ef3bfeb1017ca","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.184","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-LqyxE3+ijl1R9g3QPpFrVHslCNccGz1jfIpUMq0e8ZEt3LBPcv9TnFV7YgnWN7iS8EiKDSb3c1ZoKc7N90Y61A==","shasum":"c6f0dca2899560b230de6f2580056c56066d0166","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.184.tgz","fileCount":232,"unpackedSize":6000498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj8DNCRA9TVsSAnZWagAAm+AQAIKj8HMawFqHS9UnoiWS\nqyuhWUVNHBFT+BpyFopwKaDRBYxsrWgK6kTt+Xy7XIutKtCpA84qPgagobnK\n7xPlNZ+NmcerZJRDOx+iJY04u/pMgusXN5K5L6m8EHiyVZ3qBdQ7BpAhGe5J\nwrOkOLLZ3JIwbrV/0atkBUlWAZlt/7YIwIsTF4KTi/92joYPPS/Jp5e/Iqb3\n6v6gLObsQTuSnV28SE7e6hZkZh6oI46ucqYe+OIgZy2pzvk4Un8eQOBhwnOQ\nScZUblX5ftvNomcCUO0dwmgOBaI/O8S53XhLxmkn5dPB7rs+xOxXCD2GHQeF\nh6MyzJ++u+hkvxCbvvWzSh3Z3/BJgTS4DuLXu2SbWa5CAqBCBZQDc/yIKwau\n4rZV0KQB45BQV1Qia4P/SetlpFZTkBh8E9sl5azBoAiu6Ocl1mi6K1D9fga+\noG/1jEZXPvlParnVVP3+aXmdgYKRkN7UFm12C6kWokKVAWP3I9TnyxfXJvO1\nD7+bqiLSoFuSdxyq0c5goJiHfnV/7ge8wwM4cR0pYSt3fcDa4z95EwMIm4FD\n5O2qBe2ksAvAbvv2L3k/XKHOJpMHW0auQ8f9ujonvku7sJAQLcOpG6fY0SkI\n7pEaaQwGrHNwmEL5bom1qBFs+ENGGbjy4IrCjjepKS/+ukCRjDr1+gCNoy8j\nwWau\r\n=zzjj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaxORYH+IpYcbDodEsX2Zl3hvo8PpX2JQgD8K4bJ7mbQIhAJp/dk/+XCRriwD3Qj7F1PbDiAK3tRZPAyHFfcHl0yMV"}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.184_1603256524633_0.6612806072156225"},"_hasShrinkwrap":false},"1.1.0-alpha.185":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.185","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"3898ecbca3a48a1a0b9f8e4d45cbc823c94974a0","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.185","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-K1wiscoHOAAWL8dgDCXd4sdE9ccyp2o1UgZp/5PXJp/DMM4Vdr8mKqKEwn1ZEFdQxz3tVxSCYKn7kqrNq6yjzQ==","shasum":"20c040659b23e0a207cd236f60eed3809a35d64c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.185.tgz","fileCount":245,"unpackedSize":6074793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkB4FCRA9TVsSAnZWagAAFRgP/Am9jAdr1wHAuS7p8Dre\njCTWBjXpQnz7gJ9g7avy5gyMt5AzhpZHF2NCS/MCED6yXm9GftkEIUJmvM5j\nzGh9plgBLmcsCTZnxNynR8pIVENLVobruiLlfZC+xAMrcNBFUZAR/5tEXl7f\nuJhi9VS3ZAmU7wt4avXW4kgfNgfJAR3oMBeQ56qNU7nKqMV1UipmWC68GsyJ\nOvC+ZQSokQRH+7HePjI8WY7sz1gpSeHCG9+xZm3CTERuu5MYixRRfSPwDR6E\n7oQcBbYFAKQbXQNcsKSXKlTUbAXt2f4nkaUS4wtjcuo+x0uxbrQKDuTQsseB\nD14nnsxKbfB/VtIawcYETKAmAhX7eWHFq3prigtDjwwfVDjy9+z2DUgHz/7A\neogUhTvcRUq1wU3llRm+5aCT5F1Lg4Ib4Xwr2Bp49uAHCKaBL8ipDNxx/6Ck\nfA7Z8c+KoH1Fm0rEvjg2zOeDlJWlPkud9sfjyAUlIFBWllOUS+S2eO0EcLu5\nUDWvCuKrV2+ab2q4UQIq+cztqMykHr8liCxjHCp9LuqRMQ8HuFw0aaNQEljo\nJf2wbGFW6CjFSk1zD4dHCJa0kywmRmSsBcAColb9LSt1tHeOSbLaQQhC3rO5\nQ950EB19Tj6c6MIXJSwju6VOjfxER5TB438pU9HtwbLLo67arU6bn5MkGjE/\n4+ie\r\n=OUb/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5Zt8ebHDaRZAKRBToRtUz1V9Xe0sQzCBe8vX7dxXaVAIgLmQ/TKXSNAU5wg8U+ULib8ees/SMqmABi1q6gv0OTE0="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.185_1603280389164_0.031701443266624274"},"_hasShrinkwrap":false},"1.1.0-alpha.186":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.186","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a360a1ed6736c2e0907022ccb50ae112b77e1b11","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.186","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-FZQ/yUz1Sgrc+Srp/YU8PZpG443JidvvNskMyiBB0jNpnp5UFKZWGa/m9Y4qw28Qp/X9Fk7y7FOK9Sixxn8oYg==","shasum":"6d323184e3acded876730168c4dc7fb137836649","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.186.tgz","fileCount":245,"unpackedSize":6075099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkVeQCRA9TVsSAnZWagAALOQQAJ4sNslDScBoH/uR4V3K\nqouBXpj3sJMpfS7Wi7wefsUbXnzgJEqTBjBd8DYejApiCJQ+GevvdrSjOlNP\nrN2O0ysOca/peaKBqzLvW8BHPE56nv6qnx7UBDrxts7QzkbNt4J4eKhzl8cd\npWGCH/EoTHJcaO7IgoNHXYDs+czeKxL5hcaI4F9AC0kE7ZEUBtAmdej53m4V\nCXnvSbjyclM5tvrkW+RBf0bqKtFWMe1p62qL1jnlRrrH8OLEmIZA0+pYJPgp\nTwf4Kpc38jQqFOiSik2OkqLGuoIq1NKGNLdCws7XHk3Ut5nVGpRna05XZvLa\nyWbU1jEy5WrFDYBIzL57Q+zlcm6HDXeYJIXUC1V3ePP2RVMM5NNXpRWx3pRn\ncApSt06U88cm/wXbX0f/VMIzDle70Cp0KYSYMwuRDEOyzh/zQrBK+kXvcp0f\nhgiZhicoMwAA+GFaMTnF3iBnZm0kjA4AKeNK/EjVWOChNKttWYMxbpZ2KTHS\ng1ugsvB0/8bqruccub9jMZ8rria5BkrF1hEuOvHQiWC+tunKRzd350qgNWNW\nmP5SlXd8lIRjFYnhYh6cGze2brQ0Xp1GmMT7o7wQ4BPdOOQ17CdTR/HR1Gke\nuuOsBUriQZgt2lWSqoq7GApY7eSLcGBYP6UT87KE2LUHfPQPWHj6j2YuLpeI\nTXXt\r\n=7N0T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCklsyQf2yoLfjbLk7DiR4W6nRCiq0xbhxCo5ViLi37cwIgexRjnwbCBkkRiGJN1EbXj3mr2yEygRH3xYt94IiGtGM="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.186_1603360656046_0.8371017468786368"},"_hasShrinkwrap":false},"1.1.0-alpha.187":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.187","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"2e552f1968ce3e3cd5139c317335861f82b54b3c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.187","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-FYx3uo3pL17omi6feqajD/aGEtBYiENzj8cD63PN/hIgTgj3kcHRq+24rqF5sM3SQl6jfxUSzSLGmure6dvaQA==","shasum":"23c9120ae95e9cfda79edf1b36695855aa91a3c2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.187.tgz","fileCount":245,"unpackedSize":6079082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkWurCRA9TVsSAnZWagAAbdAP/0cPuGyExgu816c1LLwn\n7jbtRiuU2sIiOA5/cJxth2+8znLLGl05sK2YDJ+yKUBuCS18+nFU0ODbbdCA\nighCJec9HgGSPgecjFej4afWheTIpdQRMw+TuzdC3REcZXIjSSGYB+B83P1n\n3p8mg2YJu08xR8E1dtRd5Cj8SGAncHymxH1H2+HogGn2qYwbIHZ2Vzfkgo27\nQvM2Fw+szh73Ed9p2XI1wOR/YoG0Do/0bnNy/nUqaXeaYMF0lHCv2BH37Dl3\n8j+BlL1gLF41ZmztiVrG5rdEzfk2X/Cvi1YHkojS6Vc/5gLBchcF+7YoIn9/\n7qHAqOvh+oYkfIdcLJPapzdjrX7niqjDMD2oHd9RILTn2LKjhI4UVlO94dzG\nkXyMal3ULl9bcaQnputF+R19x0neLBv56v4VLpE/KeyTtHGUCGf5FRvBDbpQ\n6ps4Msj0JIeQpgYzLej035LN7SpPKQCV111ulrkQB2YSn11RjNKsGqbBQGRZ\nmlg8V8wX432/X3yr4KAbhYa54M2nL2oRqxFMvlT5Bw4j0JjNb5Yv8zdePFI/\neRbwv+ST52N3BG3K2ElkJoHjIRIa+rJ/NYCj/5FKIPoD5Vw/H+GYvF0Im6Vh\nR13ahnloxD3XLBjKq35zEE4Qjf4DMTPeLaZ7ngt4yY8g2971cW2Hbkb6uQ1E\nIb+G\r\n=Ef0h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgJI+lC5p5pAo0U4/bV7gyMEHPEehdgIMSmf9YS+KtLAiEAkNGXNiJ/l2AsqXOv+X+wu+dxy/90cIdmX5hVfD9EKuA="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.187_1603365803157_0.9966665333708804"},"_hasShrinkwrap":false},"1.1.0-alpha.188":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.188","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.19","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.3.2"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"0340afb0b14c792584d6d3acb6da0defff42ce2a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.188","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Hc3XpLM8Rvm0sxMi/0cVCTZWJ8MwAa1Tni1l4E/+iTjlPzAZxAHhVJ1qo8xp4uMVvFuIIOh0qHUPqkt53V31Ew==","shasum":"1ee14a9b959381e547f1982bc2b51edbe8ddaf62","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.188.tgz","fileCount":245,"unpackedSize":6084520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkXEcCRA9TVsSAnZWagAAOwUP/3Fvom0iF/WSNPA/SE2i\nw7mmJxH+7RzJzsD2JE3jiZLjywCXgbFtHbqGmbmZ0ONWrrlxtrmVl9gxSx92\nCaIo2N54Grj0wMdmhdAklnzfa8rLeNW+5Ec4ewZVi24nAgzvPLhXe1h5GsfF\n2faxO69ak5rwFjeITRxZfLBnsP3t2kDpvlqwj7IDtYE5iynFggEBj3GDs/YW\ncatFr4qM8tXvnk4IFYELJ9/lQinV78jp7R1PA4bcQ9JEBKrDKuaYeO729KMc\nwCqh8uHoGnwAWgm3Xbws4BAiMwGYgypos2M9xQqsb1vEDXO+JLO2XjReACFe\nHcWbcnedD3YE/kvLc4YMzyLipBEtKN+g1nGFrRM1mxNvvsBzqB3LK5Yb3QrF\n31eUNYfetEBzDghoYgYTRrhkzpg/AZh1nVBRCGznhobLiDSTuGQsyusU03O6\nUSObAvHi2CXO0vDXkPVY1yiqD3urmi001u7r8jjZZjH7KTtP3B9NJ5DlbmLw\nzx6t5GgFxXQiDs5Zpr5FaWKly1DNHCRZojIKHt6qOZQqEllyBW2soE/+7+4R\ncagNwlBVxNVfJ+lCPICfA3LxFVG7J2Wr6qfxTXsuC3iLRw+aWt04zDh4Vls4\noB2+c5u9BBrV60xP/Ytysqj3wTdzsDTAVEOS1mrFW1kEdc2uE7kAWQUteqxx\nvUmR\r\n=NDrC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLg+tu9/MGPfl8BZZuXSNu/Gszxc2JrpJJTIcZXr9OSAIgIipMT8ARTy7EavF2HunQIljiudGBLnbrO2fXt4INb/U="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.188_1603367196315_0.8352751232012519"},"_hasShrinkwrap":false},"1.1.0-alpha.189":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.189","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ad7e735ae1d0d56f85dfa5869a5f91141ed6092a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.189","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-KrIl27IZj4U5R55rRtf96BOV/AnJUZ6T+wP6DYQl8nruLN2S1J3ItHGEpav4t5TFLUJDgdUqWdgQG6txMZADIg==","shasum":"e586072fc9007ad136b1a8c9f910c811983bb0c3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.189.tgz","fileCount":246,"unpackedSize":6087717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflQdHCRA9TVsSAnZWagAAz9sQAJNhjqBjPMvTdqzDp/Id\niBleFLD+rWaG3MpGABlpYm0V952sSY/DCWjoHIJE/aeJmWy3corZ+i7erO7I\nSFGjjRSzOVRRY+9NLyByMevMrXoHILVRqVMYvfzv9Fsdg9uJz38zIOle71Z/\nR9ZA5oBAK/cv6FVr8elf/6JXAeo3d24FPT6tm2TvQIl7etYu7/LGaOa7gcL8\n0LhPObwfZn9ORyYMiKM+KOqyMb4jaIsoQA31efsiwjyOZ6WYlZG/UxMntxtL\nF1xOQytaNh+8mVrdajvTgOiuazHRPpnOG619PfQFTc7il1tav3mRWV37tYsY\nJeAT+oUjV+hq2Ond7c6b7g3afbJFlJi8xZV6XPzzzZo/5BCpLeOWXWejfTkr\nC1gbELTj8yKE3sBU+ITLdxUZ35UzKOEkUjPZqOilvjkKCr7fWR9lD1kAcpoZ\nUx5XI933Z+K28YOmOZHcOOQr23p6Je/3K4T4PqD0KOMPwZiJvSEMovZA3f6F\nGDpmxorscXlNarFB0IdNollb2/VkLrzh5VlO4rYHm6d4xcqbhVsELWIFMjci\np4GpaysYE8di4ZbiEwmN/lmQjaxrek/XQZgcvzg5E0bxh5JP+YOVUAAelPQ/\ncBX6c4Cb2kA3CVmQz3C+LhU5+qkydFPCMTMV5Kqj4CTf7GMva9GYM5O2PSxB\n7yMg\r\n=g1an\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgEWJBX4wOq4EmjmrVV3GeJf2H1mhujpePQygPGwBMzQIhANJoH4XlULo9y8G15gmfYGAkze8yrMF/hUJDKunes1Ju"}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.189_1603602246446_0.3629793707440403"},"_hasShrinkwrap":false},"1.1.0-alpha.190":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.190","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"651d98330479da55d9690fdda5f946f84165b4d3","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.190","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-kReoZvZKNDg2uRjpaZ/fnhuP2rbaf9Cu5P6of9BaGA4+vSMj8YVMr17yBrlSK2hx/HMcALc+0Q6+fkelZgYFPA==","shasum":"455d1bf41a06690e2dce5c3344c161c665b5d73b","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.190.tgz","fileCount":246,"unpackedSize":6087370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl4LFCRA9TVsSAnZWagAATDAQAJ+NBW50YOT5PSjsEcWa\nWQoz7VS6+fk8jiBSpisz9en27DM7iKUiThfth5E97i7y0W7EU4AV+KpMWeP7\nXAbhMVw5jc4XFWvP30LfB98x6oxH/ghvxM/SJ95wBVKUlGT44UKE0Z4Jmz7J\njiXQE0rAHWAQL4BesZ/hC2iLS/AIQl9GqHouM/553O3RJp7j8AYWRiuvx+6v\nKLZ5CI2sZ8+xZ36hu4neDRsTHdfGCeWs+WdyT9+N45QX8YCK1W0zXb4oGcLU\nbCq4RXbjXoBSwWwzU/9Sc0rkU3Nkah7KL9IxUW42j3v+NRQV9OPkY++e+6Az\nROaHL1DVM8GOC9Sa4CrHt/wZ6UNCwwde4gKSrdPxvwDck3ZjHMGAfF/B+7z8\nx2drPfG6Q67cHG4l5maRtluZ8FgR6dlcG6nKewHuT01982vE9R7gTXZ0/Go5\nJ4M53I0lMAT5mYykp+o1HLlUGRUi3SXcS2DvhweElcGTw+8igqvhVi7AgTcW\ngwLoVEGavUvpkPcfpI9oeCDZr1laiMaAb0sj5JPAJHD6crd2Mt+9qbXWQG+5\nzwIiEpZ+cmVlq8E8AspjVkyBjf/FoMmVHEXojSJLSchJxnw2+yOt5mcWK4fk\n0iU0igkYipjnV2L3CCYmcTKwS95S4BaiFBSh+T1ggUFo+vBtWh7+wEZNRimh\n7l/x\r\n=3mb4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDr575bKem0nbKlsWTjIMuxmgBQdqpgM3UJLAKm411L5QIhAPBkdGECx5cjVVWohZEKCB5T638YiL/5g8Cl/5f3IzA3"}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.190_1603764932221_0.2631718178569069"},"_hasShrinkwrap":false},"1.1.0-alpha.191":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.191","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f11486feadad46771c43b1d2ec24994cadf65735","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.191","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-rjiwA6hQRIkNIOtaBYriBqyducr0BDJXv+ro9Q+BrcMSk5hXGW9Xp7nO1wBwdI4HxzmZQNMsdFAIGW78G8SvNw==","shasum":"9a72cfb3e68c3f0b434ca7a73959736af2dcf5eb","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.191.tgz","fileCount":246,"unpackedSize":6087520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl45RCRA9TVsSAnZWagAAhtsQAJXDRvNf/1jQuYFx1J7t\nLtGGh0ynLY+73/4iDdGR+Ws/iaR3AJAGPpXeO8gKMEQ+mrQWb2wNO+4TzJ7v\n0e+tHzmrogG5fuIyLS/Pph8NacPjDff+CpeGpF3993zN9MA3UTvI6fERfVz1\nUC+vbGQ3w9iRj+f2CmntE2oPw/luRYkasGKrO5W++Ob5pLnkhCcHL/dGmqpL\nPUV4unGJldmO1b/jwwTb67Y9OnYPF/At8upSMHmDAABqm0vEDUx/itSG4vLh\nb6FnqULY720zswm/5ftfOamEV1gQ2tfSrwF7MbDJOGAJep6FD/8G/8515IRR\nVeiI6P3bdCUmD/jGmW2JAettYWW/AymtzVhcF0Awx2uMCGO0IJQPCsB5t+TN\nIUfJ6C5C1gLuEO32BkYkkYIGsfbZsdK0qsfE9ywhP438ZwTdU6t6T8oRBTJi\na+txlEnP+dssgfKDgMQpTX1xaYIL1wVe/n2A+uwrV1QUPGQyvWWa+dVf+J7b\nuI0hRr6jp9KwroQJ9q7e+zcyzdjgM3oKhdlhkXyPZy5CEP7sHzr4yrzxtHl4\n00U6L+/7hqJuFkHoquMN6VIb5/EjM4pohsweKW/nrhYMSkiN1hlXx/I/lsG1\n4NkTLYjJlryu6kNRGGAvMJzM1QmZCum1bu//NGSQUkzmjYRwxy6Sxc4v+OLX\nrrtT\r\n=DM9V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFp2t9xoNqywPBtO1xMnf9HeaMNrwVx+/69597Zh5b3jAiASB1IFiygZHpzi+/Ewwo/E0AjQkGh5c61AhCQJebiE3w=="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.191_1603767888874_0.3961181995961591"},"_hasShrinkwrap":false},"1.1.0-alpha.192":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.192","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"bb0e784485b31919eece00b0a4daefced5d7bbd7","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.192","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-az044BiJmy6zdgQpfG4IhaJ2DFHNRc1dO0oOec4w2PmV6VVN3Mz5pzvmTqAyyJsci21XJ1iloMQuo8ZQhCEvzA==","shasum":"49a8e3bb43e838449e1596716a5eba079612dd89","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.192.tgz","fileCount":246,"unpackedSize":6091653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl818CRA9TVsSAnZWagAAq/UP/RRZdWn1zQ6BOWoAmPhJ\n+Tr286MBkmmjVnCQ4YnIz47UuCEkv7zMAjlm8HVpnjEbSzaNYFbTBlu7Lls5\nxTp6d5VAk8dMKVC7HS3MeQT8g9bsw2KU6AQZ3SbdsDcDsmNgxeIZVZqi/Oaf\nMWW0v3Hno9Mt4UPiQvIHM0qZpFqhWvabGUGdWZ8yVY+3GhEaEGFK8TWYkth3\nzlKwJrC//QdfByMLUSdFj8LlI42cdM8GGV5sPFowcjJYtfLg932WS+kPl9Og\nwk4E4CJ9ASVG8E72n2Z1OMvz2+uGlt013Eq1o2xVC830gKWsc8vjryFjSza8\nW5JQ8hixbb5cMjMQJelpviagjwVK/MZyRctE8GmjBouXm7Vi3l7hMzNTflD+\nPvM0FzdCR4HnhktcDbdGRRE9WDiaW9qbQDXO7ECi9eBE9XssHHm3lEa0rw0V\nLdPo7dBKjdg8wi1gecsiF351UIfnIZ7KH6lehP6hRuthOVsfALJOmsUn4bf6\n5PH0tSl8tuQYd1WU//g1EFyziq1Wv7Ilfzf7PkamwFQlWBZroEdXNmJ45yFD\nkVWvx+rgiqvS26E9fqgljcVkbF+ofHY3yB9kmCiTphWyPvS85Czj+MrvWoy4\noM54dvtK4hMLKZi6POBcYre2XUCJDMJL1vUQCZmgnAfrPHsqVJeZ4lgz+tDv\n4sFo\r\n=SJew\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFC6RnO8LLU0tieFegHn5KWyV6grYilcz9kuNYN5ZTdgAiAKhmtvxZHNmdwYx/X/7s1dcdTGD9hfSvyzjUBRIcPZ0g=="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.192_1603784059944_0.753953166168384"},"_hasShrinkwrap":false},"1.1.0-alpha.193":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.193","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"70476a3454ab371e78bd38928001c3446a625e44","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.193","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-/DiXeo1CJ6Zbk42Pw/zdyWZUptYSWiRriyrj+wxa2L9jZOG5b5i0ziZmduWZXE6KhhKti4Tt70ecLvUcrw13Cg==","shasum":"a765465b887178dd993c77eb7dfda831c56e6449","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.193.tgz","fileCount":246,"unpackedSize":6091097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmmqjCRA9TVsSAnZWagAA+kQP/0Blb5FjKuBQsjUY3cvu\njTkDHGRP39ACrdEmAw2TcTWn3ZhE682nV46j2+h61bQPjYI/9tbrOh/03rFI\nR6lrqfDbrbNBS7THbuPA0Qza3Q0MtlBvjYgtGnPJsrD4d358lx79zenC3F46\nxHIDrvh6SeUsHvPYjHD3pgwwD4EOIdiezKD/cRoU7kwR5lNGtBJd/+jkAPKX\ntZYnZz1AkzERuVZwS7DH55/L5FVzllOVNI5aYKqkJTS1QXogv1SA9LDC0d+y\nDR7N+VVrl+IScv00/yCg5jBCgR8FPsR5csTjzVdtNothMhwqesaD0rrTIjSt\nkm5ReO7Fz36mO7iFpqXIxCj2zdHHkgn1G4jgk6L7NGApUu2lM4Z9DyzIp6Li\n7PH7V/UoX8/786yGuAr8fXi1OMpPtwIzRvNXlxpJXrQKi+UM8giWH099Cjrn\n4k82xL+BsBFnsKUl/hVh+rWylgx5p2awWjXEO9m+G3WA/x1CKTB9pS4jhA48\nvckNFxZ8H7Y21AwChFA68ZFupCTD5djhtvxf6jhnFX1p8mGL3QqHu0U8GvHf\nkbNhliyn8YHVbhgTo3vmvr9oAEz1J3IbTyLf5KQ+RPs599fls1aDGe0Dmha1\ndpddW364jyO5CNUD6L3BlfVZ/5QU6hkdlbp+VysAjOeNX6hjpqMs+vw1PtLb\nGsdV\r\n=PwIe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDnDwkAqkygDN69PBsvxc9RVEpys1b00+aksts7M9vRZAiAyGt4lPdorlNkT1hHUvaukWbk/xPF5ykGbz/7DViMk1g=="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.193_1603955362597_0.5514626399752447"},"_hasShrinkwrap":false},"1.1.0-alpha.194":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.194","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"22b7553f919793c1cc6ccee8c3b516d35ffc37e6","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.194","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-XtFeDdMi6Qh7UQu/vwtkzFQxv790fs5FKmMtJ+1Y6vN14FzJZ3i7Ahe9FGoRNd9kLsyUhSMe3FENQ7/L01XN5g==","shasum":"b06387a75a95f095ac5247f67d71824e41fa7aaf","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.194.tgz","fileCount":246,"unpackedSize":6099697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfn3UwCRA9TVsSAnZWagAA1MUP/2u2+wNK9N8H+woDI4XF\ntpPVnMnUNVA2TMxwb3o+XIk9TTx1UNpOwm1sBCV73e9HXSYnyinQj8Li1mKR\nNf4y0/gaoLV0Z6ShztOHRv6H3R0Iw5ZweMtEaUtkLy7999iCNY04ox2aKf1/\n9fi0Zo/mdLdvKuwMe2l4KjWt6qYMv1m1fEN5eYAOZGO59gBd2qGciMWCbq1z\nzilgoSEGSCo7++VdJ7txEoyqua9UjdRhnBJyDocPDw8I2FpMYCz6m61ItdNh\nqUlqinJMB/e0ezISrrpYExrS+OrVVZxOa0WeMkScn2eSkOUDxA5y8yFjNOf6\nO17FYCuRv70ahNDCXCsXibYZrlpJpWAkVPMnVZpxmqWZbhsBn6+vLco2hbUq\nlNp49YcLH76A8eRA4mWRV7DcFY2ZABUy80mKEkDm73ALzi5GCZDE0CO+tGU2\nnCLixLjoMHNommpGWKvQcKsqC4PJJHHhyf79y7gh5klHeMA1e2adBWHbHAPc\nUm3EVlQgq7TT3MvL3vTMenJfHq0/30PpKUyz8RncfUpTGEqd4rn0TRJIK9if\ndCTsm0iK4kjuuGctQLkyIX3Hz4NnbD2IKyPKbtFxc06jCKY58XTJcBvoE6Ei\nMBVlsy+8ymEAnXYGipLIe5yTJTrEpp1TCjv5oMDNr/SbDK8FiEgsNdoFyGYl\nTrSM\r\n=7A9G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZVw/CyHd7Y7bfHFaOL0FaOPOnHxuaDaK55SKc3eSfVAIgOjFdegrnV+BNQDc2KIVMd1eDDJv5NYBwa1JC1/in694="}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.194_1604285743999_0.6258147516848844"},"_hasShrinkwrap":false},"1.1.0-alpha.195":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.195","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"848aee2235401043001e3f7df195de06540b10b9","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.195","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-MmQNF9Xq6/wCQe6ZQ3HJQqQmLWv5+LgaIss0mHrkQ5140cNdQtP085Kd+neZqcyFQpavMeMlXU0dJgMgYZpNYA==","shasum":"d1eeec1788abb31ba39df347e191876a4007ebe1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.195.tgz","fileCount":246,"unpackedSize":6105934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfn38TCRA9TVsSAnZWagAAFesP/AsEl5gdFysO4eBVrQ3X\nq5GgHWi2cvn/XX2CJph4B6P6/GGreZhGKj8GRRj354qCMZvEuL5XmjMtw+tX\nYImmc92P0m92sWOkQ99ryow1enZLHYWY5InoEBMcrckfyaR5nnEhpu1kkz+s\ndpdMBVgUOpptjOvTdbxVXvQ9eqkqUsdEoWwdoBEcf2kWnwlqKeGqSqri6uZb\nwxhlulJygR3AvVPBH0R8itDOE1dJeCZF2DK0AkkNWf66ZomFWau2R8wuvvRD\nMPh42ffb7RnJGWOYKLrEau1mfmuxubs14LGZ5sP0RE/ScYaVWGxVG+7uRSH+\napz1Wd2N6NwCiJRvdzY9ApRUhaEw6qJSKg1Yfrr1gyTzUKe5qxtBY1p1d/g4\n5R/+e2lTcsZxIZGUMQIg6E1kRMVrvFJXyKHWWxMYIO+cZZVF6eJadQTer1q4\nihXTB7Ca3gaAGpc9j5rTOrZh1i0sqmp9eXaGQZFufDAJ08aChcNXc+itGmlL\n/JVdABTznlLNxnUZFFknmxtCSVNPX9Pw7Fg8Yy3/l7EBurMZ2a3ZVlTRmA0z\n/togcWUVdHsxKvBAEd4gIoqtvqYJecd6sFMDDNkeBvtXVCjjyxwm2pnqUY/a\nGT6dx3FIZzooHTgttKZLBZ743GZBGFWVKjifaRTheYCaSTP4vQKWe0VTJTnW\n6R3a\r\n=/B36\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuVTaLpA7TBAhV/5CCGIV3SdgxcLW+K9HPosJAw8sHvAIhAIPsaEf1Ot8Jw0CP1yGrWXbh1ckVP5IHTSjobmALi8o1"}]},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.195_1604288275119_0.1353153002439178"},"_hasShrinkwrap":false},"1.1.0-alpha.196":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.196","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1955f64bc7c7268298356838fab7c4fbb4b03e05","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.196","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-JkYUx6nCLMUHg9gKzeiNKTZI64sd7UYiMyprWDJAf9ld0kut8zhDkkVdO/CXn+ktdJ3dcJpXWFNuVC0af2lYsg==","shasum":"56f4ac372dc1451aba9e1a5dcd18172c4ae8201b","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.196.tgz","fileCount":246,"unpackedSize":6121587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfomB2CRA9TVsSAnZWagAASpwP/09R/iSMrKq0qecUJBl1\nBNGIrD8Qvu3Gw/i2In7BfzkK+FuszHHy/DBi50Nok8vEN1wIt4usyIt5qOiB\ni+yy+zpMqnJJkTF4fTb8b0v/uBOE4xuEi6BH7wSl3PuTLkje8sNsO0Od6t6L\nKn5EuHOq1BofpQwBlcWM4XZ5EIV0b9yLzQmewx+rDG7GR2s2xdq2w51a+ARi\n7jJIacMjUpsSVtEprfTohFxFPMJ9K0/frliJo/8LO9hAexKHRMXnUyPAZYKE\nvKj2ufX8h3V9lTAiQX4r34lJEw4bolYSiMpfb/GD9jc8K8/W2eDOYzk7uAbs\nhQBSwlB0w5TvjyFIkmMimR7CJMSUA0Mp8MBdAEd7gOperiTz2MWqgqnjJgBT\nx2PTsUdBgDFN202137BRbU9cECHkfSnZzvBTwHvMPJLQQncOzqGMGZmmxnzS\neVegzocPKARVYjsCCekAzo0z+tvVvz7Nk/BkmUHRoI8LMO1VBSCHZjm1XWGl\nrUB8maMH6LdkBwZpJlF+6z2fy0eNYrl7Kp798NIB48Y/AvWPpZBBcX4mF2sE\nBiIMaMfc/yr2wwnDjZmSk7y6u1Q2p44FnhllUY5nbuvuFHOxHuhYDqS3k4PV\no2Gi4xEN2MzZ9oN28Iuoj9bfk5JGkDXwkQXQ6iQpUtk2XNNaJERLd4E/t0Lw\nj7eB\r\n=5Jsf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNlvMXi5zlncclkAxJo3kM24XwJc702+FAJ7Q/0efuvgIgWkkxxkWisdTkewCBSdJ048Kz2DI4UyI95tWkmJXfclE="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.196_1604477046123_0.03448715269283342"},"_hasShrinkwrap":false},"1.1.0-alpha.197":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.197","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"9fed79489671626d76c9a8697e3ae68c22b65c69","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.197","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-3eF3TqxJmsaure6NiWnqv34Oy/KCFdT/W3baKAuLZGGjQYqcOCE4AdDF2+s5lZQXqu/SUfrHZeEk7fAMH0ci0w==","shasum":"8ccc86d17df0324fe0fe081df3cf6b819c7dafd9","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.197.tgz","fileCount":250,"unpackedSize":6140370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfomscCRA9TVsSAnZWagAAD4IP/imbSNcRSiLGrIDn++fF\nnDlIoElE+OtlRGt5AW2UCdo2tWo7AijhTC3jiX+N2byppCw2ZS+T9UHIu1NU\neUshVzhyI6MNTQMAhvhpw+4LUPADor0L+jGflDEbdvMuUi+KYkeI/k1EXGfS\ngSR2a6IGisaWWSsAo0nqARGZSr2bTQQoDmyC7M+v262I/PSuEoePy8zhHi3h\neZ6HutbijqdOqBHXsLoXVXikzmYlqNBSbINjTU2lpOctxf1RNy/ATrCCi/Jn\n29FwnA0adVV6fhpQp0sihJGrAivF0L+CzS7N54PDsQyJex4Wiwjc85w8hnpc\naBEOtoI0yNzuJWALPlxPaORlxdrYvuXpG7MYianR8xtnABRImfBXzRACUXck\nBrFbZ8voyYTpjx23IA4qjUoh1S+jfPo/JYCKM590avDXitK58zrjkKj4nH4W\nKFOzM4WPrKzyQ2Hb0Gc/7AA1lWGQeRLq7QqSa2x+LD7daM2HU7b4L3yG7g3l\nfsawBklygXIfVsIBB+aUdIA0vXvMAK597Tcs0MNW5Q/P54yi9zvmamg+zzCA\n64u1vs9mo48L32vobwYJE+UixZNEw6AtZnZLeJKdwq9plZ8MM7aYmKQFWHnO\necFHjYlG22gH9ldSzdRQK6cTXTzZxKjrAd/XTcBwFDZpBLnlj3I8QJLyNtKL\nLH3I\r\n=e1IP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE5uWPxXk6VLEl3bFPOO3wkGpGvPM7hGySOc7mMYr31WAiAq8fk8Nm+0qFAjyjmZaPyLiukRprGJfN0JrZtZ73bbMQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.197_1604479771576_0.528730687040964"},"_hasShrinkwrap":false},"1.1.0-alpha.198":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.198","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6ff392133f753ede2046953780113c003a1fb974","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.198","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-yZ49TRYI4D1JreLe189D4cDaQrrqoz/of3xoIhUv6ZTOkK/PmUYEwrSuSIu86MhmLoRzsh8aTKXge3nz80OCaw==","shasum":"6f96588d04344bb16257437fb34865c13e124c38","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.198.tgz","fileCount":250,"unpackedSize":6139539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfozZECRA9TVsSAnZWagAAPAcP/j4T33whcxG+KgQsOzVa\nPSdgnGycENcu8X3CFhX0ofh48yGdTCdJsh4riusv+VMApgq8le9/5GgRLRPM\nmhwGNnCg1KK9uYwY4VPsdyiQcPznUiJtAwPJu9NshaEeYTDMUR+Q618HCFu7\ngoJ6rQZgF4He8zroxbhZzw8aI7SAME2DPoHmS4dKa9YA3EPS+zHgoE3U+478\ncfC3PZ/97QZVM72/NUPY06yFLnaF/dxPc/k/YsNCOG7h0EIvA28L203V2LUq\n3oXmRaciDpTwYpMSnHw05W6Oae/JqvzKPrJckdBozkzJqkN50oMdDnMgwaGX\n4+vElo78KQ03QruL4FXQj1WiM5KWFRarTAN7cyp80cFXBOurIHXuRPPbTaRR\nB2dChzKn9STpCcY5eSWVwSmkCUsvFKYKKKhPdUaxUUA6K7Tya6bdelJT1dMc\nx5A7aUMNg/ONvvo1Eea8brBqosV6UtBuD94zKN8bgj1plQY7wLvsGfPu1DZw\nQrGmQyiyiwDFzklINuXUBRJI3Ppf2VQj2PU9JBXqp+tIp19EvVhvR3wg8ytq\nWw60VNatRhcEwrEXI7wyPkMDRevGkBZdWXsv9WqZuZuyDSgPSkeUNJtb8fi7\nu26sY21TuNN9GpQZX88txJEiiGTCuawyDYxhvlHDBI0LGOtI6sUUqM8Khzs6\n4DoP\r\n=gE81\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPNtlrx89KZ+bYQ+/KenGicxN3AZOOj5Z1P4ykLoetZAIgBXR38RnZ8638dUuQvMwoulRfYYO4YwuaHIatOKi3pWE="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.198_1604531779930_0.5644419891817392"},"_hasShrinkwrap":false},"1.1.0-alpha.199":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.199","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1be3a70a538c393fbd93bcd29d176018a542a5c7","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.199","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-TBUIVfLJ7UDzy4otjaUjYCR5GBH0ru3xmZFjULdrCRYOyvoZezPRleAAaJmIS79FIzMwa6tXg2UMT9G6Kdi0rw==","shasum":"f28fd5d7dcd966a857c56d9b478c00827911793c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.199.tgz","fileCount":250,"unpackedSize":6143941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo2wMCRA9TVsSAnZWagAA/KoP/jCJyeA7+GbN4/sZKDm9\nTHQmaWjg5oPsiD9PXJe2g6tWSPTMiQCX2PTMWWjQBVkxAu3FLEmpR4NJvTjO\nrCKpeCcYj4jBf1dQKa/nkPIMJKZVRKI32thuKPksCKbi4PRLhQVR+RxNGeug\nGnIsSQUCAi4OWL+nOk2uRTJm1hddY3icY7c3hm1mXQ8zgsVSIXRNlMLDqbmd\n7MdKvHCeu1djoNSztVUlwfFZL1sVfjq54floo/ztuSykCpUvczC9hUqORhPA\nNre894YlmXdLVP2EeTwjIISuie8sE179ZVMvoglyxJySo00HkrrSxBwkemqo\nmw5yGQlQsSLcWpJmTNLo9AQ61w9eaglTq6sG4wdQFA4gJXUUIlAoIDOnSCzm\nqvf7YaQDcHB+tZV/N6K+QeWFHTVzoixtVKxiXn8vdMSYmldC1ah4eniexpgM\n8YtFWEsTnb/RU/Sjr+oUM4QKsbDrWEiH5ud1Q5OBiQaW6UGXQR2Lpz0lEEHO\nk2/j/gVqMN53gUztx37eL/66rIQmD08/yGU770CzI2Vf6SC0lPWfKl3n2hwT\nzOzXrOSdQ6M8WVqxtthWSRngfRvMrrVG+LpfPu2qxVb1tjREYyaRmyd3ji1W\nA5QZC/q8gAZglRyZ5spBIMibfuQf2TyV+KC07F5pcaU7lou6OmCKov3N1MRA\nHe4a\r\n=KMFk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPCgh9G8tEC/oQ+2GdgeBOaZhHa/cgEi/ha8iPFc7DaAiEAoltkIYsHa99GA6g9oLAvRZLdgugOJyyM8jkn4Xo+Qlw="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.199_1604545548454_0.5853707539677755"},"_hasShrinkwrap":false},"1.1.0-alpha.200":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.200","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^5.3.19","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"052c9e9bbbdff8bdd5e7f4b27ad9566d87f8acfd","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.200","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-pNDB2biQeBPxaoQlVJ6OesQfLbSZK1PZ9QQgzIxNqKadUza2NgqdXqxJiYBlRFm1zFMkfVHEvbfhpzTuXNXzjA==","shasum":"2b658205a20d2bfdcad2479de4fabe25b6a0c30f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.200.tgz","fileCount":250,"unpackedSize":6144790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpRcfCRA9TVsSAnZWagAAi/UQAIHBSFJetGxoEFNjFprE\nPpccr6ZKNMhyU2qZhLiRb8KTc+Nth/slbX9gYtdzk0rIPOnSn6WhsSztl2DY\nr5V5t7HOgDMMb4B+tZTikpKnkJdSy/8dOujycWara+ZkBSFmcZqyn6dBQ7ZJ\nCrALinl84jKMgCeI2ftQUQW1P2sFckHrjBmM0gEhjEC3ROiV5OZUU9wsRY40\noWqqpfVs4fm05WAiH0K5rvlE3ipTPxbCwjg8hkyZXF5A1uHc2CQyZ7tRezfk\nZXpffdRuajW1ErkucR5TD3WyLeTG5k0VX2mVwNttvcsQafMMPuH3sm0eh+c+\nz1i7UFaKUD4HwrT8VRZOsqq3t6ItTDiSmiNX3pp+7lV9CF3PF1ZkDMvXisYq\nst2bxjxgHMe1ObLb5l3VgHH+L9t3bjmhnEaXcRqiDI59qtpcnygBW80v+7Kn\nfNNww9WYrWm8AbuAF4GR3wr/m8gTBY3g07MWxDNvC6I7W7e0x+4QYbpPe8aB\nw1tFMrDEx3de8YVkfUloUTJ7s7/IRmY1vCy7Oa2JSe5TIssj4ILQdGWo4UOl\n9KO4hCjQgkwtzpJ4my7HVvTz8m+vSDW5SAf/1Ru/TFbnjTSNgxnGvYwIAiZx\n2iMXQK88FEUjDUQA1A4WRrcU3X/ssjLvwMhTqvfyMGaCcVvxfcBzPypbY8pf\nUHMQ\r\n=i5WG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxLcj2p2SSgh09whqXU6x0SUisYb/XbFuJM5OwLJmV0AiBoRlyYheW62VlxRM3VUlvt3g8FeKCB+0QNc6tzSPbZ+A=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.200_1604654878234_0.5037686025969026"},"_hasShrinkwrap":false},"1.1.0-alpha.201":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.201","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"280ff43b1cfb873107d13e9fdd5571805d600f82","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.201","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-KZIoFENfKgyzbnkF4JzSHPM3VFgSFTBc2OOtJfa2d3Uceti225fh+u2QAQGQsv9pSCza0SZPavrkdBFhh/8yGw==","shasum":"fbce1ff47bd5fd008ad678e10ad029616753fffe","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.201.tgz","fileCount":250,"unpackedSize":6143374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqgUYCRA9TVsSAnZWagAAJbQP/2XQTcb2Oj5fbaA2Wk0J\nvoQ/QZgq7pbk1CPq7p8lu77oUbKuZGKhCbc+A18qFSyZP0nCgkYKjXhTCLFz\nYz8vQmvb3jdumub9ZtLyseMcKO3ipOgzTKvdkpsWWpDZql+lupOoCTKqSEpb\nUTrDxaGoScHZaab4Pl89KuHRWJPM/GcefVDa4dwhVaY6WT1eYOujMUN9B7J4\nL7GaAqcsrSXAXDhBS8bwF9fHQq1ifIRtZjfTAaXoh6VsV/GI7SJIdNilIMzs\nup+hK2WzcVGYEvQCil/RMfvYxFcvIoc7B/f1k9fKjFEuPC2N0eECOXqnP2Cf\nHTVr3VPeC459igKkvfjJZY9eNGHgCbTA8J2Uz+SwvWGRxnVO0A05Sf7EhorC\nawibMtVeJ+VfzEcQhKkxnoVThULw/z9dpVF0rE6epF1FRn8YvaeVWNn5SZ+j\nKZmo9xOfy9RB82vhl/u5TNGPRVOL0k3repmWPnmhWk62DfuP58ax94AXLUNF\n5t95atVd/8UwoPD4p3I4qj9oOJjP5GKrbQCUJheDoUq2xzae+s36oBdZUEem\nQl0EJyg0OBf7bLrv4gRpOqS7xYAN7LVrwJFfUbOHchpahHNoZuM44/AS7QGV\n/TriajluLVEn+T5vINfx6fkDK4UOek1ucYkmo6AI3rwGh4jX1H63Jt7AtTOw\nEigS\r\n=JUac\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9MDfX3l/RK+oVtvKv1Vu80KzhW01swlIIyioIRsE6rAiBUBCRn1vLpHfu+QKZlODH/rsdIQ1fWn2gjU+I8l19UPQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.201_1604977942992_0.059187350748791445"},"_hasShrinkwrap":false},"1.1.0-alpha.202":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.202","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"65a866ff15a6359287cea6af98c720729625b176","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.202","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Xu9yLoaBSlPu6bdKr/ZEXyQsQVfXl9dVcozt4zeWPllTLcsKMTmPUzA9hPe3trVJPkrNrvxCI9JyYe8VvNF2gQ==","shasum":"f63792c62e9ba82d96f9648063dd04eedcc5e616","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.202.tgz","fileCount":250,"unpackedSize":6130718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqhNFCRA9TVsSAnZWagAArjIP/R7b0sdOFOx5GhgFWs2k\n2kPC5VGqxtDjLjcpq1fxad5hc9JRIHr8na1JlCVKW++KuDc7XaeD/NUtAPnW\nQyJ33YompZtuecC7/2BN4J0vvecgFfvoIpo49g2WeOEzqIRqyuROr5ykqlSS\nto4jymhIS57x/fz/EI0MZanBya3WqNcsFTaoynWs4uo/CP5V/l5/qri6nN9B\neDc0lYNzj7p7chvfc8yuTWb+6Jc0DJyba5VvBTFqVdrB2jHd8QqYMZOSilcu\ntbBSyfK4QkNblQJX2FOvgc7v3CETb0YespPwdzXsxfBQcO0loEG+ZrQdezX7\n0FLr89umm5ZwdK0i859r2EBgMTv/fFE8ZXNpd02hV8f0oToXLQQVhO82Ix7e\ngbc6dq3KydfCpHaHfHPJTWRT9JzH+smrIJ3fvz6BFcfMvwXXQ8YO0ipQNMpQ\nKjG23d8tJFyapByxOIPp3IuR878z0Rc4SNGEa/yaSGbMAFuMtpBQNoJ8S75V\nfI1PRE5aduBRSz9Ehm3qpjs5Bi9ELwCX6wxWFO3Q7Xjyw5yiyA+cGCpsFsHO\nILnz2XL0MxM/K6+Oz9u0Reibj8dNrwR8ZUgSdLQGZrp/cA29LU42DxuMyKUI\nwxF7WAPP6hCkC79e6UQriCjUsHvXXvAbl4ejwaiziuoDpOIPj8qQxEX6zfUZ\nBJH+\r\n=w6V8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEytOTV7DqkLk++BaOJpdURpHyTbnajfcxCrvY80E/jVAiAUNM9mujXXbcUFTt/QOTLyDvlL6RlEcWEp6vT+Z2afaw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.202_1604981572434_0.292717299260834"},"_hasShrinkwrap":false},"1.1.0-alpha.203":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.203","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ded829a9cb8f745d8bb9b9091c163120158b2c06","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.203","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Z8yMFJOvMxJK2SxeZAKu+QKFL6Je0GOKyYA8QkiWbi8nvuDeF/UsuGLPq/oPmbFgXA0O35M46p519Ts5/0hmaA==","shasum":"118de0bc5e6075557189ff16c4d26c8483826e68","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.203.tgz","fileCount":250,"unpackedSize":6137451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqzbeCRA9TVsSAnZWagAArEMQAJZFJQ7HWFml8Yk77zOY\nsGOyahOAUy4aQVldGyRTkCwNm8RGMG1zO7t8oPhvS+o+Ynhf2E2N3QaoVosM\nyUgEsBD2ZWGtJkcBGUz/4Qfj1TfJXhGAt319g9ngO1Jva9M174mG0WmyXf9L\nVpOzG6QSkk/VXsQD3wURwVqpPGTB3/JzH38oV9faUR2CPBmXFbej2dHs/ruI\nB3pGdZBH1z9e6vu44cELEXvTSiPxRZt456G4UTwaT7+wTqDmw7Q3BHm3CHjS\nPZVr6D7bng1m9Z71yj0LwaVrSFu2H3Izd1LVLAlYYQeFVlEJ1WiS8uejnr8C\n2wpTqwntNYP27mMvXji3F5k+yxHEhR6Yau4OrtSBveqHYdparudpkJrDeWDa\nSgH2JcCNVd4/Isr91V2A+cRy7341idxwVvmtcG+If5g26t0NOOP6evjPcLop\nWi+R+faRVpU7rQgQtnsfN9QO/9TGLSTS6pjlKBoVaG4uQdhg/kQ/cvOAkSDG\n7OerWLWW+gsXtoX+Lie3xHsGtv6ytF3xv5RB/SZ8EIhdO3X4FS0XTUjzHdh5\nE23kmhV4CGdHCzwAr5NaF/in/TLS8Q0LqtBw1TBaTba+zP38IwQt5mqJ5RjO\nViJ7yjMsjeiHtbQkxclGPKMDd0zIDhibtDwceOkbrWf0r7pAQSj9l+H5FHFZ\n0ust\r\n=UUsZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBb+5RkJB5CZywH1RvloGj9w0hzKQjsMTDiMma3OZ9SXAiEAnsMxdCvkVUwnvy0f3XALF70AMLr5TP3eLYaaLhoJ8CY="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.203_1605056222249_0.5022843258829521"},"_hasShrinkwrap":false},"1.1.0-alpha.204":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.204","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"bd540dabe2de8926642ea04a05545f67abf6f54b","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.204","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-q23v8zFqv1CGt1QJV/6RfPGqxoyTNBeEE8mI2OBRh/t7M6cCkXxLsuxu7VmuPDBNFUJcJRsXqu+DFo82CTajGQ==","shasum":"9d0802ef04d0fb63a48c4f590c6762dd24a4da29","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.204.tgz","fileCount":250,"unpackedSize":6149931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq7ZUCRA9TVsSAnZWagAAKSQP/RFy8wgJw5EU4/9qpk1t\n5ixXwOpTaBSA4FGdhBTaOXoOYxKzffmvmjSzrnGKScgxEoeRtsjrLZ27465a\nAfiMBSSEVc+MKQAslJw111fL6Mz0HZF4/WI4ZDPdNdOLleNUDaFdSZl1fivj\nZRWNXLO0QndL6uLmp/Ijrmj94jmBBUgBAfYfUmTvP5GtJz/hjG+3aeyNF5gi\nG7TLYp5ASrbPasClerElonsbYM8tKfxm/FWJcuEVJGRvTL7uGfHLgfYSpEi7\nH+qOYn2e1mpsAYSS8wX4gTuW36U0mkp1uyUmkCoJcYS8fBwHmpucL/JvzhnN\nsmwyptJ3aVVK5sEduKNaq65XeKtxSFWzZiQutsZ3+4PSsdvpu2mm8w/c3NoK\nsacgB19ZLI77mGyQ5KN5AJ9t/lpqjKs7qbYV9FNkMY9ZdxgvUczbTEXzmIBg\nzEbJdSfvwO4pwa9pfkdvtlq9XYRBve15LhaF6zU0TL2xGAeg9aWWBG9/0i6u\njcTF8BhwtSgmR69uBHSHUdGYC1yHX5Xf8fzB1Fut9d8xaJrb2eGvvo97Y1nV\n1IvA+hVj54x1pCdDSfeOew46AaDHqCWNXAvkAMqJyRpLyPeemlvFnh9ylChr\nkNTe5akq56PjpPwhpUQ7xEnqLawZeXnNBkYh+Ir4FpCm1JyM4cQx+oQLub+B\nKsfX\r\n=VGHV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJ0UeIaM5jscc47cDI0BWpkHszX7RpqhCCtMtTKpFSfAiA6KZ/PP6qCaKSsGf0S0iL9r9l8IEq4v5xRTVhx180BQg=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.204_1605088851885_0.35893750281798664"},"_hasShrinkwrap":false},"1.1.0-alpha.205":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.205","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"19ba31e5a6c1a41bd7362bf8b5dd28b067992c3a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.205","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-lnAjgwZfr6VSRX0M9pMz5SI82sD3jm/LVUv0gxDIa0r4d0NZQosP025OLLtTzAX6xzalv9oMf5CaYZtthEwDsA==","shasum":"ead0d9756335087cd9b3c5c4c68cd0793574a895","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.205.tgz","fileCount":250,"unpackedSize":6152511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq9HyCRA9TVsSAnZWagAABgoP/jXwthCjVJW0R+zSWpSC\nZ7/0x7ch58jSaToMi2vErsP7U1uP8kD0aq5TVbS1RrtPW+/esMkdcGcP9Ro8\nyP0PuIY6zLMEAeZht3sIEGKIR4fiJJFPLpyvGOWxV79v5MUB6bcmmSYJowGO\n3hI2SKqOsM9zKcEH73U4Lb68q2N7029JfCHcl6doefej/YnihEqEkZGhDVPf\nAiYmAxdc68Du3Ibm/V3WJ6iTJJIea9XPoeX0xTexGdEvguVZdlJMQPWUGKis\nFkwAsufDuS5pA2j+1mbDPF5WE6q7aRbj6XV+SQlUpG/LP+eyW5oVq2gSixSy\nloXjTQSNMVVVm95Ox+wk2hgdfF9koAUB6bjVeZfTM0H1gAoCnGiPie+CzLpz\nKwayELAKpnzJbgaInMamq/RMn/iJjX/u6EUcO34qnOJao4ZK2bjiGTW2DO9n\nCBmA5lnYRNey4Sf6+1qy3MVGctpjNnnpQ5/+lt38K4zMWRGVPYhR3CpGorbr\nBDP8Jaqap5RmqR5QshG4TJJ4fsW+D04ojMXG1eawAN8qaLhO4V+e0N8FUk29\n4PcedvyFZYVc3fsYEuagsxJo9eppzIDv1kSBgWu6nKz0Ev4Snwgv7U7Uzit0\njVUvwJB5BYo9a5p5bfScj0lgd43UnkEQTKni8HOL1U4qrrzSLrr0EiIv+0gx\nFY3B\r\n=J3dI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEYetq3XUHCPGVRjRD9ZB4vc+6t3m99k9r48MWTR52vQIgZNUJXM2XimV1ah76R7z9Wgrth2HFsyK1YBf/5xtHUQo="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.205_1605095922260_0.10452221845677401"},"_hasShrinkwrap":false},"1.1.0-alpha.206":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.206","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","storybook-styled-components-theme-selector":"^1.0.0","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"df717db11d446eef4e77deb659630138c8591a2c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.206","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-AboggXUgy05wnw4ll68dG7/di+KxblKZn/jVmfyAXlUUDksytllHhk0BywIISXP8MMQOSg38s5zsI/FsFkB/cQ==","shasum":"90b34d791e587292282d28cbf27b513e7fb78c64","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.206.tgz","fileCount":250,"unpackedSize":6135053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrJLPCRA9TVsSAnZWagAA4V8QAJg9g549POubgLSk6LpT\nQ/feKUTtMIoDwBt+RiSgaa52m+1mSWKcVQyKUy9P5WXPtX+I8e+3km0j4Kbp\n1xYLlvWu9riCtnEjbgmUnFzCWdoOCuDafO1nvYaSbZ7PjyJmLZrJWXeVDq7F\nxlUzczGBWeBoTqnHhnQHfzZP3S2eVCdu11lkYER/IGEfdjmI+gA5ekakqMck\nSM8pkRX5iCrZPGQ0KVtnjT3Ml/UG40vRpKJtUN20diNv5ZvILP4rzl8bu0lL\nEMBcbHrqG1kkMSuNNBlV2zZ3ocRHenfs3w2Y80TyPE3equsN86Y8JD0ZqRDZ\n3unbCmMosP3MRV8j5ou03vqTOXwVBLfp2+wdH29cNivDZwlrB01SC509Sv3N\nXZZTj0uCqy02ztTxda+1bEZKAseVIM9LnDWJDNT7zVrFjwB7dJ7huoxFFKYB\nZpAZFyEgYlQudlt4J6knyRkHuSylffAHiO/dL4KdcyC/M0h8KoOnqc5iwP0f\nr7eUZHR4CErOHvoGX/GpSzxxk3KQIWEf8oHhtJPFF8aouEGDNXUjbDKDL50P\nrQhmcik5Nmj0ycUATyBoZGenvVtSB+qIO699AmUDr14wLtfBuV9nLr2pmCkO\nMzI7GKyFSVXxa1sVPp4+10FCqdZK+u1o+hdRkLtP2AUVZCH39nr/FKH0Ls/q\noyld\r\n=NZ/C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIElBvF90Bw0K8WQutaWE0YGetSM5Wh8iqMJjdem65NrGAiEAxyze86/wJEjRu9iwk0Pa2h6jcNVRaP0DfdJ+bbzODbM="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.206_1605145295184_0.13862780266255093"},"_hasShrinkwrap":false},"1.1.0-alpha.207":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.207","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"48f024488ca95d481618aea5503361d18f77be8b","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.207","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Eo5y/2VjkQp6yPwFMQnnU3DO/fZMGaY85GN747zhR+itl3zsx3FLlppZio5HmhCo4GlBsoy5mlKRZR9+XH/8PA==","shasum":"124bed4e8284d0976068bf617353da5647281f66","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.207.tgz","fileCount":249,"unpackedSize":6176250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs0JbCRA9TVsSAnZWagAAEigP/AvY0v1xe9q7anpnHapH\nRDQZW4a+MNUWVNaQ9MLvNrNYZPt/KVbfftA87MFbv74GYn0ktWW0o6/oQtD5\n6/WJ1XHkCjgXp1DwCvnN7v1e9GcoCfk6iIt7ArdoDQ2N6ZqDiICERzB2NcHR\nDcTrQ1lJ2HC/ucaxThPjSOLdUrMsgYzYx2RxPXNuq5W2CZCzNVEPQtemUXEH\nQTeJ81rZR8XUzW1gVjy2JUjFY6wQ2wKB9vSdzlKX0eAUjMiQIiK/tp68Y+e0\nWUv/0QobRdO1m8OQQS1LJ8UJgHN8lD4A0muc3b6JM5b3KEgPT3yqpuOsxdHK\nwC1IrDcORiqLaLb87DA+nHUvlfzo73K1S1HM/D4i9luaSUowGARrJ+VVPTiK\n8KwNIEWQoEHpPz5ebRNUFE6SQTvznpiXNR1qRzRpixDl42OJk/yGyoA+6dSe\n6TdGJpRwPNe1hR/58O2DA+it0cwplc7sn4fZkY62G5BVwgqFbVZ7AwRGT6V8\nhnmCfoM4vPDocqdMM5/gK0TzeeWeGvK+jJDP1oi773fj8TLZ45DzYBQXsZgX\nBDawpLLOPuRRtM6WFOEwFvyvSAfsh3mf/IuPr8oDtH/+iCi2o55XwLgeD350\ntjAAAdht2m0lyclcmChS+OTgGju0DWRHf8oRX5k/2y2rRH4adWw5WRyDAeRd\nShmO\r\n=i43P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHB+vinfhX06Dg/PeXTAp5a9ArGrdpqzJfvE6US2DVdgIgOfpUFLcgFPWWlZYl4gNIlNpa453HrUD1JMET8EYmaK4="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.207_1605583450783_0.5968415470821553"},"_hasShrinkwrap":false},"1.1.0-alpha.208":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.208","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f3fddefddfd4a41058c6c5eef145f1438193e6f9","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.208","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-1K5ZL5SGFzTNFX8uLJzkgqJCAPSnLGABlUhv1a1z8h71Ni4eZ+lzbK+6J9N/WcDwt35+DZYjyEwW02j5IfP2Vw==","shasum":"57d7b7f49a9a3780e2fdc678af6e2991d9726480","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.208.tgz","fileCount":248,"unpackedSize":6181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftLHVCRA9TVsSAnZWagAALMQP/RLfTonnPkBZwT+E3vnJ\n0X11IRRL7UqmCyrh/mfR6j+npeJmRXYPQXwaZDEdxEDXGEpy77d9uN3T0Sve\nW9ci7NQ9Om0QwxPFvuL+vyksbLpaCUH55XMNTqggRjxjBoT5gKE5gRu95R3R\nKEdluHzTjZ5X/0qbGvR2vBQdXUGdgIN3Uc+Bju/CilGzDaFZIAkL+fQWrG+F\nT8AlX0l1nx88tToyJUlmZVdD3i5Hfv5BYftUdPRDlWJmbxHU+qvpqa7pyWf4\nQE4pXqVJf1b+1Um47jqC6u0LHKCFjv6LPP5L7c+1Yk/wgW5T9tx0d19WUvBQ\nxdsH0DTKo0uY5f7IzZ9m/LrAlrQP74/WW0sIkZJ29whhDE7Srg8j7VA5WAfx\n6yISPIW4vRbBSYNl6hE5vWOdN7DRmt/yrId1TQmgb7S/8yZDw9Gj7u+aWXtt\ntnbLnSNZrcgHJTeWW7OCnJDEWDzhQOhPdeteK0+94g3MhgHDk73KsT3S6HCY\nF70tpcMhdZVUsdYZAU4aFhJZgunmeJTjUVMbp18/fnktVD4ttMQJiaHJgkIL\nba6f11BlmBGaToJnkPI84DsHu4X92RIfxofmrc4hxWcGyQZNrn392HkP/EQP\nd8WEIl8I1yokH7mW+LdxrRQSbhleaRnzag4yW9xbCte2/K3XBmb1+//Ox3+T\nHXTH\r\n=Xu8b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4iSGR+uGHXZjFYGEk4rBxC0ThlhCfkRh483RhvxWTNAiEA75fLYPlp9WYxG0if558knBlISqSYxoHVqzQuwzi9PEo="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.208_1605677524956_0.7816952087702909"},"_hasShrinkwrap":false},"1.1.0-alpha.209":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.209","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"d6fa809d1940431efbd622109c387956c4dfdcbc","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.209","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-cYqa8OApy07l7nqO0EWAQ0EHz44xwSIUbjpWX4DRXlMDTHUhSDVYo7uAZ7qW7CY0Jj4FJu9kkohz5V5GfXwoDg==","shasum":"192180ddcc668be603f6863e2476cf810db09edc","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.209.tgz","fileCount":248,"unpackedSize":6187453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftO0cCRA9TVsSAnZWagAAQSMP+QFYAvrLsJZf33pGpk2j\nZvCV1xW8Vflqu38oVqp0hisKZQ/8ddwGjR2tx1fPjM2Eaq//oVnhq1q0/WLr\nvGRmRlfFtDohUCAfZSHfR9Npwxs2UmG6IQI+U+yYOqEoY7nEWsIDKLWBhE7q\nGgJxIpz2WlC49bVDJT9cK4mpBSdrvqYIaNh3G2I1VRI870mLe++lGi7V+zHN\nMFDGrhq/zNHWYclhwjcOIWnEFUBn1cJqHyR7veXC0zRQ7QGWGXQdbQhvS265\n9z6COCcy7Wj9QFcyGZVZ7/LsA6JPf/vvVkIJSBQyZ2GbBDbG61j8k7Ti41mV\nvU4Rplj+kSfGVTBOcGZluYX0MZi9sTvgLgNSoZyjmhz6ahAdEFtmftlD9YEg\nat8ilnzT9nLy6CKDSQ20aUZmhr6QY/CYeYQ8UZffEUE03OP4FrZoY5rCwdfv\nYTbB5RNv/26IFccnLNyKqz3FGo2UmS7ZHRBgYm2k4wek+/hlnVgwOkQmfTxZ\nIUZXi58nvoXYLEbweBDcmyihnGP3nCl5LoJGAh7w6gzIaEVdIcVZaeE+9hcr\n4D+orsBUrxRDnsExUWXLf1HInTAV83UaNFnD2br3v0RVWFgezBAIabWyLoFl\nZ+jFFNiT6saARBfCTInIgpNI7rkxLwk4qFMWmso3B4qB4NnLNLk736w8cpl9\nAAtT\r\n=F7H/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGnrSXtIh4JtL9eUDgiToA6qAFLDxkQ4Ad78xEU5fCBvAiAlD1HqtsazztoyyD+EuuJ+yvSun8LbU95NjbyOVrXUVw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.209_1605692700287_0.9276366831851464"},"_hasShrinkwrap":false},"1.1.0-alpha.210":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.210","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"b7f0184e8516d737ab71c948e868436b4d77b25c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.210","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-buXajNkFqE8Y+mU2hcB1wjEqL8fpFafrK43LV+6azPFQ9KI7T5CtH6YRpFxQr5bSRDPQXmb4JMPJNo6geYe33g==","shasum":"c1b73b9c73ee5c20e44727f78c8927c1c24ba70a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.210.tgz","fileCount":252,"unpackedSize":6201603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftPgrCRA9TVsSAnZWagAAgSYP/imUasEuQt7OoNC8cxJb\nM5oCmfzzNr05OaSFkAf/JeUIWLs1FIZNALeWty4KFEG3YG0SF34+4QXvros8\npFryI3j67N6qoWFpH5cIM09RnqFiCPEQbMylxzpt+xDhDCUlg+FfzI/0ouwJ\nixlVrTbR4mhNSmJROET+GS0hHjxXXmrivLxyPE0NGH9rNlXQserWJOmyqzuw\n9owJQ+jbYyZ7Ylqc9RhvIHP5MJwDmoi5ShSxLU0H6YEOo2WCu8l3So3Xjjj2\nRuKXFZXL3pxV22ubpa0vTl7YyXbxJZ/SNo7GjUn2CsB82+F4MxNKzphwGyyt\n8vZmoMa7EWq8NxTCKmIMD3H/SlsBGQhWNX4ldsC07pQ8SyJ2a8NMTt8YxRhf\neLFj1b5K+CFNsltE++jyCIWChcIU39ZzQhfsU1gjsiBEjYPluphhfXBrAkKa\nF1V8WX8mHBZCcHcXh/wWaa3BgLt6Ftu9RQ+9cRqbP3iatdxhl6ahJKoZbyp8\nQe7nXYkWF7UTFFBOJEFmcXIg11azOVTEdGhYJO7gNn/i+ADIHriKCTgZW9xA\nKUn/U6YSBlYRllnk12DoY9HaQMZY9mdqR++JaoUrvNSerB1ibUNc7W5J8qVP\ntSVQjQfgu+7S+kG8XJVIw/nqOjYWPEfnLIdOgKGjiDELsL1fALPDaJeswG3g\nPFcw\r\n=sO0L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa6levBdcch/jktxv+/MYTcS3G/Zs2cvw/sPymDjWZagIgDZ73VaUnuCH5wDIW4rCPQs76kOGh+epmj1whUp0Xrcg="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.210_1605695531240_0.2286986360793375"},"_hasShrinkwrap":false},"1.1.0-alpha.211":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.211","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"96c232635d12e85df619db7c501ffd529b29cb48","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.211","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-53fUzkTXfSriONYga5UwawbiWFwq+urhvlO0J26H9AuFhGddd+wUfbA1A2sSjg0/w3QJjs1vzcXEstRrroYPyQ==","shasum":"bd5a293fb9992008c97fe9330f925d1ce3706e42","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.211.tgz","fileCount":252,"unpackedSize":6200440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftyRfCRA9TVsSAnZWagAASC4P/0j1XuJ+uhVpBcAXAv6d\nrEgx1aXg1oLvaj45jjyFkzNUiTR7KlPFKUrir6xDpmpQCIjhonulpdZjSFwR\n75YFVjVB1xSLIPVDQ6+jjic1HK1ew1Y3g1sU7EXtWz3iJhyUoS3hT8mjDpT4\nJ5LN5iCM/xFRaoewlv0ZwgLgxXCXz/fGd67ghn8jlj9Ts9CD4T3kV1sniXzf\n1TNN30E2APsveyU26o27ZzQr6OGfZASMchGRnD5Sjp4n4abWhX0mCEm++yY/\n2mGX70UmCEcUMw38+fgtjXqAFSCpC/2zQlgZCyjucwqTLX8nQ3tw7EFMIXvX\nqFfakztvJlYvyJ7GMQ4IbTdL2qz+7VIna5ohSt7AAu4RGuySzqj5CRGUc5xK\nI8+O/Z3DeF2iMNh1STbH5UMX089LqEkVnUVF8IjT70ZatwVh7m6AEGqymM8Y\n8YXWJQIzxEHkYYTjZrIwaKeNOjnXaUn/q/QGIxBgs00BrIFK/aLwTQDwhjf6\n4ZIFPdw8NTJ4ZPcSBifLzp1z7JoYc9T5t6kHsbv+TADxxCEVhkgjodzQdGIW\nf57tvkXYWlBpDowUhlPIeDzdmXY7Ssb+sxiiGqq7tAC22znsnSp35fnvSkMI\n0eTCkBQR4w4DAviqt24cPWrF1h1z043k9Y1sJxon4RA4sKEIuvt/SzMDAVAW\nkPmg\r\n=9GFL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1FmF8nyObrmCK3Qtv0DnY/BLOV686c6l5grHccctbmwIgJ5ya2QKv6ZRdKfXz28If6baXccNMDpUSbYHdIDoOOYI="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.211_1605837918349_0.8044762329359392"},"_hasShrinkwrap":false},"1.1.0-alpha.212":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.212","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ad038b2cfd0a416bc4db5a9e93d8417bfcf1fef5","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.212","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-7mHelYqcbbuzNI7bGvOJsiUdhFBlk8f9uCILqyAm0E73p0GJyg5E5vHEJzi+ps7XidgBdDPwUZlIeREruILxAg==","shasum":"d0c5272679da3378fed2d4f580e4dd243fa61171","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.212.tgz","fileCount":255,"unpackedSize":6209800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftzraCRA9TVsSAnZWagAANxgQAIm9GERv9dEeMxVhoZ3x\n2wxgAFG14LYCLzEfmLrbrlt9HcwD/Ubx34JeV0jWIcq+eAYq7EghxKbMPpyS\nM/WOSDcBiLo4jLIZy0ffkxjcKiHAzHrnkTwdtv/on6IoZSzuhUfYfsF6ntml\nU8DhPuRKk60mrH+PEXAs3qDaYyy2mV9dXQI2b2RS8LIJ1FfM5+JWHnXG/Obp\nFfTq1kbcMDocyGRYwls6WRSZVmJMgu/dr2CAdpGVSXD7udj+v+O26NwK7ZLZ\ncoVK5kXOtITFDcnansNuTK4R/tWcVrcghbK17+IKGyN0ICSL1Q0QfKuG19Aq\nMYYltaO9SzUdCneHuBPR0B74BDA9mFzVcRiP5ZQxZuY6mZP1rpOoDle+LZYL\nkuMRHq3QmTrKc0CzxmlsHEgkE5dYV45B5byfKf9fJO3EEcsSvIz8QBg9tBYV\nEUo3GnfqHxn6FEqZjzlx0sizS6N1L66/z2olSjYgVKqcITE/6BCOHZxg9ikO\n2oZvZ3oWJeLA5Rjw3d+D8wBsc5DhbdZWe8oUc6aY0SlL/n7o8Hq58QZoS32+\nO6chuLej/kBKxcCA2OVnXD57KidWvU+/Dm3nQQtOycE869b53oKcOJTqrd9S\nsNY/sVJasDXdURH+JcGMp+3F64hj0FTaiuzS5rsq0MNPkvCDTpvKULAnMfld\nI4CP\r\n=Vz2S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/M3RvkaQKaeEpTwynnMMTgT/lf2R5nV4MITsT1EuWXAiEA45Qtsvc2RHs2Grgc8uYPJ86QGWiFehPOyhnSqOqvNhU="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.212_1605843673773_0.5298054638572753"},"_hasShrinkwrap":false},"1.1.0-alpha.213":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.213","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f32ed64f2d5cfac6de16f041c1ec5e87b2183a30","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.213","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-TfAFYFrs3Yp+KxfiE0bu93h4OKj7eJbV+mCt/VYi338UZE9yuS1N0Xe4ocgobPv03xecSbatUNzUbo/5ZPO4Xg==","shasum":"8dfd1c8bfd4fc87c6ebe38627030c2ad7136745a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.213.tgz","fileCount":255,"unpackedSize":6210191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfu3iVCRA9TVsSAnZWagAABMcP/27oHOi9daL/bn3MmwoI\nI0xtwKYO7lS6E5BEKW10mDp1bfqXcu8RUcGBjP71bLFVJR7lsPmxWnSU9Qc7\nyVFhh3TcDcLLWBp54G7ZuV2GcgMsbbKrhGTIUotmiXqkvmVm3p/pkCpjUM/T\nX4SM0WXs0OS9OnU2/pILrHY1Lj6QOyyH6TY1nXCjMR6BLrH2EP/2TDfV8WVI\nvLYuPp22tJRFdBF8bW+DVkVcnF8YMVKVZmtlnw7ZFh9rRW1X+RScOsDWvfSz\nLUcELjSXJeO0u/CwENqC7ejEA5n4pDj93AMpGc1WAJ5RlpLqwyBTcu8mXB5L\nuqYa6QD+PHUbZPcsqrO9HsKgcTUb+CHjF7lKvPy3uHqvgCY6XKwBJjTwi7ea\nT4yOW6lp+ZCWNf0wsr5pzxytZlBkTpCabyEHvtoh5CfkbnFNljE869kX2XmS\nq/2+4r8PZCW/RwXJ0fCXv9XEGKISivTXaPJSdBd+tBTE1Sb1vnLnqYhPcKs4\nC0vtiVWY7v+lqwBadPnW4eI0CoQzszdi7CL2NKBXFlf50ObiEI/LE7h8WBiQ\nnIbwUcM2IojRfTfO1nLMQ7Lg1SB7astndImQoeeSgVjHuTxPShKvppeHpWlt\n2EarEZyyMk8G2qbBhL9iEaBhOhZ6hQw8jNJvY2m0N/805c3S5eCcqsN1J2g9\nupbt\r\n=z819\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC73jKB7gV5aBgPLlnl6rPJ8qqlz7V6SCJkDP4oL2YRUgIhAOpDN9mt6e+CsHbUJW+ycPr0VD3FfmrpbAeLD8d18HVa"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.213_1606121620353_0.2668624724485995"},"_hasShrinkwrap":false},"1.1.0-alpha.214":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.214","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"d3e6a25c93a7d61449f356db9571e1af44a79bcf","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.214","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-heKdoWwBIjpIc1bdZJxjRJADHYwn/nN1nWiczXlAC1hVCQlSgy2wMHR90FxlTxTIheV6/ciq8RnE2UuBDkFZwQ==","shasum":"8585f13e89878dda4beb583a3b0ce524acc86a67","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.214.tgz","fileCount":255,"unpackedSize":6210332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvFrDCRA9TVsSAnZWagAA8ecP/imVmzoywII2VJub+IM/\nuYtF8m/dWr+27B+04ADzQPgtW3QcEpQZ8btet5mxudQSlyRqOQcSOkR8g7eJ\n7jEhoc6En4OgKgL1WMogjNBiBIFohV6i7KorKAw9ivdO04fpehBYcsTfFZ9u\nfxWjcYOleIYN64t4B6NN+j+lNarv9DH26Xs7EfaZrPjkvCU8wCmCu9+zPq8l\nMtMRshnAheagPNgH1kfUhoVXIDxJK7CP+0uCfL4ITtJNlsFZBJAWT63cJYpY\nik7+n4gniFl00jDq02wxZ0YfEdBwSimikucmzQflixE2t1xICEqyOOghBZcI\nXciJFWgBvzaBU0/nDSOqEM6AOfXY0ocGg+bmo76zt77zXk3WDio6UUsuRFqU\nF1Lq+dJSRb264g6q5YLrjveD65FxYHMiNB43QmweHegxO6MbBHJHlo5+Q2yr\njE/rd0yk1CXwnmlU5DZxdymsPpUDFvRTxStcyD8YzE5I9O65AlUEBjpBAM+f\nmZVM4ZhkWIx2joTtivAOwHJK5elPqZ8cmK9H6J5ne+C3gXciAQTk9XUeH60H\nDEWoaVx6LQvYRS/yTMWFvr9GYSGhgLUwjpn11K45pq2hnhB7Q8s8zb7hPoOa\nAvuII22x0xhhhq0nX2YylvV58+i/gOqE6SsAZcr0ehYcQXTHlULGsagtp/qY\nmn9m\r\n=p1UY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7rS+PGLuLXE48kBbO5rVgde5K7Uign85Gsd5dIBjisAIhAKmPAtEE5CENiNkC8CB2HE4lWOH/EiMBSlh53moOgZff"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.214_1606179522772_0.8610770665045973"},"_hasShrinkwrap":false},"1.1.0-alpha.215":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.215","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"da52cd49deb2b3b0af23da20706f4ead2d9cbb08","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.215","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-cEXYkVnp/L23F2i9C4vXbcx5RJEOmLgSU0OdaqQL7+MxPaVWJ7WAvWN/3c+opeWkABPNzN+WVxn6sJauh7tdtQ==","shasum":"f350e3343c2fea99f97608607c8b32426911adad","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.215.tgz","fileCount":255,"unpackedSize":6213951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvHMPCRA9TVsSAnZWagAAtuAP/A9Tx+HUAKOP/c2RJjar\n1/co2S+oJIEFSaP9WQzDSimvHmt21fpxU3BndBs8ae/C2BtQrQPW44Zp+kCh\nRQ/FvWyePUL9G2JJaMM+fJ0DxBhewfsUFaC+6cp10COcalz8a3W6CHAYUtYp\n7M4lSMhvYNJ7RAV/gQZaXCwuGVnSQxP4SVYJVnFPFKm6L5ikJPHGjQUour2k\nEIYeYmQLQxffOI6kUeMmMSp5xhfq21raHoPdl/j75b43P9YnmAp3R0k1wjdl\ngfbCc+s2aECF7HHY+e/KPouzNS6jzTXRcINBsdP8k14eAn4jw6hjYDglFZCH\neElGUgs4d4Myy4vaa+wLpP+1eTk/6SdlcGXDH5u7P3jCzL/xkDAF/9H7EVew\nvSl5xiZHHmzWvSemfNzU25wTUuZK/aDaOCyGOGXSULlxzirUbvwQA9mWjNaI\nFQsXcE2c2B3HW14MsTknWYgZRFEk4M0HE0Og9r3bx7giKAr4eXyHXH5kwdfK\nCXo6nd88qidUswKWdyeqthc1U23efnoFpL1piavHGp9meery+m5lkZSZuzQ0\nwh/TeSLao0phgqrX0i6yJIbwQNqx5xDQwpzhvn6vaFzEoKJ9toNIygMMggnL\nNqKst3j81YidTZg5YtpREYUZVylyi6oeHdKnTE7AMCYnG0/WdLuYqqCK8Ww3\nezUz\r\n=J9Wt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvly4Ke6jO7FusfgBUO7rqleTdI09iMQbFPaFUtrnbDgIgCQ/hrZ/enaG8YWMpHbs7FbDVLniRSzuB7A7qgCDUEHw="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.215_1606185742293_0.5318768223626635"},"_hasShrinkwrap":false},"1.1.0-alpha.216":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.216","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"0dcf16235c9144e91bef67577fd12960e3098f86","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.216","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-xjgT7h9wRP4ps1vaWpAyNQwkh4qFzBk5WS8Oss7owtLAQA+qAESRMjZR/jC0WAKOd7m//qbvRwlr9K9F5pu1/g==","shasum":"77da28218420145aa527c6542ace7292c1e1dea2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.216.tgz","fileCount":255,"unpackedSize":6217541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvgLyCRA9TVsSAnZWagAAXj4QAJl1Y66VBrCCDz8HRy8L\nhxLHkxyWVs3KW48jovQ578C7AsfhqPLr1zt1jWoFo3kBpKXWKHDXDlTPU2A+\nsAJl4fCFrz8orb4RVG6HlW6XtXlcDsAQEHmrfMdEtPZuYX29aLdg7UEGEZIi\nH8YpT02Sb4cDttOBgSHaDnTTzc6AGK+lDp5ux4VMn+EfTNdK6Y8Ba5mId6wm\nVLaleEm1Egp2l3K4EIUQ/rutIEl6yeZdQNGrBPgS3AknkmUBJUs8nHsF4Mee\nhml/qFrpPbI74+Y2xMNsrz44HrvwHTm1Epuknu3p+CPgZRfERoCaaiVgAOm5\ngec4L+7Fkw7SseHElEwyz53He8BTEZEp2kRIITOpUcaMytZKBJKpzLCWWRgl\nrbVUpdVF5FWF9RJvVgEECHkv+cAeDJ4VlDIsmiq5DF6JLHXUaJAwZWzXgjHA\nt5z+DwPVPpYkzOAfWmmRKSs6zu+doSTMct6HS7j3JM/eb0qeu9iJ879bSDDW\n62TLVcxBQeLFwnuML9MT5ysSYDtj/Ng7fSCH7XImP5IKZX+/OjK2ic5ykfHy\nPv64WOls4vkTMAxYsc6dFZNzqdWIf3K19/xAO+OWhPQakX50OywdQ1y1HMYt\ntVcKQjD6ncvHPnTmsc7zaW38YzwVy3fBNE9i721+l/32RDLe3y0BVDKsgKnY\n8pbC\r\n=Qvle\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFUFFDzoyqgcRLTte8YFjseRbmCx4ZL7qBAACuqnBFudAiAGSlL86Rajb2Yb/6wivCAqX4QKTRmVcUxr7jGm6+Mu5g=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.216_1606288113412_0.2124214193489271"},"_hasShrinkwrap":false},"1.1.0-alpha.217":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.217","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"3135e6891be225a59c34999717e5e70852e18a64","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.217","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-fu2gdN/ShlulkLGgIsWA9s648Jccd+j0gDo/t8ibJ6tr2VJQQohMqv6YAbIJ9NF+eQfPt/bXhnyelufNGCoLAA==","shasum":"1ae537473661cb2f5aeb1fde6a4bc6853929e267","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.217.tgz","fileCount":255,"unpackedSize":6220354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvgeVCRA9TVsSAnZWagAAhg4P/3hCNKJSs8yTF8r3aAtt\noiXgaS4EJfhAwlS6HFIyUU6g75HDwg7mnWSk2Jdhz7tjmB2bqaDo4SG0fD4t\nx/1wfLNo5MfzGs/X6YL/IOA5Y5Ue3JvE99I0Iv+N4kRITcyPGciXK0gmvgD6\nR7syQBBnZTgCt/DqJUT4YkjuBajIQtkBLeRp5kip9bTw3g4gMMNEmKMi+Z7+\nbjP423pWe1KYPRE8WWhaSodlfu72SHe6ccLcSglpR4OKZiGIar9mRUnc37RG\nTji8DFaz2/Ltygh3psBKlmt1z5VoAgeSR4dH7ERAB5T88Jh8NiUNdg8qjCvx\nUR7xdeHV6HaROEF6XgL1XOZkkuN1CV78kE+guHSzPdSCQdvaFD9gCWTbrKPX\nByfdNvXspVp+UJ76a+XkwNID4SLeYj5h8XmWu9ftZTSa8NqZMv/iFDuF27ne\nqX4GN8lRNFn9paKkj4A3LniZDpb/1kQPEHhcpnv8+3iyy4ul3Flh12AKgCnM\nD0vS/c8Id1SeBIXdBzur3utErKp+bToXCxd0x2SqOU/iUTa7ZX/R8u1fe0or\n/i7pnjt/I7He2N+IeTGwKomsXPCazyTvSdE19Ye0XNISHcv34+QDLtZr+Sn7\nWCgmV49eouRiBuqnSGbQPuqnS6zZXEkZQ3dcm0axhgVdC9dPXkSoPMeABI3g\norLr\r\n=0mxM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICTlswvs8mMdoxtt0kWSG+D7C8soTmUkQJvFV8DNvjXvAiAhC6N1xiF/Sea0bq+RENkXiqAxUq6ld2f5aJgG1X6NXA=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.217_1606289300373_0.09396254444503027"},"_hasShrinkwrap":false},"1.1.0-alpha.218":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.218","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"06a6e25dcb611ab2e994d074381f6759f5d40bcd","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.218","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-wyzIcPV+7qU5RKR7vFg4oAUWy/iXEzOU85fzajXg9gI1aMU+t8b3Gb1MzjU1hwCcvRSxBL6msvXCRsM0VvfFpA==","shasum":"3886fd3d4ab48a69d5efcbb4b1a9656fdbb936a6","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.218.tgz","fileCount":255,"unpackedSize":6220812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvjeOCRA9TVsSAnZWagAAbdIP/R/rtGUviKlU8T6crR6C\nUtOz/Vv0/5rEM/KXiEJGnmcgIWintTs/djXxg4oKyYZ0B+sjuoiY6au9bV60\nHw5K4hiAhC/0rxBafjIIqzBrLRe5Urms+3rFZqCJuEnJjq8ytVcNz6dLFG2h\nwRW7iVm4J5n5py/284FigcyNnbfqTTLn7JXIsKTCxfjhkwPGgmf1O7JffoQ1\noOVmIW2p2u8JgcZdkv7ZPAmi9J0TzCSH9IYTBbFRHLMiuT1s5De2SK1ymPam\nuoRp8evL0GLsEhyW/X20Ks9FTfugGKZj2dyq75A4IkcenezxgJF+47rSChOb\nmUEVVUJ3HmjvJ53YcRHNaJrto8MwK678GhSUDflem1gMuKjRWHcclY/omPb3\nOZbiRG6OXwWFq11cB3PJ3ECTCOk5+3uI0KFzCD8yg4Ssqg2kelHvPbvEKafi\ngEEfT+fAiHzSdaNP4/Etq4XSwcNRGGj52Rz2VLmPikfd17thj9TDiMsERFVb\ngVH6gDSMkmGLvUVodIatMhQJ8PCbiNEp1V1mqQO2bWhcZN9KqE+IjggMRUCs\nEiv6AkMqD3LqH1xVkEHJ6I5ly0wKkT51WizvkqMwwQwcC9JcfxioZkEjwxsA\nB0Ig3tke1pkLZz5KqVlsdHM4I6CXmjuyx3o8tv1oKpp9SdTl5kZ92FZ1A393\n0Jd1\r\n=YBPV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIMMRpnaEDT9nQKzGG8ZOxNDT9Wb5btXVF6w6qV6re1gIhAIb7ElFJYBZUaBwiHpnp1JQiF7+2dyM6M2X8dsOXbX4f"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.218_1606301581919_0.053267974420575515"},"_hasShrinkwrap":false},"1.1.0-alpha.219":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.219","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"78469e8e76a0ef88991072dd997c31828bb80cf1","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.219","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-IU2nQyE5vyAhblh7N5DOu0EjszfSZxoBw+4G2qdyH+rSSNeoK8+Y7WicN+13e/BK4YefgIVz0KNCg5Fga+VVMQ==","shasum":"2aa45f8a8b4bc5d9419404b0747716ec8ce86c8d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.219.tgz","fileCount":256,"unpackedSize":6227845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvw4xCRA9TVsSAnZWagAAZ0EP+gOA9eo4cWSt3wx9TKyh\n/poPm65Vime4JuiY+6oj3fs2S9mYErSbmidbKbStvRIxdCJfqRVrbQIpkPZB\nhXvVHFJ8PpeZOQWl8f9axg7VTS+RH0mTWOtwqU/D51jqTlVAQ8qHsviufZC/\nK5M9uQMWamdCquhj9XhAWZ05DQo5MT2QtZiwB/R4S9yfAMCd0p9+KvxxSwRe\n3mOCeCBiSRwTM+Y/FjvsGDiwGtZK8v84uvm34/RUnFow3FV2NkS/3lkmOAa0\n53pIeXdFpl2COyB2/Y0wz1L7lgOXcZt6+pYGiwJfCU3UIKJsV00/JnyEgkvs\nlGn3o9G/rFLbWkza9Ulifew3ohOjyC0F75edo245HIKYhJJDb/xGkF4yxles\nESH1mRzGdjJMe1L/d+5LztI9i3OAqNkKbjU6RI9aMtf6kGTkRovBD6q8FVrz\ntYIXM2PqskkUmsijr1w9/ENIqe0MQ6YxTZM/Sen/4Nr9SBcd046q5u5/x1aE\nlGhjgNRak06m/spek54ZuNJVoCoxlMT9cAOpSVYbCFEr+78kol+i4oJkDIxZ\nCiCh6wmOoK6cGELOYKYe0gxIKx4a16EyoQGxXf5sWVzua6PUGTMdO2xNd1Rs\nGPKecEFG7+5WNZ9/fMxyb6MRU5qnhdlwnve3/3b4uhyl8P/zf3C6EHUSX/6L\nXUtH\r\n=s3SB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC302AFnL5se/q+l2ZH82hdbt6Fod1yPBOqT6yo1xY6jwIgDdgEOhjm0lRQUDXvEjbv2Gkgr0khyHNE07vAGNfsx/I="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.219_1606356527920_0.9149942569203284"},"_hasShrinkwrap":false},"1.1.0-alpha.220":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.220","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"4cb7a861a6ac6d30a0e94f14258ee06490a8a5f0","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.220","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-IVPcZuX53EVS81UQ3NxX1qRfcTnTXiC+PkOShHuBDp+m4fXpGAt1UFyBo9x5TGBuhov6vf5S9EEsxUjzmpNOhQ==","shasum":"d30ae8064017d9bdb6f542cb54579b036321705a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.220.tgz","fileCount":256,"unpackedSize":6315267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvxTaCRA9TVsSAnZWagAAuUsQAKLUtp9RleXtUvRggYzv\nNjospn3zDxpLdB/GlXv2IPhuzyCZUudxpEo9T2kLdLfDOkws8P+QTcKKJaZ7\nbbxyh21MT8/EU5LuEt/KhlkzulpXAGRcA5LMS+UTdLhb732iY9FQgy9DQbej\nmZ30ELQo3hyiue4/V/E210zCXN63AYvy4gQ3QWvcQNwT+rd4n2OtK7EvyCSM\ndlYYE0RLg1GM3VoE8XA6UC8zj++ciMAkH2CoMVOV3zHj0pErSL/GrtBd3Be3\ns+kh81/IHka8Z62dyNbu1AiILmgw1KMTB3HQtBxdLzWj89xZMnrd8MOtDf3g\nlyvSAlfkXjZoIq213CLMxSO+BDrrmOBPuW1wcxwYZXPakG41kjrYFhXufbnh\ntFIm7oIFOd2I1tx6x4chAfK8r1G/Te+FMjyh/+Wwa8zPbHDsO22OHe3pJ4jc\npBz2VsJU10siSsgQw/0zPeFmIhPJRBavW8xolV67gd6k21QweW1X5icItjPB\nFgFpYitsCziQjS3xE6KXONoqlywQoShz2AednBwV3CP+SiqXQxFhnzmxf2RK\nb40mqg8b+kGNa5h4cX44Jcbny7Z+xONXkRm1ALrSQCLKMmBgiEpMKROBbZNr\nrps7qZjnopqV19uL3NlTo8CoRO93oZkWDQchUUyGepK9teqh0G54EDoybknh\nD5Wt\r\n=VwBW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCS9ERGNm/KroP6iwIDpatd5wnW21Fy9Gsikn8eqw8uBwIhAIZPLkTOSQKLfuCWaMzAiH57/g/5WU9dffD7xt3nXNs2"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.220_1606358233890_0.30319139371860104"},"_hasShrinkwrap":false},"1.1.0-alpha.221":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.221","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e73d87f949464b2615b2430d7d56aaa027a63e05","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.221","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-M7TOkjUYoyWgCdoa36cvBepbqqRuHJFEkmLk2u1/YHJsvPDM6H34x0cTzz9SD1H5QqckK8RxaLAgZIfdjhtqrQ==","shasum":"d6a9db1ed948eacec4956e802887843313b10b6b","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.221.tgz","fileCount":259,"unpackedSize":6325503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfv4RlCRA9TVsSAnZWagAAyPkP/RCmtXFqw85YQ8efm2IC\nbU0kM1Oey9B9bjiqXvxDBnYLBTH5VDmKKNSqs/zgAOwD6q8eKNO3WSz5Ah1t\nHohVCXBv/O6cj0fXTT19e2KjA4Y4Bkp8oOxU/CPo4AW8AyQBdQW2nlCehpYh\nOdPZMSI2WN2AzhfsbpaQ35bMlN78Us3ykTtxGTL60RD4RptTwBNPHd9gr1SZ\n4nDFVBtjbgjQKdIranFDbo+42r295MDn/G1taKf/cMqsNQNKnsIjioot1tlI\n1RtgpsAWJmYX70rB8JdOV8FKn/XwZQPiswSJL2Z2LI0sda+Sn3t9ybzJ7WI6\nEoqScz4lz8ZwddbG8G7FBboSq9zyyUxu2tVcA0uQefHqp1NqxzfNVgCNjRZ8\n+uPmvsQY+zJSmduW+u/rmUA5ppA976REhgyVROx3d+/8deiLGb3HfTs0d/uk\nyk+T6qUikI0jScTT0+n3ZBev60rumJy8r7MFzRCWw6s3caFqFcwdtRlpXWFS\nAsoDPjRCnyOtLNgCWkRHTaKloOvuFO9LwEmrmkXmrkBULT5nwzewmSaEtKNc\n+ZRMsNwT2KFNua4qaHgAok0qop+3UWfbu8fq+IIuuTiY2YRIAT6t6qQFo/1w\nct/1Ie5RhN98lffyrLQAHTRzi/K66Uc0ZZxglV+DjBgcCjTisRluDxAHLosA\nCaU8\r\n=1mEn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrUV00YvZ4zmTw6ylJJdeb9w5AS2LVJBZoKaPEKTEJsAIgcuWaAtXNFknpgr5vOaX/wphLh104xq0XemZVX2cfxYg="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.221_1606386788217_0.5600503381186039"},"_hasShrinkwrap":false},"1.1.0-alpha.222":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.222","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"31a7edae78773e3ae64351dffc030612de292b0b","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.222","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-95a4tXGmQRwvNnvc1ADR7rBwPPdwjbzGqgVPezDH1S7xt5LHmWOKg/7v3bDMLHJ7ehMb2axtvVakOO45klco9g==","shasum":"9647bad516c78f57cb2cdd55b971c4c42b8b2657","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.222.tgz","fileCount":267,"unpackedSize":6370434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxcK/CRA9TVsSAnZWagAADwYP+wR/gD04Sx8KXbg89x7I\ngu1IZ19T8AhKxhbE3kGZX9o++XnunfuJITTTPFHyF3MtuYX5ywX/Yov4xxqX\nDwYLLrmzh2Ep4XbWCc9GcUr8IYRm7U51OH87c1vxy78PD8LTS1PSYQh12vI/\nMLtT5SlOh72vhfpDiPGE3r2i1zANBiQKe12FIqc3uRqD5JmRX+pywpkDt/Mb\nIZNr5Det75yUd9hrVHJW2pIxPw+9htxjebVa8huL5352MYNVlkxHhZpyF4fp\nRTrfkxr998opLkCK+FVQuAPTXvBWFw+fCduB9DTldLM72UgET+1ZADAW8eHQ\naJQQ3j+bWodyKgvB6qOf32zog3OO82azXG7FJ7+wW1tkBbN2IMh0mTW/EU7y\n4orfx21uCCTCGW4/VGK9uim2LREquSJnXQkSbCb87tngbmv2Zr+HHRs/hMwJ\nYvkxLppxc27VxSLMaj7Di4UHeBL+rDWOALm9ufYBOvsYwsiDGvj4F0B8KzRz\nnUgtYzCgOBRQg5AfglfNm0dq3vyvQR9lu8VsahcjavzesjQxpNYTeDfiUZQ+\n60GIRpr0Fmi40Zw++msyCpdNr1zdF4itiKkFZhQsZvq1OmPEP6D6lIAX7Iy4\nYFmJybPp3hpJ33BOu36RGCjbj5zWzTiSz1kVOILKmefOXbRRZ1vVZ0GtJ99R\nS9SX\r\n=/rPW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1zNc5N2wEhixZDXLKvFvoRsaZBmhHc8Cx0Q8ArTKdLAiEApztryeGQi2B6KL7Rxh0JPuDvjX2rPw8FIJZs0MaXo/M="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.222_1606795963986_0.9729347113131257"},"_hasShrinkwrap":false},"1.1.0-alpha.223":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.223","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5c9e3c7c7e2abcf90f1709d5d5873cebf9094acc","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.223","_nodeVersion":"12.19.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-WNrLf6D8wL8uSCRr7qjtT4X4nBETpSYhpQVSAxq5lV6NiWRwrJO2It+sARRDdSK6nIBVUrXcR0hV37gWIxB1bw==","shasum":"22bb2543cf8c6ca46eb09cc4818ccf35686541e2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.223.tgz","fileCount":267,"unpackedSize":6370934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxv3xCRA9TVsSAnZWagAAWQYP/2gE0coxTJW+PdLXmZga\nheZEtd31xolfFus04syr3FA8t9MvKXowmqTQ/zAM6DwamOhI5sndyc5UTwqW\nNFwEN8udhOLVDbagrnZ7mNm0rmbzxcMCzB2z9ErIajle2J5pwq+Tsz7cjocg\nUlPMf4xDt0DIa1dFvrU+uiepcIEx/eHjcE/1ilErO7f6TMD99KtQWJ7Fqjre\nJxwrh3Y3lIQL2y3AhLzeaHHbA/d71d0M74nx67h4+G1TqQImaubNmhmPNym9\nY8AqU8hxSRtzrhge0OVy7vQmYWHAwL7wP6V6FpYb+leLjtfo6iajuW/Vqhx0\nBoZzAulTdnP/UGKUFJgL8a9Xy7ZqfRzdN2Yo/rTMHXHQTVYjRGMGv231tL2S\nvV5dO9rP4qKRaeck+8kplSDzVZLtAGGums8BHiKDKv4JNPeqlJuhs1xQycmf\n/j52h+wB6fwnUs6OJn6ZDHpFq1XkPP1wFeQxpgbJP80t+W0QmEXkqEBY6c1A\nTvjzqa85SfBFv1FxQyR9v9bjvBBFp1vKrreJ8qxVQdk/LNf1VHQ8cXQiq1tl\nCWmk63zj2E90TxgI335XMODWLFxucmlhDiFhAvNVxrsd3Eq1lxIUylSV7i/s\nBnu+jdJcYulmiPjl9Dc/59dqSr74LIIzg3bK2tGg4chWQVM2qNE80doApz4B\nE6Ka\r\n=b7/n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8e/Vaj4QeTHwNU0B6tO0x/M2PEM2bLA9LA/UN2o+fnAIhANdhX9C3klsQMUuejysXc+NhgPJNI5HK3NNRqGiHQou5"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.223_1606876657294_0.5323816095602096"},"_hasShrinkwrap":false},"1.1.0-alpha.224":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.224","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1f46905a056838b3df1638ddae7d72a674558fca","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.224","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-1a4eeST81FNd+VsAgimWzqhIp7I1sdJQefaZqhBe2+4FeOBPO4HBeJVOmfHrNm1RAmUw6yQuZOcnN9RsT1wUng==","shasum":"576335f918db6e405a0cad3f57074bff3bf779c7","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.224.tgz","fileCount":267,"unpackedSize":6370910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyfMaCRA9TVsSAnZWagAACKsP/R+TBnDKf4wlA7wEAm75\n69OjcGoxRdnzFxBcKPC0ymjRfwIj9a+oBEfT2K9SbJgdHtOqdzi888PIm0c/\nTYy8TYBDd33taOXIoT59/gAKIJWSzZUr/urWYTeGrDQdiEyXO6JGo3oXCJY4\nBMQVOqAAbhlDsJbBNWoRiXeOBFoss9EBqwGPvKDyuwgeAbuCkgnoWFopJGu4\ngD7q8a7z4HQLeTxz/8K6UgHv8EBscQRB3Uwl4pJ+k+lEpfmrXlgTgB/mvDw7\nm7au2v3iJ2CivXaacosQhvGVjt1zv6Lao6i5ZG0dHHLfHOU4pW7os+FlnY50\naWPDSpWSof/jgj/LZnkHWhj809esqrztMf2mr4ITzJA01VxmsOEY1h7dEPsM\nZgYtvRvR0c2YJ6NCzgOI9nN0zFrs/cqhbB0D6zD7lqf/P6RFy27pkGBhEKNs\nNHmz50Bk7X8wJ8+N0hTYt/3ZBMsAFf3Kxz9wG8fcJmAo1e2G9bidooVXknbN\nEk2uDUKOmyPcHTmjzucroRKbhyU6qAgLkZ6A4dB08COiOOJl3kqG7mJs+JG9\nCJtS3Xr+SGCOjz/Kx/kDnoLiU85yPwYb60coNhSB+wTwTrkyuqUqfQIVdUL2\nPoCqyCTD980ZLBqVEp0Ea9/g4oFga5oDZYN/C+XLUi84oCz4MzSp5Z9GvYAY\nIgjM\r\n=sY4K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7OxE5TFj2gtPuTG1z9Zg1Itpe5fsi0a3+oBiXzXLi/AiAXQyV/CB1eCOiundAlVvwM4oqezjN3U2Gpb7nSw6N41g=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.224_1607070489576_0.7598674023963061"},"_hasShrinkwrap":false},"1.1.0-alpha.225":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.225","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-actions":"^6.0.27","@storybook/addon-controls":"^6.0.27","@storybook/addon-docs":"^6.0.27","@storybook/addon-toolbars":"^6.0.27","@storybook/addon-viewport":"^6.0.27","@storybook/addons":"^6.0.27","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.0.27","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"03789c13dc3a08b1913bd313d44e8600b71c1fec","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.225","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-myfnexxIqGdNRItyQGU+MQmZAlCkQaKzrMJgLPS9qb61X1zV4QrIfkgq2nsF/s7TG9qzD6GZ7ZHvMZnU3nGrng==","shasum":"f4b8b0f9c03a1360ec8c984485da78d5bae84350","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.225.tgz","fileCount":271,"unpackedSize":6381271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyfu7CRA9TVsSAnZWagAAOu4P/A8ZGatDhBI119nUr+lk\nw57ZOx1b7/gNWrMPBksaqrl0W7rbzRT0l2RvacafXHgrYPyVmi4jFzhqnPRj\nWKLV+rCzTKpyw8knxqciAO/s1nMJvs1DscFtBkdecChglOORlAY0eQ5VcKjd\nz2whdAEkatlU2mhvR0IxgiYp4VNr70I8OoAEKPPgP9kaAcIwMNyxaF41mgIg\nweZg0zlJJULQcgkH6w+BYELxekrYUAxTtDCBjZWpEelAIa8oVdf2L8QDAv7z\nKKQagWNYVBQlopnLwTdkus6o9O62GGn23vylZaoO/ZptjaZU8wMQAknuNANK\nQqUJO5R15V8wnKnJGn2eW1qJ2RZbeKiQ84X6++CdHcF9w8LscqlHQDv1Ipu3\nuImXuoSd6bPQ9WzPtxr9N/G3j0BsNvaILEMpNLou9a6e23A3IYXKM4lqazFR\nE1rymuenOpE6RjcflXguxskY3mwUYq87C59l6/PfrtJguK0beQJnq2ibFaxx\nm+l320D5oBgmhxy+S1fOLCYr6qxo2l1oWPEG1WAtEXBBovoS8xztZHsq8Fvq\ns0t38ilfKTNc5NYP4fJihEsU94oamjr3ftkuPi5PCP3gJkMONkiVxITmR03n\nGGpCKSUlJ46IGVeWRHuC3mxus4T77Z1Jo6UvbnWgLCMviIdgkJEgutn9XVlv\nVe0g\r\n=j/sz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBvCwPNLRutqltkLourPJ2XqDbvVk1ZTw1OwDJOc31BXAiAtik2A2vJtBYwi6pf8uyZeiuy2OBf0nzVHhnufBRsesQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.225_1607072698993_0.7561469953672122"},"_hasShrinkwrap":false},"1.1.0-alpha.226":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.226","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"22a312189fe4727a55009677c42e6c27480e0bfe","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.226","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-7g/W8BlvlhxVxnXh/hSuBi83ZqNCdjEgFLvALfroTzikfjp1FT8/tqXAEiX9uvTT2wJDOXIYelARGr7eLqzNmQ==","shasum":"402cedcf5aceeb9de9813ca5e21fdda280dfcdeb","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.226.tgz","fileCount":271,"unpackedSize":6386367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzZp7CRA9TVsSAnZWagAA1M8P/R4VTqwpgyVxnr4LKXEQ\n94aEe7m3gbKwfRO39ansdiY1Mn6olgNqYPMgW/rz+1mg6w89UC9yGRjg+j8y\noKSlW2VkbkEX06rmW7R9XvX7oQnkntaB14DHMwxbD+jWV+cVw52jB1lvAivw\nsJYuwr+85+8I4Uo6eVwSfnP8jLXsKlTSUuehVpZP5SYtb6iAPITyNYE/GRp4\nFXK+Av2rltq4HZbIwo8VM6e8sp1+3gTR1DuNKADCCHMUM4GLn1+3qvOTMeZF\nKmRf5Dz20kliclkg9+xq1jX+WQhs9Vbr2BpDYk0cDPV0blq1Og77FUSaNa4Q\nY9tlKGrhXx7J7YYUlA4uR8zExElmVuTLDMFzyspwjXir49Ah+Akmg7VnV8f+\nqKiBsRBiyMmGo1KTK/1yJB+ZC1mtcM7mJILjjur2ucSQtYzZ4sxecHLSIji3\nRf+2PK7FkV9Tk9rTL9/9+tZ+sP8jFqVRhEjUowBTGJhxQlzFXyB/H0CA616J\n2wFRmksPVWai/uj8u9FfAGbGmwpBfHX26QNm0mTZcIwCww99gb9siD859z+3\nHnec6LaUG6znE75uBWaP3sdmzIYRCreLUNVPWaPSjCYX2rkT9Ob90tBC5/LQ\n075sIVAxRpb9LpHNBin+6vMLMhjOJ2pCV3vdMCnTmO25F7d+QK0hEUFJtt/P\nwKXB\r\n=rgzH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZKfZZg20n18GjOVkyZzGkXgiCDGYQla1dFucAd/KZEAiAjkP1SlmToqLkFlLvCcqVju3ibMBtDMHt3i6L0dp2OWw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.226_1607309946698_0.6569399900587598"},"_hasShrinkwrap":false},"1.1.0-alpha.227":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.227","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"acb60f6fef51352109e2a7ab75aa9aa5bed27311","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.227","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-i58wgvha2180VRZhNz/ALgmOPGM5zjADly2jp2adKrrTOzUDWKNWKatyQsqydmR6OG0UFKMw6lTFdK7rTK1mFg==","shasum":"deddfb70221723ec7d508cf88254923dd59f286b","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.227.tgz","fileCount":271,"unpackedSize":6386599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0HK/CRA9TVsSAnZWagAAs4gP/j5NAkV4qlztiVnXEg2K\n4Y85hp1rod67Rjkbt/JgZoROXWus8cPuEvHX4x4ftvHNWDDxPsggY7qPajPE\nzUesKxBrx8GhtCJsLV+z5sEIwt050TPG+n37qEp3Gevjj3IBiPGGPmYigIE0\nIEKObrE44mzzskz1DZ8EtM77LkpVoTPG7tal3rRvlJRXn44Q+RXAUwL5c2w/\n7wUqQArhiwECtF5yYMl/zdeh7sdMMBPkj6GR+kUMcJNd0cinmS/kMsCdSc5R\njVX8qIPYo5FMJbh5P1hfL7KCi7mK1iWFqfTjXxDlw2Q/jHUDrG5JHCdRibOe\n9cRL2MgN8SGcd7VAvTQzbYfg8S63iCM3+VlTXXDJVF3inFmD09vwRrutQzYr\nQgZF1xjompm49rNafRmHjgYmccGiIKdges14jkm4bRVY+lQ0t9NrTs8AHQNq\nvTLVcJEKTjq1pPdvppDfERezHmyIIpQJ4YVEb5ynwfOcWfa3tNvvohfR5Xxn\nQYnIqwZgiVw1mrC5B5+8bkuPGfpSZ+98ehYkfduj5iCWMng2G2XUUpxj6izT\nprDOMp6B6DinO3eItciiTL+/748n+VYkwTjzq9RqXk6lMc2/Osx/DCFWt0eX\nyow7QR97Ob+yA9U98HD3q4XcPwWyci2kLEscPrPZfnXpnR9SJrETA1uhHhmx\ni/qA\r\n=lW/A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCvQDVpEdKLxbLa2g06X5MquEiRo8UfHDkwabWtkmS2AiAIOIfVvIuuQYqBXiYjVXgoW9CbTx/IQeAafazSE4teyA=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.227_1607496382942_0.01458274229261991"},"_hasShrinkwrap":false},"1.1.0-alpha.228":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.228","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1e43b5de949a88ea22130c93680d901ab1fc8281","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.228","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-aOCdraHSUzf7d8bTll2qwQcdgBCTfWId1rC/PkkJe6alhzBrr3/0t74xrJfMMajecu+0HvIqt0PilfmVp0XTQQ==","shasum":"fabd6b0a4b6a431996bbabc2d44d1f1283fbf2ff","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.228.tgz","fileCount":271,"unpackedSize":6391882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0J/hCRA9TVsSAnZWagAAyL0QAIhlxSIFpb/K995m2AQe\nNwIRNeDQ94zg0zg0wxrOz36f1LR51uRZP7rkKwyCjmyxalS2pBOzDlLW9vTe\nLlRRvxDYlobIm92K8CceIF6afFFK90+6GHqX1kb9+Akn7X3k5sw4O7t1Tj46\nTWbOQEObWKd4/H/frEbb2fHm2jyVpkZRHLHX/c8c/4m+BZ9MV6X+Ly+5qtCE\nLalL953RBxb/OYU4RgeGj6lY5iQcQqP9ZwqOhpOsa0PYqzlupECsyk6D5ZGN\nED85Itz82MJzNo2CZWALkIDN6sT/5O1tFYiGG5wx5ykbzP+grfpPK1Yt3Lgo\njwIC4k0s5+IFj4wSDVULpkQbzf4nyIGzFwpTrzuGSAcevBWCkmWiC2/3NxJq\nRfPfygijB0LQkaJbHDQsC4U3RByewcC2y6o8l9x8U8GUTqek1Nat4Odotqhn\nDY/LzNkMXtVGeBKN1LWiBpNrD6cgjpWVt1SaMsfLB+Sq9ckDKuzj0EpFD2/P\n8yFB4KyQMwhBFnCPE8WHawqNBXOmC2NJ1oWj/LbTLIlfqHU5u28kqQqwCeue\nWxWLhdAD36WZv3IuB6WfgB6OS1HNE7Z9U0pdBaCb4f0Se/JBjAblOT+HvW/W\n1NtnVBZqZoSQn7Rd9F28c7+pc3nFfu2bikpmVeiWOV81plnVtAFGtOodMB19\nBIZf\r\n=loOd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPsf96zEgKE77x45xYPp8pXQztOuFn9TuTGoJzw0bcOAiAg9YkhpKJQKYVpitov3YpnlGYreSOH5GqyCovNTjtNUw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.228_1607507936259_0.8524383771322144"},"_hasShrinkwrap":false},"1.1.0-alpha.229":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.229","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"af857dd8dffd9be809bd4d761d60047d34ac66f5","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.229","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-pw2VYJITo/ppcE3YCZ87HHyj5RztqXnLcILQ9SfV4VDRLQ83dtIdVrv6NKVJT6n9LXK7c/5py8SO3mNhWpeGjg==","shasum":"8152d79d43fb32728f55c1da489e809d86fe23b4","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.229.tgz","fileCount":271,"unpackedSize":6392277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1B5vCRA9TVsSAnZWagAAKQAQAItL1e4cIsGdm/WOlKqV\nrOetaBI1bMgWOcIyCawDerAMRG3+FjfWJ7n8pBd81JbONFFK4JLb1XIIWh0s\nf/Z0aGDtK9sjVMW/Cu9sqTKoVHYfJErqcm4DjmgxAzGnYGhZmFyn9aaOk4eU\n4UkF65eF+evH/3Ypy2yqpoZbc5G0n3bbDM9QT8THDrE7GLpufkMRErSwanXK\n4hHhoJ2v4ei/zKTDFYNy2NizjwymkD4UEOiVnc8q7uVMYGqqQ3JezNfW4OAm\ndDb3T7py4/FqHAGguWRrFb1FUcv1YrUGr8vDfwAuwFeqkDKltAHKSv837Rr+\n6+Fvpfw9U+Fch4l96FBDEdcYRb/kSvsmEfrSeCOuEjzXOINTyCqNO63kDz6g\nrcf53lO8THI5SKWK9g827N6PetqXeEXG4fXaViJGfUwHq0g6TjjU9xrKzAin\nok0VYcLwhqicyCeFfOtHEygmPod9ppWT9ar3B592JMvYGcQKTOnEXClPciae\nR55LNVNSVJYZslGASfkWfNZeLhH7sQ8MnvbmPz5HIGHh72mpmrI0egR4tTjy\n+tKGwBI+rF48sN+ySOUh76rHgW136SZtq7KUKOEJwkc9O4xR6McSpKO5Uzm3\nVHlrGUDRtYR8zHA1wcpIhkGZa7IRSaDKLP23VMGDE6F5RsPtKYqTCyDe/NQx\nZkzZ\r\n=Hg1m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCoxCiAc2lAGfdJfj7XTwAE1GVHB493L7q8yTk6FwDNAiEArKMNR8NJX6sP+xhB1HYN35ry1RoBYJSg62oQnDLkE4s="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"notatestuser","email":"me@lukep.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.229_1607736942603_0.698873381705404"},"_hasShrinkwrap":false},"1.1.0-alpha.230":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.230","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ce520950cfd2c89e638b2712eaa168fea2b39970","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.230","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-sc9oaYNIw5ylTgru066INp5mX4onqFEofyP2Cc0+1xdGqDtCY2GEkY+qsHG7CNAl+YiL+DmgqW7HDaHw5xTzsA==","shasum":"c02028d816ac448c852cf109561a4bad6fcf1809","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.230.tgz","fileCount":271,"unpackedSize":6397454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1y/CCRA9TVsSAnZWagAAjKoP/A5ZOnEfafOhrNBNJhnu\nVq4C30yuBmmRZmN6DwiOaBarNGFAHn+AarCxZfvpDRuV1a2UTcFzscPTykH9\nasji0bogzqDmRSophjXZzao42faJKqgoYyOUvtm/va/nFinmF4Qe4Fagl/qD\nwpQBm4ISeNXE4HlHeqmE8+qWn9quIre+eM1Bnu1MrgW3S2OhFo24IsHHRkvE\ntoE4G6bgJT3kLloPE11hVgmOrB1j/pVwgblyNKVfIs+w6kuOtk6nOiZB61lg\nPEfaQNjUd60tbX/P4754rMBasWqmLw5AXTh84u4gVMrALRBaLzT8dy3TFKrs\nh88tbzpHLJ3By8rRGQUQoPPVEzJ7O5vRz330S1/9Hmq9vvqX+P2uwSKpkZFO\n7u+z2Rx64jW+MUm9eFonl2e70sx0z8Z98ZfzuFkWtRx+PdHVQVG6hruTYNHV\nYd1JLFTlN+DUbLcrSTWsVMwoX0R+1YqZoFtN1bmdEpibQJA+xlGf2BAZs27/\nNadhaTr7prICAStsEoJk0BHawo5yIucK+5M0dNsEuQLTvav63TXCi8vlEBl/\nucKQ9/fduHuLaVT8CJdKF5TfKMghAVG7IpOER9h94UBRqt3Gy7c4NKah5DV+\n2yTukuT4/GXe2DmpfXCaWn7Q26lj0yVyPFcGYMl+2zbjQL9dUIc6J5YQiVWF\nWR+P\r\n=dRGu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGTH9y5nLGkI/yAEGhhNcN/N5idutCzWHHnM9AJs+r7TAiA8o3bxRY8FtBFkseSxCjBUoT441zsWH9Pxg00wV7a3YA=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.230_1607937985385_0.14894271726329888"},"_hasShrinkwrap":false},"1.1.0-alpha.231":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.231","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1ab973f5ecc28c218210979079aa52531f893a00","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.231","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-g7WVhyum8M4keBmNgn+vnwQQBn2vQ5uE1twdmS1U2HJuO9co0PWYO5YfQHUjF5Q2r/p7vADcMvQauu76Ni4uCA==","shasum":"9337447fb341647416faf977642f99dfdd700382","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.231.tgz","fileCount":271,"unpackedSize":6397548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2BUzCRA9TVsSAnZWagAA5tsP/Rs5NBGZcCEcnjUE16Cf\nvu90Db3LwAiE7W5PFeuxe5hDMKHrDaxXmorI+LsrWiX/Ir9m6TYE1STy+kxH\nd8Wt4EwPvvF9+B/jvo/uZBp6QrC5wSdyOnSYAunMEiZB4SHJSvoMUDiu0Bh6\n+FDPm2lHOd0ylX6HvWt/EtMW6NaXmmHSlc446mKFBbThrJy4zXmRFhh2fZ0i\n/5EGIDE7IETmZkgUJhpkLPzD2KCqOAuvHoLMXEOix14TFRThh96jMAHztm/X\nldPrgYkCSJpaZmkr2nlC0zN1sAZkuRyzLBEFraafjIhctQn+Cdjh3pM+JTUh\n1DHV/QxWXPzzbX27secrmqtRlhN6Omdu7Pe6HQAO3R1j2MrFtPIBrw56N4wt\nARDG4m/5z8+7Av/YMOIUP49wX6mY98EQkJXul0FmrOH+klZGlcgKvnQma8JA\nlqPYdpBUV/p+aNUESeKfnY5h0fIRGw/pb2Ral7877cMOQlIapAWAtvtSQ7xM\nWal1GNxuGdj9xhlOxJratYnURHsiqDBbiW9Vl7Ic9lFnqc/hutCh5aHQGPYK\nTQjgDPDUzezfJhOO9VAcS3YhHKTO6aAXYt4HjyN1yBEpRcfobxrVaioGlGUM\nc8CtRsvrSjfAILatz25HMPCrTNROcKCBbGQKFoulX/LAIGTyAfC2KgcqRThP\nT04L\r\n=Mkze\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDW9p1m/beDLaklOc1zKIl5Bl5RYbiHXwHsc+xh2ZEWxgIhAOXYgyxrko96C6WpQikzGWcSOYcQuUOIBxpKqWEgd4ko"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.231_1607996722867_0.9453420211047128"},"_hasShrinkwrap":false},"1.1.0-alpha.232":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.232","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5d2eb5cfe52e3d611697099f60f1501e5bbe3a3f","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.232","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-ZmNfzw6f1EuU3+ww1K6XZWLbFNzocTnVNwOZqiMjfqMGa5B+rqPhpKRr3gY7cFRG8hdKc2Dw4kZrepqrdVcksQ==","shasum":"e669db9916f92bca158d4d7654fbf9b85ce427d6","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.232.tgz","fileCount":271,"unpackedSize":6398066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2HZ2CRA9TVsSAnZWagAAzwgP+gJg2taCfAxQMa68VRTv\nVjy0OfLdv+bk385xY+cwqtrKRpwTbcrY/UpLwbOLOecNtJYQ/l8DroFtYFQW\neGiuurm8B5UF++Uc2FHs+398YFLEG9QYw9s0AlOJcCUqGuHjylXfAyHjHRXp\nNqeDUwTyMxm4icdM2Ik1FRAXVuQy5m9D5sIk/bOgq/QdZzRBqVeIcDVd7a5k\ndyo0OCD8k9uLjv7uhiYqV3ZGr8Q+8rOh+jkP63XUtvw+MZat38jIMu+kVQ2p\ndGUlohJNASdvFzKVXqdLzaD7uitCf26yVughLio67iVY+IF+Q0lSZIBoNgJs\n+IXfRcit0jsTm7S3OAnTRD2bpdrsddsmHGSKZfkpxb1Y5zly5RqeSfLdX5Zl\nuDRlxU7XbsSuw/AKzkqq7Io0jUPKIbbu9sxGnSlBysaJglqXqiD0uiD0Wi1h\n19XsnoNMoBLPcLjwTtzh5vjIm14b0AqiCwsYLugjS4Fm4XetrvfnHPCJJmBA\nZ/ZqzfW+rc6tFugn+kt1NOAXVwHTpmIQC2GYGPAaMvggpr86VJBt/oSEalT5\nkfHi4Iziht0tBuymYgb5ZTe+mUuUgJ7wVAaHu7/I1KtSA34VougmLyVVb7lC\nzc3GYwebYgTQnBzoWCI7D6UmQ/e8UVL70xGCmSE91k3eptsCBW1o2FfJxDgE\npN0I\r\n=Bu3l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF+nRQup3iGbT4/+Y6d3CwxWSsYIWwLm7sRhJw5OAYaZAiEAhiX9OdmN1JrgdNYbTonfUJvl9gtHyp1sMeJqr8sFVuw="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.232_1608021621829_0.05600519972282125"},"_hasShrinkwrap":false},"1.1.0-alpha.233":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.233","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1111a84e86a40aea8761b6b71e7252ba6d005aaa","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.233","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-lagG8qHCbayKyaNPdz6xfsidu6PPvyLUwC5Z3Bh+COshYSEYTgCTs6Q96DHnlHSPNqjGZUtQwwozAPO6b1JDcw==","shasum":"488cd144611d6b7464da9a0dceda535219bf15cd","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.233.tgz","fileCount":271,"unpackedSize":6393457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/7TCRA9TVsSAnZWagAA3XcP/0IumWu3txcCxlqd6Efq\nRM7/aXtiDLMp03ffol8/NJKKuz4lx79g1WNGd9MTJa0r1HKVWTTBfuW2UAXa\nOaZiPU1Do6xg1+GCZ8U0BhPPBz0OacYzIuwH6TjEf/tlFMtwc2tdcM+VIu6R\nH6X+UkgYa+CZtL4uoLBG4h8m6KO3x53nDH7uTncdhw+L3KmtKG41dZYlQdy/\nltnGAf4HrjbqAhyGbU2AII7h/INUNqabmpWsOXG6USubpDgKnJLPQyRlEfOQ\nhUDXmjHuCAROU38qjbCEMpEjvCrU0rEHI6QpGm1Dt+7aH4hsio/lw9GM8UQj\nzeQnmnfMEy5J4skr8tnMvwvPqqpGp8hgeUr5GE/Ct5QgPMg4/90f2cD1yrwM\nUUu3GZBD2qohRWtXdy18M77yyzHLRvUmU+ddYbOjSc8crthO4LyJu9SCL5O+\nWv3QiCtGLZJT/xOoH2L8heL9xKd3b75ncIy9XGr2a7PwTH06q9GMbqKJ2ptm\nBkcC50pz0x0alQl6q4ohWUMqpvgbZJ16x1kq9jEOjGV66fQbwCXfCuUy4UVh\nSrEiydNx+EaN4/YJhjbnxqlZNugqE104pJisnzLv1Ry67Ni/NJzcA8SP5LY8\nnHtaoCb+GWAdUAimv+bPEUfwD+JFgnH1hkWIDE7lZ8akk9A9KRaiQ7BfV3qI\nIyqA\r\n=c6KD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHm0neBSQ1Lvc7B07KN59g/2sS3j1hRzlyEFg8jWsFHZAiASJVLR1xTVh2Fcr5pRBLMzDOTmBMlro+bxcq/xJUuv9A=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.233_1608253139182_0.9069259149135849"},"_hasShrinkwrap":false},"1.1.0-alpha.234":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.234","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"490317a03bd3eeea93cff2d12d63242903aa74ae","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.234","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-kb5uoXD7Hqded6Np3B9jtNQk8mjtcA2VMncARUER+L+P49kPKZg3c7FyHfqCOMLMQTv4koQ0f5tG+W7p6r6MXQ==","shasum":"9529aa5ae6a024fc97529d124e2eda8ce3132df0","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.234.tgz","fileCount":276,"unpackedSize":6588039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4IioCRA9TVsSAnZWagAAohIP/1oQREOIiofzrRJp6VDa\n3IT6s9qi/0FlUKvvwhU+H8HgOCvhAwEA5Tq6fqZmWPPA3UjrTY7+0PI0uPiJ\ncONP6y6vvkd0rVMrjcphaZYHCF4eQzMj4VrF65CbSsGRTs6XBkO0f6WIT7kw\nY7TD0NqyJFpji/5oNYwaBVu43tvvBZuR3Vye2+XZV90zV6tAhlEqZHSZOEsU\n3XpEISv8A5wtzaf6ZZ8hF7d6OZ2iboNROk79+oqoEMpql40o+JX0Sf3axzKa\niIglh3rOPBDlMqgfFu/Gi7QL5KdOqLxqrScQggRuLHip5UY+OQYMel++R3vR\nMng66QuIXLr9sQrwIeFcigLtmzU8o/JdjBbdQ9wFdh03RXPnjus+817lZU1N\nC24AjznMmO2bQudZJFQ3DD8nvdc0wPAn82y8C7jjffjVHnlwZpOR6dPL9pDP\npHfpQDu+m0NaMYaAEG9S7hJPPdde8oyGobuCl8KHs6iMC2ZkkEhKtCTKnUu6\ntQGdfEMqwszPHWMZll6k/XH90Jprf5DjneEJXdlukFYk5e3iRkGjmWG/U8V5\nP85K3CH/z3Fr+7YwjjtinMrAB3OCzHzknvhuRfegeauH4/h2DRHHoe/MBol1\nJ3AZecF/1pi15+YbVsw6ocAvIPqvqYAEMf6mvGCLbugDwiPhBUmhTwgNs/wO\nC8Zl\r\n=tjSd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDemkh1h4+qEnsmODKnBuTomYd6piEDdbRDAQUaX1pulAiBdrkjlD4Ppa2Y7cyZ154p+hBz/PX35YzKwMxJ8qBVi+A=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.234_1608550568144_0.3246528977479386"},"_hasShrinkwrap":false},"1.1.0-alpha.235":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.235","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"d74669023cb6faf6ada808251c895e77dc9f49ba","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.235","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-1SEa4RzldayaLTeAldGZIXgsKanozl093LFfWS+lFXngki7sQ+onfaY3irniJ2BtQc5R+ma2L4CFaUtypfl/7w==","shasum":"9da61152f7e5870c4af4fa201cde7980b137a116","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.235.tgz","fileCount":276,"unpackedSize":6590673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4xgqCRA9TVsSAnZWagAA4PkQAIB+kNcLEp+5r7TYu61R\nWWeDnXinT5B5f/OpvaNC/XxiN+jYI3iVFK4foCZfQXO8Hc7aSazn2VNDMkr1\nzuMhwJyjSvhx/DXzXHkjTPGbS9DJB4RN2AIxUX2zusq99UY6zH6/3sdwA1j0\npLtShqXFt7hJOfwmThQDXXMyRkjZCYd4C9nNgsMzZSpoeoyzTMkqB2hSK8O0\n4TbzjqIaBn7Fm6Yuk0xDko0q4KmtF4oozcQPxaCJ+UB1d5JZFWi5N6MvXB5p\n1kKXQgo/qcwnXS/oddhCR854vI2h+2HR84vjh2tf/JxxDIME3Pkt40TNSPVc\nKs4m7+Dr9eESNyr0OBAS3VqzL/7OeRIeYVin0fvC/I5Q/D7WUOD7Pcpa5/hM\n6OayIxyQ+I8J/o5kBgWkiQUNobR/lMv8fOunOHLkT8ZyqwYJcy/tW1U53vsi\n8oGp+VevllhHisiOe6f+uh0YL+VStEVMBPcqXYxaiMOXrWJtKZVweDbol8fD\ngjYHxxBaT5I4sBdkY9VmwZdZ2ZYn344eDYNX0Ze7fB69sAhLA1YhAfkNuAsj\nVeu6wkDLc0dZk0koTOh7M8w0c0UkHI8HVHAoxVeeWbgpL4KLHaA+t+zgp92g\nB1h9VREE62sm6EBOLXDl5sdUT9O1Qhffp25Enw1dcpZbwPV1yNoXRcHCBtzv\nZeSX\r\n=lMvN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+2gSMyCCvjoy5TvFcIfH2pGndLiVHXt+W18/v/+N0VQIhAPkLHAxW/FNWq6rcikPckPvAdgQDrDEWSAf5HC+3oy/K"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.235_1608718378078_0.1598743359139596"},"_hasShrinkwrap":false},"1.1.0-alpha.236":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.236","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"b5fc71a95f4e24a4cbb9f85783d748883ad13ea4","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.236","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Of3KXPxNEcPdz/DvthSc75F+27uPTFy1EB57dZt3/rsi6w3hUSC8k1sOqiIyUXPaFdwASgUDpQV+W6JJIibdkg==","shasum":"b7af941da204e761ba53441be7e17d3a78aa4c87","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.236.tgz","fileCount":276,"unpackedSize":6590582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9A5hCRA9TVsSAnZWagAA7hUP/RLYXe8OhBF8fPRnJfQ+\ny7s2YcrkwOINhNf11PTB6XRt8y5mXzco9Fp8fZ+OhETRBUs0hlUKNfw9SuHV\nFwkmvSCcKBjWqTIqYVhhBiYgYENj1Iw8dKw1OL9NmVmxprdFmO/NTGBSfBUd\nC12Be8sZCpUUOiJZwSiUM9dhu4FCgR2eCJfG8/9KDF86GAiWvmIJy1pwmCCH\nAIfwFnJgyW+5hpTmgkVx7Bu/ILvDGBe+Z7LQn9H0uC2oQDlahmSWBPBmxMx+\nR3GSspevjjM19dYebusEBgV3RYNE6e+Gx8T8zT0jWZul3HfpU6f91GA5rZ9K\nUyijs3CLVSBehp6fMn0KB/BuqV81qezX5Tac3D166zneU3zNUeeH+LoOh5gD\ndzeQIvyfjSeiNGAUo07eEETrfOaJcTFxcJamjRVERSyV/xNc7Q8QCU1KOjsX\nToqBU7wuJCvIekbVoxchMuYPtxte24fqrQM+mft8h0KbvR6beAIONkYdqnDS\nNdAga6VTpSGgF+moCnixk/ktJhS8v1LUESqHcKjV+Qq1HPjHjK1P7C871my0\nP7/HiZJkeAR2wI1++jhqyoZdbARp+DnihgAw4CcFWUDuc44QgZ/XKXvEsHGi\nSAVKOZolTlBC3H85/4PaMqzL0d3chPGCM/uoadew1lS+NEVWq9wpDLv1VY2U\ne9JD\r\n=hmdT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjRRISE+zAoS9qQGlvi3YzQ5M8XLI1GPRhNSs7biR8YAiAElRx4wTWbtNS9sYgjULbYmSDsoq3grWThb+uqI0ThPA=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.236_1609829985197_0.9520733071811132"},"_hasShrinkwrap":false},"1.1.0-alpha.237":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.237","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"bc774896e7eefd3b1e404b6d08ff78879d0f6c18","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.237","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-R9Ouq0x6a6vVm2kTNNcrj7fIWw6fIrTgCaJQ1rY3rSSapYZMP+r42+N7XnQEv923vu3LJAn6JG0gS0XgyMQGwQ==","shasum":"a696e5a1bed4166e5d71d0c8cff689a8e818b29c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.237.tgz","fileCount":280,"unpackedSize":6592612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9ZgyCRA9TVsSAnZWagAA2LYP/iIWnWFGFhfUd47U04qv\n9HxkyygdpcoBt8V8HvLkCRN402tBds7KKeDMuDgrDiN35hlwDOqMzvsAf57U\nANHV4Xr2yp6Cgi6OyxeubMOZfNTWHpcxPKyICQC0bvWConmU+JWU8sbAiE3D\n6AB0CC4umQ7xERjY79MR5d40YK8JmY6AzPpzhok2kBGVoKERELNwL8uLcRrX\nWva1rqxxhh+4YMpx3deXKA4Mdmc0A7nOqmdYNzyT9a5NGjn4A8wUIeYyfJbY\niBZkhsHCRTMfKhJHlRCbvifmqQjhm4cIIDo7txv2DSzO2n/4la1OS0JkTnZk\ncWbsVK3BB8IcWMxhhSh7V5ePcfAxETRMYHvs8qpDX5SUI7LC4N83SHN68Ilw\nfd7UQaolj7FestfyPCAEHNc2I4C3T8ntK0rusWhBgUmqtiiWl4GW3RN8dz6z\nD294MUwgfLJGpnyeomoR2pN43mzNtQZn1IeH6k9VxiazCxH+QVpz1xxcg8YT\nsxTl0yAgCPHjXw3ctVrYfnrvGtloRdgmPFU6d0cqJV6Ngi960D5LEnaG8r4y\nlSMFUy/xXjJbSHqury04eCgHdr8Rt/+X6riRSLYPADocHSs1NK76EvziBHl4\nSxxpugQn7kuB+dKs8V0RaGbBd5wC2wgaREtcZN4Aol6o6ymnONJLawyauNjf\nNAoX\r\n=dQwS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEfOKib0rcgANJdVlmPkUxikliPAeTTOVOJMwBciF5AIAiBeYEVefKGHpXCS7999vv6xysUytF/43dy9cYCiT7iXXQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.237_1609930802340_0.6465303201478465"},"_hasShrinkwrap":false},"1.1.0-alpha.238":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.238","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a212071b4a530f339af7a13c80edce28bbc2370c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.238","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-28OJp19Ylz0ZJ722ikL8C6oas/cm6CNYY+giwpQc3O7hk1gT3b7Upyu4kLCzGdcxoFOorgxUfGa6+E1ITR5P/g==","shasum":"a2c41e35af67489508739c1a4e3e9f1aad6dc8ac","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.238.tgz","fileCount":280,"unpackedSize":6593345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9oLpCRA9TVsSAnZWagAA/lYP/0WLxLucELUMwV7DnQbP\nFGXgLnXMRNtkE9sC5esKuNpd7+ZPoeaee66w/aKsJDPYcSeFc9TaigxTWJ4K\n3NX2CBPxvq528QFgMWSH+nfGG/dTojhb04nhAstu+sUlkBkErjdjPSizA+nX\nmCtNwMV/Cif5ETipNvkvLjN/8cseXIiSRGhutsG8ZlRh5PnxtcFLJws/FDPF\nElnzTvn2jgnsIVAG7vJsbmovPjus+bcI8jHxQXDgo3LsQJj/y7HYyCw7xt/r\nl6beByuLzvKKVd0TddHu+/tzHalfk0KmSn4fEiA7grjhgmI1a4kdTaxW1VO2\nVgKh4ybjrkJw8iyFjO+b8KPeaq69BMW0qbdshWNgoRbyIR36dh7gKpzdBwWc\n0SEzQhhS4YsU67ncYY2rIZ9c6shVfyz28D+KuwswoFsrzSAsC7zx/aCozn09\n2dWmhVXc2nojir5pgfgIZZjFlg+2at+crBMoi6DkrkV8crol6Qf/MkYUEi/B\nfDy50pYJtUHwGJqaOTB2YQ94mg9AkX7aBwh2PucczSX51gs9pqnrURhac9XO\nubEBy42WmCHS8CoE4023DtspQXbs+npWqGU8I2tGSXt0uocQDPWVi9m61clm\nZzv9TT7cORPBgdg56M0OVLIGQvJoq4BuMT9DHJKYhqS9ov5ps0WZUvhq51hx\n5qWe\r\n=wu4n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC75gP0lu62DQwSYPrLaSBqm7S4MtoZDtVhXdF5kzSODAIgC4BDzNdPU8fFjNEnfuCbik/6HNZhQwxfZ2rXqTtmXs4="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.238_1609990888667_0.3401315320882281"},"_hasShrinkwrap":false},"1.1.0-alpha.239":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.239","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7df8edd4bafb04b55ef1c70d8218b7be37236fb1","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.239","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-ImUKOvoYaBVIsw9Fw7RuC6BfhhqoTr9E8F+T8aikCoIqsaqZ6PUcESYQboisLLth7jTlG2qha3MF2wz6CLmo5w==","shasum":"8e0591b49c3c574f01de863e50c4cf35058c4da3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.239.tgz","fileCount":280,"unpackedSize":6594704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9puLCRA9TVsSAnZWagAAZ+oP/2mlCRT2mzvL7ky5dJG7\ndKH/cKb/3oStPxjsFsGSZSLif16d3QJr72r+n37C79494igVy08Z+qvdBuCK\nSO2QlYFev+MS/uB24IPX1nDrQPLF4OsFUnkp67Wzoyu6SEZ45hlZJaEue1lT\nWCh6dotbNXFq0xwdhZVGf0WCiYSpmHeApn4rlL05G7NwTuuscEfb/akcw4GH\nzFoXTd03e6Qr8nhHjh6T/53DJ2j8HbPAh5KJ+rOfLPgYVO8qCF0WMAvSlupF\n2fC+0FJ6wArvLED32R0pdcLNY7H9CcWbxsrUvKu9wjugUK2RXrn+PPRnFmWt\n87h7OUhTlAr4ZyXCPMsfLPjCtE1fA6dXaqfhfxhJP2K7E6DJiadepU5ZR1yM\n6SR1x1h2TzGon8q9VKfhrF0YB5LI5Lh4Pys6eyxnnTkcRg+caPouckGqgjas\nxnGMNcpHz/3S6C/pzNPOAwBurSWDpf7/pr1AFU//ErzVuo4B2oKpume1TpWt\nyvYQ+mH0QXTArp/zEGmPPrhmKFVuGuOMZ7K+GK1FkQV624+Aymz8GfpAbfiO\nKfPz//qhy1gz18bYYWmrk1IFDPcqorIvmNMU1DzK9R+McGxFgC1Qa+jZxL/3\notwbv+AKe5zdJkU6hJEAMA7nKUtWJqWLIyS7ebMrL7r/5v8KG3QmE7FMSdJA\nNXWG\r\n=X1mR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBohv0Ed0uszzY18Lm9EeI8CGiU8QimiGfp9OMqPQiAJAiBMsPTq+V2gWY30xbeQF5k46o21LbL2ZFUAskWVxrnDOQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.239_1609997194609_0.22827090599312916"},"_hasShrinkwrap":false},"1.1.0-alpha.240":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.240","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"d60aac905849140efdcc66d9b17940033b23b557","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.240","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-peDWGBvzjWMchqvHt694j1sdZZ5z/s8ShKr/tRctttt0nOFDrWu6tds/OgCzebTv24eDlH+zJIl08nt+ExMBGg==","shasum":"2bba30d7c512d2a865cbd02ba438d0bfef7cb71a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.240.tgz","fileCount":280,"unpackedSize":6594904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9rQUCRA9TVsSAnZWagAAVhwP/0RPs0PGS4dtP1NBtL70\nW+25NvXfHHmVQQ/4l1ShDtx+pdHl34Y3gQyEOemgmv+sdqG4S0oKqUmQv8Im\nnepdzXC2y1N+wUg6uFepNxpRdJVsx3Hwg5XbU4s3CB5iS5AXJt1fKDENw4ou\nurRTc2L4Pk76FLDZwe9PYRCkBJiTyddGg7zF+YphjdWU5kNgm/bBTQxvs7Ax\nj8FjPOBGojYXrhPtdykcsR6CDOjpD4LQPn2rxvRfqZRgiSR099sIDqkZJnpK\nM/VZMK6AFrM0WDnVgKzpB/3e8+eTR/vaxkAI6uyPpGp/Boy7DlRozZNHuzVF\nROQdMNip0aadcv62h1X74Azdj+iMC4aXNEV/koxvKRl2ENaROOJKOE5InClN\nQ2Anws5E7XSxSW9xbNL64Cuzosn4+ukQ2tLX6XZKTFIN8irPi7PTdtNVDLpY\nZr3FlGViBEJ782TVJH9BGXSgyl9wj2h9zQE7Xhb/kI1HfbhzIh4ULfR5kdbR\nYzvBduvTRxP/vitUUZUoDW35DjMGOMXCmB4d0P/0gg+/0CkurGY+LjobEyH9\n/y1e+eqOEeNzZhn38REyfzYMyA4OzTsHktfY0gaffqG0OZYGyloiS4bH7UsO\nL8rkPs69jfuq5KwogsHFiDagxA8BAc5G2NuljgVnfM7EvqJWlL9NFDj5G4M0\nvs09\r\n=qwS3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYDB9soSHReLAySA38VCB7kR9MGGsJuDTkAdWvp89EwAIhANOqyhhf+TBtoBsRUidLw0ALOqCOGjPdvnI0L8Vkzk5g"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.240_1610003475590_0.7135824020627002"},"_hasShrinkwrap":false},"1.1.0-alpha.241":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.241","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.10.4","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.10","@storybook/addons":"^6.1.10","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.10","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","rc-table":"^7.8.4","react-spring":"^8.0.27","react-table":"^7.6.0"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"71fcec3f0fa241fa92f5fe5f8b2a0acb58419a78","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.241","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Vr1e3GqbkucfCpPMIgw5tyo+DWU5brWZbIYuUXayp14eVcgOMRLSm4raovitLA0R2pFHA2AkHZ9x0upmTZTKCA==","shasum":"0acdcdf28689a7c156e1a554d13ccdcc53ee5994","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.241.tgz","fileCount":280,"unpackedSize":6605923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/YHKCRA9TVsSAnZWagAAja0P/06fOQ2sVuweZ+0YDr4E\nzKu8G9dtLMCF4mKi1hW3fZY4d+PwDzitxvsDvhGWzvhlLinRLgzLEahuJsVq\ntaLJ6RnIkQXE1baGjBsTTm71H9AjUXLwftO6qINKwPytxO/trlLnOJW7KrNv\n1jeZ0kP9XWcn5OedysuXh6SzxvxcpC2PpZxA3B1MVieZZ9CbY3rbQR1n4itT\nkSAjS49x6ZM+wUmckQ3t0puBSEl0Bm0qy6FCSXjvZTJ1hcjFGf24iSjBWSEy\nLaMY9SUtFwslRL9rlJd0jVxiavgOmRswMeLUU39jDaI8YPIW3pE8W29FgQZM\nWhM2/RA9M/IiIe6Jn/E3tDzdzR3JvbbJOqfbE/kCIGfn19ECp7qv0s1uj/Ck\nL1gRs+Z/zD9JSID6mIgV2HDUvBKTqJ2HAuKj3D1cTU3inhxJZGi16w1VC8sr\nUceLMr0bCE5xd6nCn0RgymExTyzgUSCyRjGixCCnH5F9Yk3m/5Rcw+VDifj5\nG112VXaYf900/WtkkrjEsPFTxJBEl8LYGEZN1OKyFvx6eFT+Gx0JeFIILCng\nW9x6w0ZXom3+sqDc/EpOBdJ7KEdQhLKInlcMgvfvooRyzgTXM2EbVN7P3D6g\nUoQJNv4yiU/kQY5ghby1U6EIYWn51Llo1jnFG+/psKMQia3UC3qbsoOGSkGX\nOxSX\r\n=Etkt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDytEX9l1hh54b0rCwAg1O2KpwRwjV0tZgtAoNVd+RhlgIgbGEDOyzEy/rpHH9iAZxa8eO8Bj+zLvfVEAGrGM7oKeY="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.241_1610449353304_0.34949272313714097"},"_hasShrinkwrap":false},"1.1.0-alpha.242":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.242","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.14","@storybook/addons":"^6.1.14","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.14","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.1","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.1.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7874c1bdcba51c6a79d804b469eafcf83fc9c796","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.242","_nodeVersion":"12.20.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-ebWN4RxYvTLPCnjabiTMq4nrJ9Sy2r+Iv1VKj/rtpPxvJ2O4bcI18OE1n0xrtNAoUIwgP/W0D4yBrittSNJiwg==","shasum":"6e015814754da4c27d8a069b993e96a092a5d916","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.242.tgz","fileCount":287,"unpackedSize":6690068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCWryCRA9TVsSAnZWagAAh0QP/RYAghhi8QkJp9s5Cndh\nnswxZgpFaVtjeKJxsZWLkkdYTBxUA3fBzy/KNhdCI9nwSAmjelWt/SAU3+8v\n/mpd2hv2rRejcG2rxJt44z6mlc+b2ToFy2cfXnpiakZeUfVKeQT0SLO8+qFT\nAQmq2spmf4GIB2Kcv4W/D9hdy17V8yYVPCbUAiWb3deYTc+zLf6QfG7Q2qWs\nj54OE+oSkp86Uv9tDaP66d+btvAEzN3ZKh3D3COzfUyvJADSreLEvY3fzUmK\nBqamtEJA/KIjYrZPqYrLonWIXGV4EJvaBKSoCODMAAegCARbe9l675b+bkLg\nOF643+RFs24uLDmGs1zmR44cdS2k54DKX2LRKvziG+1OT/Verw0r2J6EzEJm\nS673qcq3/x4nmL3ApCmzQIqGLtEattJ181jXsaQNDUVdSuLJfqOuGbejtzv2\nOQAqS4Hn7VjEz2c0AWsF2UeSVj6tSFnlWgKLRq6zUunCzOQc32KY5o6GvXp5\nChWlEN7BaaU2kzugJZwAzyPJrvWZqjIHDI6qKnpx7bQkTFaHtraCsi6d205w\nEEkXb/IOCAmrb6yOqz1Ty9uOyzjcEHOk3IfSG80IZ6T+7+Zac7j/Sc6Xq5vF\nvikGlZCsGb6CbCg+rN0UIw5wVhmxrns/Bzjs+32kb42xAD75RHR9cA9qlNhN\nisj0\r\n=oCIr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBy1odKkPptvolMLm/gqfRMeTiGkSUcoIJbxthU2D9G4AiAwL0ltS6vy8AeeOSekOLfgpIgZa5XQaPnEUR4H5DkKhQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.242_1611229938098_0.22869356010444641"},"_hasShrinkwrap":false},"1.1.0-alpha.243":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.243","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.15","@storybook/addons":"^6.1.15","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.15","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5b983c0467bab28573218ffb72c1eeac693f15b2","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.243","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-HJFcT/oHKQJZusWqD95Zl6Mz1alIlTuRzOuMapsJQVhVmdpZrqtrKjYSrqDssWURCHmJOQu1LniBl/0Ltjf/9Q==","shasum":"390028611e151c1a74714b1bd760dcf0b6b41e28","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.243.tgz","fileCount":297,"unpackedSize":6783538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGmZeCRA9TVsSAnZWagAA0cQP/1glh7jHfj3sDWd+QFbu\nNSmkCYJ9dzBhgYuk4jPEqR3FKCOE7WQOgJdHO8q2FYMpe+vnh2hNGlI8av+7\ndr8SFrGqGPTm2Cank5T8/c6z6wz71L48ER1/DmeDKsbxm37Qx6GrJaxbBNzG\nc0MnB7jlGbYd1Hx//YPyFbWEodOAcr8c08IBQjXHmZWEaHZ3fj262iLu3qkF\ni9l+IGj4FKl/Jk/SAheoMpiMgq6JTigpa4+ITH6YE1zpr27WI94lUQD5qaww\nedpEhQ+n9vnR9fMNuoLstY+ilW3JuoP49npXhCSmxotaSxyi8q5N6rUhN+Sm\nbosUUPMRaE2iCgnokNt+FFvr58vTkynLrr/vYr3Q0GXzf73qRtGUXhpBTM2X\n0Qwc/389CoCHXeui73HbPnkZTfWa2esmalN9DH9Wu9CHrXRBAKTLJF887unG\n+XgJT8FOJEHk1FBO6LFlFWp1/VdNyoJcddPHQ9JgQJanMjtys7jQnxYGrAok\nToOQ0bod5VU6+ggUtrA/43L3xm3Xnjtoj1Jg4a9LVDyx0i3//vD3Ovt1v3Sn\ngbCGefHJ+5iy0ATRFM1Hfi4w1FbVYjcAUDsd9T3NSVe4FBHS+0pvLSDXnUCb\nEGiGvs3v1Kt1UkMEnpP3e07HGHapm65DG+ZLOn7TVUiFFWNDruZaNEm+2+MW\nwPRR\r\n=Y4ww\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAeqFIq/mDMix2zlna5y1iprYKXJv3r+mmI4ph6JAVdQIgM+T6GChMQc4uvEEjfXbcxloTTpQ6FX9i9mvaWqYdMl8="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.243_1612342877861_0.9522216661719294"},"_hasShrinkwrap":false},"1.1.0-alpha.244":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.244","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.15","@storybook/addons":"^6.1.15","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.15","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"805c8d4086740cbabd683bdae0dc39502d598988","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.244","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-HUGYabuMz0itP576GaSKZzLlqsNXhohrJK5Vcte3EAO8ITxKB4sNHsanM//SR7enYYQSlaPPr9GhlRNAXFM+uw==","shasum":"38a2bc8e7b9ffd08f6b6ec20f8d59a6036aa7cf9","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.244.tgz","fileCount":297,"unpackedSize":6783571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIhNsCRA9TVsSAnZWagAAE+AQAJqSt4Z5HSODtyyxztXU\nLXv1IrFQj1O9ae5GWj1Rlc4tA0b74u5+Jr+B5sxs8POQT5F7IztAjrqDBEl5\n03kiGS1hckr7ba2f8e1cKtZfOxmFqvzy+E9CbbFvih1A9EBXSwzpYk02W10y\n8/xqbuQnKxoTgC/8M21sM+9HOaWL04Ejl/5ltC+8sTblCbJNpcK/mVDm3RyI\ntBKb6iAvYQnDhTHA9RMnQOeYuYYiOnz+WqjZqTJUDFNVUWu9X1iRpRfuoJPs\nYfLaKOuGyGRwmQO/pJppGRLgEolT3PpIVKxhjB+hzN9OMB2DeHhPpSqR5ugb\nHA2DqNY14/2nlJxZUePuETSMLeWBhN7Rf6XKyiEVO2HlT5+yHCZ5Glec6Fav\n/pBtIhEZ8NaMvJmyPa/kFqCvanzf/irxMPdM4EztByzKRwhOr6R5ASWmwUPr\n02u3nybk54pTCXziIL6taVzR0n90rsuHCXThcWw42tIMQjl3rWgaSYSWSL+f\nFms83Bfmb5AcPQRskxNzubWzoJIRnB/1mGlwFOXrJHiPbqhQ1KgAWVVBb2rR\nB6oGMga9x6NJKtDb6zwrRxgAn0N1OsOwtMPQCZdgPupHdtdaQ5VfNyp45Hgd\n8bLtgy6GrZsAmnaRzeO8o06SgJndEoIT+v6qWbViCISwDU7Jv56yej3aLU4L\nHHci\r\n=6sZk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcQ2Z1M+rL9oLvXeWKSpishRTqraY0LhXGz8J94iNn5AiAfxQ9872Qo880qxC3+fG4jGfbjexXDsazOfag43pd7+g=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.244_1612845931768_0.3337355114154805"},"_hasShrinkwrap":false},"1.1.0-alpha.245":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.245","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.17","@storybook/addons":"^6.1.17","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.17","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6ca85a50b7105664a891f2c06ec0bb1b98dbef90","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.245","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-GtYE2N2fQScqmz1qB3BTYhoqUQtOxHyKlV5ye5uGAbFqbDlVpsrKR9Q6KiJdanR/dniI6ZIZI64TglAw7HWJ1Q==","shasum":"29cb2ee7d3b56502be5e756b9e4097b09406ebfb","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.245.tgz","fileCount":302,"unpackedSize":6824433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgI93iCRA9TVsSAnZWagAAal8P/1OfkOaBTcGe9o+7A7iZ\nbQNcqkpd6DsckyHQsJcg3w1pMrHfu7y81Po6FRuwP24zpjBPltmGusIPIgqj\nVe91dKR2eIMeSNxU5ATEElUVrErrWXQBN2ccqvurY/7OXzUayl8HQEYTexbE\n1y7egKa5+gAMT+3GkLEBmRcw1dAsKA3DhC/n6NNRTyMimmJ+UyQus8N147Df\nQw+Y1ACbNX39NzIzzvjUvIYr7WqwPOB79ilp0RGEykYANiXWeZkhZR+YcizP\nlmGRFo+t9K8XOGCYeRTmYJnofdlnqW5djyygFoXvLhp43TRinLl8QvzFi49M\nuMixvz47wphFCW6gnh8lx1evCr0pVuDsfs0aDyhDc6vXXvczCPSpkoMjCM/K\nI856iIO8ZKQ7VbPIH4VWdkfqOQt2gFILxUurcT4yhngi44/CN7yFef64Ikju\nAgeE6WHtiwA5EVbaminiwVMhG5whYh1UqtErixy5E9x13ymOpm9pkHcadkf9\nlJrrgoq0wHwhaOTueIeuz5Q6yhjw0NPX0AMoy1DA2vZenRhmBa7KCM1s0UOw\n1HLdcX2oh3PtJPGkj5UkzpjtAPEWC7Zxmu29dZOniFqTvPMmWE8Mqlkjyrse\niPuPxkoPtJpPp5YJqPPKipqipkeZm4UNts6eUS3WV9lOcdDxkQq79qUNpWOl\nqMV9\r\n=+1eZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAZJvLOr90mIO7/z9PdZOJKDTGkoi/1NArDkfYSTtQAwIhAI2JC5tHqEVkVfNKtBIDF8e86xsboBmW1TAyxChw5m/J"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.245_1612963298218_0.00053999100536406"},"_hasShrinkwrap":false},"1.1.0-alpha.246":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.246","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.17","@storybook/addons":"^6.1.17","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.17","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"9100d9caca804c4491d3daad09dce94e11a3071d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.246","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-FhHa04IrJNUT5CiDeKHHZdyeP7cS5BnQJb164JuvB0KnIQnHWzFF+4KlJXgEfMBAmRdeker1f1IviDX1Qs1+eg==","shasum":"1d00f3c9ee7b8c53b09bd2d280ae3e933bbd30e0","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.246.tgz","fileCount":302,"unpackedSize":6832657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJRpvCRA9TVsSAnZWagAAE40P/3wF52feGutl+e4Di1Dg\noDL9pAkDGBVUomefo10CNSSfUn2DGdashydWIwaYoHXx5wNN0UiExwVP5XJX\nOclA38nOhh0WmGDYZFyCP0W6lqRouUUrq3uYXDb1XRplpBa2e/lZzgzTNg7e\nVjjGX3+qXPc6476sthyf6ZAjpWMM6muLzYI8W5zCP67c6NF0hBCzflsQ8JW/\nqWq4En7AKmeODR0uAiK1clACrH0aKZVZv5siGNDHe2SeCA7jRUASoU1zHEsP\nnbEBYKRcpcMCcuvSlkfkx0ZdXQvTqQPLlgtRkaIqnaFA9ciNMGLZtfncQ8su\n+gPEsyGecK9MuIkvF1CcxywfI93m0sqSaAmLITuJqLADMYjt4aUbFFwzMgCS\nYQeR+pAqPS03vPwjr4ebX5MNL9eF+UdUlA62INQY1SrcMvfxhVsJ4SIzUVkG\n44bBOGcCXVG6U63HGNtd2gjBEEXL48/z+QcepfvJaPWx94e31Mt6BuGYNhyr\ntj9DgyyeWdihEI40cPj/y/9EIipaue+bc+8ndPDvCvQ5u5L9cSAT7GL06mDy\nvnWoPD/olJaAXXD5MLyXSzFrBU8lDc/aUQAvYVnXEYonZ/2H5xqUEl9gucMB\nUOWiE9elULt7p9HK600sO4d/Wf1QB8o8P8w/aXubazAVmGZ7Zfcgd+AzV8Gk\nsfQ5\r\n=0FbX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRCkoGzWkfkwBwNN+kN8tB1pX2M77XV34aOGjucu3nVQIhAOX8jMgUz3M/MhYvb4IgwkaqhHV395JF66h4s4RPwQHp"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.246_1613044334501_0.9958174283916108"},"_hasShrinkwrap":false},"1.1.0-alpha.247":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.247","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.17","@storybook/addons":"^6.1.17","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.17","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"d0b2f9ade053d95ead01170b982a7d63d183021b","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.247","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-hP057PWRjdvBda+3vXii8qm3/XBLk8Pi3yC72kQx9y7CCkAdRn/+PfGwspavzt84tP4FVeqaBn0yGvjkEfhBnw==","shasum":"9936e8f44edd84929acc47b1496eaa7ff640ff5f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.247.tgz","fileCount":302,"unpackedSize":6838436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJSTKCRA9TVsSAnZWagAALFgP/1Z/2mhbgSMErUj90NuL\nh1lCpWkjVY9ZpH0iV/gGkCpmgS8sR22xaDpe0vq2qFeI4dhbeXjYqVR5IDLu\nR76Y99bK2qeJKeRZ2igsy7jcy6wFOr4vTEo4f5l/AGYMoifsuL44LldZA8+Y\n718PIQDoLApahgncFRa5CFA9kuxUKe5w1lZYdLSqicr/mCwkLkWSEJVPoC9i\nWVZ51PIRV1SSu2OZuhl5sT/Y9ELYTKu8ZKzv+xyY5LqXncS3pwZXLD3iZ04H\n8f4V6KxKaVLMIZ2upUtJ5ma55WoG8taMt25cV5kyvBZ8+w1YTtbVTWX8ezb4\nFxb2T0y6cXcBXAbOXQX+pxAimVfYL1Iv4Kp7wZBQVgQMWDr85qeomAFosAZj\ngYSkz0vBiTmPSBUvKqA47K5Py5Wz8SbsaHIeD5Qxis7V7ei3twONUjKQjXfs\nSikCG9JeR858scmUjXMPXizCCD4ZeFb+p53zqC9AHZ+xQHAUPQ04sCIL0CYy\nQaUhfmlFF/3J465ui4aSDyqCb+QGF5fArT/qzlSRXdO4nWgOmahszg1k0Xd/\nNxueWKbKuV2PMX9rRk6z3ksLRA9qdy+8BF1tu5deiaQQeXGFknUyJ4pcG9MZ\nVwNV3KrWiw5HNTrsnsBmh8z1Tav7CbEdol9In8esW4hffW9u1UQ3DPiaoP9d\nm4EE\r\n=3Sf5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCei7NvE8hWAlwncHf+AhgAvommNOzseCOnSsPGK+EUFAIgWWPQbYf+tvDgSv0IZszLMBsuRux/bt48yAc4AnIVnsk="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.247_1613046986201_0.24633191017914746"},"_hasShrinkwrap":false},"1.1.0-alpha.248":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.248","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.17","@storybook/addons":"^6.1.17","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.17","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"336e8b2d4e5033a30b64a8d80cbdaeee45d1ca42","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.248","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-ICgDg5kt4BHAm0155YlEYZYiZwZP3hsFUFu7zPjy8IZtBsOGBgIUBBd8L1wtUrYS6UHzCRp83PNPMp9Qpaehvg==","shasum":"ed155c0be3f9fd560711b34010bf8aab2122550f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.248.tgz","fileCount":302,"unpackedSize":6841213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJTmpCRA9TVsSAnZWagAAjOsP/3f1ZBFof0eVJIKY7NEP\ngbM53Z4QMD7dZzRBlgntz9bEdpasDUoeZrACPuW2yE7LND4lrR70wrF5DEon\nbVvTe2uHeHBk1NWMZyDAiwLo5z3fG8xiks5hZ/vW/M5LK89k7V76aFnZsg39\nRYgF+U3N4vlNoMy0NC4CJyRNXMjliuhm7RZVEs2zT/tjmkukQYtjqgYwecqi\n+AZ2k6e41EaFIy208RWBX4nWR+XJEbZiW9Q7pB0vUbQpGF1Tv6kUXWuPW92n\nGrhpB+YmOZ+NKcv0xS6scnX609SSlPgAPuCBAhR6RI0XBlNk2aPKiKTfM8zr\nqZ3opYUFVeX8gDFvfVgzN2ilDS/DMTSCLXu+SyxBasIIbe7kA9y2sPXlpCFp\nE4jKsCQoAUUWVJl7CMMVWT3rwbwVl28ZVSLJINW2d224o00VIG8xLFdj2VBx\njtxYcDZy3K4z4b1QrJlgrSeDncited2xkkaSYgpJxRU9aLY3u2HNYo8MMA4S\nXd/ess5LvPbWdOvOURbkY7H2Wz5L5ZaEFFedMijkmEGn9mSAVTEtyPgZOcXR\nRMgvZc/oGU0CqhcA9N2qyWega+JI1YcFx1LiHNR7k09liFwDC9AcZWMSjOnd\nSjQf8UPwmg4xCZJv97KFzXaVXe5SU9j6J3LpshwUWD+xaWUmkaD6N1lhRJyO\nTqea\r\n=NWN+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOs7bgaAuhPMlSCVbfd9YCrz7efbYrLfFG+HskoqJB8AiEA+vU6GHyu0UpZfrrxRyDSmqA022D9nIzRgYvk7V7EgKk="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.248_1613052329235_0.5594296443522069"},"_hasShrinkwrap":false},"1.1.0-alpha.249":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.249","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.17","@storybook/addons":"^6.1.17","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.17","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"69f6abfb6818d9c4e22aa0f4304b96e69a5ad847","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.249","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-hEoDG2HA/RQSdx+kLkHi8u5yL2OroCsY7h/Ei1hIaqF1DXu5msKA9wy4zsTvWbfVn/dbgWQPu4WbxvRXX5PKMw==","shasum":"2452d3c6fde9d1e5f624a135fd8883ecc4c0d451","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.249.tgz","fileCount":302,"unpackedSize":6847920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJURYCRA9TVsSAnZWagAAK0IP/RIRM6s1F7h16cKF2hg1\nUtbJPLLvQ7rL9jGx0pKoL6RlKUZ2lrk0UgyfbvkSrcjjIHlvqSwh7c6pber3\n7O/JpORWur8djERtqr9T19SY3m7GTHc2hK36uwdLbqwtgEbFwlReQyLcX20K\npWSeSK21j7i07kNABzuNzJDp0hFBzpCWh/2lhZ1fVQIxF4PP0qLlwBS70k05\nGYmZ6iM0Er6ZozJ5T3ii19+gu8vExLDEqe0cs5JYljJA91zdi78ec2c2nv/y\n7MqyzDXKWzR8seA321Gi9GsJ1Jvlf0yI3+vy3MAVaiMTI8ZV7dpEf978MAs8\n53iU3U4ilPs4mt1Ydeiv8YqGobJnJASItFwt1TLo4y3fWTMkwOjPny8f05hx\nJh0zsojPH0FWizfsswYKz1qOfvm1fFowlMPrJeb5jSSEA9qw16ObV3OlNBO4\n6ZJMKr0prU4NP/0F+mBZbdan2iF/YDMuFqCv55FhMx0Sp2yIYhdxdUp6FOsx\nGb4hzdMUrsfsz0k4bjpGH2/IUy6FfU3qNRzCqaAW1VM6a0EfR5ATmcb7enh3\nK6jSfGnmk1gic9CRBEvNc+bBNd56bn+AHJDMgROH2FEh/+sT8EZPAyawS3nO\nFAQgmIg3B8lebHwLI6qbugZ8BB/4YsyLinAXw9Msu57OUhhHZp6Yexy3yd5o\nzx7n\r\n=0EGE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBm8cFygvQOjD5pQDjrEQi38bVieY8XDy66VTyK5MMEyAiEAiOijda9aimw4CiHSrKUvpG38WGEoN2gQsTP8lXeCbq4="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.249_1613055063600_0.04982697459203611"},"_hasShrinkwrap":false},"1.1.0-alpha.250":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.250","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.17","@storybook/addons":"^6.1.17","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.17","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ece837760bcb59550d048a5594ecfce2a783a619","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.250","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-DPJ14svSFA8uBUXA04i/sMXhoXH8McN1qmH5Y6KOIOqbJVuczGWZtRAVJKazZsCGgJ+P3XyIEQCaft9XrcJLqw==","shasum":"9b128f7aeaa9b74a79b1c5ab2d7a37caa771e583","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.250.tgz","fileCount":301,"unpackedSize":6865291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKf2ZCRA9TVsSAnZWagAABFUP/0fjFOBaXujozJc18343\nXQATkavlqM6OtiJkko7MhhwVNUiqIgTDThxaDy7jOWcjYiudGZ6whDCvtJM5\nNxJ177q2RhAyGIzQGKCoIel7u/osIJBwZNfT+iribveiJVV+BbkfmWGirg+Z\nnm4jO77tNrR2ghUBqsY8N6b0pQU+RWYc/JooM2jR3LDayuVm5b65HNJHgK5l\nW1a+53uVlYynI6oqEVyBo+WeldZJNO8zhTpkwWZRcS4C+trq35SZt3XX21uU\nYmGIUMHrBUTMF218wkrE5LlC2LzaNwOcnfo3oBi01AvL1goljqWYSNRmr6RQ\na1zXcrvtd2y/2NvF8a0UNtbb5pYi0c1l+sMreDor2WamsHOrhXf9HVdhC+DL\ntca0zsML04yK+KIWDQjFd4lkJLPhxquOYDGlntD9jCgtVfum3ASjVmhebR4Y\nPGQWkQLAGJ+qZcItDCH7RrSEfDkTRuswEp18/ipOM18zQIbSLtAY/Mv196nz\nrO0/US4rZlw/vpp/l0me8k+xI+SOl80qbRIl4DDKMqh80fB2iG5WdTZTgrGP\nTIWLGN+KnurhvWogVHflubZllQANJvdBNKStJUpyj8G4B6VBUnSXOn4Gq5Os\nBeFon5/wCPB7w1QXjKuS7BLy41sGukIIuNurL95NI7x+O5OF/KZFCck6GFgL\nAy7O\r\n=gjVX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqGkYLy3YTz7Qedta1n233qKxLV+ze4IfPaB4B36OC1AiAIVRo9FBFh2XJQVisva06W9cz6RjAPLygeW5l7n4Pz1Q=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.250_1613364632692_0.6577228489096905"},"_hasShrinkwrap":false},"1.1.0-alpha.251":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.251","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.17","@storybook/addons":"^6.1.17","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.17","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"918bc646a3b627a71071b8d782cd2d790ebbba5d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.251","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-nvaUfOwZo38BCT2Nx2CX1ntAsRRPvM3Y4B0PhU7xXgGAKtQGRb0h1mueDbKRu8aNeR8lTIr9H8MiVMw/a6p/rg==","shasum":"34830fbb8a6d5f7d314c5929913582b1630ecc2c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.251.tgz","fileCount":302,"unpackedSize":6869905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKl5PCRA9TVsSAnZWagAAfn8QAJvuQhcCGYhKL0WwGBMK\nG4O/Vman72jA43rKt6A/YFsYUh/Zt1paLaVISYmrPVABuFrmou6LPQCIR0ZH\nToDoJRvNKUIEbK7nh6IVH775IwON0USzwbTdDDJW7do+5TJ+KI7lo40PCRNY\n+eoZGTxXSXR8Optbtcn+WghTBRCjKEu55Ir8dQVj3iUZdo1+nwlN7vXcb2o6\nKZ0jk7ebAtF+1eAYXWhr3fWCwNSF0n7Utg3SEHFZ9EhTtgo5Uic3+2953gs7\n8OLq1HE9Tqe5xcA4KPRVXdRW/ZUlEs7vETmpiIDEzoS4XoYIiOWpETFYwdSd\nwOq7+HrpAQTt5H6vYEKcQ0HJZQO4imB0v3hBoFHV2F7YhH8lASBxRKX9LdgX\nbs4ah/AykV6mvXCyCIJGIiZ47ZKusGP0abOAi1ZSpUj5xOkAmUK1AoultTsX\nsIcP92URTJ3hfLitaNeC7aGv0WBoLxocgRhjtrtViRZjb5AOsiXiPCiJHl8R\nfujr44NlByh4OjQvPlwiQPK8q2anp6RkhVvcnBjdu1atq5ZMwMexQ37onSzf\nVX7gVwtylvINYZnelKFjMchgtj32TBmCRE65G9EXthzLhZyl9d/j4NwoxZxf\nkiXmVP2rrh4oONraNENRDwA9FV/Uqjz4KOxbcCPg9f+UaZFihsb2lMLwsfMO\n/2Bf\r\n=1K9G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDV7P8H8gMOHD10fAe4QMu8N1ErVSSWD8rUcw+tyb/6UAiAMtmnx2ZL8+koBsMN3T/6ZFehMSj6MzBPeaSyhxmuaZg=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.251_1613389390949_0.8971078513836634"},"_hasShrinkwrap":false},"1.1.0-alpha.252":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.252","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a31d689684d5e1f0d0786f97210626fb3ab0d746","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.252","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-x1oE+AN3kp2GcBl/7bPJ+ibVpMjbxdLizuPlmMvaRDp2bRiU5JgZH7RnWPOl728xNrm4ZyESn9Sz0nxKia+dGQ==","shasum":"3a67687f0e6bf60952b33ac52bb086e9fcd88468","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.252.tgz","fileCount":301,"unpackedSize":6864941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKmvPCRA9TVsSAnZWagAAzP4P/R5nz9ea5H2nQ5WmJjSe\nzqxDsZIQHO5gxLrUsLLy2yQtr0jocGwlOViYWA5qx/XJMEmtAo8OEUoGtmyI\niLz1fFxzPApM8N0LBJUhrJKxYv63IfBVe/tsdrP1AVsO1px9hdVil3yf/IMd\n3oGufHTbHr6NSUDfFSeD0CFVnNE8x9tb8XW/VLdCxmuDqkr19tSdg9NRdOr9\nfLGSfAilh9sPXDuFS8UOocaRGmFiBmulLc194Avytp7o+dR07b09Hj2rwucb\nQsd+6peDDq+B2b2DcjNdGi/JQcbTXx1AVH7BLrfBFHi5qk/NRg94lxwvTLFA\nWGvEhmjdkXfpjHYX60IS/pVMwm9rBtHk/5FYH7mJY4fw/PcAiaKz2DuuMLQW\nBZAc94QZ3X4KSD5qljMLQs82xk/LZxbaey9ZMYmNJ0Qx5NJADEuXiLK4cTF0\n6SWkoq0hAPFPTEQpNUwDpJMq3SGGFMFD18XxuKR5ki49vJGIuloCQaAoFwIs\n0U/rHiyv7/UtPfYyR9ohbx3a3Uy00tl0He3aJCvtjGmwKo11lmuJLqj3vv/y\n8FztlCv3a1D03REb+9mK2hCclophq1QCfb/FC3EKZcYoVE4Ns6z1xk1IOGth\nPPFSUqcoALkhfkavfNzv+hlVolq/A1qZzKgRV3XAqLckQlGkWG180x2frxSP\nZRkp\r\n=nob1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6q5gp8b8ssf0DqugNZ0hm0gTK4emuzsUCL71/MssCqwIhAJd2BXkwGhIVNVL4XJP8676ZEJ5FYrdFQticQAZPgbDB"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.252_1613392846558_0.339140224802573"},"_hasShrinkwrap":false},"1.1.0-alpha.253":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.253","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8743754c5e00c1d8685a9cc5d1288d0b0f8ef1f6","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.253","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-cnCh2Lz4/Vp2y61nqBoSdusXeU7Vh+2rjXG92lIjqYzm0IIKc04F5e/Mf2GS5tsQtMmc8yMwu0Pxt+KkVMKYEg==","shasum":"4d72736d68a58f120d0533ddbdda92ad651af1ba","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.253.tgz","fileCount":301,"unpackedSize":6865455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKnf1CRA9TVsSAnZWagAAJ8wQAIc2TD92ux1VTUDoMTJW\n6MyIA0JHc6T4qkLYjf+2weg944cpMk4mMC6iSp7jYMcJ1EJTAO7OXzcYi/Wf\n2BIx1sXCmmvAPRriLxN7o4wv/eHrIYhyEwA3cvWWz2ZcvXGbRGQDaimVm2ah\nqCMt03WE6cwuvwBZ4f2OGfIGDvWT3O1gk7RFfC8Lon0kUx8I7ajgWtg8SoK3\n75eBNBwEECTuto8YvDOsOLNLOmANWgR2RNr99dJse2U9U0VwOzZf7kLh6SwK\n3Ak2/JSBJXH43NlwYef1QTkntpiMrMNXqhv8BVUJjB5iBoap2/1LOzE0UWnc\nOCnjikapkdTBmcPwC8Wjru5QKG3UHt1W67cNIZIlHCH3kwac21PTgtTjWGd6\nl8VNYhrSCrJK2gzJ+DNG7hIH571Y/QQMxKziUSMRrtecca81vtAbxShPf9et\nELkTAkUhUWupDsXWfGYYPCzzFUYiP/5bI7loD/xCImtdcLLrk/OD3nwGrI9F\ne6uvac14yEI03oSJNkrPGAmFXBFfxdBOCWVFFzgJsJ9/NKYPF1mC212n/bpb\n8vz7OMO+OkEj7rK5zOkSt5t4VcFUM0jdJx4casmyfufpBBVbkKpi68i26LDf\n6U5hHGLD+ksx5CJMfwDGxPjJCrxSAWP8WjCxdLUFm/QRGf+m9O7lNOEl99hx\noBZk\r\n=J5lF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoNgxQbSHulCloA57Jx3gM1I06eUtPt7CzhHr2EmFbTgIhALZDZhyUF5p79QQrdMdzg9G5cMpmJ4L6/jEcWtu/sbVN"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.253_1613395956669_0.42388909996907276"},"_hasShrinkwrap":false},"1.1.0-alpha.254":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.254","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"732e8b7006e82c75413479f44322f3e662375ac4","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.254","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-23Zo2IgQWOuiOFG1IiN1g/Dx0JbL6eLXqbrYn/WWN1/m+Iht7YwycpT8lc1IDgYZ9avrtZ5vSe8QI2gCi0tu+w==","shasum":"2fd125b0a742c856267aab1514296e9414924ae2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.254.tgz","fileCount":303,"unpackedSize":6867119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKn5sCRA9TVsSAnZWagAAFAMQAI6x4cbpYu6xPMYVkx2T\n9dagi8cA7PsF0zWBM7GBQ6JTU3c+7DwMsbFXephaUzsC/UOKDDs9m+d3Da/I\nUIqjivFid4K8Ju9r2HG82LPA8IXz21YTml9mN6aX7xmZCgMj+61adlESr9hq\nfdsLgsUiX14/i8TFmo7eY74UkLNrULgzUKerLmfXPJBKftzHMXVOwQopw+GQ\nUTmrGsZdWUiL0kUD0+pQmHB0ZEgq271OAN8wUbh99JAHG0+4cemmsG+F8PmB\nuoTNcLL+SvVoqu0F9lrXeNill+pJQ2NLkoy12Bjumqsf/ISj124cqE/UF6GN\ny52PeFLPQBLlo4GTVmCyRoAi/sRVTb1Bfi0XC1i59vMJ2FYXriEbWcQhDACX\na/bN4pypEmf0Yr9/zIBUc/88+svKu2G3RZATZ6VFUhJ7W1WRJ2K4F1Kjn6zd\nZvH2flIx6skOBAwZpTzhgy5oW0ggy8AbboE057vmTu3OkCmbiwxe1B2jLM37\nTIfZxvqNVI94hZLSZbbru5H9p5tbF6uLgSwdsXjHhN6QJkSJVXHFogzGCMjy\ntaWoWy5JsuTL3IBvsD63Cax0g8r44SFBYh4zrR0Dlpom+UIFE6VlbtBbQgp7\n2g3sG/WqsV+TC5yuKQlLJCoHMezo1/iqfbeSN11T6nA3Xpvc3sxa5cO8z6s0\ncPko\r\n=0USL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZ8l4e+HDTQGj6R2ayjEC1kE5BqlwvtjFww36BljNfPAiEAhX9Kj3EQk4/5yIpWuprw3sUTo7F2Lo3b8vzCcdtGeuM="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.254_1613397611528_0.4547267011999765"},"_hasShrinkwrap":false},"1.1.0-alpha.255":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.255","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"68e0ab2c215d462b7cdceca5ae5838796b8c4721","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.255","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-d/U5/Tugq5QUHLA2Xagx93speL7DCgiN+qeMJv5Sw3AYq/FT5rgbebAGLWkyTp02u4Z5eV+hpcnrIVvvAgw3BQ==","shasum":"0f57faec225e130317f77d476650ae79424b630c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.255.tgz","fileCount":303,"unpackedSize":6865568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgK31mCRA9TVsSAnZWagAAqPMP/1nhHkkgsqwY/2ENk+Tq\neDWdZl/wpdGOtrptYbFRzg97QLHN/OHkppPzXEFlpu7xxiVpwJEXjtbBsuiA\nZ8axpRqertMFi0KD6ysiXzeqRgnkbuIsgyJfwaZb3KfBNRU1IF+bj8kM4Fa5\nG7EkKckV6rgR6LhgvgQyFx9aYGruhAlurz/Ox6IqJE3xY+uWV/PPPA7MvnFi\neX/izzbo/+PHIKiqvV5dN+jKTdqDhhU2w6HxygvI+uqVxae7LY+t4/nAoKlg\nw0/WZunEhiyz/gSPw5RevJJtpslmrcMFOemddB0uBc1q/xITky8eunzzHGGG\nyziI/lzbg+P70ZGI3WMkd7d6Pfc2b1AXtYsmtO1pn0NeQBWeJVKlKKfI6moG\n0VkLIGyxsNZZvu62H9w6LdeV4NUdE0SljPn4xWgF57E9Q184KWTGpBXsMFWC\npoez5p4OZoUnqRpSUsPH7QnaJVF8Jp5xPDVE9/MxBVaTQo2/xJekT20sV15z\nrzqxtb1OOL+cLE/nNIhDzAuBTqhyEaITf5iizQwWjN4YgCcBji2PY4P3eHb5\nm0JicxHwy+DdXcPYAV7wKXGDxQzq4IcxU+GFtYHPRh36HFGZVfB9U+EQxXMY\nbLUlZqOtrvtxaTiJUsJIcFD0uv42u9DIMWML9x72QdHPWmlVLNkbvfHvhnp9\nypYx\r\n=VGV3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAriPcBLC6Bkww9fg9apQPNJTT9DH+kOmDBNjeP5QkGJAiBJLVRpqwYThNIqFvwJS8td5tsQO2px/Xio+YcBW/eNoQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.255_1613462885497_0.4355692165676419"},"_hasShrinkwrap":false},"1.1.0-alpha.256":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.256","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"aeb7d10bb46bfe35c64804ed1b0839ab65debacf","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.256","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Cu7gkKhf7UdT+OoFwYY950oXBaGsmo/3SePcb4YXwR6pGSjai1Tb98H92Y+wR2dMYmWLDRUfhU/2GP5KzuQ6jw==","shasum":"4d1c2d2f960255d2e02422fad19795c2fc65720d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.256.tgz","fileCount":303,"unpackedSize":6865834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgK49ECRA9TVsSAnZWagAAkGwP+gKYXVLrz/GSD0jXw8sx\noKv+Ut8onZHOOLTl146VxRyYBPAifKawocy/2iUVeYoEp7w2rK1OQ32hGkjV\nz1bITjZXOLXGi004KdrVcjLokWrboTTIPw6sW9q2Y0g4ode3hzG/EkjsQa80\nMNUh/zXKCvkZbgJy1hcE+hP7dGGeb4wg16M809NyXHn/pJZVi8xc3ja16lCE\nnuqs5NnEeDwMidRWo3XtRGlv7rSrCM5MLNc9cWWj+JDqs3oUeiIPH3yNNTU0\nfoKehKM6XXgxFepLSbXqzKD9dxQTOGiA5XJmAIzxeks/t4OyyNs8DwJsOBf/\ncGwsIKOO5wzFV4zOxTcHd5+/IgYxNFkZ9thBZMxfwUa3RhmozsBO9G7oNTDj\nSxTBR9QHsVxX34e3pPRj2mUtE9Ybr3JmRxgqDzDaDil1VHAiY8rlmAdMounA\nNhfk2B0Qafxie6mNOx+7qm2LNZquxs7Ntbm7RUlYlLmWnDl8lKSMWFemLYVZ\nm6+hfdlnOA96E/yLWF+iHVCsy8zvsNyEWwYCBSciwhh+lqwKnBU+U3PDnV7c\n4pF0SmhKjIk1GOnWM577SB0FlpWaxE75/tHhy8ievLaUotRh7sMGK5QeXagd\nYOGM70zc5PwxPpiAo/5bo+M2pyw8ELj+PrFfudGgwd4xAym0phS2/LqLk3Wq\n7EsH\r\n=nwi4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1dicLFZL9TfZgbisFJTh5ZbXC7/8AnZ6Sr7lb1UoTiAiAEjelSbozjZtkuKMT8kF6Y4ZK7X4n1HNiBuQPwCyIE8g=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.256_1613467460035_0.6643804686321091"},"_hasShrinkwrap":false},"1.1.0-alpha.257":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.257","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^16.9.8","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f34ed081dbbafcacf7c005eab07326787b507e7b","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.257","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-yHBfKd+HmWDAmpKDZxw893W+VuUO2d2T1+UVCbLbCMd3iaJtjI4gUmYMf/nRtvyruunFBjgsMuLPnu2kksi30w==","shasum":"3da6e32cb200cdf6e09718e16b8beb56fb188207","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.257.tgz","fileCount":304,"unpackedSize":6867766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLhvkCRA9TVsSAnZWagAA34EQAIPth7Z/L4bWEpz/TP8S\nSCdepS5Fpigkjjos/VhLgcDwO/JJdvBxbGrPvqrVFOjaiF5brY4LWQ7V6/Bi\n0tSOZIBMM3kZTWhMBem5K5W8CnsewD/Ly6/QvQwM0ev9l3WUkxWhiMWfnWzH\njHsUPoQ3cpqCtXtf5X5WoN5X3A4L7AM3ynXFQxZxvKLKvZz9MMXiU5v/pcEU\nFVDjD+fIsZMLgqRnQ8CZ3b0waAog1qbXBWqOA5k/T0dr6b+uNTCqiRaC/3WM\n9s+RVGvyAteaFZwlzLUMbnYtUf20Kw48nbfLOqmcv4Ebm/6UbXw8edtaf+nU\nc5+UUwaaU/8XiZPgyCoEc9Q5q+3q5sU9t8skioaEd4udNW8Zzwwjq6oxhLFN\no0T9nvXm9ZmzmnfQorJWaoH/PoXaMwTONJc09wThTsJFQUceJRmItxqvLrpj\n5KPghP8bDFm1wAlNkNlOvBj3AOjVcvVjDfRkS2JvVAwG27rvj+yvMiO3Jrld\npKJ+ubkkD3hkyFGlUxD+98rNc65kVQflIF6Rnunv7jNdLOL0jgKyb/s9AhmO\nlrptY1tyDMpAhc9nIkUz+F1L6+dWgQrLKlM0CaUFvf80JGnmOqZUjZgmWh7A\nF/noySPxxq5Uw3YmrppBsR+9yOHuzw9E0SPkNn4AGGbT6qKZjHcmesR2q1UX\nUsNi\r\n=NoDh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDChHn6xGTYabLEzj91iyUW3vv5bQrFNMVbnAfZe/n4CwIgSgB+i6n7hicYphYJUHesF7jYa51QxRNNU1KSez013rc="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.257_1613634532016_0.18113005973212193"},"_hasShrinkwrap":false},"1.1.0-alpha.258":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.258","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"207bb3fa2a0f620456db84ab1c99d5dabc949cbc","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.258","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-OpdGWzNjmyBK1sHpQ4Di6RFLHxj24f9JeOlz9X6Ari2F7Dr45Cnn2twH0tvihvHinnUk49kxePfQ1rZFgBsXnA==","shasum":"7bda4ab221de3b30faf9f9b3586faf39a9edf2c8","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.258.tgz","fileCount":306,"unpackedSize":6875564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLlR1CRA9TVsSAnZWagAAqbYP/jyDUxHDjlb2B5xClZ1l\nZ3uwARcZOOmm5fGgBuccjm2K9iB5X26RJNI5WX6G5QuXYw5oJoUCZp9hoXz8\nk0tyKOgObiZRO0p3QB6SIaNFFr4TZc7XqUMW4c89X09IE65wY6EQTi8sUKbI\nHhTI5NBL5ClHfZRbkX/m2KM4P7iHKWYx/LrLU7vvuvOkaxgVraADcV0Ow9zd\nyuAC2NhfN6wNOTwWrWX3JQ4toggOInq6AjQ7PdpAZ7BoLkLcwBngtQl/TVDS\nJgYIlrACU5xFqJ3/HnqDmubXha248rZdHca354u0cjUwAXEi2uP9ivC6CjoF\nzFtEGge3HgNRaq0gauvXnfqMz3jWeCTcYRuET7gRk5Av0BiqVCAYs3RS1iFr\nGrN2X0yphF90XjciRHC2xRpAwCWR/mX9XzJpa8dE/nllorLtpUb39zByO9Nt\nZf4PsdVcEmSJkAeVRVnHRcOU903Hf2OmKH1P9K2RjRBaiQaQlJd1mDCO7+3x\njT0KiUoTMfvDULvNQQb/6qPu2ZbnqCH/dVk9wNkM58xXCvgU76ZjKH+bnmhP\njGsVfvCQ5xYLtvKqNbQ+rQSALtHI/Uk85FhYPrMfnyDg2i458aA8IIk7eIfe\nFDEu/VEp6Xo6u2S7ytfW0A8h/ObucRiYAVKgZMD/7RS8qNxPVAFWSFkSKKXk\nZETG\r\n=m67Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCT5qvEltEKpyoH0FNFqQaYPN27pN5LTeLGHuv8Ddk/nQIhAIMr/5NiDD5WVH6AHeE06QTk4LkaZmxD7A4KA2aSgxuH"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.258_1613649012807_0.7405228021437229"},"_hasShrinkwrap":false},"1.1.0-alpha.259":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.259","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"dfb3e2773d508366b411a38e3f7a89e1f82c4420","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.259","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-25k6nxMajKUeRaPnc3YHu4Yz0Ui0LzcoWN7JSV3FBbdiXGUjTeARzTIO6oiAHio/KLL5d0m9HbwgOg0V5C3YmQ==","shasum":"65aa193469cbdb8dac6a201229928ef115a2a440","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.259.tgz","fileCount":306,"unpackedSize":6876767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL29oCRA9TVsSAnZWagAA6HMP/RfHJ+LShqCjjS7/Yp44\nPtJIhh5wYsB90xQa+yMaLsWXPxiJ9vosZfsjcCqkD8uRIjb+HWAhjsK/+BkK\nhr38AUjO8LE4Typ1jFP1AurmIMjTRvYy5scbz9Eo9Bq5fBPXIKYcix116u3w\nx32O7fYN1XfEZip5IoaLjmixJfbu8XcIMF6aPv4Q0a7glrJq1v8fuAxu33hX\nXkpvLjXEp5oUHITooeqXjYiV8T0isKceIi82vfLGSKODuZKhoEQpE02lntdO\ncP94MqySS4Zg1+k7OHxoPzLexL7OLkUgJuIQ9wRAPwUXtBW4LQc11PwJpEiq\n2+wCvclNpOUtDD1W5BXRAAtSPD0urKwBacyeTJNaY71V0h7HlL5IqJkJCOd9\n+nQ4AQVjs2ujVlOwPv5WzyJOmOLUbKOq8FbtZSYsaM2GAoQGnkfnllYRXUf3\n+st5tyQMYSbR4X6ngttER+3+zNOD/KAWeNJtNLx6TldB5Zo//Ro3LsJp3AN+\nFsWUimwF38jg2m5wvIqfk92KtpN/BGHuPje70pt44EH/9smcUH2KuMqL8hTe\nzjtgU2kCDKbEEJP3yHCWHEi4E/VSdT17ITpHY/s2MxSdRpZ1DyutkpbW4ejl\nwWFP0FVImfQ9uckpWRAQgcSHG2kIrJF+gwd4wnH2iX63cojD85hbG/IUo0fY\n42GB\r\n=d4eZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLtYPOA3r44768CcnRSsOR/TiExvqSwzLdmwlGcIWjhgIgcGbLwzEba9z7k+4+x68v3LgnE0w1JvmoWtq7WFOL8hw="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.259_1613721448181_0.3020508128508026"},"_hasShrinkwrap":false},"1.1.0-alpha.260":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.260","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"c3779a26ab271d65444d14fc68cf4e050d2463ca","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.260","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-6vXpH1qo7bUlpmB+qwzDrvv+XSpg5gAvpRUJ3ad0JMdiY4UHdQWCbC7cBifMHmBar3PpgF05swgNIXYXAvn46A==","shasum":"fd68de193eebb70d1b66847096fed29b39bc5b25","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.260.tgz","fileCount":306,"unpackedSize":6876198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL4ZkCRA9TVsSAnZWagAAhMkQAIZRzKV8TEaHbxahl8ds\naxOr2G3UH8hiSVM/pz1tgXGISTiVcCCR6MgPsgwbZ4TJrsvc2MCwUL95+xox\nnJPAMDfhcu7jYgZ8xnvpfy7DzckqjtTbhJERhEoCfFXiEe+d4KDxd1z3VIZP\nTsDUZMHNMxpPgzwqJ1871kEmfbfqMH31EGyFeqw/GvLt0qGUdy0YPM9oB4lw\n5Yd+KcNc927aXkeBrHTcHGUAQ+M7CG7gnj7JSiP87+7UcM8tgkGweZ8PCZdM\n1uKpbdBaFurYdXiNMiiumt39dm+/qKIfuWBl4tPiJsp9ucXioiqFBBiPLjL2\nMBktWiGDapdlPZvp1nLrB4IpO90eFFRvDu/XuB+go5f0Z2Ru+QKnAGbNPbLL\n+1+4819K7sm1jpexjwbqCKsB4AYAz0wNaAUd3TeXnAVsIL/Vo610r2HGGa9I\nQTWI+ROZSC8KoY0tqnOxFrzxD7DiZln4ZDAlzVwAip10D0MaJqMCbYO5/Cnr\nxIH3zugHlngJLA76DEdauBbG/nEXsqMXyalWSjjsjxvrTJ5Qy2nzmg4ELHol\ncv035irOhqpiczulxLJkqRSDmEVrizI1ik1VDVuC7GTrT/K5a+QMgpImypXc\nb+H8ImlhzX35H+CEMth8h2esd5Nslyh0mWcavd1UzAdxvFSzXkDp/WBKSI4J\nZh7r\r\n=5ijc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGuKhvS0iIOePvldKADzZVmfim02TBMPqZLMoNb3DAfRAiEA+mzLZrlNpDZPZCw8tYy+y8knobHyyZslfxzfdZkr2Qw="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.260_1613727331682_0.2129412652570417"},"_hasShrinkwrap":false},"1.1.0-alpha.261":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.261","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"9e274fb0c8328fd9c66b75ca7f534b9140796070","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.261","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-+UjbsGxmkPkUNKviJgJVtW4AyKrk0E+dN6yr2aaOJvfzVQtFd6VwxcY6V6f7F2sBYhxFXrQseZbZ+NVfjZJOag==","shasum":"02aee056f59188c1f565102dbb9418ee5160dcf8","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.261.tgz","fileCount":306,"unpackedSize":6877677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL5WfCRA9TVsSAnZWagAABTkP/27h0DzhuDdyK/NfqAlL\nn1bo/v1zGlrNaLrl4YUG23ZJ4bHPjLXwB3W/1bFhBWVoF6KHLgS4cEUnpPep\nxDFvri5OalAAvLTIwjHqsZzAdV5Dbbray0+W7Ul52glm8f699FRRZGVgwfar\nJCm8LN1fA1nMSjCY+DNbH3yPYxHZfgI/TmLo98LV4jqrO1XlE14bX/G4K/z3\nENMHn7r9+2YGNd5jaJfGbIVD/WLPWogihwPl71xX3FkV6oQfZodNrLqHP0o/\njrP7GUAerr2XrjiN0/zSBCe0f030fLW5yE+yR2y4KfHnEdJ/YynngijvFqaI\nf0VNQvgx+/lpdcEpyD84QDKjMFE50PAXmwtTUN2RKTLIuNRL1A9gabz2sE0Z\n/R93sZzeeQEeAhsEudVHSQkZKQ77nl9rOja6+97g2lw6iDdzWW7bQGaGONzw\ne0GtkqiGeqnLmnGDZb5GD5ArzOAcjK5ooEGQtivwxb3wyExnjLJuui9TY4NN\njmOvaoizyK9k4cW+cFtW9z4jOCHzqFy3uM5VFLyR/REUozrHo4g5+KcynSpj\nk7B4/fJ5/2pL1eUJWHNF7wmBTcyHjsNRxjaV09wlrzmQ8PQasrzdyRoFkYQ/\n2P6qlGg2q+kKy3ceL7Mc67if9CV9ipIk3JMBCfLyC+TTr5KLNxLzPqQUlan1\n40pj\r\n=5/3T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClacdNLXkvgcpVjhYAsz3E18yFKh9h/MIWGHygXliagAIgAozqCNGq6RPkyFMIL95d6p/ywOhEniEcj40vliY7js0="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.261_1613731231336_0.438781712252992"},"_hasShrinkwrap":false},"1.1.0-alpha.262":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.262","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8432cc62b6d37589a21927b365d8a004e81b8791","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.262","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-4KiHXDFQYVi2mSR8bbVv2H11kL6vnhKQ3nb4osInsz13bCYPKPS2ehwDDB9EAroBDw2uzPTfro1DsRvyIpg5LA==","shasum":"ea7cd1fab9081f566b39f787aece577714f4f6a0","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.262.tgz","fileCount":306,"unpackedSize":6877833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMyPpCRA9TVsSAnZWagAA9RYP/iYHxcEb99nQrLG31Taw\nlu/rlo4GlPBDEya8D1YEOsecBINMGumFJK5cxlIrwgJOWW9xGswuIuFV1BWB\n3VmYkErBegBRS25dYic+4BWWsaVkT6Zb4gPRacqI/f2ujZLYVlJOceuDGf8v\n1Q490PSRMyWB3nX5ues/Tdpx0xsUD+jJBo0WTbVQP4zuNy1EMfq3FDRe7cuh\nU5GuOKudm/ngO03eCs91CPfcsuRTM9DKYc49RpnYni4yPjt/NGSLU9ONV/kA\nUHLrRG+KNlU+JZGSvRsmP5No/q/J1GMJi8nBZm18F7CfrpXnho5OqDTys4FB\n311oEVH2fQGmPsUR4x+HhDQV6Z/MpxCIHs6B2AE7AyXVgtZJld4riFyZAOXN\nX1LFyyAECt1vdGGvT7WEJTdoMGrUPnS7GXyqQXmVGQ1dJJnfAoc8wTdzBQLq\nt1cV8UD90M4vfv909suMJsxDmEtdgalyrRA9RUSzZHRSR+1DN4/D+XgJ95No\n8mG29bqqhn8e/dsxA/V3kFt5uFUjmoy+r5JS5zrOXZiNvWALtip2gTo1WW4P\n4mGIoqQOtBOAUGPuBk66o7EYA+Po3pVHmc0rtnwGoldj2ggMhW0hORaR3UOi\nVybDzFPjLUq7jhB5joCiPLmOROKp7/eWhbDLz22n+H7B/pOsLhq5QZ9o0Sun\n7u+G\r\n=1uDH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvuy/mk5ljxN9z0c+Mxe40N10IUj4NMWtGkArbzhHX+AiEA0p/0sogvO0TANGjaKQWeQredtMdDvYYScF6q23cdKHQ="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.262_1613964264619_0.39590230535784854"},"_hasShrinkwrap":false},"1.1.0-alpha.263":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.263","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6ce0794326e08d87760b9b9faf1014c66288ebe2","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.263","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BKg5y/ifNhgiUKvWRGTiaztOl8MSDwiA+5GV8oJ1+npGw66JQzKqlDI3W0kb1R8L395YFFe2evVbZKEo0ECXJw==","shasum":"7ec25144534d497c29ff91aad428c0c587eb3532","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.263.tgz","fileCount":306,"unpackedSize":6878759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM4DfCRA9TVsSAnZWagAAyNsP/iMO+fSJC64xHSqkNVtd\nIv4AdvCPyZOnPXNNT/q8ru72+0Jo+GUyCgUgnOez7N8hZEUNZvfeJzS3DgNz\nrSduG6FprkX11snnvpYUAzAsBmXQKEkEiBp7b7wJGjk1l4zIyuCpO2G50Nqv\nn8vDOHXTF/lDGnWVCalvFdFFuL1jFfucKRDupA0qXv2LUsEeV7TZKb/SExwh\n783kMo4b+Jof8WaSkyWHDo3+J5sQhwmvdizoNNegUK3oql/omYuxoN8usYY/\nZW6cTDrTyeCRfMWKBy38c1S0asB1LrwRHNj4Wc/8yj71IRAexR1L+NZ9DA03\ngO0TY7/db9TSn4ydLWQqJiAq5HBH2hJL4C5aFw3aUtvA0BusbN0PhYbGQIyW\nIUbz7h4M/dJryZcJq7ruEfsrgi99BOD1Ie5o8y9a4LqwutY9eRR702lfxJa2\ntkHUbskDIsE7ROAXGTaM2+BK0NDiQ6i6B3QfXSr1Q6HbZvgGC/ZbeepdscYf\nQsoLFDuEAQA3q4pL9dE7ZFamaWparryN4JZLq3f371NOuXPj0raw1PeI94+d\nSyXZgDOjIUNesfnNyGeahk0KgT+cH57tTX0B7X2qHW1KKPK8dqwjkTCM5/Ml\nuJDxI5gw9GkWH2IYCWZktlCtNvncVxUqN5NizF3y+r1IfzV8B5g44B8ON3PI\n3uiR\r\n=BMdN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHYoHWZWdV1EOgoZt+3QQ8nF5L/q6TqmHzW4J+fP5W3tAiEAkClB8rvXj/0kn1t4Vf3JB+vhCgEaSn9saEuGsw8wWqI="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.263_1613988062956_0.8823723448638783"},"_hasShrinkwrap":false},"1.1.0-alpha.264":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.264","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"76532d9346997540b1197d95718c4ea768e879e2","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.264","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-J8yTMsxY97JlaNSi1mQcZ0+OvPPKIS57CFZWQlEPkP1n1Kzyb1nHP6aZmz0uW1hrOFhQQ100IasaH+u1wraD2w==","shasum":"5884659e3d73bbd8c9b90d58d31cb572820a21a5","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.264.tgz","fileCount":306,"unpackedSize":6879549,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM6KLCRA9TVsSAnZWagAAgxQP/A+5vhg5QKxXW0/aBxn2\n/E8w80iVFtHE35t8E2XO2Ykci+46+GiC98FX3r+/v8pr/Q44M7Vv4h2YVrLC\nSIA6bPYVcdKWkmRGjL7Top706OrjDOeKDDsyCnlSrlPXvQ27gBR2SkhEp5yo\n0+feNxGZG0InkWYjzp7rkK0fxVEQr/Q1jQKTgeBi8VWHH5i2RpXLiK3LJ2nQ\nwIL6NKXWEOnbLOWqeyalbR3q450aoYNMrGsVVyv9nf3XGjIrY8O0tSrg+yn1\neoHpGeAmSqM7z5AI6qliuXMPCnQYkAsaAA/7IfHPZWf+HPtmAI3p+wyYJo+m\nEpoJmPyhHDnjtA9LLu3/GVEwgVopz357cCBSUJG2bE9pC6oRgPaxX9kqrw+c\nOrqgBwxY4PSwymlNl75G/Jr2zLsHAFOBF6pCwt7EViXJh/MWMDv3jYRHSLbb\nucEQ3MlWE3/ntEy4Ow/vbFobBYawFt4SamTd+/r5rWX0NfXrDiBsl/1AsFzR\n0EZvJzmdOjr2+vMmNEN1tX1RpI7HicgGr31uym2p98ZjE1tfWj6Fv+3WSCS5\nRjZFvoEAM8E7NoOtkw89HoiyF2aRRGRyzKyPJ7lOYbkscj86Pr0zjwzjlaHF\n2soBnVohxMvgp9thmjB83YTXqbiRMfW2isBkaSkZFIaUyyzmpL7zTExJFhzy\nCIS2\r\n=lBz0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTnNfuzwqVk44Ye1X9b8c7Z0aPeSF6fDWRs9EYBr2FOAiAq89QyWf9Ja2KB63wY3EFSvSjxL8OAkCCoa1R9OD1ZBw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.264_1613996682571_0.9668560984026531"},"_hasShrinkwrap":false},"1.1.0-alpha.265":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.265","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"c4d1295befba5c9a519290c4445dc2811919ac12","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.265","_nodeVersion":"12.20.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-EndFKjarD3TZsoxNpNr4SHRJN5FyJGA7+CIopvUX9OYxzjErlLqPXTvsr4jfKHGv2C1qZOz0LkDfefw/Wa0auw==","shasum":"289bbf3f23456d5717cee76a91e3ab7674c79d4a","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.265.tgz","fileCount":306,"unpackedSize":6879693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNHb9CRA9TVsSAnZWagAAN/EP/2YX3Hf3gsFx6cJcI+6T\n71peq1GphniCfXh6PX+kGqDCnTTV7sOU397J0Yr6C+Sy2kybUWji6Wu0h/Yo\nGhL+5YFiHJ18JUNpasJpEB19J1+uIum+PLgVgd2zrGtpbSDV8Hu6lZwTbsy6\nHakCCPht/DEG2cMvYXkkBmXRZntFQH0b2spFHuFQdld5T2bXFWYjRK9sFTQJ\nFGOGt2srJJkXfwckejFT71nP6XUn7yPP+qntvP0n5K3sPmssOZOotJdIfwXV\n4H9Kp0Qdw5bxXzdO6/zadC1OcNsZvoiXPqMcWWCmFXvipGQaxOObnU7x51+9\nlCQi9a8GrnLi37OZAKTSUJ700Sg7IsT2ZyqNHM6iNI/s1xlRouRlX/ZbJF5f\nYKPQV7b6fjkMZ27E3HEG/q+6BDy7rGZr2m9fFEilu/i1cw9y3Qh1I9AYfILP\nXxtG593ui7+t7EexA8UaqxpmKHWVcsBd4UNAP1R1/CrUQLyhxSrXhHeAZWbA\nAUv+NnnLH032b/XqjJvX8VxHpOCBO458ghNWqDrmWMzrn5ufy/cPvgdbfiyV\nAcgHaFztmzz78APz9CX2aIANJHyPgOX3yWV6Wo5ZBdG+HN/C04QdMteSAGk7\n9cuJgcxzX8lfZozmTQStdL6h3rn8soGeNvomcgbT16I9AHjTkM08FdMbb9X+\nuyA7\r\n=KW+2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdmZfZ7O7w5y/LA3fX8oHGLBna7gBnvLN9kiA64GWHjAIhAKZ2yT95RKY7Cx2oWng8/2mOSU9+11hooyEqGXEq4Lb2"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.265_1614051068402_0.05650327831660307"},"_hasShrinkwrap":false},"1.1.0-alpha.266":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.266","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a3eb6ea74e60ec1da9ef1b3eb83d5586b6363e50","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.266","_nodeVersion":"12.20.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-t8+QFHhFHQOOndL0CrrYwZfimUVCKayaUoIVeLk0rA6zzzKKTwUzaAOt7Vtp91NQwETqyGvhLCZniU7BbfvrGg==","shasum":"1f8a52556a166e6da7ddaaaed571b43cb56785eb","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.266.tgz","fileCount":306,"unpackedSize":6887660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOGOSCRA9TVsSAnZWagAA8m4P/2r5z2F0BIUbgqPZ173l\nrxrOBcLtbIf/eUH2TcIeEWw+C07YOzoF87TgexF1yZL9n1Vp3Y/UGxz5eLf3\nPFpitZXRKqz20Et/qi6Xqmk3g+JorKIHYKUSMUFg+CqfYSJluAbFtUfBHs5j\npBrcmneYo/MTuDOMo4NY0eLf/Q2XhOa1JRb/xvxEZiMrEjEBVKscgL6YubB2\nxV4xjGc9jl/GB0KMMRX1eVfCPrtkfqNkZr6ifko17UaMgz4UW9IFZ8GwFzFn\nK8eNXaq1ojc1HsnQL2czyYtf6paTmijClKchurcHXd+kRgb3lUdLTb0vGXt2\nmf5SxNr0mk+ezC412fDP799rxG8x0nn84e+LQmUVUY8wVd/Ozh5L5YrXWCHy\np8yW+mg2dPRev86GtuPv0urjs7xO3dyOwhFfRpxHzaxf08F4MNqkuZTxeipb\nH3OqCu+i6SuKUuRjV8v+khZmXFpdMMJ6wWK6+WFAySEdJv6/w91ek4Kc2URn\nWX0xCt0TPLVv3guj//ZhKRsiWJJSklQGnMsSLpA5Mmzv97pcTSaf83Yo0xAg\nWZRGSJKL2UzwzCioEO9stLzWHgHvQ0QPr3ZXAsWinA5f8lOic0TFvHJErD5N\nwOX49TRrFKRb5C/z+vRJLp1NXXsIJueih3k3xRmsILyA+t8vUB9xnzvCy0v5\nL67q\r\n=JuUq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgg0gdbA2NjpYOnFPXj9/NPm2kkf9lHw++WyfFU4hvGwIhAJZ4imhQghlFmaeugJfOgiQuAghchadoTsFQrwiYPLBi"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.266_1614308241960_0.5851107105687317"},"_hasShrinkwrap":false},"1.1.0-alpha.267":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.267","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"c0afa17824e5fba3af613201861b38b70ac0d194","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.267","_nodeVersion":"12.20.2","_npmVersion":"6.14.6","dist":{"integrity":"sha512-NGJEOs31hFzaICjsWfvhvdRbZyRm2F5qkdKHwwzutxzFRqITW5VQLP1McJ7aiqQD1akHG+o6cFoP6ZwdEsopdA==","shasum":"44528b08cfaf000c5ac6a79276eeede03853a0b2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.267.tgz","fileCount":306,"unpackedSize":6888967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQLr/CRA9TVsSAnZWagAA/CMQAJNSOwMr50WuwZ1aQrD2\nGXiWPJfLzV3yLZuxlcEgiv994qyLyWXSMRO2B2AP7/cp1pvOmU2A27o7KRmC\njeWT+1R5KdObcfCFtb9ymmr5YdgnSuO8RC7ap+5UmnzJAoNWxdnOKTxW18Qg\n3Znn9dVpooDQ1ga3uOD0LkzeBdbzKI8QHv/N4EnJF0uozDIrAx8Sqls4wHds\nmug8wEghS3TQ9+buQb8o2Vi2YnFtrD4FzMahSCrlDSUsw842qN/2fl1yXXrE\nChQAqZWoUGWmgPj64XoCJijPv82a3yH8Q0lHLvOQdVitxXwgb9e9PyOHXZHT\njVHG1oz7R19phvqsgXE0FPgVmQQEbkCJEXrXAIxU1fhuUuhkEAvphGn8Gjwd\nEJ9+MnWanUCzTv0VEF5xBM4gwhMJByBUWb7qtnsQwBXqpzeZpF52PuPlgPl5\n+O6WViMgW9oyXIlgK3FoNueHWegpBo8E/j4r0fYh6q8k9JRcGEWDO/NJXxEH\n/GGUkfRKGJ481vpwl/8VvD4qPmlvCpT6k+boNO62h7B5+iSqwbSmPdIgv/zz\nwmxSmixltjMM9JOdMY8gvHucWPKwyIYR7Mkp94vfPjlVQXuWKgFVfhdnnCeJ\nQ1+TIq5/VXJkkNKYwHTvjFCzNlCdepdmYIJ6RAZuCvhxUx7hu6egeULn/k2j\nr3mV\r\n=Re7u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDszlNUlRqXOH5lsEun0eeWZIuDK5NoekkB98nKbIZaOAIhAN6J3vIzvkvxaaicEyMvUfk2DF8LZfIr5FYwSyjCxtWc"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.267_1614854910457_0.9781410718280983"},"_hasShrinkwrap":false},"1.1.0-alpha.268":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.268","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a7b52cd59202ba2786849233985fd0801238a48e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.268","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-DAn8qzg3BQu+w2Sh0CpJBRTCX2ZW6YZl6DFhp/ue+Ci9neM6PELIyRYna8KCzLOWHx3tTt5HVwSmxabLmrGghw==","shasum":"dcca8d8780535737d093c2105cae0cbfecf65ada","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.268.tgz","fileCount":306,"unpackedSize":6889484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSCZ4CRA9TVsSAnZWagAA4F8QAIX3JhBQQkj0f/f9RQ87\nKJlULx4k+NZS7e7cX9+oGiCLNLqP9oGUsTqrnaRvcy1LH482oLR4GoLtv3Rm\nhBPKX/z25CKFD37euqKT0Sj59imJDn6vfJkIv3yLP6aaSJYsBz2jFRc/HTaI\nWCYN4/AAIi6FpGo4NKfDZIYD947A79bjquloVZ9PMrfomzkn2R74b3kg31BF\nRkuMJEgznkC7fv9wqlxmsagjxDiLby/Oa+lkte9b0VyzAYwvu7krst5f+a0E\nMilSTOwZ4HkM4ZD3QgvJ4n0wUmru6wlN1q2MxIZ7Z9q8cxALFEp7MoWZdneV\nDKnIAn3ghgsuwsEOsTAllGYz7bVL73fO6xFF/lc7xGII1T8o4OKTymf216gb\nWkx9BUDlVjQodisu84b5WnlpOUO5woHos1LlSHwexXe6kJncriVoPHQw6LKp\ngLBYiMhFnu6RupXnu6la2MI5xhPXNP6lQzUBomn46oJafObyd/i2JmVn8M/A\nC0b6nM7DCbWChPYR7s9qTcbeN/hRkjBIjoqcFCPIW4wJqAcBdT5/TuoyrvKH\nHTzXNcgv2XyBzZDrdJumhFoFjom9lSlEYhx4clrX392K232eaCfdua4UFhho\nakvc54lyym9AP1jDP7PkCZBxyW8iovDqGtRJFHihmfOEXTQMNrIqouYdvVof\n7upz\r\n=ibuO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGitUmVaEHPob5hmt65bnhahcgRu+k+xGGXJqelQtw0fAiAd3G6yVV6Cw05E7YJ7CjVfa3g+IO0xkAOzc4DsgW9Aaw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.268_1615341176177_0.7486028700375473"},"_hasShrinkwrap":false},"1.1.0-alpha.269":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.269","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"5f9422b51eadd07dcc98ab2da4bdd322c0a2d717","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.269","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-JHCgHOfBMqmwZ4kivUzCfaUYQOHge6bc20P8mfs0JHaVWn2j++eF4eiLxB13xbyLKbMc5nVTVu+fpDwBrQsUPg==","shasum":"da68655c8ce1b3e159d5ebca59829a794be556aa","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.269.tgz","fileCount":306,"unpackedSize":6889530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSDDwCRA9TVsSAnZWagAAUZcP/AskcKDQt1Ai46qUvtPr\nAHPiHAo+aXx64gQsWqJ1EWw/WQ8V1+W2z2mKLtOVpypFpYRXNwp9PgB1XK9J\nykjNbaWTRolGxoeeGivyhyqFSHywCQupmdXCWLtaYqvtEpOfyxyEg97w9coR\npyWUeP+aT/LkZ5r2Q/GSkzJw96W/MeDjKFKb2RR/dFirk+P99c76p6JuVM8u\nYlnKdH3PgivVBrBJfHxGYLtq5IbPyin+vQGLtM60esEIrr4iXx8LTVxsm8e2\nYpRvHmDKk61fyHhO35I9jS7C4aS78LOOi1J7rqLOzxqoODNMBEgaP8kgpRKe\n4QNZI6E/QSDqFD4xVp31gATlKMgQpCccK5kov6IpRvwd4tN3qdStep4gn2NF\nhORB9nxfplRoJJCy4P0M72fAYZ7XxPPdOWA5cimby5b3UR/Yg0i8IgwpphWg\nnxaGO2lDSLBkL4EjwqesN2vrq1P5ajHE3vXYRY9zp/MyczLAnxbr5kV8SMx/\nSkl4LIlB10EBADd2jNdzgkYiOSNN09C29aNLBrQHVLaBwpB+ltmiV/e7N5fV\nxJlZ5yITnR9kABz2o1FR35D4Md8uxf6UgrdfwlLhQRG2+DE8oTx5+2t86o1G\n3qGmGfXZcGigvKNfueWgW2e5DZHdxeoS7SHDKnTZ8V1p3PTqhnNzlVgZmAvK\nBfeQ\r\n=DoMc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACPlmnyKHyX3D3FwlDVoqC9DEJfsy/TjGQHPKmrUYclAiEA2wiln6+CEVkyLiTxL9cxXDmqNb4s9tVhVVoPkFS+CwQ="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.269_1615343856180_0.24148292001445015"},"_hasShrinkwrap":false},"1.1.0-alpha.270":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.270","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.18","@storybook/addons":"^6.1.18","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.18","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"dfad58a8e5dff0010d2477a25faf8ab3eeae39b4","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.270","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-PCzpnYHxf7W/19asQ7WbwBBtezRlY4+THfUv4NSyOxPWtiF8AnHUslFX5+qirb8KBuOyvh11hT1ExQm6NYFazQ==","shasum":"33bf1fa4df8bc31764dbf7132ddcb8907efee159","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.270.tgz","fileCount":306,"unpackedSize":6897487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSMIaCRA9TVsSAnZWagAAFcUP/j0Qt7xU7RnnBZjtnRpA\n3N2BCG+mEvukb8x76WWVvB7rM4ZODa8KKGtag8fQVN5gNdE8MCDf4y+/cxUB\nsLSgoKzuEq2b+GdYdSRPJ/liWcm5BD7Bpe3AXlitx9yFJCllyG99I0rs0TC8\nWudfhfcHiHHfCJhmnLVwPo3xTsSF+ExFNtRgX2vBYqq1BnVqhye4mve3vztE\noExKcQ1w97kICig7OJ22OWrjV9Z7r6Pdzbx05jCq2L1D5ZK5FqptZGN/Z3FV\n2AKDnZ7ChyAvKe50rVGLL29RSJiS6A6AFvEA5vzsq17xJYg7r+9cjRP4AzJ+\nFBOm4sfsXjmtm1Atj8qVa8xQg+Cj28jFVSUOJLXgew8JPruiRbDmPwoOyee1\nrBZPqI8mvjMB2dN1TAeoPVf0izBL4O4VpaUZ5m4FUP+CrXSjNYj6dPFRVUkT\njAG373J/nE71KHk4gBaVg2DfS1rnkeZ7uwO1pmjyeRQfP3KwP++IbQICHDZM\nMyYlWUXkYXi9BYvzlT/fn4NGA0zawTYxfbN2fiwRv0KyRKvIMjpryZrIhwcy\nnbn+28cJ7sVYW2TAyzlCztadFAcddKT3JPbsR7eM/5IK7DFI5XIWgUMBvQEY\nWjtcSqgA22g3zsL/gUiULJeJ9FLHD0Ts9JnBetWfadk1OyOid7YPC5tH7rkd\n1yxO\r\n=0epq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9em3EZjcKknymqmE5+QYWHz7DV+B0uoW4VWlJvDSAUQIhAMW6N6UNcz7HMz2WUW26N/OrMQZaJXH/2+nwAwQLIQoz"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.270_1615381018139_0.8969791817885717"},"_hasShrinkwrap":false},"1.1.0-alpha.271":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.271","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"350788a01297fcf0985b8300b57ef1208d526d00","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.271","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-xHRQ1WEw6YdHgafk/uwEfGgra5gh4+Gwzm57FHtmUV2tjmPxs/zAg4cVeMA64h6x+jRvOptSnwZywan5FQwgkg==","shasum":"fdd4d3a699668e28a1a2ae5bbb9c767703b2c206","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.271.tgz","fileCount":307,"unpackedSize":6901106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSyNhCRA9TVsSAnZWagAAsgYQAIa66l077rbd56xXieR3\ntW5k1TdH0LG/WRTHFWpnjHxgD2t2qmRnlyos7ZkUiZZ+My+JrOrbGVUasK2K\n8Z+8/Vhg7atEB2vQx3cUR8uUcbbNY4IbkpGawFLdZ5kO99toxMZpmKJm6+eE\nb1ooYHCKVbhV7XIbiYSjUchdvhqLSovYU/2Jpu7ZGDToi4JbUzkw10RtPjyZ\nTNok34W54wYAN7W5SEjkdwAgFSJrUh4I4Jcn8E5TIs6jgt0jw/LT6m6savzJ\n/ifwYsJ6qEo+oytmU/d1YdGLuPj7taOF7QRZQ/OBDk+VLKtQB1jPIW9qE9dY\nfsHIcYZqsk7/i6EAN/k7/YIyuZXM3XIHKFMJsTICN4qqEA+d4G9IhUkuFyss\nu0OUGUszynVShru3ojso1EfQZPd8mWA0qlM4osxucz8+cXg09JSYuMni0TAo\nFgOizegi6zVtp/yZluvosF5+SDpM0zcqERM0sndjryJUbtBx/WHFX0fv0DR6\nrljdLy46SecaQoC3GMxsU8V009lsc1Gs9NgRS4NrbVblrgNW/0NNN0x3OENl\nq9+Oye3kcf/wPIM3fnrrP/x+7xdnqqwW1S9eCR6aQMsOzZ+ylJqnPN7N+Ar+\n61/InOqsGLL8udni8z+zLZ9QME5jmnPJZBaodTt8Z8gq9lBC5fIDmGQcF4TY\n+Ge1\r\n=3dhV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU2sAx6NjVX1bJfS9xTsOltdkyn/bop2AroBa6yiVy2QIhANdlOebSIDVDK2lm8HZwMfTJBh2dGjIXwaLL5uYY+7Ul"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.271_1615536993233_0.2856318065599488"},"_hasShrinkwrap":false},"1.1.0-alpha.272":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.272","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"76174d94d4f011724173780d04f151e208933659","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.272","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-sUqaq11+CM/Qc8s6vJgnbASPLOcYe64oi4jpdohLztKWpFyFnJqR/ThMbU0jNFAN3YXdrW8R3LyxK7hX52R0cg==","shasum":"32d6a40beffb0fe408756c84fdb8cbbcc9783f13","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.272.tgz","fileCount":307,"unpackedSize":6901106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSz3mCRA9TVsSAnZWagAAPgQP/i+kdZrW529Vladkh4nm\nEjHJcBu/wE8rfq2OqysHE3Dlwz0F16G/lMkZ/XZtFGknUyx6QXkpY79sOsKr\np9iQQNGJcXohH624KSwr0rfe+UAFe/Q3/3iNaa0Glfeki4wNuqcnYE5qzEbZ\nh/CzsTTRd386uATlwpiUKxhBw3AFG9uF//A7TvOU/Tc43eNWc+giWDCiGSKo\nx/W1zGdigDp0WEwn75Ef3IISyfHIw6NjPpbEF7ofZNO0OlBX7+Awq7+fL6SO\n3q4Ph0EAbQ53Z73zcS3pEutQwqPs8I/n3djx8dGfsYMxQ+NAhA/W2hzUTkLU\niy1nN2a3+6lE0TIbjVf6EKxUm3p7MWDVfDjJzaNu6zoiFS/vZyv2oxvVu091\nWTPIx/9btgYPoO2rzUdurObCLYWFPgi3R7HAlZI3LxW1rtYVev+biqN2or34\n2g7vjwLDRCbXq8BqVDEIqCH1KR5mvQeOMSiBkUxxe2anG3StZj9dwwCyazRX\n14zCcCq+CWKbVuW/GKhqYOpNhsT0h62mJYacoqgliRH0SocPZkvZXIeztLA2\nvx95DRxl3fY3w7QHRDvdErArRDkJRQm3bL0qX3uglUInSgKPeNF9xU4cuaoD\nrpHOCLXOCeWDyo21J38qUlT6GmVLhcgW+Itx9uvf9Y98A9MYCk4qOc6fbx+r\ntSM2\r\n=gK2L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ4nE4wrrUk0u8pP8j0U1ezOtsfoeH3Wpv1Bc5OK3UogIhAJIflUuEGQgBEsMVU7w+aKbXwghtf0q1hQpCVWfgK+lf"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.272_1615543781809_0.5661349943545895"},"_hasShrinkwrap":false},"1.1.0-alpha.273":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.273","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"b0b21b117773873a96a1b11ceaabaaa21d5c418c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.273","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-GJBSIlHxsdvjpjw+3Q0hp/Y56BZ55lBw9ZrDzQqQ5PoHHfbKMvGvY9Z2twbarO9YpWFO4bIgZJVzYZHInctR9g==","shasum":"1d4ef30e7198d81b647ccc26f2dba0e062b6e9f1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.273.tgz","fileCount":307,"unpackedSize":6920168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUFg0CRA9TVsSAnZWagAA6RoP/18wMoW2inqJt/OCRHt4\n0f+nIE1N8pjm4K1wnrwjj2QLIOG23tHfQjVrAERKIGJrWkGE36vVahhc0nja\n4VF4/0NzuELtZc3fTmw5AtW9AvNJgt0HNAS6BlOnUBw2QDauXpU4voEeS2Q+\nbJni2HxmtvkBU5Js8MjKzotIUeXK4EEkxI1JmBOpfOZ2FALSKRvyCDBU0NGY\nhGlC6sIkwHOTrUqbvfwa79DVVyMlGXfn0TD0FIaNJUpOVy9bw3WRTPcggW/B\nvcXYmxXuCPNw4cBOoBJmAlBLBrXRILBPUp6QoOaiDuitesF3YBpmNRkeCq54\nmqeDJawyhXbQa0EgwQclhuq3osqTFb9oj+6LZXkbr6djVQXtnS1LzXPjgu56\nyl3NL9SBmgnuk8V+c80C33IqnP7ZkbiF8q3/99xQ3OgrC8tXjL1/i+M8Gc3w\nzeDkikhV7XlB25NnyxF/a93c7RixUXAqOzQ8+TsNwvemTYKj1qpc/y1IIxwF\nbnwWeFYZUdyuIc+e5ciTw4PTBnJBAO2rMi9Ay9ivNy2FZwFwmpuIwdWdyi+v\nI0ClDUJ7yumYXKI+aW0oOlIQTpS64scRUuLTC+OLIOYl+mpGa1xFbhhpzXZ8\nNzxwSBuC8l2rqH7hldUDR5ta+29kQK193otu491ezASSO76XxuRO/PSk+c+X\nsVoJ\r\n=ScT1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpW8qPD+YLaJPLJ1QjH6MN+KnU1WoOOukn7yyuh5Uf5AiBZlpjGAl0HBA6tALlQ5xOTRb5uY1uKwTWkDC3iD42Apw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.273_1615878196111_0.9367442464337532"},"_hasShrinkwrap":false},"1.1.0-alpha.274":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.274","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f2326c00559c88b1cf8dac77200fb0effe26b4fb","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.274","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-xNkU4TFkv0tVoFcN6fMAfkcFdTV2MvdYDcEa0SwzFJBjyqunhJgGHwbV0q3kaoa+57HmUgnHVoHOJBmpPJG/eA==","shasum":"5bef14b6444cb8c3a50ae88eaf5ff2f6aeedb5ef","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.274.tgz","fileCount":307,"unpackedSize":6927987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUe65CRA9TVsSAnZWagAA6v4QAJMLg1718ybNOFXNlo1u\necs//PwP458NYD+QXZj42BGp0Xd8P0CqADtnTa4P6goNEKGqw4Ov67NEcpBJ\n+EdB0WVShaKoX5wJz17caD2mO/PcGHJ51spkoKbOS5vBz7U284tIeCR0kaPy\nKPO3KLiZ2mmMtW8DK7syoIdqx892xIeBbsV+6PNk+AIC0IS+TJbcAwzm+g2f\nO3gQs+NIbDJFQi+hYOHPeollmmbL3AhJfv7ptgCWzdwh6aqc2WAHuEmXffoK\nKUspVYRySmOmj4v1CZ/4R+kfDIU50V5/F7Zzizbi7ZsPmx73EAGaoXrdtFo7\nqvJVol9Pt0MFFmgb8d88jC+wBLVnR7YSOpDSZlHHP+YcTF5ftkclhtAVC4DW\nPgCjbuX2WUUfwa1o0Zm5ctE8Z7ixb3nZ6eZKd7yfsAB47rqiRZLjS4OKA+3E\n3dZzom9+WvHJyhXA/2Mu2MBH/JUIR5NDMRCOxP7T/aVPYvYU/nlp171FbRpn\nUE/XjRSPxlFJ+GCJsFfVCqlOGkpOV8WRxwfEb6/yzB55kKlbTrPqNXuVNbbg\nR3QVzsMRKE8Zfr03l55OcNzEcnslmh0svmvJyEGFyuNXmTM5K/N2kFkc0vrU\nOfPqrxkzL+FXG0gX656Nv5NgJvRw+iKD0X2PYrBjjH71WdsKmT1MPidRglJb\n0/Wt\r\n=0eiF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDAhv79pymvSljlPg6F7K8eYujX1w4Rp5DXZf9evXatoAiBL94v6FQvKKO2OrKtAz/PD22h7IegtcWmho/Ev6upcTw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.274_1615982264418_0.47687319908380577"},"_hasShrinkwrap":false},"1.1.0-alpha.275":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.275","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"eddcc48a191da7b5584fc1682367107af8f7a751","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.275","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Vs9u2Xk2HIZmL4mjaduwJkij5xwHysdCTt/erqygD9KMn8B5AbTaGHeY++bhWcWFPafON1E4VgCyOlCx/OFttQ==","shasum":"f099614b4630bed60b81a1b603642d189281c4a7","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.275.tgz","fileCount":307,"unpackedSize":6930138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUujuCRA9TVsSAnZWagAAYy8P/1xB/2IZ+04HZRYCQiRy\nnnSaygKcsK53h49GAlI2MsB3oLwDTVSR9NRUkSATQUR2QP15NBbtEohtRYVA\ncSKf3tbezMCJ+jEnKURJ30aYKMAZ22iNXE+N7s/b/kOd1H8NMNEQBr/FZ1A9\n1+/t4lc0QJrj56YK+Tv8idT3GQ5ftA2x3kwwV7helIxKd8PYws5OvbO42ght\nDZwKGRh9kwlKBy8/CpRGd1epTItA6bLVzlYf6M5ye7WSBod5RolOTAADOLkJ\nqgkN68JMjmPTxz83CSAU3UG4BqLUlEgKSLGOPf2Y4QUVEmUxWXKKSUhvVrh5\nHBGe9xlAixoY8KXPRf4NE/0CR6KvSTb92aj7QFcpKJSAXvRB2aGSO3JGuhSx\nwHYLVqf+dO79BlkW7L2mmTtr7uAzwl1pcOt4sHEodm8uap1Ti1xj6MLN/6lR\nuH2b41xRohoruBne7ZA3bKCfdzI3GIRS8eNmLftQIq+z4XV7j1v+dHLlSCzB\nRwKosszK0MYHAYM+0QqPeenNvPAsoH+s5DaiXRdn54i1W5MbwQfH0MFdOqkZ\n6AOjxS3VD/s9Mx9JGdPGd6Gsqm8TCWnxLWfQXW3i1jbUaWWMWE0r9pUqOG2y\n++tQCNt4raIYuYIyIiICaXRRjfkUeehspgS0oZe3j6UpGg1ryKLfNrSaqAcq\n99WW\r\n=oApn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAE5aFupqZskfiEtv3CQHgQXPKTmFjw12jzFWhgi87mJAiA9YwOHWscBEuQA+xre5ZN6tS+v6QyR1t+KhKIA1Uc6mw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.275_1616046318173_0.5227246035078268"},"_hasShrinkwrap":false},"1.1.0-alpha.276":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.276","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"de72a9739c3f56913d636ed9966f8ee56a2130e5","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.276","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Tvem9rjWkvJIHfpRpt6CZa7SwYcx+NCERndI1AGHGj4zHfQO4/vtmVFvv469B1E2/HCVtoQSf7pNu/5GjHcx1g==","shasum":"e4bf5c1cc382cd5d0356894d91647aa3487ee3be","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.276.tgz","fileCount":307,"unpackedSize":6932523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVGcMCRA9TVsSAnZWagAAp6MP/1drhpfZBemZ93OsJVDw\nPrtq8hrSqcfxhs+zkAW+VUaYakyuBvuB3d34PWpeG015LmbvQJDqfq02jqZ5\nLjh031rR12iSxsz5V8vWzy4wlCvo6DROn7ClRHGzxVUN8CnlbPSAG+Z8/3WV\nOeU6ZWx6pft49T3L4IMmWsYxXvMlRMlpwt6tt1GnZxt44YHMxW7nDINicCsq\njO4tGfiy+F41UINx1X79sD9WZN0WEUKY92OV3UyvAPt8i+EdyRrwws8li4cJ\nJDvCL67AYpNECu2cFHsrJeLVahN+oxSkDJR3+GkKpIo2eXWhv2JO3GKYmqhs\n7DFVCQMEPh90YYtt5zqmzBpa3ouhsTiTev+XZdICiyhTtKGiDCW+t4WKquld\n9tGdl8upLmrPoCCAn96S9tT/0FK+sOX+prGVvsdsKE8ysU6Weo3F+f+gQszg\nStMOlRrjUXa1dDQgnL2E8TkPzXpsAC5ggYXKJVlnP8IzMmS42IJdh1Fwz+Kb\nHblkibay9mItCYv4gUWWexvwNGX79DeYwYq1l/D/uNwsJ9JjEMPSVXMGqidT\nGtWTvk2HBGRECUzYFO9qMMkJFqIotcf0PFZrdbDt4xgMKKiUMAB8jn1Rc+5I\nCbF/3eVPfEF7nSpQPDF+vJhUoMJlmqcnRUfOwPfN3BHfHVVPyjzEVNRcvTo7\n1lrC\r\n=Ch6V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKF4pTEEeLokU/ZmeSeVi0PwCaUAdIJWcYBgBI4U4SYAiBxzV6RGb0DonMYAOPg0YtrImB8I+RNhB2MAISUGvjSPw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.276_1616144140002_0.17854516633126805"},"_hasShrinkwrap":false},"1.1.0-alpha.277":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.277","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e23d9a2018e6fdff8a7c5d272fc121edbd8a4c36","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.277","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-HfTxSve2622bhb1oIkpmylTYQykH2q7+72qcOWpxehYidtkqbZf9Z1OEJr3XTGIqY2PHKAV0+5VdgSAyeecibw==","shasum":"89cb22ec7873bb5105c6c5035ab827a9c917214c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.277.tgz","fileCount":317,"unpackedSize":6966338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYaRdCRA9TVsSAnZWagAAr+QQAJX+jiVexbSiDQmv/So1\ndsgeMc/i5fCkiSue20peepH5zYPC5JNso+frE7x4pKbwozbYhsX93AOT1QUO\nqZDva05OcaqMK6zuf3YhpDZaFG0RG91LCSNGvre2XtSVI2iOl2K+dWlTrvjC\njArXfsdYK+kNMxv7zYLod36tM8GHdsX3SSipOgfXYJ5l/ls+6Q3+KeasWaA3\nm1V6QKGUKQGpnrbVpnjCSA/kDgzP+aAV5ErrTykRG6ChmMYWh8IEAhVUnteG\n8LCDe6w3KVymoqAMRKbY7IGah6Pscm1Cl3TmMDgBW5VTfJsJNzgNgdWNIKXq\ngdyDNJgHAWmJPDKmvNOIzWn0h6FcCT+dtOgSJYq8iR08PAXqsvK2UdVtZohI\nmm4PzsyJuCDlL4L6YEzikL3a/pKsLR0+X8IA+2EGI7hQeEifEjfvyYITyf+P\ngZ5Dn8CuerrTGxUncAiIKRpnRHl0QMQdU99f7KMnuKwoQdRwV51FNTwxYgzz\n0+hLT+P9KZ8F1xbBA4+S0grqJo41FGFbuW7D2MNyW9oMuW8VXnCavJ0ummUS\nWk8HLUA+8lywWypir5eVmKtGeVfzO1BQnNW6HBzqlMTLuMaVKiodN8ZkXehv\n2brA7k7n0QgHEUsgWoosIB+jqJ8eY6wAv1dk4aPry0BLhGzVIdENCBQ5pXqR\nwr9b\r\n=YXt1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCI33TLL6lvdpign52kolfTh2J48vXPU2qQ297TtULAlwIgVy9iYU16Jj9If0kNolOujP3CXLZjvHr2YYLjszRyrqY="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.277_1617011804864_0.8053167949197342"},"_hasShrinkwrap":false},"1.1.0-alpha.278":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.278","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a031ea016c5d3461dcaeb9376b8d0dbc9aaff65a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.278","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-8KAs63S2VdQJKCRV4W+JxmlhPQQRBQ5Vt8TTSeHA8/C1KPZK1ZkoFunrapGXYLeFrXLwh12kOAwos+NKq9gmsw==","shasum":"7d5a1fd9fc77b46ad56e24eda4052edff9a04507","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.278.tgz","fileCount":317,"unpackedSize":6982114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYr36CRA9TVsSAnZWagAAj4wP/jk3AVxgxWSi/cDVLGMu\n1a2DdylgxxsAaMrJ5w/eW096oB4lVJ+ShMrC+xmww1GAAOIhkFEVnT1aX53c\nf1CwC17vwEsva5IY4FhKVKUWa581VgU7cw3OMArlHd5OUw5tBZ5RekBO8ooK\nvucL6h/i2wVpN2RBbiVzu3+e/UyEX6W6INwX41CuPSYLHtvM9kSUuYc1c7ce\nlZfkestHQGO8wJIrCRkKvWNi/SV3V0cAKYf3cNi3yJmpqPAdERj6lBC+Uv+r\n2VMmQAgLYFWMDlL4V8rMiBw534qN9kibcSYS2+DY/kP5debH6PIoIaY+Kyvl\nWmK8zrODtArIswGWxrPazhtCVlln6ilrZdKi7CVTQ+M0dcVzUme00VSL/jFS\nAo1EgO3WIYoSpv8kvTX7b4M/hd1pLaIzCGKRpO58iRBg6k3cQn0F36dUzQ7t\nmAlNfLB9HM95B0kS4iO+Nj9kJ3G0FXUzOREs+hd1gD/yNowG7rXDAkgCIDBF\nph0CNhhk0/dCALGNUkK8+GHhPB7xtISlAfgVibdmCErNuhOc5WQP9olkOoAu\nFSkw/dMpAkIhWDHDGkRKAIBgoEqiCqApt8fQ0DF4ZUg66ZYsyc1KsBM85ZIE\ny3XCDfUjhwR2hpmmFfrWVYbF4TxqTr/K9/dRUevj4OnXY1htNRsYMS+niLqb\nce/y\r\n=OnXm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgdDnMUDc34GUPQ31YvMVuV9qwBtQqZSt/SjW+81HVSQIhALJaIWZOAWTnmL9e4ULkVdDnfYDqAD45818SgWIiY+8i"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.278_1617083897832_0.38760657359599615"},"_hasShrinkwrap":false},"1.1.0-alpha.279":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.279","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"cae8c517fce9aef4a8a0c04dd8849f95fdcfb399","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.279","_nodeVersion":"12.21.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BAlN+557tyO7ZtiAdYaw7dp5OM9wprkHYt+nWLOAjt5lOlB/LwkLmbtaIJU44wxssGbc9ebNnRhqMLFLJYQvvA==","shasum":"2d5bfe9ee8c24c1d752afd7c64a909732cb902fd","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.279.tgz","fileCount":317,"unpackedSize":6988972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZY1qCRA9TVsSAnZWagAA0AAP/34vpsJ+C9ao41k+95yA\nx71QylZIvefYyVMPOCvatZdPKvzDqElx/nTR34SrxH4+eAwT6Mgfqrc8N/Lq\niCOjHM8LTOlt0rVhMrIZTtN044C5vwDxwjuIjsUBnm0EUejpsWWMUNT9YwjW\n14IJaSX1oFuIMsStYz609VUfb1RX4R6QFSHPifomwVxnqwm2YrYhvurV2R4b\nLxVWSZK9SyQrBtExIFcS4Cf1QTAtzN0EzEHOkO+DzFD/QFf20h5khx0+RmmA\nIpNTfmlbfMtIozh8LCeph5I5QtiRzrzxHeZHCqmWDWsPbHpDfV3q8BZvEIVu\nt6tuInLPaYkUOtegWgAgP2I8sppF9mvRwMLJF1JiwDQyHJrZ2tN6YWV2TMZN\nZg9Apko9hZ5du6E1g9Anib2+8IgGuCVAVbf/ZLbGCc8jgK01tbMJ5g91qdER\ncO93QrGIPAk/ScDkW9oueoE9g47jFw7LuLULzToLRDS0/CJrAL6/+hi/f/ea\nW/u4vC9RpIJK8mcGFAwxQRT0BiF5jvNP8mNg/7OJHe1Kh4JRsRdEQWEpgVzZ\ns1263u2tnBB8QTR5lsWyswAXl+XsJauOcae0yEc+D8vaGzrPXgoTXP5sIcjz\nlAB/YinoUSFnO/QwEIE3Z3Rxxjhw48DO2aS/3fDDjY12x/YHU/ZEMbQiNhaj\nEnpo\r\n=Rkh3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHtZ7rZjU/u7DarOz4gnp1sdhGbY59T7Neb3d7yrD+MDAiB4DHSWp63z2x6eYKo2MBm5akkv3wVsy9rkTeiwAqtCkw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.279_1617268073823_0.3897626750062537"},"_hasShrinkwrap":false},"1.1.0-alpha.280":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.280","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f4fa7de398dab80a436c9f6a0f2d47780bdaf42d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.280","_nodeVersion":"12.22.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-m0fs4c0NyGDkCuZOiEfOhQ0iHXbyNPOJfR0G31Mi7xAd+Z2lX/Q7weq2VfDNOR9IR7rPmXM5+qdkZ5Eihx4rgg==","shasum":"dfdf4103c750871cc3e339ba98ca92600be41109","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.280.tgz","fileCount":317,"unpackedSize":6992023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcDTvCRA9TVsSAnZWagAAefEP/jLZFJzSDHfln32AbYhp\nxkg5T5wrNiBUnQK6evw3eTN/CwQ841vWjIDT+WyONxsskuaZ3UK0PULBNO/L\nclecBUf5+3XmZz0Susu8lwut16lvLS8bpmHFPzoRDR2FmD0SVSq7LiHSIKnn\nOCjET+ZdrgKNLqS4YnPCTQPhLRTEWfwMzR0RyIXm8gBI18nIyzM5w/4W8No8\npUgnxjsY9X7yLKF1prAaJ0DLWCryx4O6PVTkiOuSEyjB67tpiyxfI5PPYJED\nkn5fAYuCHc1K9yMXFS3sINAG2fnESOybwn4aEkBu8pQCHlceUXJHLcOExNL7\neX+zn4XP/KEQxx85hofSCboZ6s5pRhlBJI/hn+Qkx6TnLPlmjb+kIFIonIj4\npjLYXeqDjuKZ6RNwz6wy3I42FcNefac99uUjJvKfWu3FALgj7+QxBHZIvcA7\n3bir8z4eucv/bpIZGkkjbPLLkePl9EDimpLBvJuFAKtfpjr6kd1NblhbY6PI\nDNKVg4cla+ohUTcFwVq4azFlOGKLpQqy3YIPGPjDJ397lyClXdrrru46Nrlu\ndXjk6GwSHFtkIQxejrdcIyZn+L6zFtfwYksaGkNOXQ9cimkhC1K6luX+naKN\nxDVogd0LkjZ9LQR0Qdxujn9G98mkk2XXgTH56sBBGwNHqweYTmuYRFKmuwJK\nWic/\r\n=MDTA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFiNzGrsvmM9bezSndJOdPT/tisByPOPro5Ka8v+1qpcAiEAozLKP4LPb4bwUj6LiVOKg9QGgY1h49VYU+vTzTE1ltc="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.280_1617966318727_0.9772384787587391"},"_hasShrinkwrap":false},"1.1.0-alpha.281":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.281","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f0425c2e0b28788fa7d78437ea524e164923866b","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.281","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-wDpehLJ3qo85ypw6oU+fMtus6ZuFbxwltX3w7zbX9TeTwCO53NCpU+VsIvuEepFiH4ygmjve0LLBBnohTWWxnA==","shasum":"edbb2c00750a4213e3fd7e3bf853dbfa2027da5f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.281.tgz","fileCount":317,"unpackedSize":6996196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfmgeCRA9TVsSAnZWagAA2ewP/0GYMROmK67iyds9XitU\niSRvD3c0zTIR7fGrGMyQKHk7rnb5TC2kgPDzgLMbgOEdu+5sR547/2gFvOmr\nnzvs85CzTDv+BdMtSK+4YLeqA0LNu92FGmMMeNuYhSLXkcIxwfunRtGxp28c\ns6Kc2GPrSzd6Bz5VNgt4I+RobYH9JBvwpDZhhE1nuNpYVg75zInUyzdMIujQ\nhLzXny0YFdvIZAMta4cpabniuD2vBh5NbPznmrSop+rNvyuCmVgLxGf4EogG\nIKyUpCju4VB+/B3hbNlzWAZrwMvamPdle2Fo9e3ouumKkrTdtI5iGK62xeef\n2v5G9PDencx4ufPtUL8Fjkjir2zUUUCjRjsPzZ9r++EcM+RrZOFgorcTZL9P\nEoDOFBD7rWI/xUh0gnJUmwmeAod1QshHxQUQnmyQoWiiWGVY+Cju+maud0ph\nvPkAaXES49OdQHIuYo08p+Qw8aekW0YVQfPLNZV3xPDqvCowJAZkqTHUpyR5\nHfslpk1TxqYMuwhjN25JG8cQta70KQrKLRZGua2HFPOUUbMAbSTpOWI6X3s2\nPvjD0rY1z6xMJBCa/r3f4DvEf+EtD0c1g599+Pr9h9Wa1tyT5RPhFLdRdokI\nxPcCNhCQ6Or2qmf8hOnV7tQl/6VPfg3vh9BvoL4hqQ4SurFJOryczIQn1Czg\n6KbY\r\n=bW4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFqoMpNqFhbQMB94zhZxAF3bhCxAmH9lzY1KkvY1JE8rAiAD9GOr4VHYXraOYUgpFic++Z+xhmZ3707LJlVzHucNDQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.281_1618896925503_0.7944591920212967"},"_hasShrinkwrap":false},"1.1.0-alpha.282":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.282","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"2b4373dbb13a55d206b73918644f5f463ad2840e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.282","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-vTwSV3OyC0SuYSpwURBrbEukQH9Q2X8PpHRyXFfmxGaT3jQqBJRPx/Pkpje4RnFaJUG1OQ3N1huzOKadbhYf7w==","shasum":"7492da6c94d7dc549979398870829b8854904961","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.282.tgz","fileCount":317,"unpackedSize":7001778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfm2+CRA9TVsSAnZWagAAMzgP/An07/2MbXXDsdorh1mk\nJeRLS/w8wFo38h4FLytfnKtkX85Hlva2maXg7tC9lXP4QIdwEAcmuj7KtgNx\ndANMehKyRESfeRLR7zja+M8MuMScPs/MWcMJPLaYNfOH9zbRkt+KxOTvTo69\nbgkLzCiZTwwIUYjhiuhLeFjSpancVc+O773OmyTeYRiAxcQjYU1CGt37Sb4u\nFkh8ws+f5TfipN6n4XfGwsL+MlgSm8gMWD2450gLRdMYlSTKkHig9E4dsRVp\neowjoRXYi/sV/kQ1oSkhsAkA6of+L8HHFvc7R09knfp2qykzWqBRJts5Kwxg\nHGV656sNN5XSL0lDe9nftbn30j26tdKRjiNJd5nZssX+GkNCqjdt2syDvq+9\nv22vYqUpQz9CO11TX3BxjCmvlm+RJFwjMsS7iLbmGWFT+Aj5BB3oqMsIoCTR\nYnw1E1o4AW7TmDi63YWyZ3v98/cJ2rBfJfyq67jf3rZesgc2HjpcZiMms8Zb\nwCnjZOpc5z3jFfFstm7jaiqySGaMocQvafLKfokkMy+whRDxSsIl4KwpYEbG\nOg1d9qgHNjKjN33SqHjxjn0wOEfjA9Mvcn6YGWKY3+rI4aXfH51Bl8W1uztO\nBumvLkQDQJefRTooV45CD3q8XxPW11C6wbPUcY5hTqnLuv2tpsXdIrC0MxkD\ncbXY\r\n=WMg4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNz6MxFEBm1qHD4uvtUhxNAZapLcKvttfhWrlMJIjqxQIhAPB16sC6AS7MPCMOTRF79lKemKVevno80YKdygjLB0eR"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.282_1618898365807_0.6588989976191884"},"_hasShrinkwrap":false},"1.1.0-alpha.283":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.283","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.1.21","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"16.9.41","@types/react-dom":"^17.0.1","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^16.13.1","react-dom":"^17.0.1","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"cf1aeb5c17a154f4250cc00e67bf881a109b2341","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.283","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-LU9X3oHKF83dv6Zt64G3KGyVqwk2qUROEkiAM2ZnmF7/PSuCr6Kk/3WvlbnbbVnsSXFdjXZK5OgOLepMWUKZxA==","shasum":"944b43e6ccfc2af9f1c4e2f1832d2042aeb2be3c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.283.tgz","fileCount":323,"unpackedSize":3602308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf8N5CRA9TVsSAnZWagAAbm8P/0uPYiJncx+ES+dQX4UV\nMpTPwT1NWyrhrcr3geOc9xqOVfoSURXPExXrUoX3btyPokHy7P1e82ZBfNjS\nLmK5/xcT+umvAi9olzsrnFnahEdwWUwDs9bhp1OzZ1O7+8MuawDLChWnhkH9\n6/yMQxHm9XuKDaAv/KmWOJpeNm64wDKakF/keV5YOKuEwKDeBmt6F21PPm5f\n2YKggrEVyFu/pNH5yQZAaMMy+OHY1sys5xnsBms0ROkXe0XHycEHkvNHWtBU\nk2ShnmKEcxXfLWbkC4KAuUJ+y7/UXM6omKsIcsLoY/ZO1rNT0N5mOhKw05UZ\n5auO9JBS73DNLrQ9yibM4/aCYA3U+fu60HI0fZ71NkJIYqAAI+edavw7JbL3\nAEjDOqrwj8o0i+hi77+KDWbNr5i7ly32dvEHs5l1tX0pla0ghc0QjiB+59ws\nB+ApJOqOv8NZx0zUnIijSJshZCwfn9iq8jpI4aIkyzrOQsgpt2WlcIO3ol1V\nJOncXkxog0JDeggdOvsS1ZYAEM7xvVZ94QuF8JJQxZZu3LqveYgsDmpxciB/\n+ln4U33kv21ZaRDCK8QCsk3PXK7pHT8kt+rXMGIqPlz+sax4dAeZdqZk8/IW\n6AHRzX2NHk4wWkAfu8hz7SRsf1kv8YsWjVXAP51mScRg/GmShBZ2uspK5qzc\nCqpb\r\n=Dptd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq1GXfqhSkkANkxtDNqnHQHGl0Wuy/C3vZO+rHvmOLDQIhAOo5bElw1MLBk1NVrmu9q6qXDehC4d92eJFFFoOTNMrk"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.283_1618985848403_0.8627507443855524"},"_hasShrinkwrap":false},"1.1.0-alpha.284":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.284","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.8","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"9d0792df3a925eb8c0592425558a9e58fb4de099","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.284","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-08PkmrYpp/V/zqIqRGbrLpPaVU/IniP97kbzc2idhpqJwoqF1oqtefRxOUpr4f87x4uLu3aMDKaVG+nHuZjzLQ==","shasum":"d7d67a668ae4c041d3c8c4916a18b10ff560631e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.284.tgz","fileCount":327,"unpackedSize":3607679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggjnXCRA9TVsSAnZWagAAr8oP/0mzW9FRtm6bOqnPtw+5\nARhkDOvis38LgTrpaK+bBbwJS9JcRvRbTdKjYPOYYj3o4aXX1zuuBcbA6yTH\nl1Cr9k+1hCXbaqUnA1xHMtZDP2gET5T0zV8whIsFqtJUg/D1ovXz0m3PP4P7\nT44BVqEIpq6RmO0e+kpEjeM803yoKpfrGZfqmb5MI9JA7F/K3Aseunkiq0Wz\n7UvICRqyDbB43+CE7ae8TONncedke4AbP+RIEnQzysJUQhWP1LypYr+SOkc+\nExkbT7o1HSV9UNX5gN6LnZ8Cv0EjBkvB2JNAIkkipLU+VG+uQmbIzaiHGSez\nc2fj2vZe/9CBL+BqJmduAVSYKBRrur7BOU7kAha4+pb+wtBHWyz6CNUwxfJ5\n5d5OQyajsO2+Gt0VdrMFH7DWI2W94yCvGJZ7PW1Uur+PUjnCTYEbEosfa4UV\nFcL00np84tbYRSHjnvLDWH/zyUBfskpsYZ7iz3QwqFLZtEvcuIG80aqLKNOd\nclRfKiCAm8QML6GRNVgEVk38AlTdFfydU8X3kNjlK5I4/D66uY0j5rPBR2O8\nyfgKxPsWQ0i4QDXrRAKHlmFX6JrN+R5ByKHKSShIJ8VO65zET3t+MqGs6b7b\nzSkAlM7eEqoXO8oCVXjCyNlOF2B5rKw9Iakc5sumFVlTakwYFaOAiWJEwdLi\nA4VT\r\n=NeVj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8wyGOiFcidm3SoaomKX5MYnnISTfiV0bpJnmSjKnJCAiEA8hdMzjHvtimk1cTwx1R4UkXZMHqdIRYDusviNWQE+FE="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.284_1619147222898_0.8747527494555309"},"_hasShrinkwrap":false},"1.1.0-alpha.285":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.285","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.8","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ce9e29d4dae5147be44007c03941b473d1b28295","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.285","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-aACJdCoDvC4wratRVU7WeBd8ZoGEPmhlj8sByGhFnjoQDqIpw/Ec8RyDhfdyRsXVP9eCIdJAAXWpptSscEsDIg==","shasum":"6a40c4bfa303fc194583cc8f5b5a00ee540402b7","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.285.tgz","fileCount":327,"unpackedSize":3607677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiVANCRA9TVsSAnZWagAAphsP/iBZeFsDtwl0yuHdPen0\nVZTZDxJyMRT16mCMcAdnzxYUBBSbJKnqUTlPJYqfZYf3TgNARKNrdxDUlF3U\nhIWbFa12StNoU3oOjYYjlUTUQOF45FXPiBoviFVAs1R+ve/8oX5JoeLCgyxa\n6rUOUOWqbW/e5HqrYV/QadGXwd/Cz1MzxmZYDrL0rDtXElpJq1hRtuYl/I7U\nNfKG5yc4atBrMpGx0co07Z/bstl5E9ar4Jz1h5NJaXYlFhnHANVf2jek+5vf\nz9E+BGCeGLo2QHaNTixfR+vdEuix79k00T97CcGKMUhMnWx0rsb0PMqUZY5R\n+U8QsS3xeuL/pqGYrOAAQ3NbW15hyhR4QKX2nU1iQil17129OyJO83hFQnLW\nmzHNnBj7XiQTxFjhml//QPlRcjrVhJvs3zh5lOYo7zrVmjCAfZmEXq/RDWjB\nUI2bKLjzNymF4UWP3ajN7hxzXRREcUMi9uajJT+60CZWiWfRNjY9dXS4/aEi\nc3ILa0kLM0dOfT+VN+ZcWa1w02FcUrRFGt8ZJvlhjk8O2IzBoENAYtJyVsTp\nlAwT5iw2hdRufTadjMBsxZBffxs+LOtKRnigrfJu0QLYpBp3GkuAtYE4HwXI\n+wZf5M4NJo1zFx6mCEMK53dfszZr4H5BTgX7TpwhmcqQfjxozfOpvKtmYzQ+\nGd/7\r\n=tvBi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0FaXtYl1UGBPvdvjEmNIhr5QszR5misBfW3bYfp4KBAiAQo8FLla9dZ5028UOONo5aRYwZKJGf5WVltjS9kUd3cw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.285_1619611659481_0.22344075480003522"},"_hasShrinkwrap":false},"1.1.0-alpha.286":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.286","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.8","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7b76c76e6bc8b59ba1b159e20e20514dcdf15583","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.286","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-9XtryRw7tAJgPCv7LxojMMOWHKQaDysPK9ocL2/+gT3VIUbfcreRKKbCkPhkEvK3kcddHup4GWQK+N8rRuXHAg==","shasum":"861f2eb42f0dc62503c154854fd6fd3482773e7d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.286.tgz","fileCount":327,"unpackedSize":3612139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkpBJCRA9TVsSAnZWagAAEDAP+QBsF9nyCE7zWoakw8Uk\nMLPLV0BOtLsMuVrrpvoXKwUrl5dPGqISN1UQ/Yz0GdtobbQGNZJ+x6TWsu63\nKmO9GI7qaCTqlBCT9T86IJGUc+zn70qsG+Yhr+JrQWKFnhTUq141LfIoafy7\nKBenWvcqMkvVTwO02yowQiVCiBlsE3qCvcLGQYBAnEBXfbsjuKymT0wN8pJ+\n2DKVNk9TYSNCEEn5/LyzsKplqBypAJiuDwdIGSRJYlWsb3JL80MUJgS5XzO5\nLBsGJuPTO/zMmoNwVJpaoSi/r1mC5wl1H9lghSpxgGt0XrjAIwklXiwu8m2m\nJGcXKbwZW+gCDm/eN4gYH+LjiRs7697G5lfsgG4AwZ2T1dneMffiSIzEirDQ\n+tssChpgplVoLpD0O7lLgUN4wQkLh8jdpUc9fah07g2Tt0YCUGZRayQUhMwY\nqH//nmkclBwXaZ4DQCUbATmsx2PIuBrWsyfSjoHBfRg58kx9fM+CGEu+5Jzy\n18BYSNirmeCYRUAYoqDOIGD9+1NrptCgk9if9gcMkdsYdb11QgYw5BBg5yIM\nvRDWgAwwgzu+2X2ffYUdMnfM51L+JroetuCLDVRVwnR+UXGarF01NqyIDYI5\nLt+StOWGcKNtPXlH2rIwkPE/v/lD4wdfr+RajtL5o+oVNIuZsKg4sZEeZOLL\nMcTb\r\n=5Z7R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDISohUY1Sz7OYZKQ77M17mXGtBIrYuxUVKfk0ToOqR+QIhAJeBykP4hwxgKt2S5CCQLsqTSiQpEi8yr++8ekgFaS72"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.286_1620217929141_0.9323284315721763"},"_hasShrinkwrap":false},"1.1.0-alpha.287":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.287","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.8","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ed67f866f10c2421d4f32e651341910be4dd7553","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.287","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-gOmimOtUtaT4WNhmNlTswsFD6+xCmbQ/CR+rZxF4tTyrytjSc5XetiwiLLTR7oNx+Tp4zxmkL6s2B+PYLiPbnA==","shasum":"b66f2b5863fbab3072fc622e99284017761ce6a0","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.287.tgz","fileCount":327,"unpackedSize":3612167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk538CRA9TVsSAnZWagAAvEkP/jyQIqE3MuFeJJb/SPx8\nf+nYBb9Aj5timU4IGYArmA3KMIoMPEVMeo/4hklvT9xfeuAbNvvzxI/TAGFq\nqonw+nibfYT5uot7I0M2s4U4DaGIXm1lWqZPdvLcO+FNQpzctV93wsIp4i0B\ndVocPgped59ztvZDhs7YrvdZ5YEScw1rSoStPtuOaVahqorBRoTEmKvHctcR\nsHDPve+YJj0FFDZbj0gvNP6XoWTDB9MKWHNZi58TG5uKl84o4uTOzfhhGDhu\nf/NUSm2qf9hv/tzv2oZXMzHJ+/hQCQRrZBVP4gDqkRUSYWFBLkFIKhI87DeJ\n37uSUNtjXKAOzXTO9//dNT8tXSC9SEvu4vD7X3TNsRg1eV7kyCA3ciJHI3LL\nNbMASLMG2S9PHCXYIygKx17JdY+pbDwqiJRd+I8eBggqOPULpC+xRxTY5EQq\nDYBvEZZLeicHJnQujoK8bfnL8ffVgz6TsB1RWxXdiDgzMaMzcCG2flOCDdsu\n9MHbEAa27B6c+EnMhUxS3NAaYBmAxYaDD4Am6W9ZqbqlY2F5Zw/ODAhmxnK0\nQ1bwGsquuSqVOtUB6b8oLPhq5BjA3scWTMo64C8mwyIJSyfu0GAXxVaCoy6n\n3gpHGvAgMKRU0F/WMQ3iS4AM9FX8gxNz4o7Zyn5v8BxB1iUaVxl5aueERJaP\nLW11\r\n=BQIA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnAzxIFCjVEFJGUQdoF4EKxG2Pad5eSSSKOrqleApzDQIhAPvPj9Dp7DNoLjrEs9R3igtkGf6QoRVwCrKWez7BB3ck"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.287_1620286971506_0.6100067496801129"},"_hasShrinkwrap":false},"1.1.0-alpha.288":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.288","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e5bac61fa205047892748c56bd6478d1856560cf","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.288","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-gLL+4JXiC1qZHpcteQoTkAsu9L5dwb1wKDxADADxRcmvFmrtUUf6eMTaxHOPENhJBl+P34pMf/AimDcvFW3tXA==","shasum":"9f770b52e78d9015fe27a7e61f1bbedc13ad3c4b","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.288.tgz","fileCount":327,"unpackedSize":3612471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk7W2CRA9TVsSAnZWagAAcd4P/jaldSvDcdA0jWaCyJnD\nOFjlSUTrIze9vVxwJxWtIBbcCAPKGVikmyt50sqWn0TpnQJxvjqbpLEUXDLZ\nfcjoqN9TTWxPTi0fTz8af1tXqiZEVCnkKt1MoJAZTtw0Omp2MRElQcn6mNSN\nfKHygZ182kO3Z3TqE1OHlEomdnJPAv9D23nRYckPA3Op+fAd+0kr3xqbHb0n\nOvMMhLVsfU2H8VN01z+SSOTPpjQWghZ+o8nRJcgr4FG18xL2r9HDN76bUVWf\nVU5bl2syxP24r1OgDa9/3ciDBXs074n0EhMAJspEdriQtRaARRZP+fFkVghq\nl4brKHbCTq6E2t/uBkKVaKw9o4u69edeat2+mE4TLAFgIAQw/B1u6qMSwt3a\njZSu6E3OoNDWDac9UjhIL9rwQT5POYbSwK/icPuJsJDUh7kuHUTBaJxyjxeA\nyYz/YwwHvOeETr28JDomhvPkSC/PvSN2eMY4sF/iX4WYqeDslcsz070WAzi9\nBFhiZcytFynEzQufCdhDbgLwkh5qWl5Zry0sJLczxiRO+dr7XiB3xCnvyPBl\nM4fp3S9/ATfv4A2C5+3oMx6ikIA4hyGkO/MMBoUMexGoSU/q3552Yn/4+8w/\ng5V11L8gVd4LJSsG9YM6VKUqCTyPucElweZZ1fLHTdOmAHNravNKcmDjFrtw\n8xdV\r\n=ol/0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHe5lv5soAgSDClG7Tis7bdPO6L57IOoQICowqQ/tzAMAiEAx5bBV+iQadg/3LUru5mr4B0VcTzrKHBFG8VdISzbM2Y="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.288_1620293046203_0.44840489366422687"},"_hasShrinkwrap":false},"1.1.0-alpha.289":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.289","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"bf30b95d92d006268937c57a2ee74270efd1e610","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.289","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-DRlVQpr9fNCIRmnOvgQttDFW+W32CBWMt1xGMAh+sqnfGm3YCMODk5wMoDnUsdkN4LfQj8ZyJwEyGe6vnhO8fQ==","shasum":"8e2274b3793a3bf6d4a16a84c371b8f2f4f133be","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.289.tgz","fileCount":327,"unpackedSize":3615820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnMphCRA9TVsSAnZWagAAUMAP/jrZJFGYvnujsyRKvd2V\nzS7lpGLAJadTgIosqYcLSRIFW2924RJL+YG36Ch1lfAMfEZ3i8prjbrzvaLh\n8ZD0xIUszsW/Kd9oeedQi+cv+mB9TbEScKts3SKTIySwdt0tquC8wQTxMs/e\n7seyGWr3zypGNgFaG0SvxuvlEyGcyeZsDtnrr3/GCV0xVmVXxvkdtolXnpNK\nrU7J8hBJfgMKu2oaf+ywwxu2XoHg6pz697flLdlECstzk8ZaWt1zUvCYQ5YV\ndc5zSKpHsokyyz5MZAXNokAn3QwH1p0HyIlIFWWthrVUj0bA1O757sGRfLxo\nBCaP8I+LBNzPR1UfKlYrArzIPT4rvdr2VlTENAwAEzIDCY9bCW6ks7ogHOpi\nY6lVE7Fxe0/FhP9bU03v7abCVuPSj8RXmH4QRMsOdPc1jNxLb/oJnojicyh8\ns5fpOQ48L14nJhGGNnaejnQ1D84S0Fb0/8ic2Quj1+csnnshUUEFTtDdOuKW\n4AzjJZJqBB2M7ljyE0wYrEiAWEGv1CAGTgg86fcOi8K20Ux9GSC3Wl7T5GJh\nOz8lDnfRb3PPxtznwN9SPq/0gYsygcTIw/3TYCfAhYi6m/jRD4dQ6t7BjwBc\nd7fInLBddXAdkXGz59c0m6tkcqZAggfZqBZUhYoHyMI1QoUSHpt3etmBL3Er\nRJ42\r\n=BpyK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZCcS28O8W8IgOUagUZEpPMZvhqUKfhTUO44oudTS77gIgKHTwA29k0yySBVm4rqGa+bZKgJHnbH+APi1hgs/goVI="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.289_1620888159874_0.058975812498823776"},"_hasShrinkwrap":false},"1.1.0-alpha.290":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.290","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e16b59fc57858f31c0afb9cc3efc072f11c84d49","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.290","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-aPAyhIRyo5YlrkLDriZPGqAKv1WyMQ1oLdehUg9m3YUDW2SF1n76nBdzeMBKqo3+tRAxm/5H5+P9KTCXw3xK7g==","shasum":"8c5dbd61159a472c5e50e4132575461f6394d87f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.290.tgz","fileCount":327,"unpackedSize":3625034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnjciCRA9TVsSAnZWagAAEbIP/R6pDWFiKSRaVJ1FbMCN\nG2uWyL4M9y9ncGuOWV1KTyl0CaYUksdceM8qCNroc2hol9B6CkfFsdPt7mwW\n6hUF1qSHrb2+GE8KyrDkgYYDL6kvO7U08x6epmFI5DWIOxjE+j12aTwWHCxI\nQtApXX1WLSLB08UJdBMqgsN4X1+/+FAeY6EdPwJgOAbnzEG68+ceyK3Smutx\nRMm1eFj+FZezs2+ab9BcnfbcumBe9WCahoXTaW8XfWYj/P3APomm5G9AnpQF\nEh8hT/4ur8oA5QjuJkMCqYP5MkT0zTxex6MBx99ontLlrfGbpHufdF1XwcyG\n4yU0oCGSYPHx0MolsBsdnR+anQLF/nLXQqJ9BPk+qx9Q9thtRJvhvbeGY8iD\nbMLrtjEmfGbj0Elni7RPqx3PlWn9UY3Uf/YTYcw6yMlOfWaSP+5OmpxpBEPA\n40yTQD+TDCfM5Q2xAPk0dTUDBNKHzZ3HnxlqGgPHZgbAf9jh3dlMS14tCaC6\nNQmWQBz/EODo6r/KLhhi1eyUZOoGEe5ONHJIFhp0t0VzAKRCDKBHZzFlf3E1\n9hUpXGXx8uRDSSFac8Ut9i2wG15rcl99bRSfksWLUpEp8dFkvmdFWLBdWW+z\n6LyG363dnVbpfk+waW1oL6OHmy7v7xAYpw2ALyC0Dk90oX42eNk1WxM1uy4V\n0My/\r\n=Q5/O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwq4jZse0OT4/0lPaNpR71/3XP44GyUZPe9xTfMjNqfgIhAK3OjhRYhu59qDEKwyjXyXxOUuXdMP/PGLTgT+mGvhSw"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.290_1620981537760_0.03492835885679346"},"_hasShrinkwrap":false},"1.1.0-alpha.291":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.291","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f66ce625bb3120c0acff5bdfe58e308cd0c682da","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.291","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-gK8q9k+DBqjlfK4PVOmAzte9h4aHa+/Sgb8FpAG5g83scsial22BThF5+5pf4Hr5GdlBsTlE0Yhmv2qMdXdRhQ==","shasum":"c25c0f659ec4dff9b8a903f7b7c5e0de55057390","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.291.tgz","fileCount":327,"unpackedSize":3627733,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpMefCRA9TVsSAnZWagAA4BIP/3VvT5P0YrM4LmQMigDP\naJoZEKmacpD8HGM4yX5yeZIZQcmHXO65Y+lMeLT1YNN3o4PPhO713n6GWS/E\nJXohO/1Hh7Z8tjO4TZBa7cbMH37sm2Azk4PbtbB6BP/7KeHp/afk/i5LowSU\nBjeOF7jtS+IBBg5yWYYIn7ryk8ZZCqzn5tGOBQJE0/4ce7tnWR3HmKDMMLDf\nEX0vW28aFPUCeJgFIrYiTQm0JmqHACW+OFyezsSIlbvB2s7u+sS6nQV241YR\nftej0eUMlOGGIZejyRknm8zuLHvePr5W51SnuZiR5ldYrQ6RBKmQiNt7ewZU\nxJA6zcaYtYKh+scb2SebuRWg5nyuBuAVc6sE1ybDK+OCGu4xpy0s3FklOGdB\nkB5rQ5CvclfMQbEuGCTrAn/U9sSTb36w1siGCaEEnt2p0bkV0JSopLfYM151\n43DTcRiy7J1H4uzHIiWtwiHq4kjNBMfGOwKzNM0SOxBHwcF7Abx3AxAVR20D\nrquJmuQG64s/nye9deIz+rNMUFgHwn2IEuoxv/ByIZ5y2BIh9DyjWJZf57+Y\n6lXfB7XcNyAZUtcuTXFxYteajJ3wgPQYxgW5OmFBFrrC3Lux1pwlqkGNEtnF\n9fM76/cNl/aDpbm9xc63njl7DH5KgqgokthP8wK9YFeZlZfP/AU4kjes19Kw\nVCvH\r\n=Mxps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk+EOHfsud1KRXQJaOFXO6oiaJ2ISSeZXTn68U4pnBiwIhAIvk9Ji5W7XFwyuEvokYTtPKaOnKoHfQnR4L8Jy4F1WM"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.291_1621411742818_0.9936161073430239"},"_hasShrinkwrap":false},"1.1.0-alpha.292":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.292","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/prettier-config":"^1.0.1","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"resolutions":{"@types/react":"16.9.35"},"readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"0cdc76ec7959e373ae72feb330d1145536515009","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.292","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-NbR1cKbRK6/KbQoywRaCnM/bKjlZDb0WTuIIdS3DE8Aefs4LgvqPAXKjI7SY4qaitI2vmNONd3EJp0xxLWJOeg==","shasum":"7712bdad008e9415055ff65937b8bfb1f77ccb08","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.292.tgz","fileCount":327,"unpackedSize":3634285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgriNdCRA9TVsSAnZWagAA648P/2nN9WwkD08LwbRRqAce\nS8hOCCyVBpxSTMFxW9oHwylEUCZNmN4FcNO0elvpXkyhCnmZbjAXJ3YFRtni\nyFxH7zBg80sAJ+BLVVW4u1H+13WOST/FXI/FCY2wJ5cRwxoPrvLwAI+qgWEM\npKJTcKIe0W4uJTSOj+ztVykhvjbegSw2dtEG7Je4OLTsooX1jllkNIhSVPpQ\nCswKGT2fW/3up4yVNRq86KGM1xNpQiQHWmgtn1e6u0aKMrlBusWlmsTFfkkM\nLT/YRGTehMPi992jM+uG0OcVflh3fGeKp6e8t3SOESmwXrlaFrIwYeUmEDZx\n9YpVJTANP9zP5zPOxiX+tuIXXe45VAuCoJ5+y1hDgjVsJFaOjuk9bFcH2SeJ\naKKyOoY1sJVqN+ctxujjEdKKO+Yi9S2qH8jr0J+g38Qh5oDO99+4SzugzKq5\ncUBugTBqPiwPs39vIEXI/etlCLBn6YhF0ANlx/PNCRMbv1gAOZCYFj4TlRXo\nWw++cSrhWuPBF7XXuygRtM+TA9V90vINqI0fe2KccpCGwiufVWD6vhwcjZtF\nwxd19diPIs5NXZBmS4MXaJOPukxUoYrAXBYv17sMJ5KHtu6QuXpDrbLYeAvs\nGXEBqjTdPihb17XaYRu0sh1OyUJOaSlJOj0Huhgt2YLbrIBN/hO6utV7FBLP\nGzPf\r\n=nTOJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSLrY63kh2+aptXmgFam8PhoLinNA1a+IPmYlP/gA4bQIgLg3DNmWmDLPf/80rLCXhV0ycL1LeNktfzh27Kjr6ctw="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.292_1622025052539_0.10043732736863054"},"_hasShrinkwrap":false},"1.1.0-alpha.293":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.293","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a5fb8ac1310975a477a98e85194bc38c35b4a324","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.293","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-XVc989i5+2uVmqu+jP0FeqKMrsrY5KHw+3vMifgZTLkRjabW7m++tRMaef/glxchvgONwsic++idDCh/IPsY6g==","shasum":"90465d24d5de62d285b53ea61b2a8e723b4e532b","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.293.tgz","fileCount":333,"unpackedSize":3637647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgs12uCRA9TVsSAnZWagAAezgP/inznUTwon8oZ4pRXWsT\nPvcHHR77vJg4uYhkZYpG7d84IIqt6d+2mSG18tJm8KREJeHFsbRM0Zp7SDwZ\nTb8sMB8BpmDlK928p/AQicfOwRriwNnnHVtVqEzeW70HwTZS0VA+oX6AKptE\noIGNNCAz5refJ0+K2aiBJmhgAFWg9JlYxFUBpe9u+O/+Lmdr6zbzhTre6xQf\nQphSZaU+yXIOuA4jsbiPV2BjFy42j0/HpaFByuPwP5whicffIA1YSKc/v/Jg\nK8X9m80Ye1QoMJ4spEUP3cOg+DHqZlI59SkchROCtR29DYITVASTWHN8aWf1\nsaVEZ/1CrEoRJjNQPbYd4tZ4r0pSuXWqYlZ+74PBjAjmwEqW6Hyb9Hm3SWcy\nzl7LfUCAYWcLwnLh+EKRSXndLr2y0j51LfTmSJX7O3JeubNUdHKbFByQHdnn\nRTl8N7mH2f3yd9SNpLNLQUsrL+RruFn/5aMXtbUni/OWgs4Myj/rojOhWMUL\ny2VR2DxFzD1tImhjZ9qLFOtk9wq58F4YWU73Md2rP3mlKJshDsRN/+aRfVLC\nLLHwCO2lM0eTKQUqfZ4zX+mcHrVXDrfucJBkY4QX7SrrTcsjqcATEQbqI404\nOAolzIYyFSR2cHh1XrI7qk3hHSFKZqmxm0uGHIsahPOSXKsSzuaysmybF/QY\nDaCG\r\n=+4vb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBrleOhI2xSCdK48HlPG1O11niHFPGTbDSwOPZbEHtEKAiEAls1mdkqVDWRchc/UD/+rriKHPu90ZoBJHEgWA/NW64s="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.293_1622367661762_0.552595900986935"},"_hasShrinkwrap":false},"1.1.0-alpha.294":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.294","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"1c8a9e08e2ca15bab181ec64eb2bf329c3727bce","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.294","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-qp9l6jm5M/Bvfwk1TQDlbaU+ZDUfzW9qzSGB2/YX3fZSWRqbXH2muii2ueN2Vi7cIg3WzS5pTWfZU14AmZPU6Q==","shasum":"b8e0c9b64ed3f01c0947c94fdb01a1c74957fe68","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.294.tgz","fileCount":333,"unpackedSize":3666102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtexBCRA9TVsSAnZWagAAqhkP/3D9tB+ep02AL2x0r1C3\n2F8sBwiXHSqbixlgp0SFZYn3OcNExE5h8KQ98nH4xa+GTvNCFPrejYh2vgLv\ngDw6FMp9HK/sjK2P0UlOh1RgGdXeYoC9bsH4dT/SOj74eViuUqAzIvGHnxZ+\nUKUCDZzrk9rTybgPBBi74NXCdRbWuln1ZVjRc4Ct7Y9nILJlBrxJfuWHiLHs\nUzfHPguO8EIRIqSwY3GJmM2X/2XK8tPcNYzOO3caFq3130Y1+UWxiNYHMM6j\nrkELUdjVJvOrFogfpyqi1XeWSxvwE6UBIO6jmQ/jsO3Qc6CrjkjodvR3+Mu7\nxYfgphbWHq7RCCCyFtijJy6852w3VfPJLnTnxtR6t2gSQO9OGxrL600goPyH\nnK29h/ObuZlprwHOHjJIhtCBeLs2aYuA7DbjAbdwhOq0rmpZcsyN+xzMgvuy\nIR9GBqhq4uv1dI3BUx/retZgXeFil1dfycQM4A/LCVFGWisgVBLIImxb5kuq\nZv7VHhj008vU9IWeQAWNG7J/k2wRdme/FcxusLmVKapjIroHMh3fZ/dlAPSt\nZyxc+skW+jrKeIVRwrKcn97+yZlQNUNBy+ba3SNgqeRZECtsmf59xeHpuxFI\nTdP4bAlH13NhcHL08+EfwEfM3TXscKL9MKAOuzNZ9921ZmZrG1IiEOuBV+7A\n0wPy\r\n=gToR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4YTutjIHZgssqdm/z5ib+f0IbdK50hIgyE32k27IXeAiEAt9hYPL3S+qPCsnwKPO5FK66a4B+sawR6dd6K94N1Gno="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.294_1622535232649_0.7983310748912371"},"_hasShrinkwrap":false},"1.1.0-alpha.295":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.295","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7fe7e7e6edef225542476094bcf68d1291bc919c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.295","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-W2BmWMnEZIpdQRGrFUWQEHABViw9NizMP5uZju1z+2y7phspFlhF4ORstDvht1jeHhG0mpf0o5IqMfTwgVxdXA==","shasum":"6bddb3535212a2ba6f7c0250ad42b601cb2f34ce","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.295.tgz","fileCount":333,"unpackedSize":3666104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwwuJCRA9TVsSAnZWagAArKAP/1klWk1LPqRlV4s1RDqe\neyq6U4pk6gz7nn8O9rVuWbLNaSjdc1O0xU/YHHt2rcaB1f+MRwKG/EZaZkt0\nnShaalZFCsZB9IzuXVIVKE2xzM4Afiw8lk4geO3sTJLjZUpSMeX7Sxg+k4U4\nQm0gOmrm3FsWTstBrgJIqpwONw3CSX6cZWc1OvEK0GacrrToj8rIE+OQivGs\nIhIzsTveqtHdGwwS+gAQxfCXZ1zL6YfuaD0CRPUA0BoTyo2BxkzIHy5lCcIg\nC8L6QRESk4mkoOO60p5FSNogGWEnHoJj25vj/t60lPPFZbgN+bt1AUX5L5qf\nf4AlePvnE+fHF4iGhOMElWshFLjmwNNA/cbolMAP9KR+g5COXJcI5cuc89O0\nov9tU3uSV4euiGimQj7CeQ2EvYKR3//I//HOpiOiYd3tWGUr8+CVA3NSU2rx\nTm3ja43auhBN7kb9TXScqAV0B2J9XsyHGo9gfaFTtDIaJ3NmVSnXCs+93HCV\nkTMwZLHG3rw7Zf/89HWuYdwrOf+DmcFqlvNgwIO58DbULRcdaOefw2q7kJpk\naEEH/5W1jMwi9dnFQrpa2iOPpJx4W7U0mrhrgHSvtpVifJ2NOK/L9wpdl2mI\nxMhGegJ0PcmbPuJo8HpM3bJCOnC6rBDy/y7I7Hde5O9QgADraxyFZP4sz5Ua\n7Mn7\r\n=8cuD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDDcp6iFS+ElD1J62tniLMdAtkzK1zWoPMT5z2Fehv0gIgP/WJS1Js+qACx5jV+T6w6nIK5vC1MCdE2mN93NOgkwU="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.295_1623395209311_0.890003430060011"},"_hasShrinkwrap":false},"1.1.0-alpha.296":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.296","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f4db20211e1e0208067a13a18f8f31d91a7e787d","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.296","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-UogJhkMuFzizVWajcGOpM9HMR2th7jgYToHF+10xzLpDy8KY3Wui6XLX755CuT5+el2kIJtdIU43AXtvNcW7fw==","shasum":"0a4149b7baa66ffea4a65c942d3573f22a2c4427","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.296.tgz","fileCount":333,"unpackedSize":3666419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyEhMCRA9TVsSAnZWagAAsDQP/id3RmR4DaIngKI8c8cc\nXBixvVZPNR/pVLI2XEvYDH13U/RfjrhZGVpSWh2w5RtsSgasRarvHQD24w6A\nc2BKxSOW6Ny/0S4uNpjNGiD5y7om0TTG32YIesT+y/QFNtn+Z5hLCNpG4J1D\n7GXXTRlatii5XNoY4Zo8E9eGZD/aDPABEuUKT1iks8zjVtuDodfgw5w1d8fz\nfOYoPu35Z3etMI87pnBYH3WCBYDGXp/Qt5SRXn1+TKK0tkAplMfIOmQ4bMoF\nw4iYqxRxC9+azR7Kr0iMB2Ed3xXd7NqBEA3c6xM1WnhLM6KKcbSqLFzmWotD\nNhbJwgNgMfx9Qj3MbngTawCLpYUKonJonNZCu4eEBzvZoBrRmG1Z7JNYTpWk\ndCyEql7PpZeGcb8++dKo0n9ZpcleKCOy2v/unSYF6dTm9Tyx2Ox/7bOsIIzK\ndW7XXALT7roQPJWhXkN16/i6ApDqbwbbxMIUuzT3pb+dDRO0x1S0Ce7BujDb\nSVdRAQcSbD6rrX+rf1KFdFJrT7XCWBW7UzGRDmTQJnXj3toDsvL9310pp7Tb\n+Bu3e5J/Wegu0GWL9fo9BYOEWoA6YrgWA5/3PHyl3gUnXZZtbiE14EhqhBIp\n2TokjnmUMwSlaZ9wQTOCnhlAgBCzYTwGxNChATH4f2jcElOC6Pd1Zubv4jn0\nkCOa\r\n=rJc0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqM3dBSAJ4+uwunOMV89mrqu62cMXq3BoIzGEcd9MEEgIgbSfDt3hThhFhf3OGZmR1V3OcVG7E5aXVPNTw8FtSLB4="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.296_1623738443875_0.0803570440110164"},"_hasShrinkwrap":false},"1.1.0-alpha.297":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.297","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"503e31ad6628a2ca8f9e0fd428576ac918dd56c4","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.297","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-9m9//cK5UMQ72SArnuT25oPWCRr9TSXeXudlwf+a7Rh80ErXE7leHcErtJAO2VY8v0KZWpNLF9gkBqIR+vPSFQ==","shasum":"c778a063d66da52b880ae89e4e704faf4f8e6803","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.297.tgz","fileCount":333,"unpackedSize":3666446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyIYoCRA9TVsSAnZWagAAHaEP/iW6wBa9anhDKSP/1V0L\n2tJzyOduOr4dxLYCaJlExfJUeIETgqsd/GWNl7lXMKw8yqpRQ0149PvXK9ZN\n8By3PixF85Qh+DmscJ/qi/ks4mNNWvz2RbHQSgqxKlg2lr7NJOU64WKye0ei\n/CJFKnCTaAjmSdYM48hw8Fs1xIu3IVMiGE9kkjQq24enoumYAEZeyGJMMgst\n8VIQJxs2Gtv8sOr9QcNaqGDG/4fDNYWCsv04fggGbNX5hXmUxbfaHhHiGFzv\noJA2g0O5rVVKKHeSn3BNxncdPK3Jz6pEdx5kRVCx1ZO/Snfsf7dxXRHd66SV\njwuVdZcuGpz1rpI0vg6R6924TxPqi+etql2ddBWbvqwiYAZX8hfhsG0tI22x\nhDVDb/BsXEPfWQZoyFBZUrqV2JSABVby0T9uKgtEIvWc8oq/ewt78xhqK9hx\nuoARsLq223dJiibNyYbJCKZS6zwfqjMbz0uAQs90jDpWKof/QFilqyi0BTbh\nsAj9TWXNxYBnsUYPy9myKSHp0pD4aJGDQPXK3jKPe55DMR+qnMjXJK319msp\nO1klYm1+iOq0pOHBsMDM9uTTmitW+7P+9+tYrhF6SM+PMRKCKYWYoYg0/Xpe\nPhDknEkZKaVmysgypca9wjb9vkJixnuFpEmSuUNzHt+w25OVucT283m9dauq\nuz5w\r\n=G5Tq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn/4XkV/EIIbVm399YlpvyzlhtHkmZqmwLHwB2GK99uwIgGcHSwrsSSpS4ffN9qoT+v+3m8UNyIgqBoc3BCqIaSr4="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.297_1623754279667_0.7450545618311033"},"_hasShrinkwrap":false},"1.1.0-alpha.298":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.298","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.2.9","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"bef0c4961402c4d4ae7f339f500f7f6a8840e39e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.298","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-A4WIT2Kz8jEc1i9Jx0VWozu7xuFIXi6hYuNGRBm+iBKp+hankYEwEuKNt7FiqjcAXg+xoKArYmejP7qd/UJgcg==","shasum":"47276ecbb868945f7822b21a561cdb790ea91b47","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.298.tgz","fileCount":333,"unpackedSize":3673212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1FUkCRA9TVsSAnZWagAAS8sP/3/ATFGsRmpQvdb6fIuL\njYYnxWA9FP1nMpq9SMJzcLwvsjK/U96IUupeZWA1/49p+AVvSHc/Q5FxK9Tl\nlJ8ZNsEw0on2tNa5cgB4e+VlsVsYkQ/SKsQCTHvxRWcd1n7Wyhb4e6yH4JIJ\na63mMuF4LZqFD6tgFw4uwMCaElSlvyhEmaa9O/eR83B7ExcTr816PeFo3UH0\nuIxejoE40boX6wXuKTa8349gJBN3rhQ7U71apQ/gqYPrBT7+leVlviylmgm4\nCUC0HKLaDNifnDTt+kA+Ce8qIfW7JqO4drF429Gna7goSb9/ZqEEGEkPqGcW\nYven2cCjHkExMPo1sZ6CeHFba7iy6QoUT5Udb7NY+I2hB5drM0ahqgT1Ju7n\nMJfdoHWyz57qsqiPkk8rQ+KJbt9X0GrFEVDA9mo7JFps7nvBzbiNUGcBa42i\ntmiWqWeI1NHOpo6wkTIfPxrWYGJpRH73MRnmxdpZQzTi3urcI2J4ZDRpgk0l\nQy+bgM8yCo4y8uD/gOAksGOHc4DEBf6GBvEQ9a3R5eQhrqjjlo8WyH4XCDl4\nOSLfA/3s2m2FKYMQVUjsona2aX6UM2yU26cdv3XqRP/3lNnCRnt3A/NrHXy/\n5V//WO+9aZ78hZ3lpIQrAWt8H1uWzOJHfUven0knynTSW3QQ89NQCOV+HXkq\nYds7\r\n=+2/z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXUohM6pzunRWFYsHm0qZkpODmVpTymThVxKr+g8/t0AIgdzr8dOSptbAfq6LXK+hv11d/dBdC/Hd0HPv7QYkNFbU="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.298_1624528163676_0.11097134089263427"},"_hasShrinkwrap":false},"1.1.0-alpha.299":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.299","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.7","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.2.1","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^3.6.5","qrcode.react":"^1.0.0","query-string":"^6.13.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"4a9af78189055c0cb8e12dc629250c2cd6985d61","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.299","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-0EJUTMqAUn633hAv6U8LRf/kMTqJsnex2T5WKKsw4dPtkRxHcH69SQPspeZfmAssLvU1FiVJfU6ASLzJljKfvA==","shasum":"000b244949ea64d512ade7152e1ff45d4b2f0c06","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.299.tgz","fileCount":333,"unpackedSize":3795750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4qTgCRA9TVsSAnZWagAAJucQAKBf+IgUanj5n/UfL0EZ\nHYHF7R/GfkP+ahAnMy7rvyew/Hwiamf5zdOkGWCcX/igJeC6ivmD266vyGqt\nUs/O0zoZglX2luBVbAZfyVOBQi+FjdWB/9NRL4iLB1w/42gAh8v3tCF10Qd3\nteCJ12jFUdoWPR/t94tUCoEPOadj3BpxcM80HVy0yWju6Ug7mZd1cDq+Dail\n7AoDcVHjWntMUqDSBrCAitTg5AKuPcnzuRpUvtDFOrH/RtnZieWa4YYpuJIE\nNEUZSJAbj0/JvOa1AQnc2USEHOEKfGIuxUYjWBl2qruv4fqVGfn7RrCxeCb9\nuQSIEBwx6WnhhJDWbhK7NqmbirO6C39+D8LdAYdPk4EbHkMhvoQHdy6LBEUl\ndeoUdVpxalwemoZXfeyzORjJnWrAzGYdfe94hpe+lYm+sy1jlclXls1FcYH8\nkOnMQByqt7uzAvR16CRI/3PfzIz9OxIEiEfO1Rc5Q53+PhyATtIhhhRkng8g\nJbWVf44L8t1TFtWm+kinR1TBTD5MAwQ3XcDAv/cw5KN+XNXlxBHQ4YGTsRtk\nJ1cbnjj+NUueh8GsUt7pShV9rWYU1KNFOI5Omg6Cqs3JN4yb9qjU9XHW5imx\nETnun4i+/Yuvz0qXIeGCSki9klHnjnBW2Q71d6wY0fmP3co3WkyP5w1RTGbV\ns7Kp\r\n=LoeB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICKuG3JQAg7o7CagoJ33GZK2IO5M5vfhXmavx4Tc/SvwAiBk02HB8YmtiRVjh6TeoF7d6Us+7RIY2KcRb3HtE61psQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.299_1625466080286_0.6455783036423159"},"_hasShrinkwrap":false},"1.1.0-alpha.300":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.300","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e0b57bcf7352f9bed13b75e8feed743cb8be95cb","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.300","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-A2Y9rx9T2xgdLy0K5WzAZT09vuU/twYMs/M9F9KjsJJbrFTt4cmDGh+9UkQOqvN+KsSi9UwTgJRPNxqs2JVg/A==","shasum":"7d1e5de115932a4b1d983b871806ac2b93d189ca","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.300.tgz","fileCount":333,"unpackedSize":3796085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg48UqCRA9TVsSAnZWagAA0qcQAJ3q+h44cfc8pFpTn2cd\n3BC7JykKpfwfldQv+yddKhHFXxWLNVA8BGW1wPKw4eU8NaGiVVSWWX5TK9yE\nUijpXztNvVFWROr43hOiapd99NcXWNAQhvx5PxwBWhyAcYGqLtaFfrxfPcD6\nnJ3vKmgxkWgUuImfAE2AXPvZLHA/7Cn4qAST6udkaPIxD0cIvz/Umiuia11W\nJxz8OcgBkjaGyY+HNqmaaZ2wMDzzvM3uju1MW63QTXZB4eX8kJHeC7UW1uuB\nRI4cUYnJPtHy2cEzNNyGgg54UDWrF1/QtITfrwbwpezpx2jRhL93HopEOMzH\nTiL1CcBt7kxM8AGFzHIMN/xtwwH5GuvWhk2abUi95lATWV2w5+BGo0CeCBWw\nA713tNaHMpB398sBaBW4zWoNv9R+9t4WHQ9wRRUU9XtArV55GjdHJBB7OQXH\nI4GSqFqs/v0bz9inEpWsIems7Vza+S63mclIw7UroEAqEi9UHX3Dv7x+9Ab2\neFErCYJ7MEaFtAa1GQzA4IWjkXPhcPIUeeFwOSUQ27oqP42zVX7fTxkFk/AY\nbCX7D5fF1v3MBpRDm5TTCEmLTUjG7crFc3HVAn9QsM/8E9rpEfApLFqd6CxD\nsx2DndpzeJVrqLpw5q6jWVZELsfU08VuxE6aXD56/05milV1p/wJHwqK+kUj\n2DK1\r\n=6p3n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEn4oFEFJ5Yzqvq0vVatNaVQzW9tg4pzu5A6AdNAfokiAiAU4icalSh49XlME1t6cWim/XE/egIsBmxFzdwJCHWJcw=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.300_1625539882053_0.20532054253141818"},"_hasShrinkwrap":false},"1.1.0-alpha.301":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.301","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"067af6fc3e60a5267b7b3d90482696427f5cc9e9","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.301","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-tCMxGTRsFxOUzhOI2dQs/sOPSE1McpvBIYN0AmWiSr84y4gdsjaKQ2PDPa9li3Cc4AqVObJRyXK3PbG3EdaI3g==","shasum":"d4a2d8a10571506d7feecd23a82246a9b1e12264","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.301.tgz","fileCount":333,"unpackedSize":3808081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5AC/CRA9TVsSAnZWagAAMEMP/0v7L9yjhTnI2LRVlLBj\nQfcQKNVJ5Br9KvCaE3z4mLLgBpwLgraJxwlyhY0CtYDp2mFWmxJPbN5yN3Zr\n16BZFDI+7zJBRlIvz+bCQjNFMl1sz+gX7rbIpS89RKqMMuVvUGaNwV1idXm+\nlV5U8cTaiETgplP0BAcJ+kVTSE2umBHMTfgN/vgz5MCWIEoWmPOy86E45HEC\nqvIZDK127PcsOVDjLY+PJ/lNobaZd/yp8EM11ZSP9eubw/QtPe2Pzh/4OF4O\ni1VJ18IzqGp0u/croxr22ebInuae9v4AGXvdQZUN+GR80dU/P2FqJ0Mdd5Aa\nFLuqats5s2QpC/t2DB6mF7qcsNS+ueB1akANgJD7php1eExkBEBZafDofjIo\nY64xI0xGq95N0bVGUkA33wOr048ikAAl7W/OOgda3rImGGXDHkBpDrr0Jh4S\nL4asu5IHQRFZcIjleDVM1Gv9LxnuqhuMbhjLg+8vfn824S3/F81zCazIaayw\nFMLRCDJnQfh5LBe2bn+33TmGzWjLIkQsa/795Ndth4fHwnEgmGFXi4TZubk9\ndm/pXuMdSul9HAQ74sViWP+CqG5uNMWxkqhZp/qyXcWZ5q3Zo+jqAOTBSz4v\n5wBaYKdLiHLl8ehi7G8ZhWOS6tmRMyvdxsPSct8NfdPZjmD/Rp6V0GqdFHNy\njj5M\r\n=1TDk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHD0L6c1cxRhyTVSN+RuiU+YBBXVHxmbG63Y0vz8X2VlAiEAvT1rW3I8WbS9rgyqdfYmz0V7AfHCHFAAocIkh/n6LRU="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.301_1625555134439_0.5049729604943773"},"_hasShrinkwrap":false},"1.1.0-alpha.302":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.302","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.4.0","@svgr/webpack":"^5.4.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"3dc5263635d7f7d335cefbcb80a448e52d339fd6","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.302","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-QQFdTEywdazkW4FnL4Q2vEZeBf0x9ASJKh5VRbN5zReGvHZ8LFIs0AHRFwk7wAqFSNM/w20amJ+agPqzAOPenA==","shasum":"ae3e622e6c7b653e439a59c8ec797ed07c3fc778","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.302.tgz","fileCount":333,"unpackedSize":3821396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6/DVCRA9TVsSAnZWagAAz3cP/jrN+hzrEm2HFuB+JYgG\nhSK3ZpYsxbbJX1h1ao+6pYlRS5PtfqTRal5ybTnR5adszTF0ofNcYvptigw/\nKYq2uJrKWnKu+Sea7XdwyMsC4CstS1XW8wlKO7ekYUKCGWLTWXq6YFoCh52W\nPKoCnAgK5AFi+MKNu36ObmKqosRjOmwLjHtYyowLKhOy7z/SHuvPrvuuM/ra\nspGkcgVgcaO2oqPdtKYFLa3PLKBaXM1HQrSFXikzVBKh05Y0wR0ZOpHLQqV3\nPa26u0buNp9nwaDm0JImgDnrbt9C1Oz8QNupaIPRgksFVZqMCMVHWfqCT0hs\n9MH8z5Btjm9gYQDEACBt9hNxrET8buhFrB+DVvI6Iys8oWAXkiw/qMIQMs2Y\n8mvRadO4jgIwDRkbbo3igM+SbCGexwTY2Epz43OeCgr2dLjNQN7vfj32JMLf\nChqmcud8+CguQD/FAMtt7CqUQraJ6EnJ6TE8WC3IV8E2NzjhUMrzaqTT4Pcu\n6gSHV/lsDxk+2P31xRbD1/+6BXrK6x45KXHwz6F4oTg+aiNDU+QZo7ptTWmP\ns8tZRp1FzKgrTEyUhBY8wrduvB2+p0vNkSdAecmB7HsYrhYTSGy7geeKFmRy\n+Da0n6iNtQGCSDw4CbzzJ7Vd8qXD1o8tFYz2b8m29TywC7StldsFVN59ZJhk\nMP/s\r\n=WC1Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsVRLTFRiEnEGVRGmQETxIu+B7ZU+DMI3FUGgjfZ3fnAIgaHz/p9k32zf+wPa8oDId0d4ZZ+FURcSEUS5i6Y625BQ="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.302_1626075349040_0.737716556713137"},"_hasShrinkwrap":false},"1.1.0-alpha.303":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.303","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8e46065bd9265b325f4ab91f42b09c10a2efda30","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.303","_nodeVersion":"12.22.1","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Bfj2DMrUCIW0zNBvs5emv4fvNwMuIZMZtlF+iqNHWd9rH4c2tEM7wGFvAmYCRoqmdeq57/nHkNoORAlKeBMcjg==","shasum":"5d997a2a548c73953209e18d6d892ee924a3cbe2","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.303.tgz","fileCount":333,"unpackedSize":3816822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7EqdCRA9TVsSAnZWagAAS4sP/RSBK2H5SyVkZWxsTgA6\n2cbGch/Vga5dKcqQVF0PVYyOUBLO8tlJvYM4KDfjQ8ZivecarV7j69TuoYP9\nwMVGRDYlvkiaWlKY6gqAd3O+obGdB2S8Ck3tzhKECxPKeb+MB+mlzRnwS92g\nO2UVY4ggQEUcmHbTCae4RwuTQi9kdQQ90Xq9TNJJ3d6hz67x/QKo2Huvi83h\nx6Hpy7agxiqXucpI8vZVtjHbOMMSRW+0gR6P5054oDRKw1MEDAAInBmAQ12J\nbneo/1fKMygtdk/k7hssro7/aEny7Pu/J9ydnyzl0xCIdv78hblhUeTZeii4\nIruOaIhchLNDm083jk+MYGVMwlrvN8DHLqboPIYmhB90xmttNGesnCbQPwXR\nmsz8cTR1PzDF91ElkCS2+iKTjLSEyJIefFKKrP7YD2h4zk6t5ElAWADSMeml\nen9wT+P3i01L+9dxU1wBf9+bIsMoBAjDJ9Xf2wUtl2Kslx4Jdwba4Yu6myJS\nAQZG+Gq06BDadKNNProXE/uI5YhAwKyzVdfgb0KuCbLsEwZO8OCwF61amfTI\ne3fwzRyM80NCieA+i5FIOasaxs+trMmfNa+0qvP5W65uq/eoO36V4QEQfpUM\nveEF6ZCBjcR1lLydFFmST3NA3LhseaqayzKNtg3mfjOOhuMZlk7DilcTW7u9\nmkJd\r\n=sRB4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYfYhYkeT0D3Rrp1lcRHNLKK2rltsvRpqi/2/h2tQPagIgJFFw3Idd9JNzKcHCMSxbVxRoAA9JNuY9Dhp1IjYvCVk="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.303_1626098333491_0.2513680848955422"},"_hasShrinkwrap":false},"1.1.0-alpha.304":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.304","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"48d9977fea01d805fb5bdf8b6a195283f0ed474a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.304","_nodeVersion":"12.22.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-w8vsGezI7GoIrZCOCnUSbvfNqFT2fCEDm0obu5k0vmE2ONjn+mRNclamz09zBuTIF+ymUrp+G0CJrJ2Dr5glRQ==","shasum":"aac0d75bad341c4d1fcc73851a95dd8b394e6af3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.304.tgz","fileCount":333,"unpackedSize":3824311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9VwXCRA9TVsSAnZWagAAD1MQAIv51x8GfGUEQ/66mIGl\neHCuk3VBYW/U9o7zJbABg110wltxQ6lRFVjYXfexnfvQnopZw+dAjdOCHWNQ\nBU+Dk8miQnocHvHojafktbq6yxSDVeIIA8hfEVsVrhcez1NEom7Yo7HwlX77\na60WBQHYsLNF/a8P/NA/FpL+TmES54JX4Ld85SFLESFoDDg4KErmqriRHKs/\nx7BVB60aHcRWR6R4aKqRMJxIAwDcbYVBhe2eItsg6A/D+lyg1hIZU/XmXwZI\n33D6PE4Aaz/HdmqnlwarTtBLspjA6eqncNYrRAHAIEKUcEaGUKbD9YHrRlyW\nlKWv07I43ZbTDrqioUMNo2YpfBYNixn69gRFuXRtbwvJs5NcbC6n/rUyjW8n\nK/i/6LbGU3Y+ivT9Cn9hX6T2ywl/UWaoDkspdxvYflrxMT60Pe4NY0Xb4SyX\n6hwkWZoDOhHySDP9fn0qedoa/SJn47Y4XDx8u6kumQC4oXTDeCvr0oMbFg83\ndP2Cnjrl6cw6jCeah59/ke7eTSYn1XHaPeAyLuWky2SW23cmUA0Jy6nQ8Nj0\niysrwt+XNDKG+dKjh7Dpmqrio/7CjdxkcO5rwKzIeYlNdG1SsUnpo2KeiJB5\n4dRvvKMHoz0YVaq+NeEFiY07c+nLOo34JVOwQlGuLcYLS761PGjszC3Bcw59\nVJT9\r\n=HgcR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTQdVuVq5+/ypYwHN56bPfJ8jQt0vBh/hikwd/iuweQQIhAMdY+hmrM7kcjbbrqZsFhA7Svdty8elOb0ZCSkZI4HSQ"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.304_1626692631282_0.6398685727330422"},"_hasShrinkwrap":false},"1.1.0-alpha.305":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.305","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"8a8b988ddf6e6cad5fab31871d55c42dd7aa4abe","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.305","_nodeVersion":"12.22.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-5Afh4xgqPWN6Yu8KZy6V6MwNtlkvpkYfvqEQun/Hl5x/Qvq/Dzon5/cOkk3lYDGBO+lnrwX4pXg3MRl4hPw4Fw==","shasum":"d2b6f2599875216d3ee5560a0abe8f4028e78ef5","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.305.tgz","fileCount":333,"unpackedSize":3835206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg96KjCRA9TVsSAnZWagAAQooQAIXpWdedpW1S6O8zjcxW\nnidRs94meXbaeexjQChB53FNwHzr3DM8s0xWn7Sf3qauX4TQIGl/6SmHTv/h\n5pzOwUQGpAr0DMWJbGMQy4NYSv28Zy57NPGyKErrRn1MKzQodwk6U4BWujsB\nGH7K4CT8eV2CyGaKJpoYuy0kmtDN0iEuJmsi5IT07veOuCJ/D2wiUnMpsVAM\nmJQmRlhgj0IJeqPSqxMq2IRrbZrDr1qSwQfhtl8CSMY2KCvBxpv23W0JeO8I\na/YYByBpQxT7NLvFmDKLO9sM7tqhRjK67s4CLDR7Y22S16A8A3FaJGr9UqPK\nUpz8qtHRrmWNWgvCzUMOqqR7lIoE2/fmoPsulSBqLkncM2kO8sKG9gJI3yTe\n2LZTUZeNp71xnN56MNDx4DMlRogxVVtAJSJSGgkEDNEsramEj/g4bZJKvgxX\nbX8TOmUu0kqdfgDmOPDmwvnIyfgkkk9pnyPJufrosBsFfTgvF7fidzHYIHsX\nYv/BTgUN3dGbQoOeNgBtmcNSsjBV/1wZL5nJseiBE9Y3IR60Cg6kAax3wkCE\nWkPNGWdjh33s5W7sfEFaXwcYd0KL4/EZY3Z6ihlO5smcJEBfkAVW5dRnKHGe\nBiWuKjEd8CmBwa34sSUhM8ulZDLfss4Gc3jVdpdzOuTeNkjFT5F3vugKHdcf\nOfj+\r\n=RtXh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHejxgpljPy8D9UI341NzCVsjEpYxKRBvCEPq9xmcnO7AiEAj4jz16gnI77HyxKIoCqTwCRKnkNRKX32Mji22VINWnQ="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.305_1626841762852_0.6778942450933605"},"_hasShrinkwrap":false},"1.1.0-alpha.306":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.306","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"443f78cee4eadebb1733ec6d9cc83becded4ccb9","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.306","_nodeVersion":"12.22.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-6gtuDGZElsxzp14wL8jn+GTHchUXupxVPvUJh0qySV7p6C+m7cvXbPrxXsfZMZbRz4NfZUWXkxw7R2ykof5hLg==","shasum":"270410f40240fe8dd25ee3121bcf7fc36c288b12","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.306.tgz","fileCount":333,"unpackedSize":3839341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/oozCRA9TVsSAnZWagAAaiIP/3VgJirGA6xamEt57fPG\nHsfNFcm81NZHG7cEmiliQCvzxgep5MeBT2cMBHWw8VT5Ik//5CFNV7TLVOaj\nxu8uy4v7tH/bf3VZi4+PWRCWQUBA35Pm0wW8RNcVVIsp2qUCQYqBTdOSxkzz\n7uE1RN0tpZG0Rd8PVjL38wbI104qzIdRHcVKHJU/Zoza8u/8N2j+9jnjyeDe\n2nDGZJ7k4nteRF/olp7wT2rliC7pkzwX4JkVy4RR86xR/FB4yIhewk4T3I57\nr61UgxXLAT0RpgoYpTbSNuov0yAjcPWdS08jyCamuNUEzr/OXF937oQ3dEHB\nuS3/wcCfoX85Viyxit73b0LMLu1nMf6JQqg65DGX1uQhajDzhhKbgIAYq7Xb\n3BDd8KadgYMNgyxMszisyWXtEvKe2aWapKzDVcMFp5i7KakmR0FWBnPRacDj\nGhTQ+fZGjjiWlQPXt0mvRG3BzQFG0Pfwh2mrTphgAbQ+pyaSYF40vscUdS4w\nA0eymjSaoAg6FpP0CgOvsbrRb/XLnP2J1wL5XOnj6oYqILrTzYv+f3AhfuD5\n46vDhKSKFaXQrjaPg4LuBCu2WVpr7myKeUsICUk1ys7YrncvvzerzWiiQBZC\nMG+GeN+ooTwqaZB3Kw9GYJoCvNA0iwT7Y9MjJ4G4jmwAaGHCoWtW3oZ/AK+q\njEXD\r\n=HM5m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEoL2BYNbKFgWxqlQmgop5M7ewXJIT8Ec43xasljQrLbAiEAvK4TKDP87jNc8E96EN7LrA2tlzW6n90mwO7sEL7h0jE="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.306_1627294259569_0.19266046154058092"},"_hasShrinkwrap":false},"1.1.0-alpha.307":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.307","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"6094a38dada58ab88b1e610cb7d3fed21f2e3894","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.307","_nodeVersion":"12.22.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BFzyDyWgZqrliC6LwpFqtDXhUJMyS+UDCK7+sZ7u5zFs23FNIpHWQmvITlaa+s89x/lQkCOZxovEDYkgBT035A==","shasum":"2a67a4ffad55cd87c640748ed3694ffc8c12e4ea","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.307.tgz","fileCount":333,"unpackedSize":3859435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/qFMCRA9TVsSAnZWagAAsPQP/jqfT6vpHSqsAKD0TctM\nFNg9g/chvVEpqNFvkLcNra5u0cpTERR+TcqXnkZ0cMZaBDO3VkdxskhAqBYS\nsGLwWO0j0eg+1M+MfhjZa1T4tbeA5rJ/eUzmPw6ZjbdOnY2jQAMlLDQ4JvIF\n9LmVyEwf1wb6bwtAHYwHqo230zNRO+Qf16FsJfYHEuuttyltf/HXoumJx08/\nKsXu3hPZYxiMAlDf9AYUww6mmq3UjvA1lVpN2hexzWL8bmXp913AKjxeI/NK\nBSgkgsqFR+Jho3qYPJsClaHlHFcMHyl2Nh7re2FlukACj7tZ/rbHo5GFLWBO\nqnN53wc+gs20WxbKMz5s3XxtC+tkQTrb2rHanNFgKeVD2r7fN7GJrPQs1c65\no5VBDZx1sDCwg4XqRGC7Rbhns3XtPSx5R9qOOCJqxf8cZ/9VXDYEr7j4GsqL\nXCJifowLUFy3AFwW2/rfo/QssZDoF5ZgBlBZG17s+XsDnr7S2ePn5W0NzviV\nkE9lxOl+lLpsCHNwcKyX346v70vOe0Z3O62EWzQ+xxLh7oO7YhRSmIljU7wM\nT4jKVqposby7u7AnjMpdwqq0F+XA0gtFaYFG659UkDc0s2MRqRgaRsRawuuQ\n9V0FoK1V6IHuykpgo0CmXsE2txqYPGWrIi2NKfy6uUTkY5G4M/XbsvaDCcvR\nmEpj\r\n=tLz4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVy1cyKb8PKnWsu+IjxzNZ9FLa5UbQndbcP9EkrpdzCAiBtvTjRN1kvnaIvEr52YCQ/aBUs5YJm+8iJN+XvVq/59Q=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.307_1627300171684_0.5198658820170579"},"_hasShrinkwrap":false},"1.1.0-alpha.308":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.308","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"da45519b78203e159271106ed3c6ee376ffb7d3f","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.308","_nodeVersion":"12.22.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-4uh9zGtPLaEHLzbyqQzNLS6ZhBrS+CRl7vWCh0nApR4mLq4SrqgShpHw87N7tSXdzXVlsM6eEgqagNRoZzGK4g==","shasum":"928ac978fd864bef372e038bf16d384ec4e9400e","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.308.tgz","fileCount":333,"unpackedSize":3863498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/rSKCRA9TVsSAnZWagAA1EoP/301XbaseUuLEPMDOfHt\nXdkfFPoGmowCoUeRPtmmeQoMrN8sqABsbzHKVPUvj5AGhGb3MiHgMht5Zq6E\nvRug3oue2MlyGH+S6eVf5B2zqNWvXsL/q9x8Q6Lcvcvguwez615U1iHaNEuk\nzCHlqgUPrEDnmmDKdEms5qMjkVBjPvPUo/H++V/WpNghX04g1BE8X0bAz18y\nPCDneaUqTfnXt0HeVLftS1ZdM/MWPNabcrkschGT9Vd82NwuxdZivYJT5uST\nfBujpzV1ekp/sxp++YdeMTuhK1EnU/FSldGr6Y0E1mGkc9ZmmFyQz2xTmwZf\n+vYzbjt0qTVDCUxpvkCgDqRg3we1jwJbIIDcz+A3iBX0lIqsWirDvjtl1a9B\n8zi6NLTX+Kqwan/ZpL6Ymdj8fR4OGSiqjJn+kPhtnnFn+385jA61GLHvD2vW\nPQ06xQRd3kA4stmRDDF4ii8aOv0Pd7+MIOkcZEqdyxlmsQvl0q0ELrumwgW8\nxBIsTZ6HVpNTVXI09dkrL8irdi0cBfFUeu6LpK4x2knxIZ2kVX1qyU8UEDfD\ndVZVJ+9gMojGaxF9mUDrO8SIOfbt3Demq29TiTtrhQApvrUmOHQH/Nf8+p0M\niT7UWCFuibQMMlhQr5PQL1TEmv7jTaK6vwU6vwiC2LJpyVE0s+lOavKEtHFW\nH9wc\r\n=xx1e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQGNjEGKOLuN6PJDm8984QPztjpHQviomNQ+ItkJKCdAIgO3HR/rJgTDVsGpPsSKuwDnRV3LLpbRs/6ziRkrHTKpo="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.308_1627305098662_0.6411150846531826"},"_hasShrinkwrap":false},"1.1.0-alpha.309":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.309","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"tsdx lint src","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f78b8749fd3c343a0ba18d9543cc1e523083d4d1","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.309","_nodeVersion":"12.22.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-kfAqvYQe6iCwMGhBj2splt1UNk2x0aLTCWHhW2WFhPCVb1EJ2bf8Rckp6UYA7eevlX5NYV59wQblCJIwAwJOZQ==","shasum":"0a4bae61b3ee6182c17750fd120803dcfd594d9f","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.309.tgz","fileCount":333,"unpackedSize":3880491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/5mMCRA9TVsSAnZWagAAjpcP/0gGYER5BcgxyvLkgUYE\nR8HB9HhiB1H9SHMD9UGjrpgvhKxg0sIdN4R1XuqFyaAEEpE7mUW1W7ycRdmO\nglslZsuFRED8qBCtDQSMTeJp+UG3N0qJvxpJL3cbHUd0bQN0Mwlxtrdck1Im\neNfJIerXhS8Jyji/D+FlZpNjoLUvy9ST/YRc4UBqrTeaS2knSfn5AuUhdS8H\nOe/2E6u/XNiWOiHLaSJVnf5oCbtdwl54tJOoVkYVkszl1Oz40k+vb18gG4ec\nyQaM/05UVBohc+ubqG2f5U6zV7WQhsKY3Z8JvYNmVQcJsklkucK7ewHGL4TM\nGDNTw59fkng97gq4fw6U4Gu2HxTMfzO8ipTX+ivMR10YDt3B8YPkdRA5B2TM\n1G3rs0PO6LuzZBZic3eYHoK3fY37syU4dcXLqEPyAFFlM3eqQXeppNXIEDVp\nto+Swv2blF5rKnpxDF2EQ3E+Wiw4otcqgJdGjV50U4M6uQcW//XU3u4HaehY\neRxNjcnQe89mb8buaaACngw2Qflt4LThiJUebz8zwuhgQpSMlJ1F/REBDIw5\nD7W8xHM8MUKuR0kNOrdjUiAjVz82aNexNnSq0QLVF+sCYWKF0GQQKjmt486O\nM/ALyRxSTz8In7Z5u4oIZQ4wCat0Md8pACS4IUvbouClHs0BXnq2FBL49Yy0\nOsrv\r\n=LbLw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlChFUakiQblfYEwB4WBpbdK2w7Q5NubO1rY8ZvIKf9AiEAiLPfORpgs2EXmH8iufGfdllreAPSCLdKTIXrqvWihMc="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.309_1627363724612_0.9818713063784748"},"_hasShrinkwrap":false},"1.1.0-alpha.310":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.310","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.2","@storybook/addons":"^6.3.2","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.2","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"97069543e56ae6eae95213676214d8ef1fb3c2e0","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.310","_nodeVersion":"12.22.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-/3vo4dXG4aIZweSJAAk3S3nE3SFuGU5hSGoZfzOQ4UkBRb5Fq8H0IK7rNB2rtjPd5zxys+g7vYMzQO8XPuZOGQ==","shasum":"53dc658ef5af8da8089740ff7333a01c60d458c6","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.310.tgz","fileCount":333,"unpackedSize":3880506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA8PxCRA9TVsSAnZWagAAB4MQAJivzZco6ovXzt6cDEge\n9f495nvawHWgu9I2VemGfF4Pmio8quP0R2unIV0uL23oNkPuzaww1g1hMW59\nNDc2GBRek4eNaPmcFc7YNBAK5MW2XEKmt/wAJz5LndZnv5xzUGlGyVu/8PBP\n0kcraUWfX6Lw6hlnmmIDHFHKf7tEYqTriNaPeO/6kyjjN1OuLdW4rxBoScRc\nfYHwXiQJj/ut+FKDggOfEiTUz96EwBd3sSAxKMjl9kCwyZTuLUZeel5R/YI4\nQ9iok9ifPSUiSD/Id7YGxsPYLMRDTblGAccRwyhminf15rYBEmMXMnF6Y4qx\nZ1Tia2xbIgLjYvA6rQU3pTahAboLu2Jdvlw251UZcZNEnG6Sm4uUYEr5GPE9\nARapWbztNerRrUKnhxq8XsF+A4thgXXUuW37jtvJRt3IQdoG4GV0HWfYFlat\nw5NEYER1qn6Pprw7zp3nww8A9K8f9kJfB+cNeR9tOaQxzQ4VP4PaHifsrj2b\n00JZrd8cCWYvyYvYG/oTDvQlkIYXq4RW9lkwCon9iZz5knLLP+N/XJG46mZ2\nfIYEcw39jQ2XpK6/LThwzNhJz6QRUsWTlMWq1fhtukzN2m06eafdAwuY9WC6\nQ45FR51feWOVsya+iICThHZn13zApCtrutqVINAYHyIwxlTl89pR55e3h7Th\nw7E9\r\n=uFne\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwY2SH4jyeGmibNQ8Xl0L6lWkEq02QuigHjMLweBLMoAiAo7CyJLssDZFuYisJfSs1sNXHFgzgMOC7V9udjKh9ONQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.310_1627636721444_0.6125128742396451"},"_hasShrinkwrap":false},"1.1.0-alpha.311":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.311","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ef06856d7c3bf30476fa53c4c96bfa6c2ea90359","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.311","_nodeVersion":"12.22.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-bj9r4fEoRYv6ZAdQoF5eo4xOLBsVfQWw/0GG6rJPhsw5fWREgpo0sEzAo2UA8mvgULN0URIbv+cBP93T5qO1Fw==","shasum":"2f904488c99c9afc3c1cae917fa70a5a2d5d93ea","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.311.tgz","fileCount":337,"unpackedSize":3911943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBQ/SCRA9TVsSAnZWagAArEwP/1dWBIIaAw3Ik5NDfvjs\n5For6tDqPtWRE0pKCzG6UlpogYkWQp91dvgZw427ZhuOpC6y017z9V/pndGl\nxxtxkODhgWZlS3rB11EfnlpLW8Zrz8D3hUKLXEKSY/snGCKs7lzmQMYfXVSA\n7JNJRgJq399Ad5JFP0RjS3UUFGYtartkOr3QXNNDJ9YhNI1UfWK7uby6s9o+\nuT5s5MbiGUAQjp+4AUdIOSLDREzEdyxvkx1NPSNE3w3jJUPYCNKPArJAraU9\nggAz3O59AZSKi62ahfCZDHIYcf6YEBa1lORa7ADtehMOqt6TmRLnWdVpQyAt\nydCas4ULojw88kLhpjXCHXe5C3XnxeZzxk0/HyiPthg17DXGiNp7GF1jQdyR\nU09M4gYjNslLnoDs+eIvIYDalMbzHSyupekr6kPg5lSssUW0A3TJBTQc+5SA\nO2FZiybWSPu3ZuV4H4ANwccXO0xH6bL9iS84ryrnt6t7GynQ21Y38rnRaikJ\nZAESZBCcgRMQI9fE9OgXEdotviktDVDnFttptftKw0qEONlZHPLdJFSYxEgn\ng4hJNaiAWFjx+leMggJ8zst+0I48mxUKanOEPcq8BW5JQxG5iDNyBuGugfDA\nicL2WMDAL1cX1fffUw7PLfmzqVxudni4PsvqErN68BRtlr7qCzs+EfKMfunp\n3fkO\r\n=FH//\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtPnpMFRxXzHgRVcKe32E3p3BnO7iWSmmPB0ToQejZTAiAXno2KZmeUUfDcRKuI6twZWGD76WfvABd/1YSZAAl3mg=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.311_1627721682295_0.5048003354036923"},"_hasShrinkwrap":false},"1.1.0-alpha.312":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.312","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"f888a6d85555d8d59d6f3be378c6772a950ea097","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.312","_nodeVersion":"12.22.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-ueac+7N3WNv4mEHJItl4Yf0StrO7HSvb3UA/4uzCQzmS5cslh+HQdgME0Eo9wVep5gvOUgTVaEq0ixCgADnBRA==","shasum":"058b409eb0e0aab690a8685316ef1b67ee058967","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.312.tgz","fileCount":337,"unpackedSize":3918436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGlnaCRA9TVsSAnZWagAAwokQAJDhc+S9486E2Cxs9lZe\nhsS5JFYemISwsf5l66kZ2rbh1zNofBLNgldRt5HtR3Z7kCX2qfrtPdZhE0w8\n0NSmC4/LkqtXod/uAghk7gQ9XRSrFUsRMUb/ZmrOoVwun6UAI0vnnz51PAfY\nFF1LlVI/254mvGxv6wM3y7F0Vqs1XPoRjSwpW44TNfnvR2mMmklP3cdgD6e/\nt6DpS6FQKh8OdkCFh73M2TaP5D8+VSTIZ0Bptwlb1F+bv4zDt0YQDJlO4Ofv\nTHJojMywfdRzXo5jtDqe4/AAyIvX9+169aoQAl4RhduA8LRmT5c1fWJgcLxB\n9r45JTo7Evt1MXqvgKCjlrFyFlW9F+h2nRti6wUUUH/pRhs8ERYyyxco+op9\n09kUpfVd4tG0LJp6dm/TpLj9AAAZbt2j5HmazrygXiNGJqp3ezIdhyItQLhH\nSHr59pVe8w5nRvBOIZvMBPEPc6huAy13X/t3aykF6MJg4qGxCmFI07CVLtAd\nmsSuRRBbB/3fNra95Zt3nXD9a4aoFit2K4vrj2F1KDTkJqzvaL4yZWwXA1K+\nOtat7O6JH3l/7dbYUgWxzwDzj72V75caytD4jlnRjUYfHSE9KKRx64i+ajWS\nJzGbytSluDUVtkPtdB42WAEPEhaPDYTRflV1L2MSN1W+3vWD9W2gv6OXxXfa\n6v85\r\n=9jVI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuRaUXtaNZkUrxSdVGP1tRJk5h9R0TLYxfs6MuFtK0RQIhAO+wG4rr8/cZJ7z2HbsnUNm2JtmQig/TBAs456yo+m47"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.312_1629116890284_0.26232544256724655"},"_hasShrinkwrap":false},"1.1.0-alpha.313":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.313","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"3a2589f994bbe0c4c07921d8b5ff387597c66a51","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.313","_nodeVersion":"12.22.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-2VRdoPUlGnVhcIdjlyMP1Q6x3iJSGoM4uEvqmCGsSmOS/bCV849DHvT6BZ0bgMasC794YiMTL/zpK2n+ge7frg==","shasum":"a8fa5a3329eedd17350fc4e8b43c6b72d07b61fa","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.313.tgz","fileCount":337,"unpackedSize":3917739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGmTKCRA9TVsSAnZWagAA8wYP/0R+bizF1ZKisQTVfVGE\nL61Di/cYiOYLdZl2vRQ7yjOrzGcwLZjcDsLldbahvU+gjv9Unf5/U7MDSMet\nkIMmtAUAgUjVNhwhpS4zy3OeCOqRjJAVwBDEhlEHo9KtY6t8YIBKjkF0iE93\n8KoUNBf893Qty+uoO78BWODCWveWMiunfst5riLhdy+p1QlWPGg5/C8w+pVt\nC5T84/0Hppz3bsbwAfQHjwrt0/0bbMl7QBWdDWHIrcV9SPPk7vbIFnYs+CCf\nuGw0n6TCvLh2SQNq2eJBZfuBnKDRxPvHmWj/XeDI3wiII0BMYg4hRv+oIcwQ\nzqXuBcaY/rRdqVgoxz1XacmjKa7M85fQpxzAj69co5dxe67MkSx3nx1I4GUC\nMRsiJauHTHsGpnQtv5mLeT8RJdlnBWDP/7jgnwyCwzfzfSPB7EDuRZmT3pP0\nu0dnN49T18Zh9ld3XZWOu/BzWGtYJO51X2Ca6NzbGcVBSc3eRImLI+C8+I7Q\nfqcjy4PmZG+PPRNNhRnA1Vko7vm+wyADNzV2URV7nL1ViizmiecfzBIPeXHY\n/lY6sUijZjnumE+CD3h2pxU858prjfcJqrPaAIyH/UBLbbsYhRt/3kF9iDVL\nkSM1l52M/DsGd7BhPuc0Rcqk9R5J8XUH0AhPJe4P9FtuyZ3WU6GRE1qS250K\ncJbn\r\n=QV3r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEP75fQDey6jl1X41MBD5iIZI8Jmkt34jPjSKGiy8jj6AiEArHEDcsGX5xoNSti530xLQfgRoHnUTqYMI5hr56xJoEI="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.313_1629119690541_0.9788214572649614"},"_hasShrinkwrap":false},"1.1.0-alpha.314":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.314","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"3eedea95c0314bbf1b348c72d4cdd722c0de324e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.314","_nodeVersion":"12.22.5","_npmVersion":"6.14.6","dist":{"integrity":"sha512-e+H2fqTy7c3ZjYHW4JFszRrCgDmlvFsAUiLMGzligQl7K7VLEH5iPsuT0OPEERZ7nH7IuD5TSNXKzxnzTZbFmw==","shasum":"649c9e8b2ca13fa0136a23495616d9d428cebc23","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.314.tgz","fileCount":337,"unpackedSize":3918042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH5huCRA9TVsSAnZWagAAwmEP/RQr+y+D4MKO1Vy8HGED\nfoQ4vLCRVE+2gNhJ7JphQF5q0GG1w/LajrX14IePoITtF8M+ev4wftuJ95SR\nm3XhWguxlYvQILBNajxrM3mBdJYnKYAy2cc4wA7z9yzYGEsKl/b/S7QpfS0U\nGMTy5fBIHK/CDkMgSMf9ha37yDyp+q+BjvqU4JFB/hBxVW+5HuvSb9XHIlAL\nlJzvfldCHRMhonzpqHN+bkm/ZeCIJHMKE+SLo/ZJCjmQWw0Ti7F5r9nA8qHY\n6/5DShybqhiAm091B64HTfNy5keH01FZV/laqbk/rQvc3EbMenQK433U0/UK\nGDaGfCXlBeZbimr8NNONA7bKvzzUiY3a+bB5MuCI4U/u1X4ZoQ5AnGMWOhpM\nQvP/hoKfc73yzb0bWMk/GuPfM/DPP6fBNnbNjJYc/oJl69jC/CvB5D66rnvM\nUXOpAh7CXM7OINlT1EgMTHbho0LApWIZigWA7e5mJ5RdjbuDSswixRqwe0B/\nMjGaj+kiDoXZWHz5ayk7RLgtV4PzNDEJPtMMb4jgbgf8iqdADggb+b7E9nIp\nniex6owrsYF3eVGfTeTVUPg1hG0uhiPbuYJ0IrBa5c9hxYjRRlGeMJL5NUfK\ndsVj/UadWi508iv60LAa9QNthSy0KN5yH6ZoGUSyrvTnQNEYYe+G/NR6jay4\nDjVs\r\n=Av4s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5T2EukWLGEp8GD/a6gXfZCVkpvmQNowqp6NUU9ngPiQIgYHE/nz48CBBOCjTSEkMFidvME4BejPW1j2akdGZHD/8="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"notatestuser","email":"me@lukep.org"},{"name":"jasonxiexie","email":"xzjcool@live.com"},{"name":"rubenillodo","email":"me@rubenillodo.com"},{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.314_1629460589923_0.9896934724808428"},"_hasShrinkwrap":false},"1.1.0-alpha.315":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.315","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"70163755a5fd0c6df1a0d6846dd87c5ad7b9aa92","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.315","_nodeVersion":"12.22.5","_npmVersion":"6.14.6","dist":{"integrity":"sha512-PKNcsfkHM9eBf8ti5fhjljFMdf+4RbMFatZqvE3n7aQcZGpp+EOeOUBzEW2vSsGWj87ZTB6lx7exyFbQfs/2ew==","shasum":"9c7b143507970ebac10e364c06f2727abaf1ba6b","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.315.tgz","fileCount":338,"unpackedSize":3909922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJyboCRA9TVsSAnZWagAAvm0P+wf0PCWKGbPwuIhru3py\ncmv6G1rfXeBT39S+nNhz4iqtqIi2RO1loGd+7nC5Dti6F4KV2qhab6F9oH6o\ni23HXWnUYM5X3hn67VEtVxYDbiZHBmbjXm9cCFU9j2pq/VeswmDISzB1fxmG\nSbebYpalfKaL2Ru60KxKoEIvdrbXfIgxGtIV64IFgTwDg0bbYuE39QsI+ltm\n72PF3K0MfX62yeQquMihsgxyYZx5g4djU+lLUU8n7cPZFV8TvlgVW/PXjl6k\n57p6Ng2YKC1g8zEaQBY2hHwiuDXIUULzQphS4UWiYYdvAKO8jJHyZPwYW9HY\nxoFTbigqYPHvEfpSd7Xo0n9AYGa4vKKMDZGY1iY+EGUCiKqV2f1ROSaw21Ee\nRX24Sj6LrVKTHMKTw4CoodrC6H0BN/SAjH6jOe4LQZdYjvhMtpkH0JTM8PCK\nch4h8uVtIOXpTFkWxuaL4qaD/zyOovQ08AEkWtTmeEIr5GbFWQIB3NZO8TuL\nkMqrD13+MDYGJG8QnsQqbGIFgLzW1CNiBb1oZuhasx4aKjpBajOpycwFcvEX\n19cUChWSeWDEfBsUO7FP4Ysq+kXeAUXG0onCKLwLmQo5jl7GCJBJ/t3TPdax\nO791BsIt57nDYRDAUBlX7/kIIEOOwSaCz5oRoGS2Vj0+QpQgaaWDysY0p0ga\ny1DS\r\n=qSuE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9wF4yeCxZmZ44cdN4xvsaRrxQfh9B0J/y/UPA6F+Q6AIhAJ2FPvr5x27rqNksi8mfLoimqGhks34L2fx7ayNvYnMy"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.315_1629955816153_0.9283676689016707"},"_hasShrinkwrap":false},"1.1.0-alpha.316":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.316","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"9ab86cdab379e0630e508855769201be7365db1c","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.316","_nodeVersion":"12.22.5","_npmVersion":"6.14.6","dist":{"integrity":"sha512-AtVUl+ArQSGd8xEXxxkarfsLPyqtHKF1Y+CfLSp2zUk+pVYCUr7XgXsnfQkknpEosoGyu1eCJIsBFEoTOceHcA==","shasum":"7050d12a0c88e739689281be44103ab5c2d07929","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.316.tgz","fileCount":338,"unpackedSize":3910036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJzadCRA9TVsSAnZWagAA/oYP/RURKdAbqpMHhd5r3HKI\nf5QGn2EpGTrzAistDzuByFweouGyXIkkcuZBOjgT9Um3qao656Hw5ou3if7f\nLX9SozfvEe21FdibtcW9RI61VsI1+dS3mNr+y5IqKh+NwPiY4qG9xFs4doqd\nIr7aKSn96bJMmQKL8DiCFVSYiyM3hpuSoYt5NMaxMUHy0VseNtdxPqUwT1bm\nvFo8fm/tngAwY6yhc4Fobpsxxu0crQu3lQJy4ao5b7C1Tnh2PHEPVS5WGcvt\nSQEAyNy+qWZ8aiaQxUaMsa7nJqKeZvGMow7Q+GJ2USEHtZgmp1xo7BampBDz\no/06Qi/Gu630cevo2X5sXTanDcXuFQxvaR1Q2UwY6/Nwcdh7nnwJc+ah650u\nAEeTuLPsmbE+sjQxwUOtNKM8e8VJXYDKhV9KVz8LUoY7ZfZcu0SmeysgeA9+\nn4mlBhEmWl/++2k6eCQKqt5R70nPUJ2GmjTiJDsFIT+MVzua2+KJGBYwQ6oC\nXlho9CgsIZTj5+JGU4AXnNHJNY6w78Foox8RWpQ9fhkGTWoinp7FZwJY2dNc\nR4iEegghyjNEfGz4BLgjqHiNxQp4/VkjtFdtuXZKOBDcAgWtdvam2NzZEBU0\nxAUUoJl2cSFYKC6pMHvOo3vV3Sr0llwNMHjvpUraqJSVtOu8JR2ppnbvnsch\nwYgN\r\n=3bNl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVo8dSDs7J6NH4hBtNJeO1N2Z8w6srCIiWPOpoUGbGHAiA8gQSu9vvIcbNG7hkdkW0WrKV2kMgEQUTaMdTccJK2XQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.316_1629959837217_0.6553924893620737"},"_hasShrinkwrap":false},"1.1.0-alpha.317":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.317","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"252e68d8a493fd1bf91bfd0353d5f5654baea47a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.317","_nodeVersion":"12.22.5","_npmVersion":"6.14.6","dist":{"integrity":"sha512-0dr+R7xkmWfqM50bs4s6gHpM6F1t3V1a9FFnjdL3LQEkJ844yrRZlwZrHi8fwipjQZZrA+77Lo26P5DO5Y/KMg==","shasum":"5959afd30835f2df95642a61e0caf9dbf39ecf18","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.317.tgz","fileCount":338,"unpackedSize":3909473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKK1sCRA9TVsSAnZWagAAIgQQAIKWxDdvdisHBCFSjuag\nyEO9BYiwRqx2Q1+LfoPCUU39cM5VFBOav4tV2kdm4C1Y/cxxtC7cyXu1X/+D\nx22gNjLs8pB/QScyx22X9qsB68ycOLgaOE1bB+RDCKTAGMmxQLDi3XvAY9/7\nh2qR2NFzYNgmzPBVOoOSFKeoAerAZd4zJPiHpCNqOo8YS78S9a4Wggr7aqi6\nxNw2rMxuVon25n1heJQr9ORM6KFaDK1EmTW2UO1NmcVDz2HY2ULd0t65FIFZ\nZe+YpQ/29IhF3gAgDZnNec1Jr8Lc8cFkciXTPRqe2Ksw3oPtQKTD2INe8yL7\nydBXV2fhq3jhp49nUYdFXKHrrjkoujW10yxbOYOBX4hheGiNqaTVEauSU+dl\nF/fJdkG+PXjQMN8HajYSWZ3T/G/TXP+ZLn7pK3UEkRVWAftqqbfjmDCvWjS6\nd4mQQ23jGZTv8VxHlRbqbzJZQFPqNwaFOsM4CXZCp+fvjtHSGxkYMcx9nwsh\nMtR93EYdcvc3t7cUdEU9Xb5HfGDzEoJOWwETsenGu2q0JVaprw/EkYZrZ96C\nuVxU9hFeJTT7j+51OioBy3+4p8VMxuyppkcoiWgpDPhVJ66gb/X/xhSnSVgP\nxDHqJVxYwbzs+5y2fCz56Ahcj3JXjz8wCASNVcXVNVCcelUYjmJ+1mDauvp9\nP/Ps\r\n=CmPY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp2F2xnkKGBmY8HkczS1DVHv/dTaj4Nsz8vR5WtkZCJAIhALMhJR57bWMNeieol5RI4sKYCkDr2ZTa2JJT5xonZH6N"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.317_1630055788520_0.5833976403717"},"_hasShrinkwrap":false},"1.1.0-alpha.318":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.318","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"14603202435da83b4b4700b613e559a425cb979b","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.318","_nodeVersion":"12.22.6","_npmVersion":"6.14.6","dist":{"integrity":"sha512-E37y93HjRdeRgov8NTOVgDN8bAdllskPvkprlP9BywqIYXNhM4obI7K3sBhxzJ/DzmzR1mXwGbPmAYYvH1qJYw==","shasum":"7c5d6f78c34192cf785c8c46f21b7eff5c5aa987","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.318.tgz","fileCount":338,"unpackedSize":3917524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMgvACRA9TVsSAnZWagAA1foQAIj+pf6gjFdJF/9yC5PJ\nkGE+T9ZFL+OAsA5/ecvxazKPdsPFb1UegRoMjUFUyEJtyl9MzDmh/Rdfh/Cy\n2ziOv/bpzAaJhh+rFqhI9OqDvdSYtlWBZmEkiqlvcBqhnw1iZoBH0vJOnrnH\nbTuNXCwXXFRriTc/8zNg9z7QlcDBDTa3xtzoOYKv3FK5OIctNeT81hPbuSaP\ndj4apqovfJTjqo7tkA7RZBEJXE8SFF6nwBfwnma0K8C2552K+InZe1ksANVw\n5gJ+s+L7oXshdEb8Cx2ZGei8CGvvxag/Hg0GO1iTTTfQPlVu2cPJdwgCXOI9\nRQyjELFuCML+It51pRhhZDwjw3mBtzNwX7d5dF+aS713SxHVvYhE7LG3N7Ut\nfAY80GtvFy4AjFh43Pj0Bh8mHJUJzREmdcYUtcssT9aw3mKQi09dgk3LPpX5\nFR64XPVhJ2tHhFsFtD/9kX2r2lVMrsXZTtuozBNDiNIkCVkOW2S/2J9hQ5wW\n1wV25exKxvcplFAOtmmYe0dukzrkSQd2GfeWzEDk6lJ34RpbhHMpUocYYRFr\nDlRhS1qI9mHfYGVuqs2DKyGjSKmZr+Vo6N2cqTuE9qbqJk0PreCcLz0EKQSr\nW2g3N2/OoN1TigLQuCUR03lZ/OPorjJMRmuEZAjDW6oKhbBVZpx6/EHGOf+L\n9aoz\r\n=j8To\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQhWvh+0O/tDvKi7S/pvK2InY6jiloMyBOEW6zzqNU5QIhAKDfrTmAbGxG0lWqpEEC9xDHTYHK4VNxnucWNGqcArKG"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.318_1630669760391_0.8873825904037551"},"_hasShrinkwrap":false},"1.1.0-alpha.319":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.319","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"377e40c6ab9d051dd59909a1c6a9e2c29f63b589","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.319","_nodeVersion":"12.22.6","_npmVersion":"6.14.6","dist":{"integrity":"sha512-vtrQ9El4sy1yoEPRZISGBXzljSYfr2Udd69MVrF8v9ISFIG1Ntk6Ct0YAhI5laG/xJCvX7XrLhV3S57x2logZg==","shasum":"cbf9b6b9e1f5becd89db1828ee25529252976aa1","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.319.tgz","fileCount":338,"unpackedSize":3919920,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+CGdssA77K2f4/F6Uh1pZdeL1D6xBeKmeSnCmlT3xNAiBDT7zaatFJ1VEO6lLhgrVslOvuB8sTl41tKWP9A2DunA=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.319_1632313841812_0.8939580105973455"},"_hasShrinkwrap":false},"1.1.0-alpha.320":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.320","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7f4a25202155f4e1f4d238b3dfe7ed48fd50dfae","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.320","_nodeVersion":"12.22.6","_npmVersion":"6.14.6","dist":{"integrity":"sha512-l0AiaUmecGZJp4pD1XLiLVGzB7hZujzcW7MFDhyQDHmfKlQDQzWFfLZkzR8pe2BREKOMT1yU27C72liIGjPbuQ==","shasum":"573d5fc39005d3f4d8a9a5427e994eb5b1534d94","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.320.tgz","fileCount":338,"unpackedSize":3918332,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFs6oNZ5ni3X93Q1bh0QJuKx1+Q9zkrA+YUhtAwiI1ajAiEAyNjbWuxc8SlwisUNdSSvPDaZ9azLLU3e/FeD8gR4Cpg="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.320_1634197401956_0.08255747087864562"},"_hasShrinkwrap":false},"1.1.0-alpha.321":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.321","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.6","@storybook/addon-storysource":"^6.3.6","@storybook/addons":"^6.3.6","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.6","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"dd44af51a2f0d13653997f3c097a167d27648451","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.321","_nodeVersion":"12.22.6","_npmVersion":"6.14.6","dist":{"integrity":"sha512-WiiwM3l9ed1AlERrYEQ9/kuzddf+KczU6J6QJ5FVisJupZV9UR8l6zcDNuwyh2wyF2resiOBO37sCX7aGW1LWw==","shasum":"5e15df637a61142e1e58b70ee3148852f2d98556","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.321.tgz","fileCount":338,"unpackedSize":3918660,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo0eeUEw9KMgzyGKQMSAXcVzdEJ99+I9tPbC3bQrgtJwIgNFrb5iQk9RPCJeo2oJY+ESxjbumLHSMH+gI1KC6fhys="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.321_1634198739789_0.6721770936200142"},"_hasShrinkwrap":false},"1.1.0-alpha.322":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.322","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"19ab4c1b87b115a6a53739ac5eb3d8dbf6df82a5","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.322","_nodeVersion":"12.22.7","_npmVersion":"6.14.6","dist":{"integrity":"sha512-vc6qUtX2So26O8f6HRMznZkC5OnMIaChqSw5Bg9fyrEu8fDC87N2Gu31MWrG1bkaBgF0xRG7nP2CnS5rGHcuOQ==","shasum":"9f4dcf755f2365e93a39f53d6721a178d2bc1e82","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.322.tgz","fileCount":338,"unpackedSize":3920259,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPaSC3sb/+3F2HAdWIe3ZVnBnTTkmfX1liPv9BENmQWAiB44NVb+/WvIjeca6oENAfnFfHnCp+1UDTU+gn2uvRBLQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.322_1635391407298_0.5410450466017007"},"_hasShrinkwrap":false},"1.1.0-alpha.323":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.323","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7d21731ee500b2eea4bf6e6e79d67ec3a886105e","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.323","_nodeVersion":"12.22.7","_npmVersion":"6.14.6","dist":{"integrity":"sha512-A9hlKVCpH1DGFHLzgVjZTaNGoNbhdEh+lazLt5pj66kfenwnjnooe3gCqfDRll7nmthFGjBfD27Ijc1YqdVF3w==","shasum":"1be4a9e6c73e13d00bbf4b72f7d2ed0afc24f7bc","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.323.tgz","fileCount":338,"unpackedSize":3918825,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDALNFTE/KS+ZU3l105lgbwzNTn/ksWOg6NDEcQm9GMrAIgUoKMOR+g1JbOTKGKjCbIYYWO6ptaTlhywcX36d4St5M="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.323_1636968629844_0.01860672019635845"},"_hasShrinkwrap":false},"1.1.0-alpha.324":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.324","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"ce196a4e76e1e98a8dcbe5c536a330826b899046","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.324","_nodeVersion":"12.22.7","_npmVersion":"6.14.6","dist":{"integrity":"sha512-ctFYQMYd4Kuk4fRAiof9z4Ox6fZsCoHOB63hSicprNdLVZFN5qDk/Kb22gax55YIc46l2wXTI0AN/7DNV+HYeg==","shasum":"722c32dc6712563519fd2c3a59ff8eff0b187b82","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.324.tgz","fileCount":338,"unpackedSize":3925473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhliw3CRA9TVsSAnZWagAAVvQP+gLckN8rAFU10IrHMOv/\n6O2JLDXiIXsvGIb9IKEGpI8E6YYHd29BXRtOt8VsZV9NLX35DoScCN5AWPch\nA9wT+vUHnXjsKyO29FQigVU4B2QBOX4o0GornYKVqJj2NCNmofGK4RByO3oi\neHfCKbDENNjo1eV/9xVGMsAvUPAlkv+erQ+zhtzlMYLR4pk6NvMRj/BglRgv\n3LIeJCEDuYXEeiJkxW/FtF8zYjrFx0m8hUYYDD3EcSyYpHSAhjtubz3cFvuR\nhmZWYuizQT//Esk8/V/OAONacLefOfg+rkmCdrtZTWW0xWXKBL/olJt6A3mX\ngYc+9lFs4SQXoMBQ35Mg3Avka9l1JqA5U81eQDYW50DV8TP1UyKMmVZay/dU\n4LQNfzhJHuwAmvdM3yHMDs7VRpkNx70u/HmiiFxamKmPZnTVGgkMolZns8ha\nsjnW96I+GeFHODF3erfTa1prjfVJXcEcWTmjbb5hDUJh+jxakXlC2okccYdg\nNKx3tby8C3sGUUb/uhRqIDdWRqZ4rShA1IbhGoCvI8tIO3gnccGGCaYJ/DhL\n0E0ifNfrnrHFUPPr3MSm/pAnQEh6lQyx18r/UW892zPyECf8/5du4PY9nzO5\nC/+kMcv55gXYVckG7G4NkuzFddeMTLA78Vijy/aMV4kpRT+QYXd3bhrQqLvu\nmdSH\r\n=lIjR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBOTssl4qIC/b1T70tgdzDENXt2SgrAek6cXmAfvP80IAiAIYsnFoFdan/pn2EX0NrB4IFX+FHyIpGhYmoCXbZwP7g=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.324_1637231671273_0.8099558914709282"},"_hasShrinkwrap":false},"1.1.0-alpha.325":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.325","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"0c1894bacd4bd5ecec27d843e1e72263600b2f37","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.325","_nodeVersion":"12.22.7","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BrHgM80mGGb0hX4OxBTBjcF42nkrZzbd7A97AAari4QZOfP/rLcVccpCV93NWt4o4Ann4TpOmhnyc+UgL0ligQ==","shasum":"405b237ea55d452602cf703242481bee99a04d29","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.325.tgz","fileCount":338,"unpackedSize":3934211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm2sqCRA9TVsSAnZWagAA+RsQAJ1+Wxjysh6bYNcDmZVa\n1NTHzEEif7DxlcC6ekIbWJ+A6Inv6uQdJV0IaySyMeR/ElpwEIkuXfyPoBXM\ngLy9gW3UHi60jwcQPSegw05s37LgUFEeUM7s0x7iCyuTSGXEssyEWN5M4pkG\ncd77EBOUocKR0yVoAxrv7kAF3B6qMjkDrXxrUi/ZNP0JW8mIybi94zoisJ+z\nwqC5Q73HK0P74k4VrSqrm9b+BJFu4vTAwJP3/n3rBIU66S0WMqATSCaknfpS\nzSjF2Qk8SG6tDFlal+hI3deW6d/YkO9iAd8WIumha0w1TBSImzN5khfcrIQi\nMGvfkDpYsrCDLMMQFTR53Ku75USaI8XTW/kqrCnCIY++ycnZS2l1QkCn+DhR\neHuz7EL361Wc0cowUsFAebNRTJYF+3DIF5YrIO80EQ/DMSnKVaZLa4YHUHvs\nNMhtKzEM2N6Nv0i2s/2WEazZ5b8WljREInEH3Q9V/ryFxAvp8gr7dWTOvkMz\nwPHh5+Rrcy6jChS55yFYu2IDBcuaad0noVhed293rd+LK/MmMnZBi5GGGVUm\n3jeoUCpthMG0VxBc13JGKNG9nuUfxajAK9+2Ue1nFg/N/xr4urjs3I858qE5\nwu0OCztS5wX4E6OCfAq5ZvnOkA5MNDFpFwyIhsx3KGmBOjAtgO2dTplo0+vf\nMIwx\r\n=i3bX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3ffDoiyGx1qHoyIiZkKN78mBrw3A82ep9MCnultZC2wIgDFMwy8GXU8LYIzA0bocaM6GWWkf956KL0OuYE1yrbiQ="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.325_1637575466579_0.7405627356943933"},"_hasShrinkwrap":false},"1.1.0-alpha.326":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.326","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"a2445a3975746b8005fcc2cac1dd2fb7587fe6af","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.326","_nodeVersion":"12.22.7","_npmVersion":"6.14.6","dist":{"integrity":"sha512-pkbfF4cRjM1mH/Q3VFXIJKAKW0F9LmTmEE+kn5B1StkmG+Ew5lJLc25LpHseQ6Ou3PmbaRbxVAUhCTC45MYNng==","shasum":"d8d5d29f39b4bcc9bcf8aa872eedd189436cba2d","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.326.tgz","fileCount":338,"unpackedSize":3938743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm3uJCRA9TVsSAnZWagAAso0P/jbmvUtPEdsIjS/ptB/F\nof5m3tBHIxa/3WiSkSw97auETuF0CICVzeucs13odncjVrXHhjGPdDlFz2hs\numpSZXUkXgMN3KvZfpVqADJ/9hrxewuFVYn+EPGtUoeRjEYox/TPFpcwL6fY\nkENWN1yGBQGgXjp1JWCV9D+4hTO9ksABTXYFwwsHy0T3S6CAvgtoPMYFEQHF\nP2iF0VvCB6Sbw4GKGdTcIVeNoISjq4DDmqIHTAK0rZQeejuKep7QgklQX+W1\na98Eq1ruflipu4u5arg+LNrWsbfsg5fSZCJ63KlP7PtcGnK0MhkrjP7d7aW1\nKUfEuBFJl0lYEONTYuHzkB6CBXvLJ1asQgrAMUw4HJwIEmVUThXIL83KJTt+\nwKJVv5i/zgZpdpQs/i/xMxZ2J1Fq+TM623fNielyV1FEGar+jgKRUdlUL5Wb\n/NvY02LzvmGHS49JUNrS5z32OXIyUW5+SOZyCefCfDJNh3fISbeA6R2t+BqN\nSg6NgbC43zmzPgY/nbiR1ZIFGAPMF1QZcieNapb7K2ZlpiBIuSblfjP67VXU\n7tYxA+1XpqhAEoP/H2fBLzvOXi9DHkWFVTEgSMn3Q1S8+RxfY3RwUabk9hrT\nLzb+jw5NIdWN/bKRBRfDas5pIMCLBuM4R+f3W9tC87U4HvzHMnNZ2ysgEKIT\nTt/w\r\n=ys4E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6o29wnJmBZVLb3kFB5n7uSAUrxN3MFlQWVuJmC2q7OgIhAJ0ErHejuEYxQ/S7EbSC4xwpo2LbkVZ0sNLCZG4hpITu"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.326_1637579657165_0.2087189793570372"},"_hasShrinkwrap":false},"1.1.0-alpha.327":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.327","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/react-window":"^1.8.5","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","react-window":"^1.8.6","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"caabdfc37fc89f544f6bda8bde7a5b760482529a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.327","_nodeVersion":"12.22.7","_npmVersion":"6.14.6","dist":{"integrity":"sha512-vn4xEw679CFvkHSHTiEUS2zk+mco7QXmlCsa+wU//BFE650YjgLMq/hXLg+iho3wgaRr3GEHDQwA9Hue6I0Vvw==","shasum":"bdd880c13b7a1249a685014f2ee1673ea7abee86","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.327.tgz","fileCount":338,"unpackedSize":3948114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpdkwCRA9TVsSAnZWagAAKkcQAIEB82wncFZPubCDtFUI\nrzntQOWPMFqrm66Hj9ovsMXJEIRfaupEIwVvVSaSM/D1wDzd/h02B6A31oqF\n9yZZABKIJ9GHeRPUCXIGta8heXWRlUeJXsHnGAV1YQ3U4sW6h2ZnsQeKTxFM\ntuCArejcSk6jb1oi2U/692BDG7zD5cuS/E2jdkAheLWxmFdcQGctTk17gjvo\nPmY2MMdLo9KSgTi3Gx5v3Uou/yLEAhfMae73+if3ugIQWWtXohu9+Pp2zY/I\n/rwO5hfVMlt8T1GAoNiFV9wrdgv7IXq9HtEI+C1U60oKbUJohYoJM+0HMq8A\nrsckeUTIca6ucVwVGu9Pi5ZzBayl7o4B+jxJmfxXj5g06LNl3rSlpTe8SE/9\nHQKvC725Brz0q3uU1x/J6pjyw3rv3keueITop8WA/lTheVsZOeXoedn3afQ0\nXqFGubyN4Mrx01npUXsl0hzVPi9dEl9M3ZRgT8dNonbTCPGIILnro1J1HCW+\n9C734wlXuy0/Rbv+ctEy0/5aN7xRRM+7yt5qzZJjE3EkC4rcrkHsdB1QTV0s\nO1Rwi9ShKX11SlQPfOThbidTfw6tNDbEzIEkCC9z1KXaL1gClh1K0eOIgE6A\n7UyoA0ehoT2bjSCraKFeGFqpAAuBQ4GfeupAu79xdD0u1hh8ThxwsrwzUhp+\n/0kW\r\n=9Ol7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARD+UKSSP4zuGqLrxmxRlAz6e+5p88hFkZ2tlXZV4UcAiEA44Vwxb4wXrwcwR0P8+YK90eGnI20bYn28Y9AaQ/PDXM="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.327_1638258992711_0.503471783283165"},"_hasShrinkwrap":false},"1.1.0-alpha.328":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.328","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/react-window":"^1.8.5","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","react-window":"^1.8.6","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"aac1b12bda95433d501f15f250d53c4d69386496","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.328","_nodeVersion":"12.22.7","_npmVersion":"6.14.6","dist":{"integrity":"sha512-DWEIqV92IBC2F1c6DQR5aY0TiKu/yfVFhXmeQyzBR21X7h7WYvK60tmqPbZ5lU4nYiohT4dkWh4czj8ITSR27w==","shasum":"0b86fc8746d051acd936953aa3e3d753947375c8","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.328.tgz","fileCount":338,"unpackedSize":3953285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqfDYCRA9TVsSAnZWagAA0ckP/jdPRe92Qbu5xCqAJUqj\nSsjwaNBv6N8IY8h8ecSmiWQGunJoRqaqvVwU0AHFsZYx1qY/Yop/p52cyEkn\nl+BjGaqCCsc1vo/paQ/RHs7FF/Qgt8DHtz/KSw0/3xLUP6T6UhlBKmfIPCsS\nX5wKFxnXD6aI53eqnUE7tyTW36eSpqvGdfDAKMj5cdLtuj5ewWa7Y4koBfYK\npt2NulOaWi9TzGQdGf6LK9GyMEmNQu4j1/yEyDptDTJiVh+ofavr7m5PlLKk\nFPJg6FL2GuzsopmimDTQSDHWAa+wiHIuqO8be/KSKwf5KtfBMaAnjCCkYXQK\n9EpcFay3mV6cUhtntbYY2H/YzIktqYR/ghyj3djBChqG4aTMk68RV93kpmPI\nt/7cbjzvo7gSKqJdSKuqb4gyMq6pv45rpyWVbSh5URHnPvL7Gm0gUxOMta/S\nyHMwEo5H4PBMk5xzPPMIMrks7kH7Oi+lFea+/devPX4PoIXFf3JKyxFHXkYq\nIyIa3zFNyTUz6NKnrf/7TI6FCN7Vt+/jqA7u6fg7kdvPp/2QavEHSTwl1TbP\nDMUcYuNOOgnd+GtanIcaPddUi68yYjST7wnhC3tb+oQGOeFGhfiN0FJfNIKd\ngS3LiEETX/qNvXVjuXC9wODtrhYBqkn7SRmQh+3lu+8uKOpZxLaNtS4eTnq4\n8w2E\r\n=jw/5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8VEXt8a0abuMY1T4nCNig24eB8tp/Wwlnh/e8SGNrHAiBIpkd0THS+ZSkmL/YpKh5QhbadR3KsJl0F7GzfjLiHvQ=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.328_1638527192669_0.0002549791591246464"},"_hasShrinkwrap":false},"1.1.0-alpha.329":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.329","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/react-window":"^1.8.5","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","react-window":"^1.8.6","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"60761e35896b1a4f7223992a63a46570f2047d1a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.329","_nodeVersion":"12.22.7","_npmVersion":"6.14.6","dist":{"integrity":"sha512-dPpBE4LhGeI0bFidDjSc/N7ZU+7KPq5jdXSOjYHOjdYVz0uSB9Q8Un1zSUG1aejTRSn5y7IfDN2ERT7nmMzrXA==","shasum":"1b3ff947ff230fe46c856124519a28ce61ca9152","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.329.tgz","fileCount":338,"unpackedSize":3962223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhras7CRA9TVsSAnZWagAA7a4QAI8tJE1ZWwgCb1LKtjWo\n4vw0muhSr1mFBctCPuQJR4xp3s+kOGBZKlGPq9g1UCAhaCBNwp23JxqkdBhI\ndIn4e518NAD0aqkHQ5lukqTR0WXfXcn+GMwLUusyzlhe+7zvM80v2nekR4P2\nvIMVko5Xz8kOPrFZurSpt/5/m3TM/2nsjxv+kH8qugr9fFB5DO/t8GDS6dHm\no+sflk5hRK6ZzDxHgzowQYejPz5HIDvNsqQAFPG8ahZhHdGC91wT0xtL8N9A\nuB1dXDlHW1jkzft+3Ysx0KG3vtIzzEJ52BGVJUYSMVA1doIZjYwZD1ySkJTf\nbXAcbKOnUpLJXR003M02YHZlmcb1hvn1N1udQUm28B/aYhHAfJqFyUacCOWL\nOVe5yhMfsaC5VAzmTUPfJgtAE26ogfoK41JmKIvtg+pXOf0qx75HbRAS12xn\nPhxXJfBqrXmR/vAL64GBnSqs4XPF9MDMOAxo//nxEB33NQ3G6ZUZbVakVYAd\nRpDmfn+1duquLi4P1d2/tNv5y87va55e/BWN7m0gdBlGj4RE8KJ0Xqrs88ni\nC+LaWilq9uY+2Mf79RVUVEpweu5QjjZxx+jeMMMsOQE3ef96RnGRGdqstt49\n8zoT8duIscwzPqC4cxZ8JkppNyckOCHHB5wm0OnH8zjSfU2M0gjkTnlHWAeP\nhjPN\r\n=1C8W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBaElip1g3Dhs9OVTLqlig9mjJMCrYiEWq8M1ve7jxaXAiA4eXxhLP32Gs/AReod++4g+EsV3ilzhCDnXjVU+1DL9A=="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.329_1638771515281_0.4513120252013867"},"_hasShrinkwrap":false},"1.1.0-alpha.330":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.330","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/react-window":"^1.8.5","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","react-window":"^1.8.6","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"7d8946c4628235e1b316ab923784128c04078db5","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.330","_nodeVersion":"12.22.7","_npmVersion":"6.14.6","dist":{"integrity":"sha512-wWXFlnvjWctzg0O+sCPPetUREwO/TzI8ge3oBeZAcE5i7ukzj+6RsQvdYGc5FSaeyO6GuUMXFq95C1FgoSdcHQ==","shasum":"acf9bec18bfe2246257dda2407a6b3dd42d3144c","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.330.tgz","fileCount":338,"unpackedSize":3962906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsKCgCRA9TVsSAnZWagAA75wP/ikaJhiu+UrUP0BYh3NZ\nLmeYwTDI+C11lnKf8bW+NKO9R3rBu/V3NLWVrwgYNbcxF0DGbiGrgze0OP/7\ntvW6KUIFE/RXz4N5+aAx2s+2S4fOvOGKlx/lsNU+197WWng4iS06bHw7w3Qm\nnMgWskqzIXn7KV1/oL44D+U0Kq+AiLZluDz1jBy49jatdm0K5DrVdqOd23Qs\n2UK/+Mq5wQyFISR6A6+5ImUQjWS65veno0Tpd7kSdY7FKbKoDLMDvUOm3ADr\nNhEspuXco5f7TV7RelbH68uqzFauLGpMhrFpz+jBVfNlevZLOxsEjNt3JbYf\nYzBoSCqKTIzdZQtAl6Syyp8FNXRCtvh6kqkgGLBBYqnHqO5QP4heb6SJ13aS\ny3vm+UJZZzGxQLMhrv7FMgE9UGSGFSO+IJdJ8SMfJbykyjLUB8CF3sweNuhM\n8l+7VWDlyvfbfepn1NaOw5YuldSbCne6h9yofpCKf5HV7NVnfEFcbRm+b6HP\n/6epuhp96+sC+evyaAXg7Hua0LQUW2kaUpc/PTO0FetzSxaH/4NkWhpPC9i3\niJk4qc/OgIx+R8XV3gNlarZnlF1BDHdH4miezHf9zzNCVWPoFW8qAXrONdab\nnLno40yNmXMCHDBawlULIXpdmILHZ2Fx+QLs3nlxLFFjbTDVqgJe/qCh+4MA\nUEBJ\r\n=W/Gm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDutQ7+WTIRCAfmYa2nDiuJiS/O7Mnn3CA7eSb42au+2gIhAJpPFlZbqZ1juzCku8LW9qOtC1/1C/gZnD15G9VigFeS"}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.330_1638965408431_0.25373147241100913"},"_hasShrinkwrap":false},"1.1.0-alpha.331":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.331","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/react-window":"^1.8.5","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","react-window":"^1.8.6","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"66888c412683edaced1cba68266a989b46673e4a","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.331","_nodeVersion":"12.22.7","_npmVersion":"6.14.6","dist":{"integrity":"sha512-ZnZLmvpIy/CtRCWMywasr1qx2praPAXHTCWnRDr+53EtZENmrOKoiGh3oI1KS3ijgtOBrxGdIGJFrq0NNGwPKw==","shasum":"7d5c62cde25f42f6797cbbdab4d1fb360dc2c8a3","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.331.tgz","fileCount":338,"unpackedSize":3967209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhses5CRA9TVsSAnZWagAAed0P/RIZY01ahqyNmicoIEun\nJpBK317SqZsvJtSi3YTXPftOTIyDUY4hH7G5avuGvIR9SuAWkVjyBS1Fyxqf\nCTAFVDWQDbycZxRo2zVJx42LW2svMEFGwL5eEXT0e9DB1pfMy2iSyKqA+IxZ\nekbE4NjCAHo0Lhtr4wj3fWlkn1mnAmvCkCSsBdrHIfvRFNpcu9UW0shAgU6/\nhQ1+yQjVjkizDd9Yci0MkifY+mEiMy3e3AgcKaOnqcVwdqnjfa84e2+SgDDh\nY6DGHQHLHgl5sn22Er1CxdY8nm10KqoLxkBkpLYJhQHXAxQrGMIDrO7btRnV\nYnKX2FbNw3LEjNdDC/wZBDvqaKTZSkfsjRSi7vQEKqB+nCj94sO8w7NhQlRD\nLnDoWlb9Q4+7MBwVooRblkf4mVqppuOpGDC2XXZN1QVKRJnRFZm6W8C26kWr\nJTTzh1OaUaztGtQ+BMmNnbizwVi4CDprstByPDmPjf2RgsuqSzeDczQWSmBM\n/V2ozWNfBxmGnKomqJG5cSZ/6wFuiP/nsmA52UHvy6c/eIdGPA2Joq3R6CND\nRrTQbH6cZSZVlKZTrbImiu4/aa155uE1QIDNBnL/ia2YdG3yt5c+vJRy2Yum\nZooNSmgd5kAnW3SqQ4Hc5frYhomA7xfBJvhHmbpnY78C8Yii76IpQAyK0Iad\nBrQ0\r\n=8UHf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiqncZTS+yjGnOWftKVYhorpka/MSVspEtX+aAUtckvQIgS/vBkj+CheBcQ9ZWovDyOrMbLsuJKNqB71sf9jwDmfQ="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.331_1639050041050_0.49059326579656437"},"_hasShrinkwrap":false},"1.1.0-alpha.332":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.332","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/react-window":"^1.8.5","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","react-window":"^1.8.6","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"87f4e3de9278a62222f7ba1bc0b90529b41f6ccd","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.332","_nodeVersion":"12.22.8","_npmVersion":"6.14.6","dist":{"integrity":"sha512-6CPLERxlNFpnbAg+cV8lj7a9p6iNk0steSKYhw3az0ba5A/4Gq6sffFg/DhQidr4Q271q5AzNmvvPSfVf7fK1g==","shasum":"74dc1f05cb5e9a230be1e48bdaf2373aa3fb2034","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.332.tgz","fileCount":338,"unpackedSize":3967309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzEBuCRA9TVsSAnZWagAA6T4QAJJc2qkOyvUqrkVsvK9G\nE8BFeBvdhMjb2/uJuaJvOoJS0Sk9VBxqQSLpJM5+6Jus3LXdDapdJT0hhMEF\n4Dt96I7ZlfBKs8X5mIyX1bZeIjcTiWYVzTIJrfoSDvUAryk6hjPPVuUY7eEt\nGRq4NTxgnjdEcvrNwt5ZBzJAUvCsIpzSVi57cs+9nyyJzVFPe5QwHaIPLiPx\nmK8ietn+Lt+FiZOIqFFaMgREBp/Lp7W9siw1BQT+sDdrkVYAyL9NmewD/07F\n7zN7ddwqvqF46TyWdU3g9ID8iEPJVBpKLYK1PsnFBd6nNrMJCX0MPMydGRZL\nrAXN3+1TYJFYn8aN5VPX5wLSU+qnS309rNaZDSaulDwCJv5NkceSsdGwcyMt\n46DS18eg5ybmS37k5DqHL2ZxEbkw1h2m4S0jk5txz8n0GtbH2WR78iNFFrEz\n9oV2YcXY4pirBq6sL5ujQw9awzGdg579fvAKCjTiz6hF7fjzW5BVikrdyN8A\n7/HKUMtniAiAFt+mfKUVGzmQuCfJgW9Usju7eydZANjtar0OwKrZQr6hFaiz\nqcAlqp2rfvRwNR+KuskyU9IaEfEeqP3VDBLRSeDGby/uJm8KXVnOBkJLOHao\niwqPz8R4BnjoCgDH1ALEvnLXADgbt88CrdJKzWqcxOZ/6ErkV2qEUg+Smsat\n5ZtP\r\n=kLuC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnyMmIV4HpVyH6fPxAJyFByGWIDf5erJwkjkS2HS43yAiEA5JywVOOIrLryxZb9lzyDWfLoMfWEpCIZ/AP7tEaHIEY="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.332_1640775789997_0.49966663647705944"},"_hasShrinkwrap":false},"1.1.0-alpha.333":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.333","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/react-window":"^1.8.5","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","react-window":"^1.8.6","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"471c2190535364a05cf383556767077da0e6dc34","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.333","_nodeVersion":"12.22.8","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Oa9VYhj6DPcbidmBovNh17JY5O5GNwjWg+8tgL3GeEGTUuqOGmAGXSWKrVzXeZZz34sZ6njjF4I6ZVHz4DXkcQ==","shasum":"6dfe79fd997d027545540ee23092401e3b5085e4","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.333.tgz","fileCount":338,"unpackedSize":3969773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzFRvCRA9TVsSAnZWagAAhk0P/RZEsJXRg4lflinBOY9O\nZhfKFlYf+Rh0dDLBfmY3lroYkYNBYmJEN3AhH9sB/lvZC5HKn+SL0bvKqoxV\nmrdTfgnks0//64D2qpUGQlUGJeF/2WU97iCqSHM4dmEMpxHORuLZ8SH7H/QI\nUmq/iX1lMpanpbJIWi9UlE8aG2kMYt25TmjD7oKEx6+DFLT+YNq363OlvPeB\nTeVx0VFv/tsCE+2HDY9lbs70FJzh6UhU78lbakmc96+A3BEnmgJZlmH2ktfb\nmzGI9OBgJKv0JB9CNvPjC8p3U2haoPnigHAOpOZHj/2PFqulUzTm55597GrI\nP5ygaITd6RfdERKP4BNm/AZxGh7Z0b2XvD1wAZa1e2FmgVOUCB93H6Z1+qEd\noL2MMy5s4vb+bZ2Q2mGw0tJGiXKYDOer55UPdEabbyywC8wu8IFZ0PZ8zYsv\nOBkxQ/EObM1i8Pl0qXXAeke5q1ddxWLBZQxR5diq2GNv9PNVglPDkmm+7FZw\nkYA0aMhyDWwowLfGhUXGSGReZcFQfBucjNT27HirN0pwpMiat9o0i9rk8miH\nZHzmhTI1Myq7pfcpE5OuCWaZQIDeWbuMRDamOhxVmXI2R9YG42yBJ51u1Iow\nTAut63pptjZdXDDxK9NjOC3/VTKc/Iqy34JAQn3V+P+I+SYbQnt7PQAmpHr6\nKzoJ\r\n=KJ2a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcCcttqApicM42+4yzqI81ClwHqVYH6Ryoi9vaHKE5MAiEAixnFNFvmMlZQz9Mr1qOYUWqSxFvbLd5VoYseGpc9SaQ="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.333_1640780911077_0.9709727349847026"},"_hasShrinkwrap":false},"1.1.0-alpha.334":{"name":"@binance-chain/honeycomb","version":"1.1.0-alpha.334","license":"MIT","main":"dist/index.js","module":"dist/honeycomb.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"start-storybook -p 6006","start":"tsdx watch","build":"tsdx build && yarn build:font","build:font":"node font.config.js","test":"tsdx test --env=jsdom --passWithNoTests","cypress":"cypress","lint":"eslint './src/**/*.{ts,tsx}'","format":"prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html}'","clean":"rimraf .rts2_cache_cjs .rts2_cache_esm dist public storybook-static *.log stats.*","semantic-release":"semantic-release"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=16","styled-components":"^5.1.0"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"jest":{"globals":{"ts-jest":{"diagnostics":false}},"moduleNameMapper":{"\\.svg$":"<rootDir>/__mocks__/svgMock.js","\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","\\.(css|less)$":"<rootDir>/__mocks__/styleMock.js"}},"devDependencies":{"@babel/core":"^7.12.10","@binance-chain/commitlint-config":"^0.2.0","@binance-chain/prettier-config":"^0.2.0","@percy/cypress":"^2.3.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-url":"^5.0.1","@storybook/addon-essentials":"^6.3.12","@storybook/addon-storysource":"^6.3.12","@storybook/addons":"^6.3.12","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@svgr/rollup":"^5.5.0","@svgr/webpack":"^5.5.0","@types/crypto-js":"^3.1.47","@types/jest":"^26.0.4","@types/js-base64":"^2.3.2","@types/nanoid":"^2.1.0","@types/qrcode.react":"^1.0.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-modal":"^3.12.0","@types/react-table":"^7.0.24","@types/react-window":"^1.8.5","@types/styled-components":"^5.1.11","babel-jest":"^26.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","cypress":"^4.10.0","fork-ts-checker-webpack-plugin":"^5.0.7","husky":"^4.2.5","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup-plugin-string":"^3.0.0","rollup-plugin-visualizer":"^4.0.4","semantic-release":"^17.1.1","styled-components":"^5.3.0","svg-inline-loader":"^0.8.2","ts-loader":"^7.0.5","tsdx":"^0.13.2","tslib":"^2.1.0","typescript":"^3.9.6","url-loader":"^4.1.0"},"dependencies":{"@tippyjs/react":"^4.1.0","crypto-js":"^4.0.0","js-base64":"^2.6.2","nanoid":"^3.1.10","polished":"^4.1.3","qrcode.react":"^1.0.0","query-string":"^7.0.1","react-modal":"^3.12.1","react-spring":"^8.0.27","react-table":"^7.6.0","react-toastify":"^7.0.1","react-window":"^1.8.6","swiper":"^6.4.5"},"commitlint":{"extends":["@binance-chain/commitlint-config"]},"prettier":"@binance-chain/prettier-config","readme":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>\n\nHoneycomb is a collection of reusable UI components based on [React](https://reactjs.org/) and\n[styled-components](https://www.styled-components.com/).\n\n## Getting started\n\nInstall this library as a dependency with `yarn add @binance-chain/honeycomb` and start using our\ncomponents.\n\nMake sure you choose a theme with `<HoneycombThemeProvider />` in your app before using any\nHoneycomb components.\n\n```tsx\nimport React from 'react';\nimport { HoneycombThemeProvider, Button } from '@binance-chain/honeycomb';\n\nexport const MyApp = () => {\n  return (\n    <HoneycombThemeProvider family=\"gold\" defaultVariant=\"light\">\n      <h1>My cool app</h1>\n      <Button variant=\"primary\">Click here!</Button>\n    </HoneycombThemeProvider>\n  );\n};\n```\n\nYou can use the props `defaultVariant` or `variant`. If you use `variant`, you will force Honeycomb\nto use exactly the choice you want. If use `defaultVariant`, Honeycomb will always try to first\nguess what the user's light/dark settings are.\n\nYou may use the optional `localTheme` prop to merge your own theme with the Honeycomb one. Do not\ntry to add or overwrite stuff inside the `{ honeycomb }` property, though.\n\n### TypeScript integration\n\nTo get a perfect integration with TypeScript when writing your styles, you can create a declaration\nfile as shown below.\n\n```tsx\n// DefaultTheme.d.ts\nimport 'styled-components';\nimport { HoneycombThemeType } from '@binance-chain/honeycomb';\n\nimport { YourOwnTheme } from './your-own-theme';\n\ndeclare module 'styled-components' {\n  type ThemeType = HoneycombThemeType & typeof YourOwnTheme;\n  export interface DefaultTheme extends ThemeType {}\n}\n```\n\n### Customizing components\n\nWe export the inner pieces that our components are composed of as static properties. You can use\nthose to easily customize internal parts of those components.\n\nFor example, in the code below we use `TextInput.Label` and `TextInput.Input` to overwrite\n`TextInput`'s internal styles.\n\n```tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { TextInput } from '@binance-chain/honeycomb';\n\nconst CustomTextInput = styled(TextInput)`\n  ${TextInput.Label} {\n    color: #f8bbd0;\n  }\n\n  ${TextInput.Input} {\n    background: #e8f5e9;\n    color: #64b5f6;\n\n    ::placeholder {\n      color: #7e57c2;\n    }\n  }\n`;\n\nexport const MyComponent = () => (\n  <CustomTextInput placeholder=\"Some placeholder…\" label=\"A label\" />\n);\n```\n\n## Testing\n\nYou may use the prop `data-testid` for testing. The components in this library will automatically\nassign `data-testid`s to their inner components using the value you passed as a prefix.\n\nFor example, `<Checkbox data-testid=\"MyCheckbox\" label=\"A value\" />` would render something like the\nfollowing:\n\n```html\n<input data-testid=\"MyCheckbox.native-input\" id=\"…\" type=\"checkbox\" class=\"…\" value=\"false\" />\n<label data-testid=\"MyCheckbox.label\" for=\"…\" class=\"…\">\n  <span data-testid=\"MyCheckbox.label-content\" class=\"…\">A value</span>\n</label>\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `yarn`\n3. `yarn dev`\n\n### Adding new icons\n\nMonochromatic SVG files can be added under [src/components/Icon/assets](src/components/Icon/assets),\nbut there are a few things to make sure of.\n\n- The SVG file is monochromatic.\n- You have removed all `fill=\"\"` attributes from the SVG code.\n- The SVG viewport is a square (e.g. `viewBox=\"0 0 16 16\"`) and the icon is centered both\n  horizontally and vertically in it.\n- The SVG file is named with pascal casing (e.g. `CaretDown.svg`).\n- The SVG file is named with appropriate suffixes, in the correct order\n  (e.g. `Tick.svg`, `TickCircle.svg`, `TickCircleSolid.svg`).\n   1. `Circle` if the icon is circled.\n   2. `Solid` if the icon has a solid fill.\n   3. `Color` if the icon cannot change its colour.\n- The SVG file does not contain any font loading, styles or non-vector images.\n\nOnce the SVG file has been added, it must be loaded and exported in **both**\n[src/components/Icon/components.tsx](src/components/Icon/components.tsx) and\n[src/components/Icon/urls.tsx](src/components/Icon/urls.tsx) with exactly the **same name** as the\nSVG file.\n","readmeFilename":"README.md","gitHead":"e09f9cd1ff814675a9f7632a21d2d3f6996d6db0","description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","_id":"@binance-chain/honeycomb@1.1.0-alpha.334","_nodeVersion":"12.22.9","_npmVersion":"6.14.6","dist":{"integrity":"sha512-PW6dZwcUe6ghUN6tCBiLVcJOby9rwT+qYcfSKwfwpPsKJRYqlbvxDJGgT21vDipONl73fQCHTx3HVyyG+4sSZQ==","shasum":"bbf7e2e262554c0dc18545e682e5b97fdd985ceb","tarball":"https://registry.npmjs.org/@binance-chain/honeycomb/-/honeycomb-1.1.0-alpha.334.tgz","fileCount":338,"unpackedSize":3969979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAkRECRA9TVsSAnZWagAAvmwP/3cPLFz3/L1/vAS1GKV3\nQvzfupN7qZja0nuhTSrYnA3fqFkqe+LESvZnBgCn5ZTy/gFTDPwAtGHdmqH0\nEpC9ovvp1ha/dGHh8TCAaRZDfs/TzzfSNqp2zafrnn1v1HAx5hthIPtK8L/4\nwcSVjI2o3h2qRFeNfLX7pqm/JP6xu+l5GU9yNYOJPGzD27jujVznHuMJaUxG\nvs8R7VNzcxF/ouHY+JhNXjgcBRUMDV1xtVISr0qv+IuFkQaLWJw2ZKu1RUZ4\nHMHqcFr8cpeB2F2cl8+JJA0yPnIqfKmPKe6aWsQ9YF+LJPv9rkLUnS/S7GKI\nrKvFd0ZzUpOxcZoRCYv+E0PKEnH6PHY6VpbGoh1de/DP5i4rUYhEqdZH5qpY\ng9fzHwqvRyCB/4/JzVcKsH/2YS6Ui/zOOYqbagb8w4e+bN2k7+OGq7ZVUFkU\n6f/FjappwSI+V9+cCjGa/lY/y/qFf0B6991VaP0tnGJ1KsJwwFf2bp21fOD6\nEyqCY8mXMLElTkSaPMmuxzCVhV7bLU1mzyy2W2vqClOgu/L+L707Bvg+C3/2\nWj02pOoUUdk30L5xc9DWovIMx5cXXoHBAdDpXAx8PqF4Z3INkVOOg+aREm1v\n8cjuENB6x1qp8YqkNuJ5DVuT34puQ/TL/CiEIzJ2qZTFZKr4RZtdmYfunYGu\nJef5\r\n=kSBI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBXdFhjZ6tqcPxJgcEPmKDWXiGrUOKMBuzx06D0Rm7xyAiEA4VxeChd7UXx2OUOHXCJO0Nbfcbm1fht9eGyZ/UgWLkQ="}]},"_npmUser":{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"},"directories":{},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/honeycomb_1.1.0-alpha.334_1644315715748_0.8868667988872108"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-02T15:05:27.106Z","1.0.0":"2020-01-02T15:05:27.561Z","modified":"2022-04-04T18:52:18.550Z","1.0.1-alpha.1":"2020-01-03T09:57:50.732Z","1.0.1-alpha.2":"2020-01-16T05:14:14.254Z","1.0.1-alpha.3":"2020-01-16T05:42:14.154Z","1.0.1-alpha.4":"2020-01-17T03:52:56.805Z","1.0.1-alpha.5":"2020-01-17T04:18:13.487Z","1.0.1-alpha.6":"2020-01-17T04:28:59.699Z","1.0.1-alpha.7":"2020-01-17T04:49:24.037Z","1.0.1-alpha.8":"2020-01-17T06:18:15.796Z","1.0.1-alpha.9":"2020-01-17T06:37:13.886Z","1.0.1-alpha.10":"2020-01-17T09:04:23.294Z","1.1.0-alpha.1":"2020-02-25T13:42:54.780Z","1.1.0-alpha.2":"2020-02-26T12:05:41.444Z","1.1.0-alpha.3":"2020-03-02T16:34:37.980Z","1.1.0-alpha.4":"2020-03-03T12:39:31.364Z","1.1.0-alpha.5":"2020-03-03T14:12:40.194Z","1.1.0-alpha.6":"2020-03-03T14:40:23.568Z","1.1.0-alpha.7":"2020-03-04T10:14:22.802Z","1.1.0-alpha.8":"2020-03-11T16:01:53.303Z","1.1.0-alpha.9":"2020-03-11T16:24:45.778Z","1.1.0-alpha.10":"2020-03-11T17:02:41.319Z","1.1.0-alpha.11":"2020-03-13T09:29:01.156Z","1.1.0-alpha.12":"2020-03-13T10:21:04.488Z","1.1.0-alpha.13":"2020-03-24T10:23:31.983Z","1.1.0-alpha.14":"2020-03-31T10:44:35.528Z","1.1.0-alpha.15":"2020-04-01T11:39:47.892Z","1.1.0-alpha.16":"2020-04-08T05:49:31.286Z","1.1.0-alpha.17":"2020-04-08T10:30:59.964Z","1.1.0-alpha.18":"2020-04-08T13:28:10.082Z","1.1.0-alpha.19":"2020-04-16T08:23:14.443Z","1.1.0-alpha.20":"2020-04-21T09:47:14.638Z","1.1.0-alpha.21":"2020-04-24T10:07:19.531Z","1.1.0-alpha.22":"2020-04-24T10:28:01.713Z","1.1.0-alpha.23":"2020-04-28T10:15:02.231Z","1.1.0-alpha.24":"2020-04-28T14:22:35.190Z","1.1.0-alpha.25":"2020-04-29T09:50:21.416Z","1.1.0-alpha.26":"2020-04-29T10:04:14.568Z","1.1.0-alpha.27":"2020-04-29T14:18:39.553Z","1.1.0-alpha.28":"2020-04-29T15:00:38.064Z","1.1.0-alpha.29":"2020-04-30T12:55:45.507Z","1.1.0-alpha.30":"2020-05-04T09:21:04.243Z","1.1.0-alpha.31":"2020-05-07T09:24:00.534Z","1.1.0-alpha.32":"2020-05-07T11:39:36.390Z","1.1.0-alpha.33":"2020-05-07T12:09:30.790Z","1.1.0-alpha.34":"2020-05-08T07:55:34.357Z","1.1.0-alpha.35":"2020-05-08T14:59:58.069Z","1.1.0-alpha.36":"2020-05-11T09:32:41.505Z","1.1.0-alpha.37":"2020-05-11T10:38:51.585Z","1.1.0-alpha.38":"2020-05-22T07:56:37.541Z","1.1.0-alpha.39":"2020-05-25T15:06:18.203Z","1.1.0-alpha.40":"2020-05-26T16:35:39.823Z","1.1.0-alpha.41":"2020-05-26T16:58:18.596Z","1.1.0-alpha.42":"2020-05-27T10:22:36.208Z","1.1.0-alpha.43":"2020-05-29T12:19:05.191Z","1.1.0-alpha.44":"2020-05-29T14:02:36.231Z","1.1.0-alpha.45":"2020-05-29T14:12:50.747Z","1.1.0-alpha.46":"2020-05-29T14:41:28.482Z","1.1.0-alpha.47":"2020-06-03T07:17:59.738Z","1.1.0-alpha.48":"2020-06-03T07:41:09.570Z","1.1.0-alpha.49":"2020-06-03T14:14:39.290Z","1.1.0-alpha.50":"2020-06-03T15:10:19.134Z","1.1.0-alpha.51":"2020-06-03T16:11:52.933Z","1.1.0-alpha.52":"2020-06-04T08:40:25.838Z","1.1.0-alpha.53":"2020-06-04T14:22:18.386Z","1.1.0-alpha.54":"2020-06-04T15:04:05.402Z","1.1.0-alpha.55":"2020-06-05T08:32:46.144Z","1.1.0-alpha.56":"2020-06-05T13:53:28.585Z","1.1.0-alpha.57":"2020-06-08T14:07:54.832Z","1.1.0-alpha.58":"2020-06-09T14:56:53.933Z","1.1.0-alpha.59":"2020-06-09T16:21:43.431Z","1.1.0-alpha.60":"2020-06-10T15:46:52.197Z","1.1.0-alpha.61":"2020-06-10T16:50:22.110Z","1.1.0-alpha.62":"2020-06-11T16:24:59.414Z","1.1.0-alpha.63":"2020-06-11T16:40:42.555Z","1.1.0-alpha.64":"2020-06-15T09:27:04.381Z","1.1.0-alpha.65":"2020-06-15T15:05:14.637Z","1.1.0-alpha.66":"2020-06-16T11:35:06.365Z","1.1.0-alpha.67":"2020-06-16T12:36:40.927Z","1.1.0-alpha.68":"2020-06-17T11:43:05.465Z","1.1.0-alpha.69":"2020-06-17T12:20:58.721Z","1.1.0-alpha.70":"2020-06-17T15:51:56.823Z","1.1.0-alpha.71":"2020-06-18T06:33:51.284Z","1.1.0-alpha.72":"2020-06-18T22:58:46.208Z","1.1.0-alpha.73":"2020-06-19T16:28:13.707Z","1.1.0-alpha.74":"2020-06-22T05:03:10.440Z","1.1.0-alpha.75":"2020-06-22T08:16:26.436Z","1.1.0-alpha.76":"2020-06-22T08:52:07.075Z","1.1.0-alpha.77":"2020-06-22T09:13:41.415Z","1.1.0-alpha.78":"2020-06-22T11:01:27.657Z","1.1.0-alpha.79":"2020-06-22T16:01:48.162Z","1.1.0-alpha.80":"2020-06-22T16:20:12.976Z","1.1.0-alpha.81":"2020-06-22T16:57:49.953Z","1.1.0-alpha.82":"2020-06-23T06:30:18.690Z","1.1.0-alpha.83":"2020-06-23T09:19:07.249Z","1.1.0-alpha.84":"2020-06-24T11:05:41.405Z","1.1.0-alpha.85":"2020-06-26T09:24:50.490Z","1.1.0-alpha.86":"2020-06-26T15:16:24.238Z","1.1.0-alpha.87":"2020-06-29T14:10:22.225Z","1.1.0-alpha.88":"2020-06-29T15:55:15.627Z","1.1.0-alpha.89":"2020-06-30T06:50:54.582Z","1.1.0-alpha.90":"2020-06-30T12:07:33.294Z","1.1.0-alpha.91":"2020-06-30T15:00:08.849Z","1.1.0-alpha.92":"2020-07-06T14:37:47.151Z","1.1.0-alpha.93":"2020-07-06T15:45:33.968Z","1.1.0-alpha.94":"2020-07-07T10:20:59.440Z","1.1.0-alpha.95":"2020-07-07T14:06:39.304Z","1.1.0-alpha.96":"2020-07-07T15:47:40.285Z","1.1.0-alpha.97":"2020-07-08T08:17:41.315Z","1.1.0-alpha.98":"2020-07-13T15:53:02.063Z","1.1.0-alpha.99":"2020-07-14T14:01:03.313Z","1.1.0-alpha.100":"2020-07-14T16:11:36.266Z","1.1.0-alpha.101":"2020-07-15T10:06:47.212Z","1.1.0-alpha.102":"2020-07-16T09:05:01.672Z","1.1.0-alpha.103":"2020-07-16T10:32:38.696Z","1.1.0-alpha.104":"2020-07-16T10:50:01.128Z","1.1.0-alpha.105":"2020-07-17T07:04:35.356Z","1.1.0-alpha.106":"2020-07-20T06:32:26.332Z","1.1.0-alpha.107":"2020-07-21T09:31:32.580Z","1.1.0-alpha.108":"2020-07-21T09:44:16.112Z","1.1.0-alpha.109":"2020-07-22T07:46:03.011Z","1.1.0-alpha.110":"2020-07-22T08:05:56.850Z","1.1.0-alpha.111":"2020-07-22T08:20:16.585Z","1.1.0-alpha.112":"2020-07-22T09:48:19.655Z","1.1.0-alpha.113":"2020-07-22T11:35:08.949Z","1.1.0-alpha.114":"2020-07-22T15:27:04.221Z","1.1.0-alpha.115":"2020-07-22T16:17:56.645Z","1.1.0-alpha.116":"2020-07-23T07:42:16.795Z","1.1.0-alpha.117":"2020-07-23T12:47:48.525Z","1.1.0-alpha.118":"2020-07-24T09:30:38.108Z","1.1.0-alpha.119":"2020-07-24T12:11:56.339Z","1.1.0-alpha.120":"2020-07-27T11:28:09.142Z","1.1.0-alpha.121":"2020-07-27T13:25:28.389Z","1.1.0-alpha.122":"2020-07-28T11:11:06.265Z","1.1.0-alpha.123":"2020-07-29T08:26:01.930Z","1.1.0-alpha.124":"2020-07-29T15:16:17.711Z","1.1.0-alpha.125":"2020-07-30T07:53:41.283Z","1.1.0-alpha.126":"2020-07-31T07:47:20.372Z","1.1.0-alpha.127":"2020-08-04T06:15:02.414Z","1.1.0-alpha.128":"2020-08-04T12:57:50.079Z","1.1.0-alpha.129":"2020-08-04T14:56:41.976Z","1.1.0-alpha.130":"2020-08-05T08:24:43.120Z","1.1.0-alpha.131":"2020-08-05T08:38:01.821Z","1.1.0-alpha.132":"2020-08-07T04:45:02.999Z","1.1.0-alpha.133":"2020-08-07T08:32:55.763Z","1.1.0-alpha.134":"2020-08-10T04:54:48.146Z","1.1.0-alpha.135":"2020-08-10T08:16:20.425Z","1.1.0-alpha.136":"2020-08-12T08:33:25.185Z","1.1.0-alpha.137":"2020-08-12T09:32:35.548Z","1.1.0-alpha.138":"2020-08-12T10:22:05.160Z","1.1.0-alpha.139":"2020-08-14T02:24:25.956Z","1.1.0-alpha.140":"2020-08-14T11:04:39.225Z","1.1.0-alpha.141":"2020-08-15T12:08:39.581Z","1.1.0-alpha.142":"2020-08-15T16:16:43.032Z","1.1.0-alpha.143":"2020-08-17T10:19:10.905Z","1.1.0-alpha.144":"2020-08-18T07:56:38.335Z","1.1.0-alpha.145":"2020-08-18T08:30:47.588Z","1.1.0-alpha.146":"2020-08-18T11:14:27.343Z","1.1.0-alpha.147":"2020-08-19T08:26:27.097Z","1.1.0-alpha.148":"2020-08-20T01:27:53.453Z","1.1.0-alpha.149":"2020-08-20T12:04:51.647Z","1.1.0-alpha.150":"2020-08-21T08:14:20.912Z","1.1.0-alpha.151":"2020-08-26T10:42:22.746Z","1.1.0-alpha.152":"2020-08-27T15:45:37.270Z","1.1.0-alpha.153":"2020-08-28T10:31:39.377Z","1.1.0-alpha.154":"2020-08-31T06:37:56.248Z","1.1.0-alpha.155":"2020-08-31T12:11:51.840Z","1.1.0-alpha.156":"2020-09-01T05:07:17.405Z","1.1.0-alpha.157":"2020-09-01T08:31:41.418Z","1.1.0-alpha.158":"2020-09-01T09:14:41.988Z","1.1.0-alpha.159":"2020-09-02T09:22:12.522Z","1.1.0-alpha.160":"2020-09-03T05:43:45.256Z","1.1.0-alpha.161":"2020-09-03T07:21:38.767Z","1.1.0-alpha.162":"2020-09-03T13:37:22.784Z","1.1.0-alpha.163":"2020-09-04T11:48:16.502Z","1.1.0-alpha.164":"2020-09-09T06:52:39.881Z","1.1.0-alpha.165":"2020-09-10T22:13:42.502Z","1.1.0-alpha.166":"2020-09-11T09:22:03.214Z","1.1.0-alpha.167":"2020-09-14T10:33:24.139Z","1.1.0-alpha.168":"2020-09-14T10:58:49.243Z","1.1.0-alpha.169":"2020-09-15T06:47:47.908Z","1.1.0-alpha.170":"2020-09-18T08:47:24.940Z","1.1.0-alpha.171":"2020-09-27T13:13:08.524Z","1.1.0-alpha.172":"2020-09-28T11:36:17.007Z","1.1.0-alpha.173":"2020-09-29T09:56:42.296Z","1.1.0-alpha.174":"2020-10-01T04:37:46.528Z","1.1.0-alpha.175":"2020-10-01T20:15:59.119Z","1.1.0-alpha.176":"2020-10-05T10:43:53.461Z","1.1.0-alpha.177":"2020-10-12T02:37:03.893Z","1.1.0-alpha.178":"2020-10-12T11:17:03.124Z","1.1.0-alpha.179":"2020-10-12T11:31:04.503Z","1.1.0-alpha.180":"2020-10-13T03:19:44.570Z","1.1.0-alpha.181":"2020-10-19T06:55:45.688Z","1.1.0-alpha.182":"2020-10-19T08:23:12.430Z","1.1.0-alpha.183":"2020-10-20T02:53:29.460Z","1.1.0-alpha.184":"2020-10-21T05:02:04.826Z","1.1.0-alpha.185":"2020-10-21T11:39:49.399Z","1.1.0-alpha.186":"2020-10-22T09:57:36.321Z","1.1.0-alpha.187":"2020-10-22T11:23:23.490Z","1.1.0-alpha.188":"2020-10-22T11:46:36.602Z","1.1.0-alpha.189":"2020-10-25T05:04:06.642Z","1.1.0-alpha.190":"2020-10-27T02:15:32.493Z","1.1.0-alpha.191":"2020-10-27T03:04:49.146Z","1.1.0-alpha.192":"2020-10-27T07:34:20.254Z","1.1.0-alpha.193":"2020-10-29T07:09:22.792Z","1.1.0-alpha.194":"2020-11-02T02:55:44.279Z","1.1.0-alpha.195":"2020-11-02T03:37:55.434Z","1.1.0-alpha.196":"2020-11-04T08:04:06.427Z","1.1.0-alpha.197":"2020-11-04T08:49:31.843Z","1.1.0-alpha.198":"2020-11-04T23:16:20.219Z","1.1.0-alpha.199":"2020-11-05T03:05:48.611Z","1.1.0-alpha.200":"2020-11-06T09:27:58.499Z","1.1.0-alpha.201":"2020-11-10T03:12:23.339Z","1.1.0-alpha.202":"2020-11-10T04:12:52.615Z","1.1.0-alpha.203":"2020-11-11T00:57:02.502Z","1.1.0-alpha.204":"2020-11-11T10:00:52.088Z","1.1.0-alpha.205":"2020-11-11T11:58:42.468Z","1.1.0-alpha.206":"2020-11-12T01:41:35.449Z","1.1.0-alpha.207":"2020-11-17T03:24:11.073Z","1.1.0-alpha.208":"2020-11-18T05:32:05.143Z","1.1.0-alpha.209":"2020-11-18T09:45:00.582Z","1.1.0-alpha.210":"2020-11-18T10:32:11.449Z","1.1.0-alpha.211":"2020-11-20T02:05:18.850Z","1.1.0-alpha.212":"2020-11-20T03:41:14.007Z","1.1.0-alpha.213":"2020-11-23T08:53:40.639Z","1.1.0-alpha.214":"2020-11-24T00:58:43.044Z","1.1.0-alpha.215":"2020-11-24T02:42:22.562Z","1.1.0-alpha.216":"2020-11-25T07:08:33.723Z","1.1.0-alpha.217":"2020-11-25T07:28:20.850Z","1.1.0-alpha.218":"2020-11-25T10:53:02.161Z","1.1.0-alpha.219":"2020-11-26T02:08:48.605Z","1.1.0-alpha.220":"2020-11-26T02:37:14.228Z","1.1.0-alpha.221":"2020-11-26T10:33:08.526Z","1.1.0-alpha.222":"2020-12-01T04:12:44.242Z","1.1.0-alpha.223":"2020-12-02T02:37:37.541Z","1.1.0-alpha.224":"2020-12-04T08:28:09.919Z","1.1.0-alpha.225":"2020-12-04T09:04:59.150Z","1.1.0-alpha.226":"2020-12-07T02:59:06.999Z","1.1.0-alpha.227":"2020-12-09T06:46:23.242Z","1.1.0-alpha.228":"2020-12-09T09:58:56.697Z","1.1.0-alpha.229":"2020-12-12T01:35:42.844Z","1.1.0-alpha.230":"2020-12-14T09:26:25.732Z","1.1.0-alpha.231":"2020-12-15T01:45:23.131Z","1.1.0-alpha.232":"2020-12-15T08:40:22.026Z","1.1.0-alpha.233":"2020-12-18T00:58:59.425Z","1.1.0-alpha.234":"2020-12-21T11:36:08.352Z","1.1.0-alpha.235":"2020-12-23T10:12:58.335Z","1.1.0-alpha.236":"2021-01-05T06:59:45.383Z","1.1.0-alpha.237":"2021-01-06T11:00:02.571Z","1.1.0-alpha.238":"2021-01-07T03:41:28.963Z","1.1.0-alpha.239":"2021-01-07T05:26:34.843Z","1.1.0-alpha.240":"2021-01-07T07:11:15.824Z","1.1.0-alpha.241":"2021-01-12T11:02:33.634Z","1.1.0-alpha.242":"2021-01-21T11:52:18.331Z","1.1.0-alpha.243":"2021-02-03T09:01:18.100Z","1.1.0-alpha.244":"2021-02-09T04:45:32.009Z","1.1.0-alpha.245":"2021-02-10T13:21:38.515Z","1.1.0-alpha.246":"2021-02-11T11:52:14.936Z","1.1.0-alpha.247":"2021-02-11T12:36:26.446Z","1.1.0-alpha.248":"2021-02-11T14:05:29.529Z","1.1.0-alpha.249":"2021-02-11T14:51:03.826Z","1.1.0-alpha.250":"2021-02-15T04:50:32.937Z","1.1.0-alpha.251":"2021-02-15T11:43:11.143Z","1.1.0-alpha.252":"2021-02-15T12:40:46.827Z","1.1.0-alpha.253":"2021-02-15T13:32:36.918Z","1.1.0-alpha.254":"2021-02-15T14:00:11.737Z","1.1.0-alpha.255":"2021-02-16T08:08:05.732Z","1.1.0-alpha.256":"2021-02-16T09:24:20.282Z","1.1.0-alpha.257":"2021-02-18T07:48:52.212Z","1.1.0-alpha.258":"2021-02-18T11:50:13.074Z","1.1.0-alpha.259":"2021-02-19T07:57:28.460Z","1.1.0-alpha.260":"2021-02-19T09:35:31.981Z","1.1.0-alpha.261":"2021-02-19T10:40:31.621Z","1.1.0-alpha.262":"2021-02-22T03:24:24.882Z","1.1.0-alpha.263":"2021-02-22T10:01:03.265Z","1.1.0-alpha.264":"2021-02-22T12:24:43.203Z","1.1.0-alpha.265":"2021-02-23T03:31:08.630Z","1.1.0-alpha.266":"2021-02-26T02:57:22.206Z","1.1.0-alpha.267":"2021-03-04T10:48:30.732Z","1.1.0-alpha.268":"2021-03-10T01:52:56.432Z","1.1.0-alpha.269":"2021-03-10T02:37:36.490Z","1.1.0-alpha.270":"2021-03-10T12:56:58.400Z","1.1.0-alpha.271":"2021-03-12T08:16:33.544Z","1.1.0-alpha.272":"2021-03-12T10:09:42.041Z","1.1.0-alpha.273":"2021-03-16T07:03:16.378Z","1.1.0-alpha.274":"2021-03-17T11:57:44.730Z","1.1.0-alpha.275":"2021-03-18T05:45:18.458Z","1.1.0-alpha.276":"2021-03-19T08:55:40.346Z","1.1.0-alpha.277":"2021-03-29T09:56:45.109Z","1.1.0-alpha.278":"2021-03-30T05:58:18.154Z","1.1.0-alpha.279":"2021-04-01T09:07:54.090Z","1.1.0-alpha.280":"2021-04-09T11:05:19.015Z","1.1.0-alpha.281":"2021-04-20T05:35:25.763Z","1.1.0-alpha.282":"2021-04-20T05:59:26.087Z","1.1.0-alpha.283":"2021-04-21T06:17:28.574Z","1.1.0-alpha.284":"2021-04-23T03:07:03.208Z","1.1.0-alpha.285":"2021-04-28T12:07:40.714Z","1.1.0-alpha.286":"2021-05-05T12:32:09.373Z","1.1.0-alpha.287":"2021-05-06T07:42:51.726Z","1.1.0-alpha.288":"2021-05-06T09:24:06.450Z","1.1.0-alpha.289":"2021-05-13T06:42:40.182Z","1.1.0-alpha.290":"2021-05-14T08:38:57.990Z","1.1.0-alpha.291":"2021-05-19T08:09:03.208Z","1.1.0-alpha.292":"2021-05-26T10:30:52.730Z","1.1.0-alpha.293":"2021-05-30T09:41:01.954Z","1.1.0-alpha.294":"2021-06-01T08:13:52.908Z","1.1.0-alpha.295":"2021-06-11T07:06:49.585Z","1.1.0-alpha.296":"2021-06-15T06:27:24.148Z","1.1.0-alpha.297":"2021-06-15T10:51:20.083Z","1.1.0-alpha.298":"2021-06-24T09:49:24.210Z","1.1.0-alpha.299":"2021-07-05T06:21:20.452Z","1.1.0-alpha.300":"2021-07-06T02:51:22.253Z","1.1.0-alpha.301":"2021-07-06T07:05:34.863Z","1.1.0-alpha.302":"2021-07-12T07:35:49.238Z","1.1.0-alpha.303":"2021-07-12T13:58:53.640Z","1.1.0-alpha.304":"2021-07-19T11:03:51.548Z","1.1.0-alpha.305":"2021-07-21T04:29:23.225Z","1.1.0-alpha.306":"2021-07-26T10:10:59.756Z","1.1.0-alpha.307":"2021-07-26T11:49:32.007Z","1.1.0-alpha.308":"2021-07-26T13:11:38.908Z","1.1.0-alpha.309":"2021-07-27T05:28:44.839Z","1.1.0-alpha.310":"2021-07-30T09:18:41.676Z","1.1.0-alpha.311":"2021-07-31T08:54:42.518Z","1.1.0-alpha.312":"2021-08-16T12:28:10.483Z","1.1.0-alpha.313":"2021-08-16T13:14:50.775Z","1.1.0-alpha.314":"2021-08-20T11:56:30.269Z","1.1.0-alpha.315":"2021-08-26T05:30:16.434Z","1.1.0-alpha.316":"2021-08-26T06:37:17.460Z","1.1.0-alpha.317":"2021-08-27T09:16:28.724Z","1.1.0-alpha.318":"2021-09-03T11:49:20.701Z","1.1.0-alpha.319":"2021-09-22T12:30:42.110Z","1.1.0-alpha.320":"2021-10-14T07:43:22.155Z","1.1.0-alpha.321":"2021-10-14T08:05:40.101Z","1.1.0-alpha.322":"2021-10-28T03:23:27.539Z","1.1.0-alpha.323":"2021-11-15T09:30:30.309Z","1.1.0-alpha.324":"2021-11-18T10:34:31.502Z","1.1.0-alpha.325":"2021-11-22T10:04:26.828Z","1.1.0-alpha.326":"2021-11-22T11:14:17.401Z","1.1.0-alpha.327":"2021-11-30T07:56:32.921Z","1.1.0-alpha.328":"2021-12-03T10:26:32.922Z","1.1.0-alpha.329":"2021-12-06T06:18:35.538Z","1.1.0-alpha.330":"2021-12-08T12:10:08.646Z","1.1.0-alpha.331":"2021-12-09T11:40:41.354Z","1.1.0-alpha.332":"2021-12-29T11:03:10.234Z","1.1.0-alpha.333":"2021-12-29T12:28:31.328Z","1.1.0-alpha.334":"2022-02-08T10:21:56.094Z"},"maintainers":[{"name":"binance-chain-npm","email":"bit-fe-ci@binance.com"}],"description":"<p align=\"center\"><img src=\"docs/logo.svg\" alt=\"Honeycomb\" /></p>","license":"MIT","readme":"","readmeFilename":""}