{"_id":"@crave/farmblocks-modal","_rev":"204-cfa57dfd860c7226371b5c2f84683dbe","name":"@crave/farmblocks-modal","dist-tags":{"canary":"4.2.9-alpha-test-rr-6245.1.0","latest":"4.2.9"},"versions":{"0.1.1-alpha-modal-4596.1.92":{"name":"@crave/farmblocks-modal","version":"0.1.1-alpha-modal-4596.1.92","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.5","@crave/farmblocks-empty-state":"^3.3.0","@crave/farmblocks-link":"^4.2.3-alpha-modal-4596.1.92+2777f90b","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"2777f90b6ef71a83e6a426b6adccae7819148ac9","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@0.1.1-alpha-modal-4596.1.92","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-yIOAtvl3jyenfe1kT5wig4S+KLorOn0QDfS4ZEEe7SoN7NQYKgrtx7eRuBZ6QGIulGXD5J2FRJEbFLqzAfjHAw==","shasum":"4fe66f73b02f6be28e52edaef5a02732bd7ad5da","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.1.1-alpha-modal-4596.1.92.tgz","fileCount":9,"unpackedSize":16360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7ZTNCRA9TVsSAnZWagAAPUsP/0/wXBhMLjAZ3n9O93A7\ndNA9BmAY3H9KLYufxuqKnHDDWLwuBQzJ2ad4ChvxXfHQDfRtwcHTooVH+Fbc\nBGNo7mFzosrerQqFiYShUfXZIH25C23r8H3vmiMa6Mb1dnSXbK9Zlkqwfh3k\n6aaAHpaNr9YnWEVYFCH1mO8Bnxd8Ey5bu1RLD23u41QUOD7PAn6//v5rZZJu\n9uyQgGYrOegdelUCXFSTlQZo08sQsTi6PEHk4MIFn1IlVyMQgkJPIabyoc1k\nfJsNCxwoiXQYWvrxtlxXBs58HCFgECUodzYeQ+YuMEXB4Rjja/n2A1bRLBsh\ngr7vvOtE8szMgcXIB5+6GGd75KNjkZa4kMJwvs56s+v23m3yHjDqVXW7VU1k\nByFWtEVEBlqLNkGe8z92NnDdMtXN3kYNsCL8r+Ga3bz7wQ+BLjRVKJJoCCBX\nPZ9qBb8Ktk6gboOdOGh4DYfVHpoEynogccR16+mMtYRqpY1/nALT9o3ktdiN\nTg4hH/amdbdiWKtuJ5NGxbbF3/3u3Cx1RVcp0U+is2siNcy+jdQgEy6CbHD0\nkKSG7f39J0zKLGxILiWzfHUyfFKD70E3y4CsYoocIYyhsqx9LZTqw2JkkIW4\nwfn5UjbmHyBjnNo2wWRJB+eM68oi+WueqiZjnEdU2lKwXSi9X3EgV9XJB6Jb\njTF2\r\n=3viF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFN6A9FtXic+HPQBFhYv6YZ/K9r1ISxS85dH/SdbB3xAIgcvi6w19/YMcNUoTHdja5NwwKdYZXVSF7zMuMe3e/ORA="}]},"maintainers":[{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.1.1-alpha-modal-4596.1.92_1559073996987_0.5264826113531496"},"_hasShrinkwrap":false},"0.1.1-alpha-modal-4600.1.90":{"name":"@crave/farmblocks-modal","version":"0.1.1-alpha-modal-4600.1.90","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.5","@crave/farmblocks-empty-state":"^3.3.0","@crave/farmblocks-link":"^4.2.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"308368ee849cbfc94bc4a2d9df673c964b1c48dc","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close button are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close button.\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close button, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\n() => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\n() => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.1.1-alpha-modal-4600.1.90","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-IIioH5gEgxf2x2uONQ1/YlICpaPfs7YT0lEQehhaT7ReplzevJEQmECuCdRyyZ/hWy2sva//jUSucIVztjxmgQ==","shasum":"fe04f6fff38246ec200bbd6d354593a94266b297","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.1.1-alpha-modal-4600.1.90.tgz","fileCount":9,"unpackedSize":20562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7pkICRA9TVsSAnZWagAAKbcQAIog4W4+pjWv0iOgLJTz\nvMr8gjrybhtPQkvhtZ9hFP0w1CstUXO+cCYWx3+6Rw7zSbZh7pGkmkOFpmRG\nWShANZTicEdgtjRVeTty9FekUZ+M5EN6u+GO/9k37HA+tn0gtmLB+rOVK/+R\nch/IL4yty/Or2CfAOpxwT9Lg5WKSLiIVmB3hkukzV+kpXT6HgRj6EZfBl/Xr\nRSCnWA4pGkyRcuKjWga0au1I4XKrrAkT4j2/4IRFqrQjAbYBWokpIu60e4fz\ntZOrb84zJsIHnEklogXrqEvIAtzVvPScKI3hbZQJ+2TzLKDpjoI5aO/eS9P7\nyk/0eCJT2E4kK1UGg8CWE/OvNBBj1axf59cVTzpeTL4WFp1N+dflTYd+MYdw\nPvegf7TIbgHHLYEQzEXZIuwlxIyYFRMEn+oXa/CC2VNwro09q/E0Ka6EhhsJ\n8XoDuYOqTz6GqfCMk1O8SV7ufTdozCBJrW8RPzIAetxTsAmeLwYLpSx0vBcs\nRxPePUGn03AK8DbX0SgdQYfqZe9Ii58V7tmsf/lFbULK6SIb+t4a3dCoHU4K\n6cjNO0dAx78RQ6tTJbirP/sqN5aGRJzcKoyQDXNbUqhC2UrtAR5L1aBGCqzu\nYjF5xpoEXs2paxIBA4t8d9IL4p6e4nvjl4AlB03zi85tJCNfO58DbnfrBLwM\n4p0n\r\n=F8GM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBFR1KQdHm/1DExJgm3mm3LRMfAesKMZqFoHjaL7HsoaAiEAkR++e7QozIAp+gbj5KPD/yV/b93NQnibbeHZELYEkuU="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.1.1-alpha-modal-4600.1.90_1559140615926_0.5556229864959539"},"_hasShrinkwrap":false},"0.1.1-alpha-modal-4605.1.88":{"name":"@crave/farmblocks-modal","version":"0.1.1-alpha-modal-4605.1.88","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.5","@crave/farmblocks-empty-state":"^3.3.0","@crave/farmblocks-link":"^4.2.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"d9054bfb655b9911b8ace0fbc013ead5004cc193","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close button are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close button.\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close button, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\n() => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\n() => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.1.1-alpha-modal-4605.1.88","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-JlGh8jdz8WNwTKpzlFW427d5bTnY9dWQ+mXjEYa9HQSjxZL700+25oYXqIDl1woIlyqmM9OhT4NbMVlFRxfyUg==","shasum":"892d0816922a50d18a640d16f1c70dbd642d3ce7","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.1.1-alpha-modal-4605.1.88.tgz","fileCount":9,"unpackedSize":20683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7sCKCRA9TVsSAnZWagAAQEYP/jlMWMrIs23pMvUFkz8s\nm4uImoNoNaFVfsCvQMIe78WHUNYuwnQhxWezMQCMNk5cEtj7S9T6M+yvK5yx\nXERIqFlelSaYeHCOWog1arhQQLhTO8LEloMXhQAJ4TswBPRtKS+dvktehZwM\nFfKBqvSMdtIza9dm2gGhFhAE9r0bTVTnsGzOQ2DHYpWucOwFuoMr+DF5OiG4\nrbhqFs/c34eN2tXBS0YHFvMILSU8EUONVSpGpgFfnKVOb0QY2i06CCGiwbku\nvowuTghkXClw6m1+hZi+aVvMf9a21A7d82r3r0Ts6RQWh9zbmLDb2Fq/G1KO\nKrtTjlICY8HAG13tICi+7A3F6SogH4tNy5Sf2iw7d7JYDo/Ghm04FwJBfclk\ns0PH/FQV85sp+I4MHpueTVSuAXdXEo21WCg6Qejq+Lw0Ls7durI9gpsgrhc4\nMUkz0RbaweiJERPiQReJ08Wmahp5vZCnehX9LPquUGBJmiZWaIYaYwJXtN9M\n7rW1V/zj/WT3Yt6Tyzg1ZcHFB828WCIc4haH97nLhYqVBHBBaTq4nf69XkzU\np2xFt/IvyEQc+3/ZLuy5fzDp6oZXCne2e9aSIRVYGZgmuWhRM1hQb2oerLwf\nY4no4ZMTF5ojln4/8wqP3jDTRI5dFPK/jxH7MGbF5kfubn+s7b7EOrbXlJGz\nolpN\r\n=SLBB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDTstLK5TKxgK6A84UHuwVnB/HeY5hOIFQymoBWQg74AiB8KWPzfXXTZpGb6Vs3SthCAdsN+Mgp2Hy9/WiqU2zoHA=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.1.1-alpha-modal-4605.1.88_1559150730353_0.05509580326357133"},"_hasShrinkwrap":false},"0.1.1-alpha-modal-4607.1.86":{"name":"@crave/farmblocks-modal","version":"0.1.1-alpha-modal-4607.1.86","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.5","@crave/farmblocks-empty-state":"^3.3.0","@crave/farmblocks-link":"^4.2.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"415fdd85da59da7080be9f0288b76fcae29ac146","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close button are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close button.\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close button, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\n() => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\n() => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.1.1-alpha-modal-4607.1.86","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-oL4Fr/bQh7vkBs4K+Imqmk1kd1aBtE192VNUpPVsnzgY5WNUHCWcA9cbx++IY231r8E2TQPA3Ba94wzucM+nHw==","shasum":"836ddec4ecc1b65db9007e45d21252d07e6c5744","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.1.1-alpha-modal-4607.1.86.tgz","fileCount":9,"unpackedSize":20863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7tI2CRA9TVsSAnZWagAAkmkP/3ftVBoMyjkqW1ggo/QP\nFXxTBwlUthwjP3t6geBt//CsDARGynYP1kLxYNpvFloUOF+l6RlfgyHjxVTH\nsHEkqKwjKHZlZgOj12Egq8akdr0O68dqMc5Xn/v3vcrBD4VBxbubmJlmajAS\n8ZRB23SOrmjnTvpdn4NA4xe5cEihtHDZ64TWpRmFRDsjP8hTdxIPHUtwz10p\nVz5K8XN8RXb1vrZ0c7a/+gZFiI/7RpbKBBienb0BhD4FL/u0S4CQiume2KMn\nDPytVOPlaXmw5T65GOX2RYrozkLV8m+mHvvvKZZ1gLqfE4SUgErJWTcimvxt\ncy+A8cnGg6PRS35bAacI5EDZSD2Mdmw5hi93UG7uw+vy0QUG8IDw6IKn83FI\nIfvhSqFD5HwQKSYCa9nPgLxztZxMQs+a03TMf39Ocy9KRghrZrEYWPb5rxSM\nXkPfyBdBZKdO2Xseyto75Iz/laE6Mf0rD6W6Y0ofcGmEUUQBB01SJ1jMRFIK\n+9avE8PXNPc5pcUIeUDRAfOl9td2jmwJDH++Crq7g1XEOgToYq9lxDIU4qzZ\n5nJ46kboncLN9yAlu/UNYFDKtWBZ94WYBkB/8la+cW/z0RMXHG8WEWdsL/TZ\nBlVg5knOC4X1IYnzqURx2ZS5YHadj5JQB8eTgTIr7FBLL5FkACCi0ByFuY8g\nUf8V\r\n=Xr7Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZA8KA0otWsprWQAz5fRo274PVhk5KalT16AD+QXY3twIgShkqxXb9cvl+8dHGN8odrDnAazliAJXPP1Z/ppUAOts="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.1.1-alpha-modal-4607.1.86_1559155253731_0.23298334636632645"},"_hasShrinkwrap":false},"0.1.1-alpha-modal-4609.1.86":{"name":"@crave/farmblocks-modal","version":"0.1.1-alpha-modal-4609.1.86","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.5","@crave/farmblocks-empty-state":"^3.3.0","@crave/farmblocks-link":"^4.2.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"09100056583f18a9ed607b4b285b3c1772142ea3","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close button are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close button.\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close button, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.1.1-alpha-modal-4609.1.86","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-6dEjL8T97Fd/u2N1oZsoCKnnr9/Y0QcXEVAEuNs5K1SXLu+sP6Tu1aZZ033bveq24RBZamnY3PiPQJkf6ezI6A==","shasum":"3f12e0b9def06e314c18217ec892c0fc70ea8e47","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.1.1-alpha-modal-4609.1.86.tgz","fileCount":9,"unpackedSize":20895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7tJeCRA9TVsSAnZWagAAvIoQAI6qPiyii+HWf72WwhRh\nCSQZecIJ3iHiiKR9nhAOnCWcKqdHvrl2kTulJ8XySzyahYOk/2VvQa91kIDn\nGVYPgZwxFVXN/KAHqvjrXnd4ITbWpMd8uoihiM8A0BiQHop+xxX5mVBz+b07\njAI+wkzp+yBM//Vn2irSlBHK6GZ0bjeEGrK6o5H9Yjy0d72IUEVqvtcMqGDI\ncVoDzx/Hn7dus3g/+A3/qLWq/Y3SJiardZas5LM00uSpJA6rr+Dt11l4vMpR\nppnHMUgUhM2XjxJ0bQr3EkKdekCBs67HQfJX+zqoY4/uRyO7NYxrOylCrMSn\nlJ4JkxZeYGnIiynp8mVOxESTxOc6lavg0NEKgcPPy+0D0jO8Gevg5iKA4IVE\nHSQklwrZmLuvzY738EP/mjyG/Zhn466r+dHH0VkNVz+GtZwYKdptRO7HkFkN\n+VRM1EswzqBb4LsDYdbABuqXJ3Xj6EV4UjtWcDobF8A2INpKtbJcg+PX64FC\nuffqcEsCjZ1mZShfavKz0hga0t5ubdwUTNEmZiFosN9KuDxV/Ycn1P3/4uoh\nEQdL1TUnzeDeZz/0SYXS/kYaDvXgQ41qHQ95Upngo0lC84Lh3c6t7tPvGGwf\ncNIYhELFrQPfsNVZmbP+wGowCvQ/SlKPgOF6A3ra0asd/oSn1Wgv9B9voqul\nVp5T\r\n=Obol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE4i+6Xb7bylAnfFftJ0tScloaHMMl0ws1APwYVcjZ7/AiAJCcD88w9LmazOeydQLJ6lwDuDaWdBHspW86mssVc7lA=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.1.1-alpha-modal-4609.1.86_1559155293812_0.22191784141314463"},"_hasShrinkwrap":false},"0.1.1-alpha-modal-4623.1.74":{"name":"@crave/farmblocks-modal","version":"0.1.1-alpha-modal-4623.1.74","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.5","@crave/farmblocks-empty-state":"^3.3.0","@crave/farmblocks-link":"^4.2.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"6fb92ff73a19fc4cf0b4f637735672932d2f7fd6","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close button are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close button.\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close button, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.1.1-alpha-modal-4623.1.74","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-MpF4gUI1etn4vBAurkFpxy1JMXHoZ9JoTDaXwk0a4mshWignwWjHj9w9KZaFEVT2w27RpFMzhGXDIuHhqihu8A==","shasum":"a92ba1dfef261cc9249decc61a4d373c8d588dbb","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.1.1-alpha-modal-4623.1.74.tgz","fileCount":10,"unpackedSize":22404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8DjiCRA9TVsSAnZWagAAsWIP/3atDs12HDTUvGRvSZUz\nXe1C0mCVHGs724scBqr9tVHQEaSeOOyghw438MuLRmsbmXvs/fv4CnLB0nmE\ntDV/nEehEqD/VcDE98WQ3DAskQGPrUB4hZwA4ZLt9cbG/mqcYLYtglSsOE6e\njv/Eyd7DG3qWL9PBZybYvAnCitURUxNrXWf23be3bMnONlV36j0ZBhjxWiqn\n7sEkCTaA0uV34ztq7LMultnDgVgdMvsxWwZnFq9CLpjAu+e5IY5df8JKd4kE\np35Lrn61FGKtlH/dIJ5GYEpCUR3jTn+jpOncM27uFJeFN0aB4xhbkDLG9+xm\nx9pA/fvO5z5JK9Mf99W4SFG2RUPBhascKfrZgn/KwJkwGT9QPJM9ydXiiTHg\njYP8vlOHLZaPu7XlOzPHZjjQ8t7QqQbmMaDR2FRJLCh14tjdtvUaktuLS1G5\nJbMeq1L7/1cDC9StqG+2mXnqQuDcjz3xBtYipSJqi64nZbglz3N23F8f6meC\n6kAOHMZV37kA+CcZzrB+trTSUZO+3T6UR3cRgra0nDrvUsnZ86344FlExQyK\naAd8GByojdH/zTS9Jcx8psA9xLEC5X8aRYCYK+sCX7VGxAxAbuDm2bsdAqaB\n8JntiJMvcFvSJ4MhcGNI1wU8EkjG9+o+8qPDFazzaWib//jNrJ81iJ5UVNdL\nCOy2\r\n=1rrT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+8708qU8KfohlbnadONMBug2z0aOsITwvYm+XZT71OAIhAJIQtRwHM6mFesFREV5WGfYAhue1kxC2B224yBgmVGyk"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.1.1-alpha-modal-4623.1.74_1559247073543_0.6620610131620515"},"_hasShrinkwrap":false},"0.1.1-alpha-modal-4625.1.69":{"name":"@crave/farmblocks-modal","version":"0.1.1-alpha-modal-4625.1.69","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.5","@crave/farmblocks-empty-state":"^3.3.0","@crave/farmblocks-link":"^4.2.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"985d17713c9ce49d48b9af8bb21a903240a621ea","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.1.1-alpha-modal-4625.1.69","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-jiJqbr177dRVcgWYqWmBAlB4vUDXWCACnpOfylfVn25Tep0O/XSN07usYIiGUvMTNbIiPX3am/hqL63QEk7gHg==","shasum":"e07ad83677b8e10035e107b7da72e7dd6159ecec","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.1.1-alpha-modal-4625.1.69.tgz","fileCount":10,"unpackedSize":22380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8SYpCRA9TVsSAnZWagAAWlEQAILbSy+fJ1F9HIkETgd/\nI0S0MLsDnW0b009ZGLKjxCoM3mFnZG2aYyPNTvD3c6MtcMekGgPWDLLRXDbr\nBeMwjQs/6YMiKXA8sa13fBzSKfVix5SbUuaRHGx5S0Aux77lRfvMmII1t+sv\nnA/maua393yZdtAB7LP1hMNa2BHPz6t7KVo/v2FqpSrKIyGCdow1Hyl/A1qH\nUisymyknGJXlmvXQIm6rPGNnfCYLLw7wfHdkQ2C3BNVxbxhWaiTCRWUi0sFr\ntDhkms1+wyghqdDnkyMY4Sm6RwD+wtTT5RHei4ov5+p1T6R/kRP0kiMlVodr\nhZTW+wCvkZDCC5fGeuXWseLdSWOK+36Jc15mGm/8TMHvQaftntLkSQF22vN3\nfzBOjJYN+x5xwyTMVW4Gb+qRw0ULlPvRXpLYNrECOVBnik3krj/yZxxJOLyM\nw7hibs8+hLIJyUl32LNvjTUz1c4tP1yx/mhWe980lrcaKTUmbv41lyE/j1my\n2HwdBlq9gdaOVaYLyvXThNqq2+gw5urke2K3SAKMVXkLUal+73g0g0tIRQMv\nlnDEn83xbXOpfju8Mf8aN8gfM4Iuv9eIODg5AZX7SYX86GWxLXK/WiJf/kpS\n5NTK0T6kuXpFDsO7l66n3KrtcaJbSyp/3G2W3I8fSrvtRiUnwKDgOkYH+cFz\nW+u3\r\n=wVim\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDw5k9IlKb/uD0itwvZDwH9uHHIdN3eU0FVm9SqLktXngIgMiTp+6eEAgFTTZXeSNQ3HmRCo7ST8BfqCdiXSn8W3w8="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.1.1-alpha-modal-4625.1.69_1559307816671_0.9238868848985815"},"_hasShrinkwrap":false},"0.1.1-alpha-modal-4627.1.79":{"name":"@crave/farmblocks-modal","version":"0.1.1-alpha-modal-4627.1.79","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.5","@crave/farmblocks-empty-state":"^3.3.0","@crave/farmblocks-link":"^4.2.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"ce06da042598872ade2fcc9ccf85731f206bef54","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.1.1-alpha-modal-4627.1.79","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-zfTVNSOqie15eHSQndyY6D7fkD3sKVNgRR+oJrbAr95qMgowX0kJxPO/AA7iN1t2FW6kTbXaydaWYyI6UVVI4w==","shasum":"fe4eb652ff9a14f67366159f26a1c0fb69304d32","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.1.1-alpha-modal-4627.1.79.tgz","fileCount":10,"unpackedSize":22380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8SdqCRA9TVsSAnZWagAAN7EP/1IE/MYNPAp0ClS33Zq3\nbfiFlTrOQG614EirnN9v4dwxNW3ovaCVlG0g6auiluiRKGygxSmBmDqkm6eK\nbNJZCZYGHI7P0cZ0cjXyGmtgIPYQRVGvP0FML+xWWADHqnUJbJ1WXLCxC1tS\n6vbQdSzIss3TgmsdQi0Jo/wUISqpW+GdW0mje6XP+XRcLnv2jQaKhKGjdymR\n3ykilzLu4xohRXvFPKY2pLhBlZgaC0xCfuOSFjnpzbWaiRZAtgZkSYKDckEK\nCOYpdMD9egyidJYMNOCIlo7rvTF1kIND86xgXIDOPcpisadmFunrspMr8RCB\ngcrlDKrEF9HIuKFHTG4GlvooHNSKj1MRQO85E/gBVvlSiuJaHPrM5rDX8esQ\ngfqtesZdEk/RDWGirFgwYSzYgiaSANXRf/i07wFLKv4QE2+a44SW3pZAe5db\nOAymdrK7K+dZ8y367KfGXNj2huvgCuHBqw9pR9Fr8tyj4YGtGozqwZBTG87B\nJaDnqE53LmT8dCxQGMhBBUiMliU61Z8oMkJyuaXr+/Te116LD+wKH8k+GtZ8\npwSggsC8Fn7KOo0OlR+DOjhQVZ6xptj5obBnubMxEd5DeRpBFPJCKyWgCxu8\n+OG9ZJE/gmzy4930iv7NAzYC5WLPHQ8lbl9bWoB8i8hjzkNPyws5pyRZdz0q\nDund\r\n=ZEgZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/bdA+nSfGy00CzKBxbQ0DPdApHqEYF9RxGx/wLMdrjAiEAuzNRLLd/s0K+x5i54aYk7qD1I/ArwHBOBBL0IecrC90="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.1.1-alpha-modal-4627.1.79_1559308138103_0.5736575742676437"},"_hasShrinkwrap":false},"0.2.0":{"name":"@crave/farmblocks-modal","version":"0.2.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.5","@crave/farmblocks-empty-state":"^3.3.0","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"1998fbc0e41c0802783bdb74b7bb6f6cd9af76f5","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@0.2.0","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-DVSuXHqk8+SBtPy5lDetsNnlurdmVG04j4+emaXJ8ASWJ7QJhdcbIHuW1iv1sfIodXS2nSzXho6WWA14/xsfrA==","shasum":"f83af6b6a204a5bf01ff19c6647ea3f0aab7d0c6","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.2.0.tgz","fileCount":11,"unpackedSize":24451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8TANCRA9TVsSAnZWagAAjdAP+wcAf+JWCCcvTOwRdJ5V\npmAQ3k3eZwFARfOSJLjnsjBNbyJoSWoh+FJVzII8hcf7R3tZufOxixwuOCFp\nr69hDDZNoZ3ibVEmmMjHU3gWg6mkYT2PV55ODAgxQOv1QbhhbocIDBFhLZ0k\nd0GxKdenoMx6bBj3IuxHG6hOS/g48M4+zos+E3je6GoI1OSjQ1sbih4BbucV\n8cGf11VJc7FZ9DapRvv3ada95QTzQNb8p4h6Uvqr/QEu3fMvEg1zwvSiaar4\njm7dd2Cr2JLF46FPd4Zex6AZvpTMwFB7/780ri5R4qrrZc7/l13ZZH/Wf3qR\nqQgrGxt/Hr2sW5/oGLsNuIad/uDvYE83rWntyOzb55pzyQBwrEBLRiG+0SmZ\nKH65z06EPVAStm6xGRnlcdJ4tIdfAa1IYFAaYnK5obwoCPpcMuQHc0L6MIFg\ntp2abZu+iuNBqC+12NeGxBEeSA6Y1vs6b4l+GWX3gk0t9XC2V06nBO9yG4df\nKYpHFGfcv5jdevtr8tbbVcLmz9eD+TBALeilrYwWZ5Iub/Ss1Ieg3IlNMEoF\nIKq2lkZuuYVq3EO6v05sgQpHrtR+/ANoZaId8c69hgvprIMQtjDAvz9LpP9V\n8NIh/jzao8QADuHi4ta7hbV/TErxFtzYc6umdLbvKpik8UjHLp8Jo0BxhgXf\nA0Me\r\n=PK73\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGgsL/yr+vbH2QO7RYtNLK0oEsSZFtBFunLmJgIV7UJRAiAGaKOoHzKP7LcMDfkvsLFMXZ3fktYl1T9IkDnQIT5JFQ=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.2.0_1559310349158_0.6665591491319902"},"_hasShrinkwrap":false},"0.2.1-alpha-modal-tweaks-4662.1.6":{"name":"@crave/farmblocks-modal","version":"0.2.1-alpha-modal-tweaks-4662.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.6-alpha-modal-tweaks-4662.1.12+cd48bb4f","@crave/farmblocks-empty-state":"^3.3.1-alpha-modal-tweaks-4662.1.12+cd48bb4f","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"cd48bb4fef90ee64e73d62d2aff7a9400171efe6","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.2.1-alpha-modal-tweaks-4662.1.6","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-ZfNduI6bEBwgdV8BRVzyIBcZrJpTC2ZfvZ+rgmshrtbC+HRErlJRV/3PdK5v/cuDluHxX7IzRIQTOKO50wBjEA==","shasum":"c201cc39171b087f5ed65499bd05049affaa34af","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.2.1-alpha-modal-tweaks-4662.1.6.tgz","fileCount":11,"unpackedSize":26327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+qHaCRA9TVsSAnZWagAA38EP/i5j6yaCR50FXSzYNE1s\nZguZdX5HPY0mRwbJUAsq35DkightGZHjXJ77/GbdF3JoDITKsPCOMWTdr2MU\nZ8LmwqD+DxIaqEglwrj5m1mdGHPE2uFB7CJ1SCJ5fuvly6e7BsVxckYWd2Av\n2KdK5cBQ9K0esVMpXf57bEa9l0Gu5LIF4BmgJjLJqlvrkraRxrfWsim1aRZ5\ncd51hdcVO2OeCiA3GUOV3+FyUGRRn9FjxtrS/DtVip6rU7Mc1WOvTPjijedH\npJ2nxPyvyDWFZF8aeHOyHsPf094MuNOwLTRI3GnwyC3cwBbxnenSkdsioJow\neJsX2/ziQ0Da2KK5elHQBhqNvRHgwtiAXKcmdl2eOY1artXwYCYirdfSvtxP\ngrdiWJ6LY3wWdxsJkLQJHJPWPKUzVxaWqDCygHvySKYeXtWOzyYfg8OJ1Rs5\nT3tTzTtnzPhNViXCfHMnC+A/y/y7jRp3OMuT4M9ZffVpEO7PR/5pIl4/DQpY\n2TD/rZtkuGLFEhJ0HuLLrL9HDId1FWE0Pw/6/lhxwPBGx5uQXQMHCnQePQ5Z\n4v4fFJhFLln08D6YQYjR0ofQGkFfeVH16NQHF9O898hlpkqeD8DL7+0rEYnN\nkrwswXyVGwZNkqOac8ChjD1YF1NAaBtiEZQLz2s+UKahzmq03Om5G3UluYqt\n/Hmd\r\n=8lEl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHsZPqY9PcQ869XUfsoCFGEr9MOiXelih1FGxyuKuegYAiEA3I6obDcQHIPIEPHHIp5SQI7nX4w7PIGPtop/FsF9FCg="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.2.1-alpha-modal-tweaks-4662.1.6_1559929305820_0.5727605930269817"},"_hasShrinkwrap":false},"0.2.1-alpha-modal-tweaks-4669.1.7":{"name":"@crave/farmblocks-modal","version":"0.2.1-alpha-modal-tweaks-4669.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.5","@crave/farmblocks-empty-state":"^3.3.0","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"2bc3c7e0ae47b1cd82359dd513eb7f805425717a","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.2.1-alpha-modal-tweaks-4669.1.7","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-PyaUsHAOJRZEzC2YhsOCCxF+tML0KBcZBjV7izD65qpsZLoYP3/XHbN0Bd/kig++vr5y4gV68FxzCkV1n9Swyg==","shasum":"134f29987539677bf431f5129177b9dcea51df12","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.2.1-alpha-modal-tweaks-4669.1.7.tgz","fileCount":12,"unpackedSize":26988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/mCcCRA9TVsSAnZWagAAekEP/1dE3J7LlnhfBKr+Zczx\ntrvTiX+jjhpafqvgm96BHLYRcqyke4L23n1aN7s1XP7XNF1uFZyt6y+E4lAF\nm4nEhgRZ/WihlVrW4PQXodgsfTJs5gFaq2PzAU8sh0b7nVgT81/HCg7Lr7qB\nMGfKqhnlZ6e3IT3kszTgIjXDGkK/TjVkAuDVyZWqY9Kt+c4BvG+TkutOvjAQ\nVa0FycLmI0/RAvM3bOMYolGGGhQBk7VPO1IF6016y3lTetytNt+6oT/dw9cr\ni1fuvJ1PeNXzGLuyvn79ktsW+b9NPMXAb2JcwrTDqryGJSEESNCrr5JyAJbs\nNnwiW1vcRGh95jNxzYWTWRz3ktVTyuCHKCfLNi3IEUKLLMjWCeJ9LZfyP9ZS\nCzbUbHChK9jf+GvJ+VYB2f/FwVeo+sSiAxA6tPlEMtaMd8up4arVrSowJFPY\nn51c8XO27gTYCJUZxGeZINUW/8oK9oHSND6Zh8BqGCGKH1bIHVpPU+J85EHC\nm/PJY40uf282XW1aCI8xN4db2TOPfi8btMWYHzJ4KkoO73JlPN7pO/PELP8z\nxbRWNPplwDr5pL6eM6P1gL0zYlBwlDe3S47No1DSyVPR5WQmr6X89PxcH+Ph\nysEqxA8kvqOlwZnaGx3uv1/jxiYfMFKABBWIDTZfRmzb9PVrEBMfHsl2q3li\nFYmK\r\n=elaD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlH6Cf9GqEVacjeFEpcFs4nRFj1YGJiie79RLbTSszLQIgarSqa0NCifjl1OlG4/OZj9C5CIcSY4fGhaCkxWDRePw="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.2.1-alpha-modal-tweaks-4669.1.7_1560174747577_0.46535248130264084"},"_hasShrinkwrap":false},"0.3.0":{"name":"@crave/farmblocks-modal","version":"0.3.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.6","@crave/farmblocks-empty-state":"^3.3.1","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"432c92c13fdea8659a9407c66183c774dc8df502","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@0.3.0","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-XY0b9qGmpEzGr7GpoNlQ/CM6PFO7purFPYc9JRZc9/ka2siaXmHXlO6NK0ngQS/zdjfv/WdHBkHLz637he2DUg==","shasum":"72c9d62dff165c2c05dd6676d46a36cc2d71d2c0","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.3.0.tgz","fileCount":12,"unpackedSize":27698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAAUsCRA9TVsSAnZWagAAab4P/0F7IKb4RR7iVpEBN0LM\n3qJu8nY5LhFoIN3s1by/DBj2OeP/kx+QRxVRP8YmOhT58kJgD3M11X2pAgV8\nUQDiP/nmTZ3t5U5BHJPhtQW+d8vlu2yjqyxeYt6Eo3qtRDtlUfMEkr/hlRCO\nVNu/wvFUQ0Ao6EIbS/o9Rq0qrk2/lKjwA/2zeik28Llm3wRnAiuEPfzQzDHX\nG34XKQrw+vnqcrseFI7IeqJmK9aHtaGvkHWOOLCw9nbcka3UvQa7cmnV5Ogl\nczJvw+C2eCUshiI3dFQq4lOYt3X2NwvWtitb7Hju5pqxgLCLDLa7ATpaSEj/\nx0+usPqLmdSBFbuIvT60jC+sscsjRgtxIkKAQ+3O+6Ms+lZJgGXPA82X+QKp\nMNn7D2pnzrmz8cNyJYJCKsBFLMSUELzvKfZ/14snS6J1HhbWeG+e9qk4llmK\nL5FccOfSDOqHP4Pn2kiqI6OxOgQYxYYID0MqJ9djGEW4xejwgZ/g+hukKDFB\n43nswUvylQMtS6+4m3RgLH3UWH/eJ5sqlWlpwV9+1CmyN6AuRGLTH/tqEX03\nizKENB7hIp+bmG3R1xNe5//By5FubDgqaiN0BcPHYBKscZJ+2F13gbEVUXy3\nLSXw+l3j68Xr5+qVr9i8c9jlZ+oqDhM+AdF7VffsytjDjomJFKMtwujOLUMX\np7RL\r\n=Za5L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjIt4ssvcKlC4kFTaN3b0Rdj4+47Z0LZVg5ZV8+3rp9QIgbW4KbHoS8KpzOsRYYOxAVjJR0EFqKVcrfjc6bnuwKng="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.3.0_1560282412313_0.164922076693508"},"_hasShrinkwrap":false},"0.3.1-alpha-text-truncate-4709.1.4":{"name":"@crave/farmblocks-modal","version":"0.3.1-alpha-text-truncate-4709.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.7-alpha-text-truncate-4709.1.4+6ff71573","@crave/farmblocks-empty-state":"^3.3.2-alpha-text-truncate-4709.1.4+6ff71573","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"6ff71573420e828075048f712fc799252f5e3df7","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.3.1-alpha-text-truncate-4709.1.4","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-EA8AEoqgCN4Ry7nbg5md/z7q9zbSMomJJ+st9RSH4jOK8Qe0kV6ywJeOHSwlEUMez2d9/tYyHFZiqVhoGY4+bw==","shasum":"fba32407da9f01522b0cd7d92bfc338d97060f1e","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.3.1-alpha-text-truncate-4709.1.4.tgz","fileCount":12,"unpackedSize":27812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCjnwCRA9TVsSAnZWagAAoRMP/2qyV6pQh+yv8+2M1834\n6p0GaBdsCKTw3AVZl7MnhJyoKEawvwTWBysSBg5MXbws086ffYzr0hUuK0hG\nlfnUPflDLRbC64PVUiktb8XUghNPZ4A/0zkA6uz7KnFYwJljOwUwogZ7A8mP\nidF+LmfeDPh0pF3bhDWXRRg4O3R+mkj1blDmLrNFkvCHg1QcJ5+8i4Jajz0M\nQC3Rzc247NxBJVSIEls+QPJb6J01iAj4OFqdaBXBGjBBPblxJxqWq5YOeC+t\n/mTmwNxNvGbagZE+r1hbeyJUDHuPraw5TMTajFccKtN5brUzSzI7+B+sRhnu\nlGWHT8epvwxniaPS5A/GuthDYPa9ccXnIc4XlsgnICGF1R9xHVAnkoAiaLIF\nIBLnGqrD38VJK9PyzJP3ImmQTHRwmDxhGfLpQ42tHhjWHiHa8Rv3BGiVU0V5\ny5Tx+6zPWkR8foi5lv6+d77yTxlSOYtPrrjjKFH49QK4FfZWcUrW7IEaabZr\n1Y3q69QjO5L6dlZOH/oHWBJcA8xOxOOmO/t+iJZZxp7vdtWJnH9TxHIMeZL2\nk018tx6zQoWH8BjfTkXZOWEkw0+YHsuyjjcTkSHLminO1YGfKyOYlru8YjHw\n5w/Tsqfo1izj7t3BwOjYUn2lv8vG938718UHXe80yeBrdlqfCskMoyad4v8c\nEFIj\r\n=YloR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNP2pdopbC081FxvkdCM3L7uj40Tx7kqM6jyxiE/pvGgIhALqNgQnh8rTJ5uOzwT7Bu4T3ePD6j7Qg8HUJjD2Ox+sm"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.3.1-alpha-text-truncate-4709.1.4_1560951278990_0.4057818430857214"},"_hasShrinkwrap":false},"0.3.1-alpha-text-truncate-4713.1.6":{"name":"@crave/farmblocks-modal","version":"0.3.1-alpha-text-truncate-4713.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.7-alpha-text-truncate-4713.1.6+e6782892","@crave/farmblocks-empty-state":"^3.3.2-alpha-text-truncate-4713.1.6+e6782892","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"e67828922572b7c3280fcc9ecc184fd5fef95ca3","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.3.1-alpha-text-truncate-4713.1.6","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-xtWblTQITSCL3TsETvCgcQtiKry1noHjyfqBweQKeCxAgpir+ldGYq92XiTU6zHvHDCR0HZw50dDQv8czDFFHQ==","shasum":"0cd4af3af4b6d595d284e42811baabbfd2354aeb","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.3.1-alpha-text-truncate-4713.1.6.tgz","fileCount":12,"unpackedSize":27812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCm1mCRA9TVsSAnZWagAAQfkP/1iIrm4syx0NiK+22jSp\noJw6TeYrZ6WhKsD2uK8sSnL6MNjyh4h9TqIx5tXmIqg/YjMfk29arVX+d+Ig\nj4+jhSwRwENJwLtZb7beyx/zbg19JH+mmUIhv8KafyMUpdKEjF7QXoZA2SZK\nY77xSoGdYaWEdaSoUT0e2JWr54cFgIKN5QRIsApPvY0y9Rp3jym0GuhVXP4V\nvbAwhE7aELBW2OntpfLtth7E1JId1xbU79i4JbKz8xUEZcSkoRPV9hGzg9ao\nj+TfXh5ekg1r/oC9rdckllUF4QGo2xawfQ/TnvaNZF9pjsdQEmuSPGRg2zHO\nThb1zx5M++DpNrpIvSuRVMxTAVcwzC8yfFJ3xQt4xjAQyNaIWAz5x55n8OvT\n+p1IzXKiRjPkIhfhJsfEyZxBaYGXfWYJXq8WHC2Ym+IvROqKw+Ml+cH3p2to\nmQ3eCxVdTGBcGJEfXpvvPVs33p0LxCWhFEGr9qWoz3qAlj7UHk5jssPJgNVj\n8EScPH8yHKOgzShoSH6368GGaXCsl5OuAnzhUDT9rJmJOy+OEM8xQYZw2+6R\nsVwzoKxHAR6YqBLYfj+RuEpvjzRUxapW7gwy8fYj1ldrWiEIpAi3KE0z5C7u\n4h4DtcMfRh+UQrH8GL57ZnUQ7mEx0+c/EV/8iHDZFkpQ9yllLjfPQB5X6wMl\nnRhV\r\n=c4xD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxtDG5wvV0v1/MbnBZusYYcAELZwUAbwP7LzTeip5AZAiEAu2qQMRiYOZwNBpRKTqXAGSoOadg7JR8Ei/4joFutYtc="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.3.1-alpha-text-truncate-4713.1.6_1560964453863_0.7382229250899404"},"_hasShrinkwrap":false},"0.3.1-alpha-text-truncate-4715.1.6":{"name":"@crave/farmblocks-modal","version":"0.3.1-alpha-text-truncate-4715.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.7-alpha-text-truncate-4715.1.6+3c69ac72","@crave/farmblocks-empty-state":"^3.3.2-alpha-text-truncate-4715.1.6+3c69ac72","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"3c69ac72b30705a04ce154d2148d07d35628c01e","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.3.1-alpha-text-truncate-4715.1.6","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-u5fjwKrUWuX6VhXfoqfzDLjumJkPDFzDdYe58BXi4Cg5v3U311VSocBl01Xx+gRpLKUblk2lKgG/BPP+p9hAhw==","shasum":"2c763b6a102ee3da4dbe7384a86ec3570bd1dd94","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.3.1-alpha-text-truncate-4715.1.6.tgz","fileCount":12,"unpackedSize":27812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCnGaCRA9TVsSAnZWagAAbPUP+gM5wIoowLLqz9va3/eh\n7YKIk3H+w1R82liFeuxxqnlREM3NPH2Bs/obJ3Ap7PFMmqZ/VD8su3uJH3Tu\namAn0AqnamalvtfbRLEDB1E+aJgxUidC4sKLDCxHeO6f0aZaUwnQMrpNriG7\nGeCzoQnC3uquU79kSj/R9XBN8f+Nf/7L6fvNNGaUzstY5DzxE5ZJGP8PVdsI\nCli1l1pnuqqKcbvfXw0GZ/eM2QdmpZoA8tcpEqDGOL9T2C51hr3rHjfuxwDv\nlLZe/hx/iGxS0SYN9xvMaoowDvlNZXRi6xh90M7Nbp6PGj1MjNH/GQ/0MQKq\ndJSKZWNywfzv6N+ArlNs39oqs04LjddW8HR8Yv0TLVffTfLqdqtGT7YyFp0z\nQ3RTsPN8GhqMRnLcQYXpJXi/RjowQPafLseWq3HeQoRj+nOeZizZMzz6qV7x\nkaagUOx1tJkQ8oB5i0pUgs3EiV2wsa5KjuTj7Qw4wl5W5c4JMIehC27TCpEb\nmUcYCsm20mjdTrfKiXqFEaL9GpTiZ0Erlr6BMvSSU9x42pbVXW62mXUgD6w6\n/HHhw1eWU4FBrNigxnQYP6d7nXcrChUqHD1SccMY9hxR9/y2ZTkbfoU/+47i\noxaAtqHoKjYJ5AL4j4h9wU1tGX2bIms9dOlJ9rlbtApzhSkD+Elz4b/5cLz7\noS45\r\n=XD+O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDClDrG1br9SA7szV1sr4z0v+ch1V8AOyz9/pNwIYf4HQIhAPeA4jDh4gauoDonJNvo2FDqw8v43d/5gD0DqdVqYMsf"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.3.1-alpha-text-truncate-4715.1.6_1560965529980_0.5917317530874955"},"_hasShrinkwrap":false},"0.3.1-alpha-text-truncate-4717.1.7":{"name":"@crave/farmblocks-modal","version":"0.3.1-alpha-text-truncate-4717.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.7-alpha-text-truncate-4717.1.7+e21d850d","@crave/farmblocks-empty-state":"^3.3.2-alpha-text-truncate-4717.1.7+e21d850d","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"e21d850d7ccdbe2b8c49bc07f9a5a921a958872b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.3.1-alpha-text-truncate-4717.1.7","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-44Ve5MrtRzjDLIwd+deRsi3OKRASZmDG02loQikB5E5o3myMn0EOGD/btOXh9/szixtGf9QJYFM5tJHe62Jr4A==","shasum":"139e2b79996c7c78c8f6ac90ce119b2572b50231","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.3.1-alpha-text-truncate-4717.1.7.tgz","fileCount":12,"unpackedSize":27812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCoVcCRA9TVsSAnZWagAAeeUP/1Fg9/1ynRxS36JbIMSL\n5O8GCS8kzTbIl2xsTnLN+k4QoPtMOY7O3RXvcFVLxmpfwkUhAjhQ/WP86pXp\nf42wPsKs2nmihdayXbYZ4WtwoI+DF9r8jj0UXJJvydIoUqh0ULKPL8ljSc4M\n2XB+tKlsNaOi2R/SrGIarGqjVgIos4vJlVH/xzCmo7F9x5bKc2XAtXJN4D4+\neyz/TT2oYXwe/Y0cMT/6GsugekBuSETfb6GIp4qwdpp4fJuTL5Ja3ByvUpWp\nxMdi5krA3xd8S2Ca7N0m5L7A4uAVbNaCuZBRnBGc4dplPGh7Wf4+fMFglvNK\neFWlSINQgN+8Ffwcxa3JfeuggKPWMuZDV/WHjQBZikPN6IdRSB36AzTW01jo\njs2NYZoC1fPNHUPBzJ4r1nT+QCPdE9fNAvUYiH6Z/Ypg3NpKtUwWleUOSY77\nDcHcnEuASNh+voMNR00OtOzZ0bapVotC2gRWIsbr0kJxiwi0cwOh4KdkDj5p\nJRhMCgpaGIypmnhWlgS/dYeY5Ymg3ufh77Y3/f9c/Yb6E3DBdAgAPciw9VI6\nWME2Hn5BlGsVvGLTcvHAnpHW2oF6/G+WCZJRQ7B7ZONGPAvaFbeLOSJF1ilt\n8TcKE0df36778Gj+O9ZVt86Woxpb93Y61XLl8ZTtZ4458S7dDRkSyt9f9GxO\n/2rh\r\n=aIp2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnIJg5Ow99IYL8aZ0/hF1lY8pHJsCKvMVtybD6S7zC0AiEAzg5FoYmxJBhwC6uN2LUpSnKstfhmgeT7eTzEJkS9PYc="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.3.1-alpha-text-truncate-4717.1.7_1560970587300_0.6671577868924019"},"_hasShrinkwrap":false},"0.3.1":{"name":"@crave/farmblocks-modal","version":"0.3.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^4.1.3"},"dependencies":{"@crave/farmblocks-card":"^2.2.7","@crave/farmblocks-empty-state":"^3.3.2","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.20"},"gitHead":"ed34945c2a855c1e01b4565eb61ac28cbee48edf","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@0.3.1","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.13.1/node@v10.7.0+x64 (linux)","dist":{"integrity":"sha512-Dn4aIGyPW1ZbBkmAJgMkZ0zNhFr5Q6akMyiFF00+heiLRILY7IG5G2rXTI2ckAtvhZyjy9A15ikgHMbTgquB6g==","shasum":"752964cf0983cfed9ada7b455a80d4584eac7523","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.3.1.tgz","fileCount":12,"unpackedSize":27903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEi5ICRA9TVsSAnZWagAABCEQAKOnGmSIfzvr9lfUaZUw\nAVadludnHgZoGXAYmxUFWAPgGkoSZuB9nB3RblcwwkT64UdkR45ZZMKzPSVG\nAHVBBbBfJ3TxoigU6ktSN+tYBFcR9oZkI7A4QYsCxb605ZD8VWApRO3Exoys\nT+Atlm1tFnN8C0W9SjVGJiSGhfVdZ4tyGp8Uu73Lcd+d3wrzf175rMmL/mjX\npQ6k2fD2wvXmMHYMYJ+e1aDFSe1u9YiDqQk9wt0b3mldwZAP2k2YUO8om2Yn\nFsWRH6f86hRuI6vYzo1RRVAgE9t+dpthfRlqcJRWT/WmzbGKkP3C4FJ71dyA\nxUtJG1lQ3oBq3auZJ+eynQXi+uh6766LNAT//3KcFRr8HUIG15O6upjX8UN8\n8vqM7AZu+OlzskzDUS0RK9wLQbTP+S4K3DrUtMPUzwId8KHY1drcRA9fgtCd\nbghq4FMd/e8hJMwxo4xw/PH7X6hUpdW/Qu9PY8rLbDm9UGmc1mpTTwz1+WGE\nyz541sIdPBpOZ/ysRzG76TwqElaMumTs2e+kM61h4LX7lZixCkR7t33f08hy\nX6h+WFbpLUXsc7gVKwOcbfOFBqYaDBV2vy2r4agOwIVpqzuKFEiUYJCnn0Uw\nD8UiZDihlOqKuIYrsSvbRaWhqxs6cqaqtQSSWNMootO5DBGvpP1GWOiRrhKY\nR2RC\r\n=RcUH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR+ZBmkZ+YVIHoZWnK/ZnhB/yHmgp75tmUJsZIC2QtqgIgSJ2C8LUEn2gUd/oLAYeLDfCq2tJb0tdlVCeG8HCH7ao="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.3.1_1561472583924_0.6221921025647312"},"_hasShrinkwrap":false},"0.3.2-alpha-upd-deps-4809.1.19":{"name":"@crave/farmblocks-modal","version":"0.3.2-alpha-upd-deps-4809.1.19","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-card":"^2.2.8-alpha-upd-deps-4809.1.19+0e9e5304","@crave/farmblocks-empty-state":"^3.3.3-alpha-upd-deps-4809.1.19+0e9e5304","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-spring":"^8.0.27"},"gitHead":"0e9e5304edf0f6731ae05e161f6632186264e4f0","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.3.2-alpha-upd-deps-4809.1.19","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-yUXR8fEcgvAJAgC6z09XIKez7FMoYutPw/DJVpDTSsfjUF3ft61hslrSdJ4MEewgEAXX2NTEQyFvr5Ap8aSRCQ==","shasum":"7e125e5795d94acf1fda48a33f4669bcecb56007","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.3.2-alpha-upd-deps-4809.1.19.tgz","fileCount":12,"unpackedSize":28140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdH5JrCRA9TVsSAnZWagAABMUP/RuckO3MBG160tPscA27\n7tbZc94kWYgX2gZOGhhrViOO6PbEurS43iTwVJB3dh/V+NYwAE1FKj++OSCm\nUqr1BxT09B9U1FMRU/MiiDARo7lG+JgOa8lApYP8LIqoz7/5Gv141Ddsg+mc\nAPzP3EM5Q49ejjEjeXiGNy9J+6lmAGUoFhsp5lDapXgcbswnWuUGReQWXUku\nHJHmzc736lYahXhuCzA62ZM5uogvVimG6Wka6NbJAAgFmChDMiDoMTJ9a+kd\na6tOW9kensh5pyWiipib+l0C3xQ5y7E33s9SJ8XpkZVw++/dM8NuZffsLhET\nXXmbZ/wpPV8loPPCR0NFzrF9rTT/XwnIgdYxg6Wl8WRBnnPt0DCmIy9vIili\n/pNwWx91LvfaGMg3hYii9aW1p4qcF8UEweAGMQyAKA02ReBuROvgYA0JwQfF\nnBrRJXpAjwygBUvSDgFmF4INyffcA2uCj9AN1xq9r+QI3IDEWfYefCD5SDx3\nhRjYIo5lRqGsbRoKeZRFGZLlH2BaMSs10JnJl79bIOaQGI2f9pP/1vJov4ry\nQCiJz1VWBkvGKr/T6fc9U8FmP9YlouRhNUmOQ5hf1VxHyRhW2jwX4PY9tgOT\noymWhKkTsx4v5UF3WG33Oj/N+he7OiFG6sbcsxHNXhCVgD+CBQ8b5fKcGKDc\nS0hm\r\n=UusJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpiob9skdkUApemeED8sG8JQyB0xfIBjIzpBu21Jsh2AiEArSYIYpjfbLxuAZ4ILbivlHtwLH35KZlx7tVMPSgHcGs="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.3.2-alpha-upd-deps-4809.1.19_1562350187074_0.4726144509640757"},"_hasShrinkwrap":false},"0.3.2-alpha-upd-deps-4825.1.23":{"name":"@crave/farmblocks-modal","version":"0.3.2-alpha-upd-deps-4825.1.23","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-card":"^2.2.8-alpha-upd-deps-4825.1.23+4c613c34","@crave/farmblocks-empty-state":"^3.3.3-alpha-upd-deps-4825.1.23+4c613c34","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4c613c348c4a6c3b99f0793660b9a22d361ff343","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.3.2-alpha-upd-deps-4825.1.23","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-hpzx+gIW1uCjdbau+pERNBXyMHHVYP0FD5l4McNsC8+UoDbIimtz5amH3E6OndKP8nyZMv6+0zOgbYz5+2GTgg==","shasum":"84c6cb62fc765b4fca943d28da553a3d46ee950a","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.3.2-alpha-upd-deps-4825.1.23.tgz","fileCount":12,"unpackedSize":28140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJKJRCRA9TVsSAnZWagAAQK0QAJnjbKUTAQP401Us2aXe\nTO0r7f2XDpziCIoY3QmjyNutPoF7LpNzfH0EeZ4RB/SQsCDUr9XYU53aGnW6\nNJJC4mf0lS7+mwoYfv9eLLx5rfSRxNCZeBlgt5kX5Xl0BBzOp9jvk6rGJc1+\nAHb7e1WQpb4MuYSfARqIUI+3ttnAGUg9lxar31I96kZVG71YwE+mYsXBLVx5\nhVssk+nlvgzCwoSljGBpnFvPmeUYEvWVqECOBA5oUNn+qFJ+2oP09VH9GhAn\nR3dNjqgg7pzhihvaOURwjsuMMh9bYaEzdXOZg6TWUEEIPiQdTEgRrGBJxQZW\nQtbzTHhO4gO/zqhHMqTMNkgeYYh46A3nhaCo5ZNo7evZjFKF9qSrLr2Ppa32\nkEkqEh1duuTeiJal/tZqnW/k51CC2wk2oydADhslW7u4S/SRxGwNSaPJvw4s\nxlARrcPWuBYXniB+23DfGqbnMxmGfiZtgm3b2Zbuc7T9Igw2+0KMg4DuFvWO\naUDoUqnJW+X6tIDg6HGgQnlbi0P3Xcru1wmRERjFkTyTrm0bZ2pOTGmaS6qy\n/EvgeazI9kRCAn/idxfeaL5G+Vt/4ezUuIgl3r+jcgGyUeJR9XIuDiEEMk+X\nZwcvvnMr5omq/tOKxzleWj9p4aDnOUrXaz4WPjZxpZW1QkoT+7M8rBPrd9XM\nEAGJ\r\n=bxYY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAu46bm9eJi2WVunFwqvWRnHB5RICrvZBzkOJARf9IigAiAbk3yA4EQIbM4vht3Mosxic3+IqqulC0mfUsELMs6U9Q=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.3.2-alpha-upd-deps-4825.1.23_1562681936523_0.3984820315491111"},"_hasShrinkwrap":false},"0.3.2-alpha-upd-deps-4827.1.21":{"name":"@crave/farmblocks-modal","version":"0.3.2-alpha-upd-deps-4827.1.21","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-card":"^2.2.8-alpha-upd-deps-4827.1.21+5b8822b3","@crave/farmblocks-empty-state":"^3.3.3-alpha-upd-deps-4827.1.21+5b8822b3","@crave/farmblocks-link":"^4.2.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"5b8822b36edc620b6950896b5a2d0a34eb0fe3c1","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@0.3.2-alpha-upd-deps-4827.1.21","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-suJ71ZRg0AVpvh8FgEZyk6n2m27nbgwYvyYb3zi0DUpflC562QRKNRBzCwCz/WCzIMzOKWRZqjhIxOgx6buerg==","shasum":"ccc1ca09a6d0de8c9d34bca30fbee5023a5961a7","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-0.3.2-alpha-upd-deps-4827.1.21.tgz","fileCount":12,"unpackedSize":28140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJMUECRA9TVsSAnZWagAAW0oP+wdBPsa2Qjzq2njVX2KC\nnvC3haBodfU7Yj7PBnwLniDLnS67CbIBzO+FCcNBZDRf9cBIWZ0pRE9Aj3bS\nlnkA/gxoB0L8LVM5bhNRAZ/tbqByivZkxpsrV0U5K8WA38d9niFn0y2xEtLm\nu30D/JYAsrvi+OlLifcfWdVYfPgXhs6jIhT6Lf02m4dQBf09z1YFkm7dw0sq\nieSF8VhkPF6OyFRXNOL1eIbdYyQosw/X+fsmhi/mRJPB+VNECVoV9zVMMiqX\nOsvnqfvafUuN5ZoLYO2M8RV64mbZEWRnx+sAW2ipGZplqfngOBJVx0OTk3OC\n1zlgyPjP5gNFBtbSeVLhxgq8vbr3aBzfPW0lbxbLmsOBcVBDOX1QjKLSUz58\neCM6LiXxfIXfxoKRCgt6juTMUvPGXSsLu1oDhv5f/8OykKsXq8q0ocrCXm0S\ntx2pGEaDS/CPuuTNNc3bJEeGeqZynUAzT/bDJGB2kBJwK0HDA0ROIknKHwyk\nYzv7sfm6bQJMjA6KvM0bdA9IvSV93mswRSqgCvN/5EAZgMg8kJMm0pJ7NIfF\naXH0e6KlKsY5HHte/MikJJiRbt7NVP7ggvQkZ4YkRsA7ps3gff2zJTQGiQjn\nFZx0e0mdG3+WpyLsHmydO5hoEpHtPwzEelUN3X8edlovjiKc2nC0/s1xfTNE\n8emi\r\n=0BJ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDz0N8xjnbNpNxp/Kj7bvne5T5RT/RFluJr6wVYQ0bT2wIhAKFgMj9F+xnJv5E6yMOEZkete6WEMyIBH/phNbCT2vrw"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_0.3.2-alpha-upd-deps-4827.1.21_1562690820188_0.13190370283876862"},"_hasShrinkwrap":false},"1.0.0":{"name":"@crave/farmblocks-modal","version":"1.0.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-link":"^4.2.4","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"78544ef033edcb2a9f6c8cc436b597625a0fc386","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@1.0.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-73KDYm2FiFwvbYUrjHTLnt8lUefVlEbch1ABv2tjbVGFFGJaW0Q9DIFyTCbKqt8CH2+ZUDaPkb55oaRseWJfig==","shasum":"b319d2a607ee84bdfaee6e40c1ac84d7021d1ac7","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.0.tgz","fileCount":12,"unpackedSize":28553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJOpeCRA9TVsSAnZWagAATcQQAI8AmA12wenP7ZN8r16C\nj9DpU0Djb/LFJbRtaiAHSLaIUwRx0DJHOaDQNSwBIWEw7gFDcHI082jemw3e\nY5Mszc0hBiVi9TMgWa+r3mIrD4zndAjaxRz1rivmkGSB+0uFiID7rcuEn/1F\nW4kL2z0eNahUPDnBY6zvGa0blmNdUWAB84x0pRTsMS3Nz9C9JNHfuzNVr5ZZ\nLDhlFlFveldA2Hoa/nFOjvvZ1Jg9HD7aTOqRPtzWXRONlszeVjdO4CLk2vu5\nd8ObUfNqAiLA/XiYmiYGZFL2MaPiNSfos8gxH9TxDA0wX65YFZpVVkIznuRj\n3z/s7IReDbBXAIfmAPlSjl+sY7AVxcFldemuqGnv/cGGaGUgbgtbS48w4Kh+\nLHaCsM218c76UzTf4NRmvgtlNieTTUSChZqqZV3FugLfELDhr+3IMmQ6zSij\nN2mnVdfkoWKHunO9i5O3UVhaGLoTaaI/WuYxNSGa5C3R8HpXqZXpDwo1XiMy\nj1aRsgCsmgqjn/9IsxPY4e+OrtYQA/NtY6Sq+IV5yBzmjo71KDSlt7TT6wic\nsje9KvNcqe8B+nQf+or2EUxkMozUhSR+RhSVSQah1xAdMvOupWlIYypf8AUY\nKxhyIbRsa8rndRoth1d1WEDdHgXkPx+90yqYG1pIpC4z/tlgYePb6wWo127T\n2F+I\r\n=f6sB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNfR0c4J++72/oxLOHhMXSOvMAUe0YMLQ3cutde5Ay0AiA5Mrwk1c0rWh2o3m4hhBcTBsoWM8msRl84ueU4g+jQKw=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.0_1562700382160_0.6618946282960465"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4853.1.10":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4853.1.10","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-link":"^4.2.4","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4e651ee2fa3a32ad36ba16748f5c234f50ddf133","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section, if **showCloseButton** is _true_ will add an offset space in case of header is not provided\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4853.1.10","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-pQg6MUVyYRl1EjQGeTGZkW5VMlGfTatbv5H8T2appqRFBYJToDuxwWXMlCGI1tW11taXBB2RBQAR2ZZ6Nlvkig==","shasum":"ea7c1c730c8bb84694d07e32156de84c740530eb","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4853.1.10.tgz","fileCount":12,"unpackedSize":30743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJ5RkCRA9TVsSAnZWagAAEqMP/jR4RsCZDqEM1Wz0GS6a\nBXShl4JyDY7evAh/P+l6XvZ1LDvq4WVnKkh9ap7K0qoUJDm3pmv13E1SKVLM\n7XSuO+K3HyehYZhfJWrL6heNEp39b+q+YjqHwzAU0SfYmg1jPo6hS3+PifkE\nmjOgKv+VJWAXO0Qu0CFZeON5PEgFh38mJE4kDQ8lCj0347vTc9DZdtALXLKB\nqJ51TOqPhZ1A7hjXY0sX0jRieqPeHuqFp4tZdZK+jutFVnWFuvlNu4m3bS3H\nOT6u38IVYvVd262lKNMfinytYEHpE4DTa+i130fE82dyFwDU35bptSFQpLDp\n1QTRqY1vO9K3mIAr4bd193KkBStl/h0sGsm3kzX5TBCwq6QHqt03R+a9EZX9\nIixC+pRwZfcIdfF0e9e21Cm0QCJWEn+g/97JA3u+hj60U6G1nY/xrKXnc9jg\nKEPpIq+JzCnO6c6EN/uL1DzFtHdQsv2vjbAb//25+tQOd0l5ZNGIJbb9TQnW\nU8lxNP1JcqKcX2mrESkurusfgqlr5X2wiVdjXXaWUj81b9nRCyF0qUSzcos8\n7Auecadpuh1M5YsN6RCKBehhIsFBIP+FVU04t9a5Cr6DvjY7+XSgvk7+letX\nkUn8ri4Iim8tqnkSjSI6VTUIUKONKVjuH3R5sqsx1J/fPsAmMOfZM6ytf6+E\nL4xi\r\n=CbFo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKnGIjs8PaI1R8KBQvvVByJFLHrFNXBmU0ArOUvoz7WAIhAL2N0fSxXXaiROHPRWE/glhYc9Tyryx9EXy8dVnW5uWS"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4853.1.10_1562874979289_0.40253689532092296"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4857.1.10":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4857.1.10","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-link":"^4.2.4","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"12ef5682b5b7f78308a604e56966dd19075b5642","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section, if **showCloseButton** is _true_ will add an offset space in case of header is not provided\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4857.1.10","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-06DOLly5jHeCuih5apOTPhpt0ZDj4JMKrOnY5FQB/PFS/N7ZE+VWgY2Q2mblo18v9kBfTl8KBrMmrK+NFc3IbQ==","shasum":"6035732a27c422b431ce0b94a045344fab3500d1","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4857.1.10.tgz","fileCount":12,"unpackedSize":30730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJ5gXCRA9TVsSAnZWagAAtcoP/0YzAumXVB0IuE92C2Hd\nfX4bm9lxmXcLu12zZa67jnM0LUHD64XCuWYnBuaE00+ywead2quz42OVWkKl\n1bIIKyPe1VgD0z/ab0D/TxnjiWQXh+FLl/TdHQO4RHiahmIZIL6MZ7zgrqNZ\nmAioz5Uwf7gQQfkccNaFqpoh15lTB9Crwf1y4e2F1CNzm/448ZRm+77XX1xM\nA6QK8dt2z57oB9yVLEkF9VDxfZ5+o2kPonj/GD/T48HBdLh8Dr8KmBLsN0t6\nRkw7HUn+sZjA9dggtKTLaPrlu4gUH08+E70YbYmSEbMOu5hpm3iBc+Ac4g3q\nFWDuLgaVxojcLPKeFGMZwwUk0pLWqLUywO47CUmCFd0+2JEgBNcmo9MzPsWS\nbLUI4Lu86ntyOHEw9h6+6l7icnVHp4CU35qlrWwl+EPoQstSZoTxlP6DAuLz\nXpEISL+a1OfNW2qHhtoUU86MGIBAih8RctxjnBY+nHzK8cSeOiZFLRkM7jfP\nHxH9qcacijwBM63C/fIb71iyT7137eWFDjmIcxLWPEnREIL1ywZTDCK8Lcgd\neEDvRc4K8RKuUYK5nlG+F+8YBN9am7jceVBn3kbFtkI3TERrdPZsTo/U+Akt\nylGVennnXZ66FW1//TM53psWKY1aTttR66YDQ0ZwVLArEFdGxTxSiNc3k40t\nCRz1\r\n=IISL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEhkPBQwMEqZq2Oz2TVvyarp+GH9cmY0TwKra4IHrlU7AiAoh9dt89W/jqThYi/RHbIijHRYE0QqZn3/+zTnT8cXIw=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4857.1.10_1562875926953_0.6734537270709648"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4858.1.11":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4858.1.11","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"97e6a9436923b63f8b99f96542493203b7604fd4","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section, if **showCloseButton** is _true_ will add an offset space in case of header is not provided\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4858.1.11","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-NnK5KuOHPuWrHIMN8BYGBQS0J+s+039CoNXhHz2cb4Ls9eJ1lDZlGl+LAQOws7F/Hnf9G4lPSsaYkiG/3l5+HQ==","shasum":"5a7904ec67baba55562e44653274988f7ba5d1c7","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4858.1.11.tgz","fileCount":12,"unpackedSize":30690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJ5kJCRA9TVsSAnZWagAA6dsP/jnKd5OC75SyUujr0Lht\n2PT3AsKR4nW4c8ErxQigjtOYlIuvEEqTLfXktulmfw9VKItnN9EuHiARDsFF\nyqha64gmZy+ORGLnh8e6sZ18ICjjLLGJGu9alo7z/EZNzC6qg4LndRh9vqDX\nVkqktNVY7fdWmY5ZSNLOYjQGderAWo2nBaQ6VX3hNy1fMBhsAijOGDnyMaIx\n7PkDXVefxBOGWsuHaJE2b/EBcXvprCmd145bmWSGP7kjUf489d2yl1/lvAFJ\nyUqPpywACFm9udry4AQVYwGv2FylxZ2O9epuk5CWUskqSC0ax2YslqS/Py2R\nCIp/Zj7N6Y6rM9R+Gt33htLmaXR9FZfPRIpANKWMXknSgLy24/l2V4NfdP1H\n/F+bTwAjki5Xi8LGXuPeEXcNUSGGPMYHQnlh2TbbOVc88go5krC0jUXQc/ZL\nnDHK22xy6Pa0bfFe3wchT1F0IxVBXCrzvGAz64zooxLdMmnkM2Ogo0CJCL/3\nrMNaGvc+Yk2kjhWxZfDiFOQp4qCOhjb2E72T9vgovRU4Rl6pBGQWFqqSgLBx\nPVFFngGXRMkVEbVBn92qPUPj0z5/fllGAetC+IO6A9FVbqoK7dFKpEeFGMqL\n+Pd3p6eTvELHioHGZU8YjIl9ReIQyv7mxggtF7xI9bZtPQTYTvPcOyhExeKs\ncyh9\r\n=W+cG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB29kELQEQSlIQ8SNTHUcqAuwgNmioBiMshuNHjfO6rlAiEAofqRucj3wuueNYLsR7x2ScMVG1YL3kQ39pqMZajIAB0="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4858.1.11_1562876167880_0.6506569752605853"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4862.1.11":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4862.1.11","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"6eb8b43f86116d2adfe657c91e3c740c8b35eb9e","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section, if **showCloseButton** is _true_ will add an offset space in case of header is not provided\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4862.1.11","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-eNcuKDH0NaRH2hTEHc2y1uDOYtychjlzlivMK3Am/rQdOonwsGzXNEP/s986rI1Xt3wQELySlvYPq9GmOeNqWg==","shasum":"2bed01140c790ca1676fc84095a7a29dd8a26fa8","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4862.1.11.tgz","fileCount":12,"unpackedSize":30690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJ6t3CRA9TVsSAnZWagAA6ZUP/jxIzqKKW0c59qJuTSqp\nhdB0mS5P3zqpjucSJwW1bgVFuKbSusXWuotmeRri0jMUGHBwy55OL6HUzL27\nFzU4fxR7ButkWaEaezPXB5bsEsuJtNGRiSTXlk20z79gwNFIsnGZxaiUZWNn\nUDaHtwWO1jUWVPNApLmMELEXECgDb73bXddeehCosymOQvuyEkh9DMpqjlhB\nStu+m+3+gYxfW2dLU1M/K8NLhd4ESXsyeC0zqUdy5c+bNiZ9F2g9t1l1GsP8\nNiOIXhJisa7ayBC+h+kHNm6XdKTvL96+Am9OCSbM5D0nfsGN2cW0aX9BDVZW\nwMgw6h8amXUoWzeY73S5NY4/0jIpOySnMcI3AA3pabakDUZ8LQ6YuUcfX8Wf\n97s374EfAt71TRbOHHpAK6407WlI7JXdmky7f/wkiWzoHxEAoh9fEaqjZ9cQ\n/xav+uTdiiHxXzIp6QD+u9yRgx8Mh8mIO6Ko5unPDCHJXZZRbhCP2FFoyhXg\nl/+q/4HNf5gidGfT3k2PMW14Eb3KnzBOlA+W6NSJ4XkcRWj2QtvFjXz1QBDH\nTYhK/JQUTeNb0FgaRjhEHyPb5YBoLSrRtHIrS+0W/Qsvmo6LCMDoc19kigot\nDuE5P6hLw4f3z91pNtpZSDdfepHWrjGgpdliXNGLTDtR+W2JnR63Nq5KUB7i\nbV7h\r\n=M7j+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBp15/ak7ocSrhlzWoXFTr5bsS5aZrxHz+rru8fPhs2bAiBdJqrLORGhvGEfH3/4yQ3NLChEVY3CE8ptzx/tjvmkAg=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4862.1.11_1562880886522_0.15394553502452868"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4866.1.11":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4866.1.11","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"c2f39d420d2cfde1e078625ae73fd6f07756e0ca","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section, if **showCloseButton** is _true_ will add an offset space in case of header is not provided\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4866.1.11","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-tf1m1I9vF3dlS368cJnLU3iMKD3f41gXRGfC45SQiQ7LlLab1XYyBXiGAgcnhoT7fTxCln7wPZMjLZ8VtweKhQ==","shasum":"54a2fbd0ec7087eb14b092910fff56f757a38521","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4866.1.11.tgz","fileCount":12,"unpackedSize":30690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKMh3CRA9TVsSAnZWagAA4x4QAIm9wBYBrRuB9h0xwH3g\nIqQ7Qt2EcIAlShqWEDJlJlK94Ny2Lz7ytmk6j5jMHk7saf3A5HJbQkYFEvXz\n5KKo1h7yb1sA7K09HTrJXBTv16bHEg+kEtHZeo57915NUcGuWo8FEnPkBDeq\n90s2OvQiUlxvYSgaSilyzv556xCnF0WXQBenmcojGkLVTsHla6kdpfSISp03\nGKOYySCn/NfE4n81Hzevif09XXCr+dAFehWJGsKveUvVppdfzKdyaFhTz99J\nbBt/Do2XJoZIih0PlKu7joKqsivVNqTyTgNv7qzksqjeWJoveFD8MIAUb8Yp\noDsLqG20J9YjKuiTJO4OO/acR+sw3Cgg3ohrWZY7VA9tB7/IoQka5inRhnGn\n73RWFlva0wtmXamaOUKqllFmi6CSCKcaLSA+zRxnMd3dcNLk298nUu9QI5WO\nP20zz/qrmOckBtCKI0RV7YsMeeBf8+399odN0JLuVZdowGc5KY3DFi2e4ZST\nlZZ/Fc629D+1CmrglhzdhdjPxTw1Y+XhDmBYONAbzp/4t+meA5g611oEYbWZ\nyQb9EKGdK8UmkErQSMmS/j5PqEuCw+Szgu4jgUnCVfO8zxWlY3QFo65yJebq\nvViidWAqCnuc9o+2ffzt9HDrqD8e8RRZsPXKA6zOHgpYrkGysHm8VlDYTP65\nHHXB\r\n=B89X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMpVHDrykfAyCxdHinGt7CrUZmbH+MtOQzXXiIQwRuNAiEAmVKFIN+qQ32Mml8OvyZ7M0Rr1CB35jMkKNVa9K9N0vQ="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4866.1.11_1562953846951_0.8316434140782119"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4874.1.11":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4874.1.11","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"5ababde90eb100ab70fc96810edc99749f3b251f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section, if **showCloseButton** is _true_ will add an offset space in case of header is not provided\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4874.1.11","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Ihug2ZOsLoY2cT6vuBe9J7v4iLNL2Y6Ltaq8MRBV4o9Wt0xtYoPabrB85FRFUu7FgqnX+8VYA+FLxKV0aOhHbw==","shasum":"bb4d56e54500beab8a534434e4d1bf0fa2e129d4","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4874.1.11.tgz","fileCount":12,"unpackedSize":30753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKPpKCRA9TVsSAnZWagAABbkP/3uyuTUkHLnaX4PDt8qI\nkCQ+bCJB77f39UQ8B/2KG//bxxWaor2//mIqSHywk7bCYlbFjwkKHxCQZXJY\ncDFXuGwH/20cTx6IuYjkjQrCJQqb/PEZ3zplMC+4MxxPky2OemkXC6aUaWoj\n/NiLb9UhPbtO8RR6vMW43S96X2eZzpHOl7fmX9hGXe7dZdDDW57lVvw1EK4d\n5/GtSNTFi6A/FcOLSHTqH14hPB9livz9FUsYJJnwr3JFK3CKndb8Xuv7Z5yG\nECcHyBGE9bf5AK/URdRNgmiDRdFU9aelgj781YuWPFnVGi4hyvKv4F6yXX2o\nMIqdg473GpesmZa6/FO2UPCL3XSi7kE9EtptnfHeniiHbL0vZpnyK38UXpO3\naeepr0XCko5UTzSNXrXR5x88FIvGGRX+t2graTI/9CSuaxydE6WIXH3kpJ75\nY6hsxmHvqSxu4Qzh6+dDwwcXDSOLNqk3CsPh+jnxFSaGdkTVM+boPxTAUQoI\nEQMPq/tf+xGs3FAE0ANIE5zEidL9C8eFMyMEEzb2B9//BaxIpwBWze75PSuM\n4mS64jbaGi4OSHzzmMVhzPeLvgXKFWkYEv4lE3kzsXI4doeqiCJhYMOxIJhr\npvtTTh5aqoY4Wsxxa834Eho20DFtOVxEaoQHt9h0Drqm3E6BAL7eAeBD3s3t\n/mjw\r\n=Fjhy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGXC0KbKWqc/0al2cO5mM6uCq/pvKNhPcPPVT3AS1mcsAiA+UqXlGKBzJghXYtV7gycRidMymeXf5HT6sKFCZHLERQ=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4874.1.11_1562966602262_0.2474570540258778"},"_hasShrinkwrap":false},"1.0.1-alpha-tooltip-position-4885.1.21":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-tooltip-position-4885.1.21","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-card":"^2.2.9-alpha-tooltip-position-4885.1.21+65282d83","@crave/farmblocks-empty-state":"^3.3.4-alpha-tooltip-position-4885.1.21+65282d83","@crave/farmblocks-link":"^4.2.4","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"65282d8302a0943e37907e1dab11fbd12aad69fb","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-tooltip-position-4885.1.21","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-KFJ2QTVUHd0RsaPDH60wDkgwD0lrziLzHGUlpq4myObtrLtHjp/l+nSD3Pcf4aL7f9P2Hebd/xmPN7JqkdIclQ==","shasum":"91033693a4ef59dc08a8df53eddd88934f32dc4e","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-tooltip-position-4885.1.21.tgz","fileCount":12,"unpackedSize":28925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLI4bCRA9TVsSAnZWagAAw0EP/3zq71R0de3XDFUptf7v\n1u5sxiwAAIc5gsnHsFSK2VtX961/QW6RMaiDvJNPvoFxoV9ue/nhePnYxVH6\n5DdwtWRDuFGyd3p8Lq5OKMm3FwkRBJC9uioUfy1mzoFmWOyUpYsFLfs7f39M\nrH0jUY3JRnUDykHFarkYTbBIIgDrrzv+zB3TkI5quDxYLcHCu6sbORu+V8XD\n29+xYU/odWP2mYQYUq/psIIOwX6Q0JmdxOnrmmWnWEbr+Lsjvfj4WuW+Cw86\nus4UVahb4z7wEEpEBWFWUC8dwB/FAoDmN5j7rflPV674kJIXBvUFKUc4L5RK\nhqN69EXd+SMdxZVeIn3fXCAwKoi1EeGW7/122Xh5KARd/LdY28FzfiE0Mp+N\nPnmZblXpH+KL6IkvGzlvFC+Qzq0R/4bA+SqJrCe+0mEhtwo3g7B5ESIFEIrd\nzZdKKKx5XO5BYtX6L9z5hcpWnWGr56Fl3sis3NplQZi9yL15MhjhHl71aumy\ni9zs4jzPRPOs8tDrvZzM3gKyvBLimStnW9jeXl6HmLYQZjHsQdMYVCtHqC2y\nQcixYJiwVvXO/mxkNv9y5TGbxK5pPpsFGGzli9kWTfxIcBzbcLngu/rKzmXu\nrvFtDty1SjlLWkHzAQ4v2ddXaiRk9mQiAkCAjPoJjJxkCYERhrxDY9uwMeAM\nr2TJ\r\n=Yka/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE8HiS8TfX8GJwKQyF7d3HlI+Nvw1lGLUJRovAXb5iNQIgbHxyWIw1IRybzK2C3sJKjbR76DQIn6gxpCH2c8xY6yM="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-tooltip-position-4885.1.21_1563201050618_0.5273667630372578"},"_hasShrinkwrap":false},"1.0.1-alpha-tooltip-position-4886.1.19":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-tooltip-position-4886.1.19","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-card":"^2.2.9-alpha-tooltip-position-4886.1.19+5e47c95f","@crave/farmblocks-empty-state":"^3.3.4-alpha-tooltip-position-4886.1.19+5e47c95f","@crave/farmblocks-link":"^4.2.4","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"5e47c95fc9cf61a0233196b5cbb82476c90d3aad","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-tooltip-position-4886.1.19","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-vv7B2vgJB7HcmopdwlpZluZD7hfzSxpWVmBnbWQNCMueGacz5popEYvUrCncBSKyc0Vsi2dkEXsgGgx3kO4eFw==","shasum":"0663657aecdc6f22e96a039af309d35c0e0c746c","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-tooltip-position-4886.1.19.tgz","fileCount":12,"unpackedSize":28925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLI5sCRA9TVsSAnZWagAAN5cP/iX+clSkEhWd4Arq7O24\nyKOg83nK+UCkV2I2Evvfufu6L2Qo771KFgtBEQP769y/GD08AeUtpgCOOI/O\nGL/o+bC6ee8APNyZ5IMKr3pvfXm3iCp1BKI//3OTr0eGOtQmWztHcSDSUWvN\n0DMKEqYxn1gV/Fo6XAZAVEfl6TGIJdXhXirZmQtqNLH4HbrISvn3JyEue1bf\nXP0nb/YYwHvP54gcFA7n+YWRu0IyQvIqSR72UFnVTokudmI5fKH2iwSfOjH6\nPT5kwtKVAid3uJka8Lj5asgc6B/E4ortowDS6X82QCBKmnJ7HezdMXh8fPwf\ncYGK9alwmN7P2T7VjRppJZNn36d/cE76RhsDnjGSsELKZelqwXt/aCPqCDzx\npHLrDXbfHyZ1104oYb9Mmn4mVw66QUphbXAO1i3LgLoHr0BovOlvzGVId9u2\n9+CiGTPtVPUvYIN20iTIqtrZBwoXoAxahKeTL4TLeX6cEwQg9ND3Fhzr6qcR\ntk4O18baSPk9uWNNkJlZyVuU+bx46bnPaMHpd0ClPZfE8jzN/2MvBGFUvzP2\n3zVUsSewkruM00xZmEgtjn0a3gjKBMpX3tr/OCcYVuRCEh4uVH3L4BIVFgsx\n1HbFAEimnGN/C2zQMMDkeUZn1hLb2zRdTaRva1MqrbAkkfV6qUWTJl+jCKSf\n3JPI\r\n=/aSC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4BLHy2L4OgbscOs4ZHaIlHaA0MktUuUZm620JzH7jYQIgORJMNN9cx6SCd6jraBVQ6Z3EZFJhUPTUtRAZYtPwnF4="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-tooltip-position-4886.1.19_1563201132051_0.34495568016065925"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4891.1.13":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4891.1.13","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"43c8dd4feb1569bc069494d146f1463b8b3da405","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section, if **showCloseButton** is _true_ will add an offset space in case of header is not provided\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n### Helper component\n\n- **ModalTitle** (_Component_)\n\n > Component to use on **header** prop, that opniated styles your title [Text](https://www.npmjs.com/package/@crave/farmblocks-text)\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4891.1.13","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-573uLPI1Xt5IHBksq0uWkBoHU6IqAdSq29qmsCsZ+4yxdttuu0VlTvK3YZOioVwQbnMAfTSTiJToj9uu3sTBJg==","shasum":"adcceb8efd830f69dc0b9ef3ae5b5dae2bea67b2","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4891.1.13.tgz","fileCount":12,"unpackedSize":31937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLL1rCRA9TVsSAnZWagAAkm0P/387yMUJAFHfQamf4eQL\naWST+03Q5Gw+98kkFPaYWOnqCEQen14z8hqJfiBm/yoPupjz+hBDiPhijC1Q\nMrMxF8Vd5/VABD8l6mfacaHTImBLbgQj/bxyXRak1Czfe0+c8L+bnX83A+Xm\nF7n5rLgTxL9T5wtpd8aUHrgDG0EunUBAwkgpjEM5SQGXWVIQ2xsoz9wB4Y+j\nuBrgiSxJ92SOIXAX3gG52lYjFl+QIxHwK93BrlA74+x6YUShZhoJGtW2wc0t\nXEp7synGAJ4mveXBeRzXr8ycA1r3sstt0W8r6qbQUrPdeIFaMPtRzd60DR7X\nF8SwLIoV8H2WFr5IUlHptBiZ8febK9Cec3H4uBFN3ilQKohqSwJWMgrFXbt9\nV0bPNWKE1vGU8mlyT7UMwXHNIW+okSznzNzXM3gg+Kr61piogaYlTRFKilXL\n/y3gNAaqgrMWLHMwDGeuek9f0z6HdDIvk8IV/zRP3+vKyrlz8TQMXetDlKxe\nLKNZZ77apK0gUfR/YnSeECs6W7mIeFCYZwYavyUaVD2hwJ+hTbu6TagViYNE\ndRZBJSbqgY7pYTXrdXBKyGckeuf9sjbRYcY1suZ4K3TzJAwfEmG9JNLpeQY2\nR7w52mo7RDeHgrCLBjneAlEc9cU9YSb5KhSNe7XqO8q1dIjwHbTxF2uF+B3w\n99ZH\r\n=CW3k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcKT5Xet5wSwKY3d/Wj5MEXykq9O0JVM1oNhPecFl6bAiBGfgh1QbR9+gBMFplh0sc5bq1B3GxxBTU5RMQLHsMwUA=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4891.1.13_1563213162593_0.019215976891976627"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4911.1.14":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4911.1.14","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"70871ffd1a4234abe1eecd4eb31c7a548158ca41","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section, if **showCloseButton** is _true_ will add an offset space in case of header is not provided\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4911.1.14","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-/5ok/F7lNDF+FKLd8SDYQ5+FIfbVSR6SpHM6ZtwAYu/NxDlXT0H2iXDfDM0buR33ht6THy+jl6XDvu6EchoVVA==","shasum":"057e51a7695188ff3838901b9a3b3056b0f8b4b9","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4911.1.14.tgz","fileCount":12,"unpackedSize":32290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLgjpCRA9TVsSAnZWagAAE3cP/idBbfIatSIqjeOx8Q0z\npZtCUs0KRkiSDjZD61ZcfKjZ/TJvEBzi+tjPRTK5Pqse5tRaATokRG0iIzyY\nbqd8AIiNJgBxkLzF9Fm3NsXRztZx3C4rvUqTHqBqgr4yIyYBpYfofq7l4ZN5\nG1RnVXek/pRP4U4u8dRIISDA3V8KRxahmcVSKlzBj7MywmICAwjZ1M9h3sLv\nFe5cE5q85tF790zAJeansc2IaMhYzWrX1LfxXZ29OTwmxUH5i3n0TpaM9SSA\n1L9Rhq+KW/qEnxEWBc6WCEcaA47V3/vRcSPdoiqdzxfv/T11K0bDLYEHJSSE\nT32TgRkxyskyWLo2gU2qS2TtRacE34TkEmEUDNdtpUu5VKOxB4E+uvWauJVy\nPp0oFbHcu+WCv65WXhZuCzlt0Q8N7iBkdEeVhF2tPL5HZgI4PsgqjbG/5fsA\nZ0ZGmECakySA0HdOkUraY1HInmCdOJkrIIikor31p+crc4f+iLvYw1qWb3To\na1Kaak6PN1XXPIVpRJfcLp1UA/iaGh2FfBEyLDaUJ0JmXA5QSIz92uEb/UdE\nXbiKOJI2Oee6xtZ/7imR7NrdU+0I9O9AIqLrZM0rNBOQ9bORN/BS9EkcWzJt\ntfXdxv088GpR1deu1p/cF7CC3oDmFgd4QRUKO7vhLZ0sNdwi4e3t7YrhMi0t\n460S\r\n=ujV1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdf6AfiYHVDK/lPrYLwZ5Nj8Ab9QVLnpiqORUIAykWfAiBvOPN6uF6STruQ4FbFpiAdPSJVyqh0SsfF/ZcIL3Ezdw=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4911.1.14_1563298024729_0.1859762310901556"},"_hasShrinkwrap":false},"1.0.1-alpha-tooltip-position-4915.1.30":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-tooltip-position-4915.1.30","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-card":"^2.2.9-alpha-tooltip-position-4915.1.30+64490db3","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-link":"^4.2.4","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"64490db3b4e7b3d6f996df6f3978b1bdcb839fc6","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseIcon** (_Boolean_) = `true`\n\n > Whether the close icon should be visible or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeProps** (_Object_)\n\n > Props to be passed to the [Link](https://www.npmjs.com/package/@crave/farmblocks-link) component used for the close icon.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n \n This is the a modal.\n \n \n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extended Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-tooltip-position-4915.1.30","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-qaP6bNf+tZt519/Q5E29TxPOXxZHNjT/lCnbV2P2t7rc+KMYr2MMVG9MNKzMlnvGlr2nfPs2mFSkbiBytzIBIg==","shasum":"9c05d214c3ab864fafe6b8087d8e5c57e68c76c6","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-tooltip-position-4915.1.30.tgz","fileCount":12,"unpackedSize":28883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLhmlCRA9TVsSAnZWagAAQJMP/RbSk7UfdyT3nbEnMC0e\nCiMrdhd9BAzahrV/G3U5lTCYriKtx+J8rLpwc5eA7oziMMcS42SBj5bC6dct\nq1tgKGvkYAVKkn9chG93WiZL6amyI3AWE2L8QZaXEmqDU3UDhpxrKNZ1fMlK\nOqihGhpgP6U+Kd/2XONBamv0vTdU3QOoVLrbgaCZqr/iiqiBmeR2wNq46pQL\nxC0So3iE5a4025RFQHzvXSs648oohozECgSWrBy/6Zb8I0MljdWqFovO13VB\nE2urtsA4kEwQGW3RB00jgtFX8bbILO66MkczLG+BARiLeilb0mAaUHKB8tAd\nMlWsiAEn/NUUOUHCNH2I7148x4Vwlb42rlTnq8TeYMiPixNX1Erisunlr8Xl\ndcSKeDuIJUm/8mzuVbUfESqWPDZCyG3ffMRfo8xY5VhrqY/CwRP523P+G3FT\nlIBrmXG6nQa9bMFYJU3YiQDlOUqwt94goVYzJq/xO9Nj1v8X1fVNtTLgZhI2\nsA1vN/MaW/qLMVZ7DMKrtkVCGlqcXNQUzopI1ZTohFGOLyvLzyRVnEMXvjBh\npY/yufO3vstNTG7PLvWK4H9HU/LzQ4lL5dX7n6LIFUzkQRk3HjWOYXMdVVbC\nHuud//qrhEY7MdU3t9ZtuwDmKWwrVr4n5rEAn8h8f6oSnvN08ixOzgggl0Pw\no3Mx\r\n=gdbK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzYyah0aDv9NmSw7735bTaeLNJpR+bnyUro1ZqWgUiSwIhAJ8RUZLJ4FNke8bTIMYKCK0LkTwoLfr2UQRRk7fBOPde"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-tooltip-position-4915.1.30_1563302308601_0.6407174131744606"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4919.1.16":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4919.1.16","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"37d8e62868aa70884f53f87850070ac9cccef82d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4919.1.16","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-WwlD/2834ZJG4cBpZx0GbR+Sz46m4q11uSLmqHs3SKk9RqJK9IrkKRDe8XDC3osxS5DN4SWPZFXNbuunfFKlhg==","shasum":"a9fa99f86be6bbf3b5ca3fa1e0fb5ead4ba35e8d","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4919.1.16.tgz","fileCount":12,"unpackedSize":32292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLiQkCRA9TVsSAnZWagAA+s8P/3wmMf1T6PXB7RC1DsZI\noLCfsPQbAdL39SmmyfGmTSi3wHJWWXJl74dPafbhZc799J5QgV1Ga/uB+Tbu\n2C0kilw/Y4cN6d1pIARkhr/J1SjD1dqCLLoY18g9SBy9GMT9A0NzP6OjXxJu\nGY5VIjJCFhhZ+j+ol9Eo2HmNRr2I4kXmR/q4IUoOlyrFXrWNJ36ICRyoElqL\nF0e4bfjS3q6kj48Uhjp02darVT8lTHmQXYENzhfClr8W5Wve+R1PyfpiwH8B\njcTiZJKY+xM8BKt/6HnZLApN/r+opHWcVST7B6UmPJ0mOm8co6vwdBOR7cao\nc5ku/MMuTcyyT6DCOJbJgZbYqLzqPTB7GaO5NRAYFspX6Cu+hDDV+40WRSjd\nzxtXaSAqb3HLY48UN+D2kYj7Nd6T5+m5ADDWJOqWlYMTSb4n6GqXgH9mhiMb\nnYSfqW8rRnRhDMcZqI1Ov20U/hJNlc/buM2B1qK2YZwxVGvXiFmhKmWY5AcP\nfBqJVXIdInpJIs9YRJFH0MOHx7vghlaetkN7sL9iUUo9hcbu0zYCTo88WFRK\ne18oAtOJyyqvCZ4uWuss+9vElSsCUTUtkcrdZkTkWihGWOXUBQ4Yqcl8FQYt\n+al69OBalwS1fe1kd26xa7rSHtqXicKWLB9S+8koTVE6bL34NXhBNkKXQWbG\naDFg\r\n=+dwT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCstnNbmQDCwfny/xbqGRMP11OQdDaelLTgy5gdKQ0K4AIgZazkEFUhyIlClJY+8fGL7UF7z7SdD6ANN1acvz5gA5s="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4919.1.16_1563304995405_0.39959636830145695"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4917.1.16":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4917.1.16","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"37d8e62868aa70884f53f87850070ac9cccef82d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4917.1.16","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-60rZbGC1pfua1eyTdKAigiXCRE8thRnhvNSN0CxyrM2dcBvpOLVpRusLnHmF++U0Tp2VrGZo7g1NOm2dTZPTDg==","shasum":"61460abcd9e46d4472d38fb0598ed4419ca976f1","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4917.1.16.tgz","fileCount":12,"unpackedSize":32292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLiRRCRA9TVsSAnZWagAA3MsQAKJeRH4qHINT1L13Huvz\nEmP7GSmct9MNdMr1tfiySnMuq69jSn8U8Z0OHQAo9TNuHcJpYYIuPQQlQIR0\n2dvwPv+Xtl+3aNNPm9DXTMb/Wn3NcV4UiM5f0ALSv3j/DUk7ycH03GYcI2M3\no4tFGme5/br5UfygCj3/dMLLe3Cjv+n+twiel1ZGGBQ5cuWn9pE0tQX3vvNl\nfVC9SiPrSoPogi8Nq9NtnfNy03jsx6eqPYdabSMO2IN554VKWtrkuIoHellx\n9JD6DdvRy0Y6Qncl+Q5XVJT1Hi7Otibx5Ku11gBkKP4XV55aXQ4jAmhNyV4I\nHdxpr+sHFi2T3U/sik1jCGQmEdQcsxsVi2dB9QASigjbCZGfqQxEYasFmap/\nO6M5xI3U1uRa8xyXOHEZkJ0uaAERQMIFV+q3gp3Ws/wc/FyedZpQKjh7Ongq\nUZ1QHgkWVwS3rB1J9EWWDc/w4LhNR0HeHcwLnnLCL+LBtNML5lV3njldh+J2\n5J2uVY9qLvyUi3MVNiUpTZKzy2tjj2KSVWgXvpS3WBT4MVr8Z6gJ0YX+2ve2\nOTqLlaw+7XQGBqyC0FGLgXW4lE44RyjpbaDT/uFlnRfTI3iNbiN9OFRKwXAy\nwmkm1LQE6NE7QFqzBccnBLI4OGz3y1ouMlUuPOJXU72Vih5XgZk1sBTsxvJo\netzK\r\n=yjPY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiUuVNq9Pk1FMEpGYxjJmxRK+2vVwROa7XnvNNySwOewIhAPl/irAsTvkvtt/XQFkG7fosn2xfLxaQm/9S21KAnKEi"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4917.1.16_1563305041024_0.21583113543830246"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4921.1.17":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4921.1.17","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"2e26e6409e58cbe9c508ee056309c8edf3af3d46","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4921.1.17","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-NHgJmwRMqpBAbLdjJJT4/M45gKittQcNv6Zn5TRfDm9pvAK86ZLfdkQwroE4GpqG1zhwKS2czN4/zY6s0dQHaQ==","shasum":"0997450a8be992ea626537d66c90f0c57bd9d0f2","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4921.1.17.tgz","fileCount":12,"unpackedSize":32292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLiW0CRA9TVsSAnZWagAAWSoP/RCIyK6j81F6p5oeBHRt\nUrGNblY9pBQqnlbhdyw4bU8xvTN5wlNCLRgVINHKTGp5liTt5xvhsm/HB6+X\n6gTaxjJ/j/VeUfhSugHyKJQiM57OJ35OHEjCsAuWuK9viCv3tWvE3uTwxRYZ\nSRrVVxSe+WRZ+NVYx2ji2XSnLDjR6NvtfmhQVrJ/H1ykt0pl4jyuHhQRSb2d\nNgJ056KanhKSjVyNxmOUb0IiO5wbOM9qZNeIZdHGYkuh1j5VY+QESFF2VxHl\nsJkn6kfF2BN083BiCMidxUSCciN3bZIFHtjcnhCE58TJyWA34ZDtbTWFr1sr\nNiYMiOdGfcDzBaSD3Ux5DQHSHNM0etU6jOh9h+4ozSJbmh5pbG3ZI9/jL0KX\nHHL7WmALPItqTGFnvvhE19CWZzIvaWZudKhLSWNnkLxzb7fjDn7rEcjdEh8j\n0Ae2OXkVrDyABgEsGZwYEPcTbkJbunTRPMzdkwhEu3XxsqjK99pjNXudENtH\n+CpQl88xXwOHJvxBi18ozjr7P7ofJ/OwVP5kALq0b7a4YoN8h97SHWFYlpmc\nLJE1pk9cILmUnsIEcI/tPqEuOCFvvOHCzo5uUNJ1wnp1M0TmnFyouKLIbkai\n4yoLIZqz19d+Nq9reSwXjyZhpdI2MXbRc1/b9LbU57iNUcTM3O0cupYTwdNU\niMCc\r\n=UHUR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPwqsPY3oWiOisH3fprsgPLbDvO0HzrsKX8JtTNcpMSQIgdpShf8hBp8YaCuj4W05/8GqNluRIfePEK052JAj/3HQ="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4921.1.17_1563305396036_0.5654763079681631"},"_hasShrinkwrap":false},"1.0.1-alpha-close-button-style-4939.1.14":{"name":"@crave/farmblocks-modal","version":"1.0.1-alpha-close-button-style-4939.1.14","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b7e70bf79234650a6fd3f44733f8ab45b6d8fd9d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@1.0.1-alpha-close-button-style-4939.1.14","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-km+S5WUIqvdWKeEW/yfo5pmtcqocMbzrQ62eh5e/6eOwYbRJejHLXVjNJq5zy5nTMTEnDNvJ16Cv8D9oOe3brA==","shasum":"bef2f6a61b005e23f97024df91d8bf64545516d5","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-1.0.1-alpha-close-button-style-4939.1.14.tgz","fileCount":12,"unpackedSize":32292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdL1WbCRA9TVsSAnZWagAA3rgP/2NTnDz2UrfhBSS+XsYN\nOONfy8s0ypGf8CEoPK18s1T6baSCQWWdaRZkbnkafja3fn+LFPqJuBKaueEp\nTru8e3VxB/PkYTBThBWMnKP7u9pF0qwT/u5Ntvx/xDSI8XH9KAselW4fJZB+\nqYlRX2Xh1LECLp/RbJPB7V+8QN9GM8f3BG3XMkwBv7B6bOAexHvcXZFz9d+R\nWZCRK3sBgrJb8axVPOxQR4PdiNZ4R60y4NoIrzSnqqww9SSswdsm1THr+zcC\nuY3yPigixnSgRVro50yYhXs02nlwaM2lDWZnOQNSbLzf3b0li2e7EpwOoqWe\nQSwOVnP2o0trWMjLk7b7z8saFVOonqrY8OBon32d8FgQuq0oLKwjsl4HHzui\nKvZn7ElETdZ2VBVMXEQvoJ3HuNqrs4auw8zG8XB0emBtcgLma2TUlwFeSYUI\n5TvQr8tymhTnZCA9U5sPIGwrNh136H3HDD0biafW7JqMgUP/yjoQ1wQCHa6e\nHam3eEM7xZgBKabEI+Z61fbIQWDfWM5tNc1bOLzPYGXt/BWly3rQwJw2vfOy\nLgiRxdYjLPqRsnP7/nogrKGh42XrKXUCr3tp1Lutt/+ThrXDUwQkwe/NUBPh\nxv2j/nrGdlFMWLagG9GIJd/ujVJvnseRWRRkRnoiSE5J7kQ1VIDRwlg6GYXu\nVWOd\r\n=GMJM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFA/1IKj9OXpmcdb0xmfEHuM212z8/IepSzGqouvqxzAiAxuV5DzWxUZbUqq0ndmBeok+PcDqb9MA0IpQwqcp1B9w=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_1.0.1-alpha-close-button-style-4939.1.14_1563383194118_0.22212224451002482"},"_hasShrinkwrap":false},"2.0.0":{"name":"@crave/farmblocks-modal","version":"2.0.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"5962b65bbc7012d431f34f59819296d06d6facc6","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.0.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-S17iUv2gUwXw0i1B5dPaGUvZheutwryf7zD/gjJRf4AQZTeizUvBbI+pya6kml0kyUo/F97qPomxTfpbnlj2BA==","shasum":"263a89c8c8b4e6e5d22845e5db564ca5410b2d0c","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.0.0.tgz","fileCount":12,"unpackedSize":33467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdL1qFCRA9TVsSAnZWagAAZuYQAI8SUieeVi4+qowUoPmJ\nFwG2AoFRVsMtQ5cL0L4CvOeSsfitm+YbdV0ZGC/vezHpxi52CnC1a6yNWJNo\nhXTuJvcwrx4n0qXz/Yag5D4dhV9psKGTxqYOpdKaGTVvCBrjKVIXa/c7Yj1T\nuH/FhbvPrXqcY8kTyY7tBKcTCyqJ085SDvgs1pId/YyoKq0ZeZEwGgQSRFMk\nQ0UXiE1Ef8VynVCMuNjiuvj+4rqsave4NwQAZx3Uq6y2tsvpBZ5TMSzyp/+q\nHPN3zufzF7wmBSevKA8eUIDkMhOAxF/5ZZha1iCeR2uEvUmm66wTKRAnN3xU\n+B0VBN01/GsCw+ceKBepqqjH/YUx/XmBgYAO9e91Otq1dq9tViJ8+i7zmcke\nHQ1rpJd6RXhqjXtAg4nQN0wRSfawrQ0Z3pp8ert+ZWbCEqQW3EZUNBP7xIrS\nbP1SFn3ED2H5ftGfKvnQxg+7pTRx0289s7ZashdJfUkkfiodvWOwXjhVBMr1\nJvpm0hkqp7FVmBckxmtKwpPf/mpacE0PP31oblzI27gYd9t1407M7CMCpqAM\npSt3wsjYIDArgVG0hb0uAv0ntjRsdyDb0RORHX8zKWfbHja5TabDL38I+970\n4sXqvGHO/vdnGQCy6QxrEjcwqE5TARMCiW+oZQFCU3Nm1oG2WkbMSXzOsZdl\nBnqI\r\n=DfAX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCc3XAQsM9ZcYqj3vSYygukyBPFyPyZyrf/1CAchUr1lAIhAK5ZZoOZnwn3ljEEVWmQZeBSB3y9tirwe1qBOEjFKfzV"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.0.0_1563384452586_0.058661743014656764"},"_hasShrinkwrap":false},"2.0.1-alpha-extra-subrows-4944.1.6":{"name":"@crave/farmblocks-modal","version":"2.0.1-alpha-extra-subrows-4944.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"a4a1b32976b24e6a389b6fe1c14d20a23b0a8706","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.0.1-alpha-extra-subrows-4944.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-06DXIP8A4JlllXqiRyMuxOpEABguGJwDPeEp2OlVL2llRdodMYBF0qKCHfne+36hT8jmZsGFbBeJH1ph07/ViQ==","shasum":"ff4c19c57760a75ad02f37c834ebab69cd0e6c5d","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.0.1-alpha-extra-subrows-4944.1.6.tgz","fileCount":12,"unpackedSize":33505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdL2hECRA9TVsSAnZWagAAk7MP/1IgovRdvUC4sfA3S+aw\nMe/ExYgly9aIolxGMkAEr3/uQEYVWIF6Nhoco6TivqiONeYN0FpjX8wDl7hZ\ngFDQWHo1kOYC1nvgUn+Xu0G47JAGpdi3rZgjHWDsvsvKG3qZfkmRFwlLNI1i\nwirEZU8REK8iia7ErjCp71jL2AvQtYNRWjMpuD59pbdG89IszWqa7pa060Za\n5ddMeJOpD9IInDrY+0NVQfcedi2Jhx7FSDGHSasoxxcj2GeFIuU3P9RN9fRg\nu+OApPCZ/biZem+bfTRcgJx7DegDJobt0P8HvF76zvW3Ocjw7fFB61mJCnAI\nogc/BKz34acAK7E5XnVp6CJW12Z8YAPSYjjDLUXd/G2afw69cvWqGgkLrpQG\n5jRK7o1NFCh7H0BAcgiLWk/DtUD1XLiFitbI2s7DYJ/070MFGlFVD08+sFjJ\nKXrYaNJeDxSHW0wPWhXJEYYBjYOWDvMfsknRcrFnMMV2xeTdxjnyA9HEvvYy\nFCE1OtD3z6pK+NDVa6vNbHnsSyHtofMcH7ut4XrKBW//AsM2neHdHO1mAnZB\np2iYROMm4xOGaD4oo+6w2/NOav8M5L/jBhXuJWGqJYuaECXKDT/jsE7zbYqr\n9+4Ku9TO0i8aVe3ympmO9EcaeHLi08P+9uPS3BU7qU2uzqNF8GRjpA7HQyKC\nEx0E\r\n=lyHk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC31304GOcjoQQogVWqQIiVZL6qLQanhQ9RA65wbzcUcQIgdW4b/L+fXybzVtM6whm1BKZvDrNG7vGTLGPTIbSku8o="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.0.1-alpha-extra-subrows-4944.1.6_1563387972140_0.5914193428825716"},"_hasShrinkwrap":false},"2.0.1":{"name":"@crave/farmblocks-modal","version":"2.0.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.8","@crave/farmblocks-card":"^2.2.8","@crave/farmblocks-empty-state":"^3.3.3","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4828b01a0cf518a52488fee93455df1e66f5d409","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.0.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-W0f5+bXXQ7yM7T/9mbmxSN+oXvO1xPabJzpKjN43vKCiKuu7wpaudJafkOd0tPFu4gVH+EBDxFTTX4lMvIxDWQ==","shasum":"871333858e7bb59af78c8a7ababfe18df37fb69d","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.0.1.tgz","fileCount":12,"unpackedSize":33672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdL3IaCRA9TVsSAnZWagAAibkP/32BsyMZG9gRrqsdSpLm\n4Pq3hEYmm4oYcaiXfdHMK2bRuVlm/qjr7/JUrzMotdCHjqdEAWUHSpgu6tah\nhybOoFCLvCArN+WBPLsoTLCWQPilI4YDHTXd1vBiZkhNsY2K6aBFpFju3pwI\nZ6aw8VRLGA1fDLR3GHic+cURSzLH7aeJFP/fgUCjyl9COSqwH+KebZqND0fg\nMEwGCYemP4SFLHy1murZienrNaD7e4Uutci8OUqfviPsnIwmorVkMNR7RJvT\n4xb8dYsvBAFH6TqRZaYmCTwkAADyvC+jCUvUmg3X2WgF+0/tEvMOOgN/XFag\nkFpKj6MR2VhkZF5s2S1jCMRXI/Eaz23MsR2cTK9HNbI1wJQRiP5QARbiazKu\n6QPcBVmisgmY5q9rTTSu31DHxFx+Yfk9JGKFpwHl53VSkHitq0ORIrQs00t9\nOIDxw++RgqRkckPDqnOkDHAASWw7OHUOsnvzo4mBKOLTh/7P4NltdhgeV76M\njjfEmoWy5sAlzsk/qAU7cMtckn65GLr5njj16UKsO39A81TsgzSID7QxPIbH\nImXwxrpJcNwqfwIYfScNg3K40iibUebgFwY+oBhofdwzh+/TBxqkBrPp8x1+\net3HwwdBhUQsTblHVGMnOIKPR9H3CCrQiH3AvCzrxTOGeL/+aUQT+JWoQSCv\nqnD+\r\n=xO2i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/BJsxxLnY6UWXECmIhNkdCaXlLv24Ye9lUHgqDKhplAIgZZGbLBt2HI6rVqKliOJW1EUAmQF5JHaa3V3ebLIl6H8="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.0.1_1563390489903_0.28810722536974653"},"_hasShrinkwrap":false},"2.0.2-alpha-tooltip-position-4957.1.25":{"name":"@crave/farmblocks-modal","version":"2.0.2-alpha-tooltip-position-4957.1.25","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^6.3.9-alpha-tooltip-position-4957.1.32+0eabd216","@crave/farmblocks-card":"^2.2.9-alpha-tooltip-position-4957.1.32+0eabd216","@crave/farmblocks-empty-state":"^3.3.4-alpha-tooltip-position-4957.1.32+0eabd216","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"0eabd216ab54aed7a0ea63ab8e5ef575112cf0db","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.0.2-alpha-tooltip-position-4957.1.25","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-/vR9EL90AsD9ePcSpFUZi1JdPJsjyJbsBcpmoTWMR0nlN+e7Ejn/UmKy8psb5R324Wyfcs8FR7qOY0MPKlkLlg==","shasum":"904ddbbba614da8b659273a9e7fa7b6edf07deb5","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.0.2-alpha-tooltip-position-4957.1.25.tgz","fileCount":12,"unpackedSize":33840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMMYDCRA9TVsSAnZWagAAEe0P/RFFuJJkr0JqU4ZQmSnN\nGgnCqFUwlmeYN6nprLZX7WVT3ViHOzRLmiomdWxEjiNLbJzQdk2ktp+DZPLg\n6KCUKlMGI3TJ8Imkc6/Wk14b7Li3eft08KHHQUZkslPT1wPt/1Afhijskiao\n1PW30UZTaiK+oE9wpg3yMK0lwm+czXcNBOxwyxQOdGqS+3Zc1aK/zrffpzLG\niwCHO6Z0lTWAeR/08fzkUYq2KUQoMNB75fDAKqwuDmnmT8gXIiCasrf8xYYE\nnlxWcIwP7J0h7eyqFeVOJNfxr1tiMHHEw76wKhH4jYRd2Z9YrBOoZU9nkWfR\nyt+wKcF49nKXN/TMqdJAFv7p9t79wTyB+3YgVKCDMbUryIzj+bJiqAwo6do4\nP3or78gPDNgZ/XOe+zxVJtm8UlgxlRE/8TCo+S01KFcKZ/IVWUaL55p+9WG+\n/iwXeXiOh9GEk1Qom0IwsDNwmZacHTmRe+w5N9Lswu3nxpJRdHk9Ct+UODeF\nXSKqelV23PsIizPsmFLbsCBh3EL55KyriOpYcLAbRzBh4Ktq3q9hX15Ej9B2\nfrfYYECjIhpGL2zETZ4b3HosIn/TQUSeHjd1Z/QWM0y8qg6uV7Nx93bhfumK\niNKFeDxtoApops4Sr03abSjWc5jmJQ5cxHoXy+dqkO3h/xl2yQIO1Y2RI7wP\nNOHL\r\n=sg7b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGQeNQXFjzeOEcLG3qiUlQMdp0z3dH6cH9JX03pvQNpAiEAjg/v0U2tEbWllbkOovcg51CX+w3ybc9mUTw2j1nUfVs="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.0.2-alpha-tooltip-position-4957.1.25_1563477507139_0.152662857614968"},"_hasShrinkwrap":false},"2.0.2":{"name":"@crave/farmblocks-modal","version":"2.0.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.0","@crave/farmblocks-card":"^2.2.9","@crave/farmblocks-empty-state":"^3.3.4","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"6d3e4fa68dfa12d7a4988b095d6cf2fa2541cf99","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.0.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.13.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-42I7EJyfgyvsWA8+brLNfPeKk80XJ/uoQkSZ7Ij1kq9LVurTW9PZrH4hKIX/6GrsW8cQmr3Y98TJNStz4POfLg==","shasum":"91c11aa02381bc3a94589c7646de960384f555fe","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.0.2.tgz","fileCount":12,"unpackedSize":33877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMMkmCRA9TVsSAnZWagAAXFgP/AuvEt2TN+oE1SPpjsHU\nVkHaP2fG10bDgGg7fhwv+mSNf/yU2ZWI89lKzhn3oL1Vfs+nLF1bSbfrLa8D\nKIHeT55m1NEOSFU32LRx8CTWc4erG+BoSZ0OTTtKnCpJOMTwZkOZyfcYNgUt\n3JRD3qKYNHEocRmzSfWxPz1Pc8ylLos6GHsnWrctDt1PUisLK4QSlmR3DYdF\npo1pF2Yzwqoea4uNr6uKtkN1cbjNUwl4aBW6ND+Wp0qd7qElupKAqh0KUmyZ\nXD95hPi+6IpuzbAoPDewgaWIyUm1jg834YP6UQL5MbAreV+Cn8CfGZ4sSD6F\nj6co5gzSui76NxGfIt54C9tF6jY9VOvx1gqH+exZ+SQ2Y7urlwTakVvcyBfy\nnhDQpqWitaFY3QjKvmWkLyo12p3eD1uesfaQ3bNvho/AfbyqmsjofGLP1E33\nwvp/zB+QfzrqUVy2cpy7xlMWUv/dI/DroxlRfbz/1RtDxXJzqoTXT8M7qY54\nfsyHxHSiI86WfQ/CpVsEcp/XAXcZKry33M4XOxgB1sc/GjqycUEw2BOPBwqZ\nOh0hnJmOGU1NEFrvwwVjouJxPZgZBY7g1/YW01f04BZQheY5GHzaFPTA1GYK\nQqyIFNoYug8fsQocX7kxkjqu4/9bwBxWqDm1UUAEKXBDsPII1R0qY7noPgt1\nJ6pL\r\n=PBPJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+DVp2p1z8bYIorA1vm6tpMnza5DXNNP2Z/scJT0aocAiA3c1f6FeeeNzDayzqQ9BlUNJxXa47T/rzIAxG3c35iaw=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.0.2_1563478309732_0.28731629761421074"},"_hasShrinkwrap":false},"2.0.3-alpha-fix-empty-state-buttons-4980.1.4":{"name":"@crave/farmblocks-modal","version":"2.0.3-alpha-fix-empty-state-buttons-4980.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.0","@crave/farmblocks-card":"^2.2.10-alpha-fix-empty-state-buttons-4980.1.4+f3304138","@crave/farmblocks-empty-state":"^3.3.5-alpha-fix-empty-state-buttons-4980.1.4+f3304138","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"f3304138c5cd3bf7df2ddc9d7e7a66e50ad437da","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.0.3-alpha-fix-empty-state-buttons-4980.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-/y7d/YXBWl1+HehXzsZkzqdZPNRIM5bhfUguWOL4ZoAjiUG/AuZzlXXghV7/jcjNzAWFB982+WG/ZTZ1wjRYgg==","shasum":"812528038dacf22da438a45784245dcb252b47fe","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.0.3-alpha-fix-empty-state-buttons-4980.1.4.tgz","fileCount":12,"unpackedSize":34022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMgkyCRA9TVsSAnZWagAAybkP/0H9fYg+2TVUfBnlIJLY\nieF/ueRG97ug7xEF5Wy+9G12wcwqYaBi965M2gIFPEcSxPjyzYPmG70qonxM\nPAbT61gRZ2qDCwAFku8f74F7AQ+rOxS+YPkqI/d3dLf1xnG1uyuBJrI1jYiP\nLigtRkykhX2nvKhCOfmnhgh8FfoPfB+VBJsIf6hKd0MArnsBaOf9a/ZwIDDS\nDXpx399NuSgO0Yw9OW6SooFN0qMAHss3/QSaJyxbD85UfqPU4ll0iOPayo+l\nkwPyl/QLz1lFMyCz2YBK/91rA8E9nP9jxFlcdyqZhRN2/4xbCbTl97jktrl3\nN+qOPXowsRI2FurJZR7PtTWJvaF3o9gomgu/dmmPgGP37yB7CVr5EC7leQuT\nTMFb80Y5oB0auqSOLEILRxQwo6O39waTsFGJxg8sywIOHkcMBgnJykeFESKM\n/q0Cb8G9ZGVO1hVOF24SOHzDAZiTvL/fsnTcnzPC8DCWsZgSlEmOO7/1WRuk\nYQWwwKIvXddwNElEIYtjN7hmW9QkqQzoDnlcy+FT2NwJgfje0nzvW6zHnsA9\nwTVxWSw5uxzIU0QCukcj6JxySrEUjWKhvCBBJglk6ILUGj8fxcFS7vI/VLCO\nMYGakM+TeENAJmOrVU9nZwIbkA5cd3RHgmHWMtwWpTx/E9rTu5SgLVHHCb12\nMVTf\r\n=0qPo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdpx1jPnlYy0lbV/dbbewvtJ26NeOSZtLxt4AVR6fP9AiAL86SrjCp+aOwImWKs/vjHHQMsjQC2bLoG+cSICxMSZA=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.0.3-alpha-fix-empty-state-buttons-4980.1.4_1563560241460_0.3759720439353422"},"_hasShrinkwrap":false},"2.0.3-alpha-fix-empty-state-buttons-4986.1.5":{"name":"@crave/farmblocks-modal","version":"2.0.3-alpha-fix-empty-state-buttons-4986.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.0","@crave/farmblocks-card":"^2.2.10-alpha-fix-empty-state-buttons-4986.1.5+eeab2bfc","@crave/farmblocks-empty-state":"^3.3.5-alpha-fix-empty-state-buttons-4986.1.5+eeab2bfc","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"eeab2bfc47b583aae02a18ae84412fc2a4cced4b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.0.3-alpha-fix-empty-state-buttons-4986.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-qL1hJRoxfXitR60lzeVajNv1RWRjlKWJSwF8l3a6yvPrD04Ja60Ca719bvCIDYnE8wQtb+sZzGWVlt9go1ATZQ==","shasum":"4546d99cfcf443d1d39501936516990841acdf6e","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.0.3-alpha-fix-empty-state-buttons-4986.1.5.tgz","fileCount":12,"unpackedSize":34023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMg2SCRA9TVsSAnZWagAAnpQQAJD/+hxHubEp7J1v+9tw\negvahZR0/7ovbSzFKx5q559IvTPWhYUFxbUXPJ1KrU/5GDK5i3cwuormiXu7\nkl5bZIGW8nDF5Bsj0CRi200sUmFrtZJ+EsACPx7BaQ7AIG8LhWINHNfkEL7D\nrWEY7e6ZghvO86anREGtvLNazI4FirZsg67trTuVHFMgeZRXYnvkUJfDtrjD\neUy0n3/d6MrJCL1rMQV9fC82oTG3ivnZZnKroS40EjNUWAuo4Bn4/ZDsINC3\no3c5WjWpjKeA50WMIryon4l6Zl5w0fEqnFrqTwIjnrydKj6bl9TCKbTF2wjj\nhHwX4e20/VAUDXdbMXbnKGWAzbCdWGuiuvLJMd9dYQtBIqEpyKJQBIeJZ+Xn\ncCl2zmCbjIygM9savPZMU7h3WyGRQOLpPsArfdj7NFr1rWlccQBqyYvy9/pS\nBN/RsFhB+aEeGhwJQKGQ/HCsno7z5gmGfTJZcADjZI0QDD7AZ6iCm0EgoOhZ\nYmgyrijJUaVx9pBwVhz9V5mY7bBzHQ1vdnmDXRWIbQeP81uuAxB03QACJi4M\n0NXLSKy1ssE2t0uy7tfPiKX64fe74vOn0/PV2kwfzHlthh2IqLVE81lbIWsa\nilH5OiJ/6GPSmB4YUj7+tjYEqV9wP5Y65Y/Fz50b0x4BGOK5qCIJn9TyEGPF\n9402\r\n=4p+c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH7YfYN+QqNHlYXOZzvwre06NRzHJ9GqV9fENWBP3h7iAiA3PyX1q+Wgq00AzJDc0VXxsOcU4h3NS7mya9YbgGdn+Q=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.0.3-alpha-fix-empty-state-buttons-4986.1.5_1563561361684_0.3933115690513549"},"_hasShrinkwrap":false},"2.0.3":{"name":"@crave/farmblocks-modal","version":"2.0.3","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.0","@crave/farmblocks-card":"^2.2.10","@crave/farmblocks-empty-state":"^3.3.5","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"9d3b9b490f38b9330cf21d830ff859cf2c1e51c4","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.0.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-h6PQjyHfLIZLmdiXt4MNYJCDXtNLc26kdTG8qUfeK5etR6XweacVidO4YPCcKdC2zIkgC0GZvl5QrAw9WcRidw==","shasum":"2cecb852483fa390843bcd3a9fe7a247bc5addc1","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.0.3.tgz","fileCount":12,"unpackedSize":34138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMhuCCRA9TVsSAnZWagAAmkQQAILf3tb7U0S4Z46o/+2w\nXNhkjaTJYVCSmXUEthvmYZmrywAvmc2VfT3FbAfdJU1dC/Oca/Eytma1jGoY\ngs9dn5pafLVr5CfvKZf1PYPaQZcV7sATke20kxQkbDc97rh37dJOpD67ExxV\n73BO+5reYoUkKtOqoQqezwh28PeMSoZArTrhdYJRM1bx8AEK2+35zYahLYsG\nidqCktLbvV3ZS0o64lV29l2sTn2JzG9WG4v2GfPBMGB9MW6e84f7s8vZduBi\n7pznKT+E7loCIAvmolAycgAlDw8cAIW6mTxn517ZVIRJIsQMKxzA4eGe7TTq\n5lxyvXQhj/4b8jmscK1LOr7l5lJKAAyTXFll2BzX7G192XnFsYf113tEUq89\n4DmDABrjrlydUeHqTQh8Vd2Uol5KYBY/e8pfvl3TRMS+uUk5mfx0sVAu4gYh\naGfh1QLdRQVpEDM5IfdfHQ9G0wIs7RkTjXWSVC2e3jwyH6oSP8qlK0yX3jWX\n5a9uTvL7z6hJMWqWf5Q3shFM03SecOkODH8uD/XaQKLTbUDwgLKeBHgpEaOJ\ngOyG870bpiMGKv0lU960X8nJ69bhuvFik/vv8YvqnXQlbTdPzUF0A6/pAJA1\nhrYyV3QKwQ5UW2RrKV6KRAImXFsImfw/bfHfujVTThMpgAQX2YeUDWXhhKtr\nqs6k\r\n=khIP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDr7Ixv4yIezfC4AqG6z/iWJiSoGvBVMmcj8aU618lJDwIgdmyoTtS1pCAGmK2/aLZglUuRI7LX95foNJQiYinOgs0="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.0.3_1563564929929_0.45667856347511937"},"_hasShrinkwrap":false},"2.0.4-alpha-memo-modal-5066.1.12":{"name":"@crave/farmblocks-modal","version":"2.0.4-alpha-memo-modal-5066.1.12","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.0","@crave/farmblocks-card":"^2.2.12","@crave/farmblocks-empty-state":"^3.3.5","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"d38f8a2754b78d07c38a68aaad8f669ab8d2dd4d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.0.4-alpha-memo-modal-5066.1.12","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-MPdroj6V4fhXI3WsZOooEkQwRU9nur3etwhK6sf6ViZgcBqymhgvyqRh46IHDDCKFvHpfa0hBx709btFoQy+iQ==","shasum":"af0388e96dac8d2df02772eac3513bc41321f9d8","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.0.4-alpha-memo-modal-5066.1.12.tgz","fileCount":12,"unpackedSize":34336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdU/wSCRA9TVsSAnZWagAA2OAP/iJatIqzSqtfR5vGB6bC\nD8BH3KiXPXA+oHPRY9CJzXM+/dcIeNrc8AM/Ax+Esm78hpbiIUShXVn4IBw/\no2g4rrxd5V58hJy7oUXetxC8YKAdEv7h8glD3sE05jnDPahiAa3E0OVK5M/x\n1B6K/phWe3Lt5MiDy5jpLVClmosDJfTxl3JvBXPa3ZykmVkTbswegEJHjJ7M\nYQIpl2UBQNaMzQ5e22R4OzHgMUNsxZBoyAzBLAb+U75NyjH+C+VpevOQ0L8V\ntAyMWnTs+Fe/L8xcTiHYYa3A1+7nbnrAhcdLdJcVKVT8fLFZqg4sJCojkImi\nfs3p/gZy4APJdc568uoPh0JjVvlaUXus+9PnPlBDKyzGEvwRYT3UZ5hqxw8O\nUog/KGqL7cqTh1cENjqqJSs9KkS2XoHO8MvPU+OxrwtjZpucSD5CRXezUeG+\npbQA968AK1U4FhiWddMukWAd5HTZXt6czz4u5BbAZ00RHS8Pz5u4OoEF1hXX\nm+IjWzOWf9WIzF5I1d3APFaccPBZlrviMWm81WvCSJTHPhrlNLS5IIP6MXHm\nDSCair4i3MhtzJzirY8cUbtau6FkJ8QL8MhN+nqHwkFkCYs35ZeGtUoFZViy\nw8y1Mjsrakp8BIIqXUsVZE9wQbgnnDxkSb3ufP5Uert1XabyC1sqD8juKttS\nlmGt\r\n=UoZd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuOxf2X/s8uOg/BmOqqRCTOscdUSh4KNtCh95DiQuAVAIgMeJbMBCeJYPyVPXYo00PgCHEsOcVV8+LvyMxwB9lplQ="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.0.4-alpha-memo-modal-5066.1.12_1565785105423_0.8948289766320472"},"_hasShrinkwrap":false},"2.1.0":{"name":"@crave/farmblocks-modal","version":"2.1.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.0","@crave/farmblocks-card":"^2.2.10","@crave/farmblocks-empty-state":"^3.3.5","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"dd531107a59774e7be513a190ec72bab56a5ae93","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-h5utJaeHS4lAMalgcJJ3V5OlsEn9Z9LxGwzTvsPs2L1pPpzN/ZmEo67A7EuAa82T8JgrrrtmbBMNqlO9Tg+mFA==","shasum":"d58eaad5f041ec0594ee0747187779faa3ce0206","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.0.tgz","fileCount":12,"unpackedSize":34807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVZziCRA9TVsSAnZWagAA2asP/3BKScigFTewOYLzRfts\nGL2TRbl8LgxJsvfJ73nc4vVWxVGmbRlHSiIYYD5NqvL7JXazcQ/+KR/iVIpM\nZMH7WSqfv87YlE5MaPcM9Z0gXAPysAR08b9FDblXHlUuHsTv87EMO9uhxD87\nsmwSYzKftquOe+wzTQba44+CbHGewFASQ8oHo5sXGkQeVF2hUiMTj5uP7i/h\n/9mkCEtf3QkrH1AVJU1gEYjpLD1aHmTxAUQz2bCGK28F+smTuWFVKUKRVuWU\nc9HbJrvgu07kb+xvKOp7svo/djIjFwIBuCftVuawP10vz/GPWo5e8s52lR56\nzcsF6vqZ+SBHPAJh2717FaiBwIjLQ446UGVNlMRz4pQX056LwsQQbExE2Hq6\nZxA3oYWazQgxxoG3dBIs29AKRGkDSUGXBKDL/KIBvXakXg11cXeO0YsK8vab\nAzGzXZZwSgrFdUvumejD41Ajypt4EVkbml+4kjBdbbAhMB/1aM+rSFxWGha6\npgpQr6bCwcGKEzH31INcXoV6ryD8P9WdnQpzsyAWZwOwCmyk556dDsD5PZU5\nxQ/ma4HcO3UJfR0AQInqeziB9L4UXWwQb8qRzatZxBDC9ZzH6T6/tOV77WAd\nmjTIbCqBV2mT3GeszcqSarOWpQWNEHmVv8diH9k5Raby182/zm8JdkUTCt1q\nWgzy\r\n=y7qy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENeTQHOxsXBJhqP0PtnksGUM0VqyomFO0LeRO1VaPtyAiEAw5lt63raSfD91Z9++9Ukeii2oeWcE6aCFdZo/oZCuXc="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.0_1565891810202_0.48456149485263755"},"_hasShrinkwrap":false},"2.1.1-alpha-update-deps-5137.1.10":{"name":"@crave/farmblocks-modal","version":"2.1.1-alpha-update-deps-5137.1.10","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1-alpha-update-deps-5137.1.29+2bfd3449","@crave/farmblocks-card":"^2.2.13-alpha-update-deps-5137.1.15+2bfd3449","@crave/farmblocks-empty-state":"^3.3.6-alpha-update-deps-5137.1.24+2bfd3449","@crave/farmblocks-text":"^3.4.2-alpha-update-deps-5137.1.39+2bfd3449","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"2bfd34498d5ab40eb9e11a147b9288ab72f81fbb","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.1-alpha-update-deps-5137.1.10","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-dtaXJGWkpQNJ1plv576arzeM2n+CzUkoOaTUZYLhzr5kKBAgR2Y5mGo95F3HlyHlCqme2cq0D0G8s6KH3LgBkQ==","shasum":"487614043fda97e33ca4b2b73ab5b408bb375464","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.1-alpha-update-deps-5137.1.10.tgz","fileCount":12,"unpackedSize":35938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddoQVCRA9TVsSAnZWagAAROsP/3BMWffX5QKYN3kjTbeo\nSwIxAUOB+JKN+WuRzBh1BhzOq3jFjWn5r00xH0abLIQvYY3Z9n8gCmb8NC3C\n7UPiPnFuUTnzU9HeRsS8ejFR5vxZrCBr2Dv86j3GfMuNQ1DXgxwy9febAFeH\nd2wqONfVc4Qc9UnNN9A9l6zvpu7ZAQDfG7qG7yf4IKdtvnz5le6t03PCgoZG\nkifds70jaewveBWtjE4rDdaqso59FBy1fqJu7i/nLbzHISSP3C1E3FDxLg3r\n9nxnd4VKX3M7hvitl0V16GVXS5v+6ZJlBMnYliaIkZpKCKZW5DZZr/gGLQjG\nkYJgaAzydYQwu+W3UEdR7vIAMHathxoKDE01Z78cPCoXkeZLvtYEsLmTkt2K\nOBzZ4JdQlT+PFcSjuCUOIq7DW5XGTxOO+wM0G76Z7V3DpfzQ7cipb1RAe1zR\nKTqYID7HsUaJolXhSNRA+YU+x7wz9G94ZlqFZKXjF4Ena3IN28N7SWvBlyEA\n1DHs324U0KeC1RyZ5AhtSxvE2gpnMKx6+W7mPTtdek9y6KnoqvjctRwy8Kyz\n20jcSIMrc3NzMa3joZA6W9SvlHug+Mh96v/6782FwgNfBMn6Zsxd4wL05hTf\nQSSYyzHj/1fScEPPFvZIaQCor0OOvmnOx3VGiFvzf2mcg/yKfS1OQCYwIA8A\nzQT+\r\n=NvBH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKFRIw58TRwwpBiP9iRZkgdZ018P2ECeeCYLpclgd+kAiEAl6oxLKIaBP86Zi0HmGw97r6AeNEysbBm+PE8u//h1Mc="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.1-alpha-update-deps-5137.1.10_1568048148703_0.2776456267059977"},"_hasShrinkwrap":false},"2.1.1":{"name":"@crave/farmblocks-modal","version":"2.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.13","@crave/farmblocks-empty-state":"^3.3.6","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"129b09e2622df8b3cb7b5270d275aad4e611867d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-F+SZhfwXUi7BLZSrdQohdTXPYUjCnVScdF01+sv1evwq+bPA5reYo1xh21MvxnP/jRBO8/2u0tWQuiQFUOxKCA==","shasum":"5adfc670862ad6329d832ce17b07d62ca4e87d78","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.1.tgz","fileCount":12,"unpackedSize":35958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd/l7CRA9TVsSAnZWagAAPpYP/RqnGK3Sou0v9V2dDNDP\nRaJ95HFFVgL7w0N05jE9/WbB0cFdOvFO6pANaG2pv2550YL/1C2KVwCirAut\nwvlI2zcdtBOn8uvSb6NPNpnZsTB7Yd7XfjMHbM4AWk3l0huDIRzFp1cZ44tq\nSC42SyvP6dKiw4MT/CJU/qhwbMwa92UYN4oe0uncSv3UQw3x3UPS0ARAND/E\nd6PMyzSxlB4T8h6DsQc9hLY71z5QxperbajB8yAKSoNp+lkGRL42LdYC93gk\neVd9rPqY5yLgeIoi5rVE8BvoMoIOR+Jz4IqOjGiDW/qo96Ba8r0tYayjliGt\njPAH9vUJqimZf6D0/ZrlEGYmDci54e+8iwkvR9tCeZVUT0/wIJhIpFvcSJo5\nQ3Gpy5XdbjCUkxIQatUFiUgdFRvpOLB8XPsr9lhrYfH5xz13QM0T2XFT0mBT\nsZMd5E4EVc9caY/Kb3nJ6i2E/dimg3wv/y2hAJ6nStkgEH3BgpYniyaFZ9L4\nNFwJ48CV0GeqI3dKYTRDBTqFs9G8jKa45WttrGM9oEEUC4wKAhni5noE+bMI\nwwXXXq+vgHFMFCv+tdUpND+7caILP/vRf7A1awuZLGxuNSuyoCjicNHJPY5v\n0EWF7aS1wojocvBmcljc3VzAtTWsp6ZWLNgST1oD5AslG/zxQyNj7fq7IJzW\nSB3G\r\n=imMp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvgUiIzVXkHfxInCqxHK9wCmJr8CoNM56ZkECT74YHhQIhAKCMXWfvVKI0fS/HKYVh81KkSOFRcW1rK2MZ50bmQ9Cb"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.1_1568143739078_0.08018609140866562"},"_hasShrinkwrap":false},"2.1.1-alpha-image-use-img-5159.1.16":{"name":"@crave/farmblocks-modal","version":"2.1.1-alpha-image-use-img-5159.1.16","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.0","@crave/farmblocks-card":"^2.2.13-alpha-image-use-img-5159.1.21+fa4cec42","@crave/farmblocks-empty-state":"^3.3.6-alpha-image-use-img-5159.1.30+fa4cec42","@crave/farmblocks-text":"^3.4.1","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"fa4cec42b914552aca39a55fcc60137e83c0575b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.1-alpha-image-use-img-5159.1.16","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-yf8Gji3j6kzlSrZAAUJ/T2UoMlRHIgd9xXMrVUqZpcx063S29heFnBszopErh2yyY9IrQbKNrRU7WKawo78F9Q==","shasum":"9fb9960493c76a8461c9910ad1d1e1c422fe22dc","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.1-alpha-image-use-img-5159.1.16.tgz","fileCount":12,"unpackedSize":34924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdeWLgCRA9TVsSAnZWagAAJoUP/2vTfDIdb5PtuZ3Hhgwq\nrAh0H+Eg0UP/9SJJ2X0UhYag64idlbv+hDUUCbeENEVUcEVEzLATSeM88Z0+\nmiJOb3C3xlNyf3y8FI2WpmOpXMh4/FbSMhqiP86EYEaafL+qrZL9dHbraREA\nrCLuGoFaRkAx61z9rABdzPyrLkxRAij+MufpJhgMITwgpCe9mMgWgp4a0q/g\naHMf9B1uTYb155zx+WVPoXeZh7W7HU0KofNovCtVYhQaUMEFj6N/qnBq2Yps\ncXrgufcY3FBceR8akLjo+IpUHgZdzmStVUnxYPBNmS5YUG4+EkfG3cOTDGeZ\nrnzAwWeanVEvHt842mdzWz0nzp1Dqh7pifvUOnnzPhAQvbIBANrYHN0i9T1L\nbsrLeyAjDBETpTb2l7/b0a5x7wvPyKQDi1ZasgVRcdOSA21H6aVVIiPLYoiE\nkEX+CfBNcfCHt/FduM34HGLGEXa9YLF0AS19znPsdlST0+z0NQL2ph/ID7n1\nSIw2OVA+y+h2ivO8L8YYJ1IiWWYi9reJML/x+ZHjm6ffHNC9TlN1+g1U6UIh\nbqBhxBMkKqj77+3a+O6HhGagBb1APfO01N12yvO2eN/d0gvDInrzppg/C2Eh\nevtprHtA62NAhb05FCfC8h4tpRg3pMFtizxf38y0DinPDDQO1+K+c0sekU0w\n7hd5\r\n=Eq4h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgLK2rYimWUUARQjeFPOCnDi5OK2k3vWfiIgjs4qa7ZgIhANiUWSs/VkCr1WAS49oszqK5kARHMeTNIP3Ipo+bUJsK"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.1-alpha-image-use-img-5159.1.16_1568236255567_0.6800191590074987"},"_hasShrinkwrap":false},"2.1.2-alpha-image-use-img-5161.1.4":{"name":"@crave/farmblocks-modal","version":"2.1.2-alpha-image-use-img-5161.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.14-alpha-image-use-img-5161.1.4+22b08dde","@crave/farmblocks-empty-state":"^3.3.7-alpha-image-use-img-5161.1.4+22b08dde","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"22b08dde5696fa24066fa97dd1a5a7217963a907","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.2-alpha-image-use-img-5161.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-dPQkpNzdUmUDKANyfmtM/QUIYQhKU/sWJ5TtGwg2N0rQ5hrC5iXw7hQNiI8J8/0Tihf4eK+iAoHs/DTxv/DCbg==","shasum":"583929197b4a79ead328ab7679133efb0992168e","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.2-alpha-image-use-img-5161.1.4.tgz","fileCount":12,"unpackedSize":36072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdeWQMCRA9TVsSAnZWagAAhtkP/j2p7G+YsqXp0nFQCGg8\nXwYCRp2IB3FDvjqxtN0OBVCWEmbmGtZbFurPjVjCZio6PlP+wCzdNTC1cUJ6\nbFp+AGXiV5QLGRKqce/eU5GN6FRSWsDJMw+mjwib2Zkw5aF3hti7Ygm0pgGY\nBcT/5W3Vwrq4dysqnn/uol4O2T7UJH6LWYjAGypTKR+2qmHb/bRDox6A0Q7f\nd03boWEQShcCy63yqPtExevMGz9ffh+7EQtY9rwFXZe5XtI9k5ikr3JXbmlA\ncQKamTQ5qjgn/NdhVPAkU1GVHX4FsU1L+DboR4r0O0AFXon+YE368kRVnNEw\nkzFsZEKjyoHGBGna5oqpfUo8xsYsOJj9bzWjKtaiIzo9kUy9w5SqVp6HiceZ\nzWfc+QT1vzpXO2ZB5G++NuIecMXPHMTPlEPX/rX6HUXqe400+JSMiskavHIA\nxZSTiHHYy8XrjxqmgXkVOjmA3Y7xw1iV7uZ880djEmX9EVVmjzQn4T7sPdxR\n36VuA5GANjx4mY4bUF8PaJZzvME+hhqUWqMGAaTit6QlQyDFn6PhQygmjh70\ni+TMYEkKMbWstO9UlmSzROsuyfm5xCJPO66hLWn87CcnUjXFIFTLemHdzkaO\ntXDAyY3/bfVBj6XT33qcI8iTUjJy2coJOInTZ0jMBb3ToeXTg/gfN1bWk6Hb\nJlbZ\r\n=mYUi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3Y2kgFKaTJYyTVNtrvkMI3kZ7CR4gEYOM+kvgbOyajAiEAw5h8IcmQAOTQyztiVAV1bi3/ZvPmHuj1CTio9ezlzaQ="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.2-alpha-image-use-img-5161.1.4_1568236555169_0.17206789606400874"},"_hasShrinkwrap":false},"2.1.2-alpha-image-use-img-5173.1.4":{"name":"@crave/farmblocks-modal","version":"2.1.2-alpha-image-use-img-5173.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.14-alpha-image-use-img-5173.1.4+a0cc5b4f","@crave/farmblocks-empty-state":"^3.3.7-alpha-image-use-img-5173.1.4+a0cc5b4f","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"a0cc5b4fa2860d07a1add8a6597166010dcb4be9","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.2-alpha-image-use-img-5173.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-ADvaWEtweowHLAzqD4tLwhgZEQqLFgTXN3rOw15D3yXvmnbGokTKtRGZARDawBqyRTfrj89+3DJb1hVaCMqmgw==","shasum":"5cc1316b78e78cd72471b4575c939e7e4a7e00a7","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.2-alpha-image-use-img-5173.1.4.tgz","fileCount":12,"unpackedSize":36072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJderU3CRA9TVsSAnZWagAAJIsP/3per8iIinXT4iihRnOM\n7W93laHCitdAf1X0xXLumlHTz5RaJqLfa8+HuiMpbUAe5j55NYQxaAWiKI0S\nN62bwaWEzgoYSQuvdJzYfeqosqt5skqt7b8E1M6esMtwHxSfRKgsfsymY05X\nnGmGYbXPnqzZ/E6JMg1DhlOfT1IWJJkkJ4yaVLWv5J4XtEkHI7zHWACG26Bw\nPBmuyOZsw81cxjhA14srqq0jIE4OxclVcL8fgNcesmwEb1ZbjAnOdkP19rz2\nReDUCBlbSmyRa0leqC7dcIPFOwGgnXpCjgVoqzr01dc5++R+cs0lbE87s/6G\n6AmiCL90PI7FkGklwX5rF3O5g6G6IUNUNI7v0MuNsY2BF1eUALoZfJiyZyuB\nto693cYHQJoguiTr755hpChqhGozHM/EtnW/3emymcIuUFDLLqVzH1wvNKo1\nwDxo31DTEVEfff0map1w0TjXmfvVUtJ2a91w8By5Crxi2pJsrZ7hf8OV6rn7\n/UChhFVTUHrAxdddz17gLSNXlp0BYpgkkAdcXfmlhj7y8gxpR/SyitZFmQHC\nCQ/TOC4u45oCdrWAEcjpKuKBupm+ZBASQ2DU1bngr74ulE741VGhQHMG/ZF6\nCDU/sNDGy6jDTOAWuAp+tVsWWoVD9q3a7tBIHAgGNMn13zVovIcYQWfzhLEH\nXXMg\r\n=9Zct\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCraCbuRUQ0+BtsL8rglIl9PtI4H+yLuoJcya4WTYlmigIhAN0LeOissIdy+s5fxBci5TxoHDA4FglqrD1HC674jiGW"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.2-alpha-image-use-img-5173.1.4_1568322870758_0.33792496811299255"},"_hasShrinkwrap":false},"2.1.2-alpha-image-use-img-5177.1.5":{"name":"@crave/farmblocks-modal","version":"2.1.2-alpha-image-use-img-5177.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.14-alpha-image-use-img-5177.1.5+765efb22","@crave/farmblocks-empty-state":"^3.3.7-alpha-image-use-img-5177.1.5+765efb22","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"765efb22946bba3526bddde948b9e1f078070483","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.2-alpha-image-use-img-5177.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-evn863N+Re8qjqIEubTrM6Lwkg83Gxkw2blNoi84W1wl398AFn1js69OzsNG1xb77GJDpulBSA11KW1t7hMpJQ==","shasum":"bd20a88604ffbe00ebec8e131bfa69fb53bef415","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.2-alpha-image-use-img-5177.1.5.tgz","fileCount":12,"unpackedSize":36072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJde5N7CRA9TVsSAnZWagAA+ncP/2d5zua2wWfy2hp+u8y+\nw8TMO19K5Sq1ddXN07JuH7F7wp7XoeR4IvCJz6mtfwtcgqTjSwvVZdzwMlJm\nRRNizxH4hnbFOu2NbamtWvGQcZYxpnymnqQ7kBE41HenhbeyQpDRwde+5BC4\nenMSK9hfwCqQezEoAHG8GD53nss7ni1NA5ccLiPE3S+Ex5XO/26SnoXRL2RX\nA6AlDPSotnhawtWXGSC7B/1A6/BApbJ8gibg9yH2ZrawdJnT3qS0dRsL+842\n5xW7ZLDEOLP80CArNp0PP9RR9OY5JajurcUnW/WS/5hvCgH9/ON8F/cFl1q+\nrGK60rmatKlMVBBo5Gsib4bbWDBMjJEh3dw41xodPEoq+zN7DWOMy6h4aXgM\nAfdSYyJYr7gfkhDC1PW1Rt3enQlutoqlk/30+IdJ4LP1DBhmD5kAqLAKiivX\nxwI0OjuR0tFuelKq3ozyxIDGzoLguwkIZ8X6eAxjR3qiBo7gIjtDp2r3nNoD\nGeFMJb/To+/T/8tWMlFiRgQ9EerPvM++kjjxNxS2a5ZGWVXJsEGV5Uh6wntD\nSeIhNaYFwghWKqXyK+RxN583A8CGvcv1AW6+d1OTtqqoxcSgNNVe5RIb7euT\nwTvoT8o9NB3St/G9J8LAtbzbs82pca+YAg/x14KGTC1hF8RhE1oVa148JlBC\nl6Fh\r\n=0PxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYqZ94viQEjHNtSA4s3r2knudETHcqXX7BMl2Oc3ZpBAiEAh3bXksy0KPpArBnpM62F9XWlye1u36g0yr9HsaScsyQ="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.2-alpha-image-use-img-5177.1.5_1568379770354_0.826652654981161"},"_hasShrinkwrap":false},"2.1.2-alpha-image-use-img-5185.1.8":{"name":"@crave/farmblocks-modal","version":"2.1.2-alpha-image-use-img-5185.1.8","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.14-alpha-image-use-img-5185.1.8+9120ed6a","@crave/farmblocks-empty-state":"^3.3.7-alpha-image-use-img-5185.1.8+9120ed6a","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"9120ed6a9f639f1de6148c0fa3d06d98c2d2f350","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.2-alpha-image-use-img-5185.1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-UmEE0/1v7mSbRYJK9mNZSbm2EwOzN9xV+EnBnSJFRwKRqn4erErhQQqE9KEYZ9zS+7t5Kbkrn/BIag+IQq9fzQ==","shasum":"9de5f4d5c4b1b148c3795d58c1c9dab9b9579bcd","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.2-alpha-image-use-img-5185.1.8.tgz","fileCount":12,"unpackedSize":36072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJde/IoCRA9TVsSAnZWagAAihwP/joR4awL8NfZl/t5SpGW\nxVizlUKerPN4G8egxx1+Hn1AUJEEwV/Xjk9Kg7R2aRcgg7J5UbkRRkpsrCNV\nsgnvfe91vhfLml5NYF9BzM+Wk2Sq+M5PPBGbzuf5w1f4fLa+V7jZcvLrWNhM\ngwNgtwvhI4ZnuHKHaNzSTlj4GJVio600xtFtIwGpc74kP8wJ0CFddDbFifzJ\n6ZSt+y8dbhC9N0d4ouqNDoI9PDgImp/pcHvFPzDjngMBV0qwY1faBHSYiRh6\n9OdPVC+wWY09Tw056OvwkefkgvBVsUXr/j/AcXxje4bdt3eNMUBZSdEpkPR+\nstzwKdIBF/XAzn1d75TqkGFgsrAQe/Wej9TgSulmptLjzXbri4C+aYQxzOLi\nmC7zeiMZeblu32593DQxnM83ZHhsHRsVRj5PWz2aWO20CN6u1bUZnLOn1wzl\nGfZeieKqvSTfnbUptRpAKoSjGPCES7ZgHIlp6hA0SE64JeF8/0wYQ5l8svV7\n7tyQgUZLlgjalpEcJmkCJK6NAOXnkVY2Z1DzQZZnENmE9scibI++zDT6x7Gq\nAhPEFjsjQQtyc0kYfkpklSA8QGHeTCtZ/MGompopbObeyaE9kM1lNTtGdxtX\nTQW/m+HOLEjxxtSvA9jR6DjKPm4X0LxL/9ZJ6ePVtcpPW/5XqFbBZHr+LAhK\nPLXV\r\n=DgmQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFALsinWMYis7UV2P2ldBLJ0D0hpEljkq6P7AQpNVRoZAiEA2ZNAyRaV2sD1AIwDSgn2uiPidfAJGodwcZUXhcgbHNE="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.2-alpha-image-use-img-5185.1.8_1568404008178_0.4425177008192982"},"_hasShrinkwrap":false},"2.1.2-alpha-image-use-img-5193.1.17":{"name":"@crave/farmblocks-modal","version":"2.1.2-alpha-image-use-img-5193.1.17","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.14-alpha-image-use-img-5193.1.17+4f1beec3","@crave/farmblocks-empty-state":"^3.3.7-alpha-image-use-img-5193.1.17+4f1beec3","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4f1beec3f3b1f12c4d44dd3aded0713523bfe828","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.2-alpha-image-use-img-5193.1.17","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-32nQHvTZUony2gcI9kPeKDjZ/WpJmYFSqfKs6KFmwgIFNBhyVca7vQjMrZ+q5h96beKaNzDvZ7aP7UJzKAsj7w==","shasum":"9793f3fe23acdbe5b024f6e72bad3e696ee7c306","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.2-alpha-image-use-img-5193.1.17.tgz","fileCount":12,"unpackedSize":36075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf5yuCRA9TVsSAnZWagAAm5cQAJQtolnILR4XLPzB5eKr\nQzBKKpRemExxbNhBaJyk57XrjXf9AgYUdVneodzKoi9K0WJbKZtePZAQ/jrF\nVuFQxFm1pxqQQy19FmOFoKt4184L9h+DwIySsgerJA010mib4iV6YC4XY0kd\nIuBrHRu6MMWl+xGNk+4r3f3CPWERY336aX0158fLNqceO0jOld/UpMTu2sjA\nbcLk9eJ+vvDr+W3digmYjynRFZvIAoDcs3Z/dUAxmmDqBkY96MH/mA+mWMLl\n8+Ow1FvGATH+1C87oi3PToL5S9tuZi+Q/9KUnosGDsYGc4U2+DVT3G7QH7ou\n/4Ys6WRwSizRWFV1C8t5kEw0xwXlBvCRby8Yfx1dWy5PYCUHQBtYCCQHjje4\nOVVgBlD7fYF43F9WVx8DVxAtoBKem2i06cEks3EMft7nvpYb34SK5qJdocg/\nQ3l4ovpdouxta68vX7CUxHh9K5LyGIlbhabFahTrsHpQpOzTu1kB/3DNLu2B\ndfaqoGnZcZSMbqcRyvXof+AeLGWr80JXbkWYX+vHOk2row1t4kfVIZyDGj96\nYbLbXvUMExMbCbpLBqq3bwCFhvmKj8WfjR+2hqi/adu4NCMxQ+jtV8hHlNSD\nvovC5lhS6/8XP1wRfDF88f1z5MgJF41WJeg+W4EkHQVl8bohfz5YoH+B7aEG\nX9pj\r\n=Wl/z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmLOP+omap9s9NvcoFBsNkgQHuHEEU6NSzosTNlIlBTAiB4t4thA8fgLI96QzvgEGU7etDnR9geoY0eodEtgd6cig=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.2-alpha-image-use-img-5193.1.17_1568644269558_0.2476299550218073"},"_hasShrinkwrap":false},"2.1.2-alpha-fix-tooltip-auto-position-5199.1.4":{"name":"@crave/farmblocks-modal","version":"2.1.2-alpha-fix-tooltip-auto-position-5199.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.14-alpha-fix-tooltip-auto-position-5199.1.4+85042792","@crave/farmblocks-empty-state":"^3.3.6","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"850427927276de3a90b7e0fdb706ee4741c3f170","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.2-alpha-fix-tooltip-auto-position-5199.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Yult2ublqmKDx1dAods9jzOe+qAXfk3f6/GLd6w2MppbMCWU5tyEnyqoiwaUWmMBdSDpSi87FKUNc4UeIHTlzw==","shasum":"9ff6936c91c9951b31169ed1dd72e1317b71a116","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.2-alpha-fix-tooltip-auto-position-5199.1.4.tgz","fileCount":12,"unpackedSize":36058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf8LpCRA9TVsSAnZWagAAIxQP/1Li+gE2y3rcBDfoOy9H\nmPMxBc2S6EWAMteT7lrJPVQcHvPg61jxH0UKh4Q4vhwVKrLoaOrr3GzNF1Tc\nL/jNsMZ7rqz3mXZW6HnFlULo1pQd4iU03IJAQMo9NMhGMmh53SodueOu49gE\n9Lt/WNOC9kK/831vvR5qlUPKCW/oddd1KPiAt8hgzcl5UbW/btgSwRj/fEJE\nOSlzh2YlFEv4gPiThbeXvQ9mslDBVK7L4O/klTH+7Ii5pNRDxHW/GFfZyNJF\n5JKw7TtSDHJk7OHyEXnaD4kuu6iUi4qiOmcBPtkHD4s/vRGPFPuwlwsT2CQO\nd9FhIAKzVLgOn2FCSD5tQ48lqTbRnwLq8nC0L4pcLb6z6hM7t8yIMpAUtyVp\ndDN9xsQI1rKtnrMkn0aZPgxAzoaLkB5vKb/DkoZVqjzu16Bj2YStEAlB93Ia\nyUWUHCgEyNIaGYLB2a5411ZtSuqDNPTrtS1ll0xpQOixIGK7Xp/aeWzymVba\ntYgpNrdkF/h75bFBphN4ZAJHLlU4ghqQsymyY8r+F56tDtmgkAJCF+Woz3r0\npPumRxe8/uJcIm2iteESUB6RhKafXjKR83HdbDQ9BbHEOvE5RMK/N3HtlrGq\nnvtNLs/AGFzYDhE07D/V9+KGa9fcKwDwsjRCEVtC9IRhIQngL6dgUbzo4bZB\nYsum\r\n=AgAd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVfcCBbA7HQjYZYu85w3OyhlG3aYGFc8n0vr0x+M2xuAiBdun2M05CBDObnAkk35cUHX2Gxa/W6FfeW8+HAvgjOrA=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.2-alpha-fix-tooltip-auto-position-5199.1.4_1568654056921_0.26559393795719544"},"_hasShrinkwrap":false},"2.1.2-alpha-image-use-img-5211.1.20":{"name":"@crave/farmblocks-modal","version":"2.1.2-alpha-image-use-img-5211.1.20","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.14-alpha-image-use-img-5211.1.20+fdd1276f","@crave/farmblocks-empty-state":"^3.3.7-alpha-image-use-img-5211.1.20+fdd1276f","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"fdd1276f9235075cc5efd74605c6abfeaed108ee","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.2-alpha-image-use-img-5211.1.20","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-PG9XDIobpIsOaKcBCmCHr19epOrnbIkhRNB5qoQCqAEwOIMMOjDCGJ64i8VLYq9J0W2yDFHT4+s6XIkOOrPjNQ==","shasum":"ec066bd1ec6c920a7831949c807bce4e060d83bb","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.2-alpha-image-use-img-5211.1.20.tgz","fileCount":12,"unpackedSize":36075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf9rHCRA9TVsSAnZWagAAWSEP/iOXHUKTWV0ovEIewHnZ\nKwacYJ7f/XY4Q2K6bnUY7GZtWxYCeKLQitCgg2C5WdiUG0oZYV/sj+Ne2Yk5\ndNex+Cf71idihPYUgfp38Ah3OVIiOFCl8Wox5UcSvO25K5eeMFajaP3b3rMJ\nGw6AwsdBDsXwZbKhWtb7DYRnNUqTApeIC/YXecGcgY6gSuddSRwbQZg+DUz/\niT/JrxzGyr5i/fUxwq75Lphin6+isrpzzewRHMJWF1rr1t50uwsZbV8WLVjJ\nLnXZ5Z7rECc+ZyETUvW5HzwTjLTeHLk9+2y13ZDciPGN+UnMPJHwpvUe0Ltc\nHXWedHtexkmqhrvrnrRZIJ7eIIHgmq5+Qk0UIxsqCHqKakI+MiX7EGN6LM+G\nuj6m4sgkDGqlYKP7a92Ho8dP13u85E9oCWBANb8NoFiebP4ALkgeVB79kgYf\nakyPpkmsNJRTphtKcFZYT/LHX7uh5zkdmMPhmFpln3LxIfTskjrP9hBZku0+\neYAmwshfq8qDHIHIsDB9Idi61TupGOVAudQ5+OOUR2PvQhZXWI6PV+ETJ33B\nuYmxv82a2bXjxxqMOoMm2+IEEUpWfiPB75KkJfWksygbmo6zrRhizEVMusXP\n8unPmrqMN8uodvXu8LY+EWeBBaV4/Ba9XsQexVHVjJyZijU+Yss+uJtbvn/g\nCFX9\r\n=h8FI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFaaCVue/egYq4Sxq3iLlApSFDJIOzMlo9fHvVEWRXuCAiBvEulaVfWFIqh5N5/liarHHNrKvi1yPYFIWckwaxJFEQ=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.2-alpha-image-use-img-5211.1.20_1568660167284_0.2601817712339749"},"_hasShrinkwrap":false},"2.1.2-alpha-image-use-img-5213.1.7":{"name":"@crave/farmblocks-modal","version":"2.1.2-alpha-image-use-img-5213.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.14-alpha-image-use-img-5213.1.7+dcfe131d","@crave/farmblocks-empty-state":"^3.3.7-alpha-image-use-img-5213.1.7+dcfe131d","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"dcfe131d618a509651a111dc7cf8f4b89139925c","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.2-alpha-image-use-img-5213.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-uC/xrSd4jM2IPPKqLd76JGSOmF+jrKpIbrbWvoPYQhjIiyFcyoaYr0IZ5JzMDGIDVNjSP+SzOpOpunxfyKE31Q==","shasum":"1f95931333e41985c74744dee2ea27c20696c498","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.2-alpha-image-use-img-5213.1.7.tgz","fileCount":12,"unpackedSize":36072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf+XYCRA9TVsSAnZWagAAwXsQAJ5rlBPUDt1oEGRxk3IO\n48auaJDCx1xqlCtzj5uWyiA6b6zg6ukl4UO6Hkwcyw53qQDZ5sy0j1cfNZ83\nfIo53OWL6nyCbX0XplcJewOnkeUOn20ilShh/zazEnVI1uRwLZsK1fWjmt/7\nPcqdl9bfGZBmN5JntyuJdBstq6yQFHTZVYIeDbBjOo46EKfotphm7WFqDhF1\nNycHecrSMi6+re/QpJHjOYX8qplnUzAEo16N6XMgXr10qQYNNkdFFc3hwJcJ\nh1h7gtSzh2lVLjqtoIyv4ANZdvMCOERRiYOzjNBKDACUpHTyuEyuQD2nO5Tx\nDHrVSS67PnAW9zEAKV3cY0kGR7Bc7iffp7XHnIWYUOLbqOn58f9KC/Ej1VTQ\nb5buWb+Xm/j6PIUXFybSVbEvE5cisN37fQgPY8IoWyV9t6XRBJnZmizUJkWB\nw+XLPe1CP6plHd8849/9P3a3lUOfyQbueB2canBx2qt42a2xi4yfpgdTF8pR\nVWPEia+3GC51taAoZ3lopROEJXbkmBFpzlPm8aCPE37/gPCFrJW9oB+zVVEK\nYXVqW53UqSGvorWZl+6G7w246Vr1ThgdM9vufsJM6osuM5vtLYFWzBLctMr8\nw4R6LD9e96RRykoHQtrw7g6d5I1V8Aqs3GlyS1VXIUH73j+8ytW2ZDUc2fNj\nygKa\r\n=BUdw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFOIM7M2kyqU1TVrBuCVuf2KRtBn6lo1s9QgIU+hzS6WAiBjdT8CjQqL9HjfppWi4AA5IQpJ8nnv5WKSCTHY/SmZFA=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.2-alpha-image-use-img-5213.1.7_1568662999432_0.7312762096344569"},"_hasShrinkwrap":false},"2.1.2":{"name":"@crave/farmblocks-modal","version":"2.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.14","@crave/farmblocks-empty-state":"^3.3.7","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4b9e012d9111e113d33d6ea8feae9e1ff04dd948","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-heeTgQ742+kWgwvPQFJ0RbSlX8H+6ZSGO8rcCairnJTn7RBbR0/lh3zCr8rofSOKbBmsRM8H8YjKn8nbz7p/OA==","shasum":"4f443d360fd6a0a8e55bd44027402b75b80916ad","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.2.tgz","fileCount":12,"unpackedSize":36163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf+2PCRA9TVsSAnZWagAAegEP/0l4ZziWiFbpatTU+xPa\nTAyQ4R0jBZ5UlO3wmPagDNhORssagtjBmu//tfRObDvMpZzJM9A3QJ4EjQsh\ng2YkBom49vaVNsIpdb1pIaWYRqSxm+mft0K6Bb0jBqHor0v/zaOwaaYkwnZR\n5U/iikKJPcrHhp2nlVQJm5+2efT/BGbZQCwcPRU/O7RHuLiNG03tCZ8k5bi0\nUtZGC+0gI50jHLTHe/7sRhiZmsesU8k/7c6VPiNhlaF82Mk32X9fWycbK7Pl\nu4HbU68ZXCM/ZAL9fic8PN6ThNZw+MDZrGtervps04pdE4H8nq0VbfcYFJz5\nPIqQL0HaJ5XDELqh999Px1d07BtCFHnWgB7ckeBvAuDG4NavVM2aOvlUU/2M\nDL2rVpB7QGtVqS2sW16ziyB2T3MOYvOAm8ck6GpU4/etUe/u4/l5Vl799KFp\nm9vnpYYHurUIXiNJJfEz8Ee0nwE4oKmga5j9Dp/8qhHuVA09jpywhXt90Chv\nN1crOjSBiUqQ4jfZt+tCQ4TNIKsK4NSIaSNz9hAQgIDV5wGr9lfGJ65FQKwr\nCLoEUV9t3yxLZR5VEEjb7cnKvkEto/w80hsnCWYAGWqA6OMEd3EUCLew8fUx\nDDuQQm04mbbOtwQ7L0LQ2wugNCATDfhIkUs2vf1yzLyCgix4NoOWHey+AaJu\nwkXQ\r\n=pHX2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICkcQVLVhCOOWXToAy/MIXq9sWRR6er+sF/h9btpYh7WAiEAxGMAEGn8zLV9KBA3I36x197Lj6sPio8P5UMjSGl8dUo="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.2_1568664975276_0.16376674020529358"},"_hasShrinkwrap":false},"2.1.3":{"name":"@crave/farmblocks-modal","version":"2.1.3","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.15","@crave/farmblocks-empty-state":"^3.3.7","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b1fe3a0283a30a9373d093701ec755bcb2ec1f32","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-TMnPe9XOg3x7YroPg/wk7q3iSY7y/LXdarA27gJfCSE+gpEBPH4+YGVtxymflU/9ixafGUgfj7b8Pne0NOJvkQ==","shasum":"d469ecb439da63830a61639b77faac525c3c90a3","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.3.tgz","fileCount":12,"unpackedSize":36368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgpNdCRA9TVsSAnZWagAAw0YP/09bHu6Q+EPc53FWaTM9\nPfZNyG5q934TbLXD0fuDg/pIngNco+n/cffI289CReK8PbE6YioI2z+X4LIu\nmxj8p7ZH8g9DnXrXLmq3pBRBJW6T8iKFXL8fGm+JGUEANsWdPyX3fgtEu5pi\nj7ybM48qcyeAAveXBlXXwYxc3csnV4Tsn0CGPpYjtUgK0/eO9otE3jnALCQ+\nOmfW2OPYFklDaPKxIwF/wPJbhiwEbNcQOMCPKNc7LK8oT5X7PgYfMYTyypMh\n4MKO/vteFPKRUmBzc44tdnVgvlYAMjD+BaqX+FiggpmPwuaWHAS7wTHceEM9\nOBdCCvPS9F5xdRaziwwzbg0A3+yqIbT0pzHtYHl22QB2tO4xbDNz6UG6gKCT\nanr4wtEAWfwUYX6X8KfRzT9PcQsgdm9iv57cG5Tg2BdnC28fEhnan+mqXx60\ncaghyRJzWYd5TgqcVSJFYMOcS2OU8RBuvrqwsYXvQJ3dlal0en/N9x4XJPh1\n4/pZ/1BhbyPnl5mXLd7bD+1IAEYRmLhfayVuNVCaWbaRxYXh3Yjib5F8sH0o\nD4tRhqO3618tvLgUkKTK3xLBamTkv8u0LsHI/rUmfbjn8PLJImIgAASJ/kI4\nrF8rkIW3mqxwRdB5UlroswYylumXCEfhufoDhhG948qhoMlxAWlfBlGDsmwn\nWplh\r\n=P8fL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC91CqnQiuAY26ibk3UZNqSdSOxIsWAJymYhjJINNIuFgIgBjENvC1wM2rZFbFCwm7Ai0MGUzdXAT3V7KrDahFa/To="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.3_1568838492896_0.037297521556203916"},"_hasShrinkwrap":false},"2.1.4-alpha-fix-image-overflow-5243.1.8":{"name":"@crave/farmblocks-modal","version":"2.1.4-alpha-fix-image-overflow-5243.1.8","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.16-alpha-fix-image-overflow-5243.1.8+ed25da34","@crave/farmblocks-empty-state":"^3.3.8-alpha-fix-image-overflow-5243.1.14+ed25da34","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"ed25da349f0361eead7dc02289b196bd1914b37b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.4-alpha-fix-image-overflow-5243.1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-vs8b3LxLQabPxvxqK6vJvutJIgMo1VVIaqn02n51G91hShWdnSH6Ebu4en/oOHbxejMcKgZJJ+KdzuTlmR2zog==","shasum":"dd176ae30d0f2bfd46ef136c733f23c3bd825dd7","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.4-alpha-fix-image-overflow-5243.1.8.tgz","fileCount":12,"unpackedSize":36498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk5hGCRA9TVsSAnZWagAAEJ8QAI+SNkVH9h7EUDJZazFE\n7ZmOd7OoAhWRG5xbVqiH1QrtVYu6Za+KLAdCIIFbKRNr5Rzx7XQQHdvZ/MmK\n2Tt1QP27/fr6+CyS0TTzp/OAdJ1MtpCE5OXVlZR+D6uaBQzcL3YPytN+lYIC\n8VB8TuBZEO0ORQ/F+5scWYYzWqy+9ytLZdFuPoHz2/wdZUhaljyK6FrLyNUE\njgelTKFLK2wLHid2trJDXW2WOm9P1tLWM/QdQK7cDBCPA+GJN0PveM6FMN/I\nns36twpf5oJNteYqhBDuPAcHUqfY5A1hCcn/wOLKZbZp5x2nfMrbAqkBRWeQ\n7iOvcX9SKaS5qn8Iq1O1b5KDCVtGxEYybKNeDkOY12TwMy84v8dYkkMqknf+\nqt5jYZzs8DS39cuNmcqrBQVS9Z9y7hc/BFtHzwIL9Xpqk6FnYbT8ZEu1jSIp\nHS0UJbFVTvkoj7ZEQP4+ZRP5gPHm78qxKa5TuxTN8auS4kAeDCh15dJkKRqv\nrEzT9QNsDCAcYEDh0zZfa6QvMtY0CorQRUulRsj/mOgC2sXLM284a7tIAto3\ne+VvEfbDPXaVkvkeivGKMlsQ3SZpzsNDn5ro7/cpIwzWqKxTsiZO98JcwVXW\nQ3tmKmpHrcALZOH5Qd8CvVEAQpxghoNMJMDaCl2E+IPhWGtL0Qr/NrUsawrn\nv+Mw\r\n=r0Jl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy3Mr/YeszGQKXVmeDk4HUTjbyFduk+PTXLTn1R5DqKwIhAJallTIR/XxqZaCdDpfRulhmPYATCo802X0t/oc5XPPF"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.4-alpha-fix-image-overflow-5243.1.8_1569953862201_0.565910925481828"},"_hasShrinkwrap":false},"2.1.4":{"name":"@crave/farmblocks-modal","version":"2.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.16","@crave/farmblocks-empty-state":"^3.3.8","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"0927d4676f8a9107294b906d32af1b898c123839","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-SdkVUUXLDP/ppb3P/o70FQ8YSub8SLGI1UcWZHHZXfX/bAlXAGhqfMEWyFHhr3m7bqTOvPBFmoo7lNMvIwZomA==","shasum":"61a09739a88f564ea226b98555148d4565b5ed9f","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.4.tgz","fileCount":12,"unpackedSize":36573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk5xpCRA9TVsSAnZWagAAemsP/jRGcDvBtkHB7GluVyw1\nFy4TORVim78jB07x1gGut/BFY57aC0gr48J+rcB064r9BHtz0s8S5AQoR6c3\nOpSmnfB9qlQmLERG+Sb5Ib1lF97FlaTT7Tc1zaoJFLQM4kYymZeyx5lomJaN\nkoxqPUXOSdl5wpAIuD2Qpg1/2iYiWp/yySRajRPmpy81wkkclJNpixtQmJK8\npv1SXgtbdZz8kW3h2IhF3UvEcH81o0p1hj/Y1/BVbi0xqnRumDOhy8kiDdy2\nAXGFyx4BWtROdZ1lckuf/RdPBaK/vp3+s9Nzdu3DxxmooU+CrxeLyegv6p2j\n7R4W4vQHT14iFD6AzIi8nZbjnkjVt+QzJPsN0EOU0rit1zyCTzrXgHq/HAu5\na6DQno1aPuYuufKdX7cx/7FkcOHTCH2PnAiIRnnli3zu5sbSlQq8o2Q+zUkl\nCJK8j8cBHMR1KmrcwPB2eTKDrycXElJ1mGvuL32TSa8C+JmuqejsGQzKq7Kq\nLu1Dk1sk/b+yGQgrUxvoDPhUVi99KvIOQNxC0z5cjjGvpBnnCd3C9oO30Qij\nP+3l2a2YIRnn7t5ELdJkJHyN9+nPDvCzeLnGN2u0HBeOE7vq1jjdJivSDYvZ\napNcxn8/T0oMTw3r9is3CWpqZSHBLKTNiwAScNpGqUSLaqjDe7A0tgMGw1mZ\nAFMx\r\n=JwWU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJthQBmYvQH8e4yL1rKbDW7tWdtIgxuVk/0iNiErRmpgIhAP1HiyqamiXuohqdk20YbNtnECbrgDORYtB3iFQRDV/X"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.4_1569954921148_0.7736607675266778"},"_hasShrinkwrap":false},"2.1.5-alpha-modal-fix-5246.1.1":{"name":"@crave/farmblocks-modal","version":"2.1.5-alpha-modal-fix-5246.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.16","@crave/farmblocks-empty-state":"^3.3.8","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"5ea1e66ecf861f44144646c4ddb3075ece002f66","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.5-alpha-modal-fix-5246.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-mqtz8u2SBCsIUNB1sHcwYsPf81qoS12RWiddKUvzOJ6xrr3663cGprWEB42spT3ycmHT6zyEUhjsfQTDylnL5g==","shasum":"3084d0711d2e129b26d75306f1a6136d0ba82795","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.5-alpha-modal-fix-5246.1.1.tgz","fileCount":12,"unpackedSize":36621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk6H5CRA9TVsSAnZWagAA4zAP/jHhOwo38fGzKmnHT/jn\nfZfvH6cAVTAMaKjArJDcncvwGBLFPQzSpV6w7xiSf6osmwspSLbmTytvwr79\n/soqQy1NTRSvwbx4POtDYP2ucUsioy8bal64a5cJbXPGenMMLy00rz0rycow\naOCqdUab0Q7YWbuPtX8C7TvRJk+1BBTI68y4NshvxKiw961Q1/sa3vNszIHq\n2GrLFW78uEXmOb0Bmmp7ETTSHkd5b+LNRFJBjuXFEE5ve5HqxnGhuP6DLyij\nD3uFVT8ifiOs8vzVQnpZE/U8NeGBU9WTa3UTkQPnfwYeRBhZg4SPRMvF8o8w\nSMBObqoZlDJx028sc96K342IqY3Y3OKcrbpT4Rz1xeFk0OjwRDP9D8bONuGy\nWbmO6ZuDUzzUAIallmTw+NBiMIXg0PAkwV8xRhMYLyzCpD2XjNUmjbCNhRg0\nDlw028V1tSAnD8RBudHATPGA3xC8YsPCRbc09zpgSPPxdXT7CDfVNvlywEP+\nzLYVjG9lORzXg5nuYIkwBcxJcbfUHHy3Sl8MYeToWkzWZmt/Q1Cr76/5m/0o\n3vjiRCH8izgzC5hCoB/iTt1tomLMjLmQqxdKhkIWr6j+bfIPbzcG4dwgbd1b\n9K8oIlYI+12X+4nUXqhImVC5J6NAz7fsgKMuArigPwL+HwlNQjNmLnjcOi5T\nh9Sh\r\n=6+4B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKmuUvOjB8idfd3IPg0Kk9nJwpvJps/Pw2G55SUCrjIAiEAxUt5Ozhj9tTTt7Q7HgkhNefLIxR4RVik4XIMSiYBpJo="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.5-alpha-modal-fix-5246.1.1_1569956345056_0.17646826810235838"},"_hasShrinkwrap":false},"2.1.5":{"name":"@crave/farmblocks-modal","version":"2.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.16","@crave/farmblocks-empty-state":"^3.3.8","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"9148ab855d4725b1441ce5f6992420d7d3150c26","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-i7KfQ2wULr6b/wIOrVGcg1tBr3PllXkC1IXVF68E1pNs7iSqZrz+kYyKVq+cCy2hHD9Rz+s2bIHz9O2Xy/Wz4Q==","shasum":"483e8c81e605c885d6c9f72239fea9976a17a245","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.5.tgz","fileCount":12,"unpackedSize":36904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlKQDCRA9TVsSAnZWagAAB4oP/A/lMTA2uuyFb8AbG1S4\nyIynG64vuWLsLZLeA6lX/+/vVS+S88NVmJAd8TvJKn/eg8q2RI9CueGZ14Rs\nf7NuTVrbz/aPgUhqXWk2jl1qLrvzFg8BOhwm0EJIXwfLG3gVTepTxl4luU1J\n2eDcsRTtXjK3KyUyc4HzynqKpTP7MPdsSFkYEL56+O4wFTUGnrmjvc9R8p3U\nQK0JnkFGoxLKQqBYTNWoL9EtY4WXx/MrZIhqky4KO5mUr91OdAK+jlHb9tGu\nNumZp5t2xqsY3zTiLAyUfuKP3BMBzQ0jP0xr3VBTk/v+R3VnRvsA7GQc08Lq\nr9F5QJD8/DPanyW6RLO8iQQrdNMmrzpycajdeDUk38Hf3fB2NLbvJtc1VnTa\nyE0/P+Y/wnEIBDvlqTofnO1Lk3yhlCYa1A6xwJE4zv7+HgYigG70ZYUz+668\nhOZ5Hm4SunxTMHlqHJwhhRynZfvRVIJOKKrtPHrVhUA98rCSyFGgJT1Pm74q\nFSU1OhdpzrLVW5cDmLStxUOwTT9vDwZDmrjlCcH/eYUmPi9muQc1jeZfePDm\nzZCn/FThPNr4Ss6BGiAL8K6zZU4zWL60BJaNNGwF56ANPcKcp2DLoZX6OZ7t\ngiJY6AW7t3YlZDSjzBPVhkegyZN+qA68H77K8h3d3kZBAWzIsVmjfSBoMXM5\nWzmq\r\n=PnB4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYq9UbSQ4NpPR8bk//a3jjguvjHO2pSZUVvOgHLeSE9AiEAiaUdBEqGMysUJ1X9Zw3vM034U7nLo+EtXAa8wu8LusI="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.5_1570022402433_0.8710551356351401"},"_hasShrinkwrap":false},"2.1.6-alpha-fix-npm-username-5272.1.1":{"name":"@crave/farmblocks-modal","version":"2.1.6-alpha-fix-npm-username-5272.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.16","@crave/farmblocks-empty-state":"^3.3.8","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"66955f312a83b49ba982a4e6e09df684d611116c","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.6-alpha-fix-npm-username-5272.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-3QEJJP3d2P6NiI1jgRFgev1Vzp0ObrUoeGtuUhsJYO1qqGUbtN9Vp0B9SCVteXmN6MG69WDfX1EBM5lATpeZkQ==","shasum":"17637f772f84d533938465570eb58f9f2c3b9b98","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.6-alpha-fix-npm-username-5272.1.1.tgz","fileCount":12,"unpackedSize":36946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdl68rCRA9TVsSAnZWagAAJpUP/Rq/PdottEGGzhpE1H4/\n3v0w6bHdVRF/asv25gZfRpKCJDzULabkUxszRFu8JyRjMcqq9/heCDQ/Jeil\nDn2PNiD3F0KC2PLwEy/4NVrcc329plA99/tn4fwFi+6VKFkIw8oTU/8EbAlp\nP44/l71e8vjlIRiBKzzjx7qu4+2HAc2y72OgZ3j+OSWSqsSHoMRIyoVOWYzV\nrrtFXjBKeHCn/MvrdymHfA+1PXU+Tt2uOFYgWVGZQ4MO5wzyllB3RsD+2+bS\n6ZQQmupuo/w0LYKAJ/QrFob4wiHNo0Dne14fWKlTbo/VVkvCJaIAZcwbHKmD\nzmqueI5OeSM8bRApctkNgCOagkWLH0f43icBjFCgmH1JJPj2c8IEG7h2ugXU\nIyTuhwqdpIVaBkwCMCtVYBpciJqjhhv4i8a96UpoJNS+quuIUn3mvlZ6J5CQ\nQEbSpnm/sQMaU1KbzrRKHDvDYelZBLM68mVj6ILzkt+LMATMiTcYj1mIak7F\nHWzQeuP+CsnKyJTIKpYgkE84CQfQGDXjHqaeWZVzYejCLvLlyGHO+W3nv3JJ\nthtlAGQpHkJ5+LGVSaajhXH96LtGFsb9iTW9waEgjAiw5ItyEsLS2ybVOHzY\nOpnf2LmxwaeKneGWRshfHv3MKfIOFtqO8VQ/85YG8fjvvULE9MUVJs5q+mwW\nhJzJ\r\n=t8Qz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2wsSs4V4TWxb4il3mYd7Owv9tOUhkFMw0UtwqU0ETAwIhAKmwP+O9a+IdYQSvvkCWAoD9Sp/DVpob6KNHe6KkJXJ+"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.6-alpha-fix-npm-username-5272.1.1_1570221867325_0.0149430175942038"},"_hasShrinkwrap":false},"2.1.6-alpha-fix-npm-username-5299.1.7":{"name":"@crave/farmblocks-modal","version":"2.1.6-alpha-fix-npm-username-5299.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.16","@crave/farmblocks-empty-state":"^3.3.8","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"ef41afac521d458e80f480865f1e1bd60f57010d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.6-alpha-fix-npm-username-5299.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-HBMo2CoOjDhKf6eC3dBbqH6KvyRwGwwuCBGaTcF+9ZmAcJcwKrlqZ9nS0G6VKkEeCYdM9ZzPDwhTE+5cwRrAfA==","shasum":"8ba447442c38fafd98a7774ae771809f4c1dfd44","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.6-alpha-fix-npm-username-5299.1.7.tgz","fileCount":12,"unpackedSize":36946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnhCrCRA9TVsSAnZWagAA82IP+gJe78Rndk15lwi9G9RC\nGnjbtiJyYyqAwkmnJWDVVj+8dsPeI80K85PGYTbG8MH2Ey4UlTVCDhbGbx+2\nvu6VUVvXNIMFTp6ZfNCrzT3Uvj2GRcB81o3jDoW/GppDXXJ6zXKe400yOkhR\nRAQGX+HyP2p4g9t6Bvoy4Qd9zRpzm5ZM9uxDIJVWP6TxGbMaGeXd5mK+1AOJ\njaaChLQ2C2w5f5zTBmPfcLKj48TZ6tly9SuxtMkFar4//y1Tmab0tXnxFmBn\nyr9dz/WAiqte1GCBfsvJoVAwl147R9lToh7sporYzMZRVIBhoC55WMRLbe0g\nDTKD4ZXTSicnQ/iO8jvHTM+7YlDGnpqgTFlzgXNO2HH6U+NAaM9/q/WzIuV+\nMpHUwJhsLziX7OlX0h+JLIOuVDR8OqPrAi5V4zwQHmGFY4gR6wOrBwImh0ez\nxXyqW6UhUneX3qOwf+xknqmueT94m75lZWyThWQt+ONL8ztjWhhoDjF1/eoi\nmPRXzaya+OwhVDNGqOoQsuL3JAxRQrk9e6NczHH9zlsB+aNtbwLiZufnxQS7\nHMtIkmhMS3xMpmLGE09wiSsWiPXpi2s7Hgi6+E/CqiTQElHanhQvnDLpLhlu\nGUO63c91fYYrOsthFXy2nBrwkUvZjCKKaIZ7ayTASbAGk2A7/MT2R2/k0ChI\nmwNr\r\n=kBfB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHSTVBwBcuZCkLXmgiKs5FzOeClagDoJ5fk3k3Wx0DSYAiBaWbzONDoobYAnn/Y9xSXe961pNx9Wpa4h/QJOWIOZqw=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.6-alpha-fix-npm-username-5299.1.7_1570640042346_0.4888442621127054"},"_hasShrinkwrap":false},"2.1.6":{"name":"@crave/farmblocks-modal","version":"2.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.16","@crave/farmblocks-empty-state":"^3.3.8","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"361443cd761d0468011b6f8931b5209074daf5ad","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-EzxDpp8Gtk6D/G6o+ASt+hmKffQclUWo/5++dYLGCVi8eBY4VUK2mAQNi6UtIMe9MXrN9MLuV9tTj7mhM2EGVQ==","shasum":"30887f738c899be1bf6b760c4bf52f1c5ac5e2ef","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.6.tgz","fileCount":12,"unpackedSize":37110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnheeCRA9TVsSAnZWagAA2vEQAIShU+TBcgzmngfbKbbN\nIhsKdmOKpGmV9pOqG5uYMa70Mp9VN8gw10f51NjwF7+YAaZmdu+klC5fx80g\n8DwqJUnZ06QUa0oGqLYAs7t4M36TPSt+5HN4vDln/ZEZefrx87W+Y4AExWKT\nmbRs6jJ0kIAEptDo6yNyIASFqky5YcbjWDcPZo2eC5hKxrUv4htgmDLfFLyx\nyuAZRIXL4y3tYVLLxT61Ksr+Y13mE0J0nrdSnqsP9j3FHwGutkodAHaR5A1r\nroToCN/iuc3U/IFjF7wSuXCRmdaoQHEx9uV+Rqqv+QiidWVAPuMokoUtc2pX\nbH1e9PbtYpM+L0ShWR7fMP4jdHfjaVBTMHwcxMjEMbMKimTPlfxmvhHlF2C6\nXKdZBEirmMhyJ3G6y0ol3Wjg10GH4KRUCUl047ymnW35Avq3PMpuFEXCplLi\nToO/cLdqCb1TpOAXSyG4xkg3dzgnwRL6TLmKbsZzb8Pdq/4qvm6Ktc4h6UWE\n+ma8qKTaLJbtQU+4OzrixM+fXLaSYiAUQj3cn4dqTkDinNngzk6+Cy9GyofV\nGauGiBL2Gh4Pcv6w5Nt7GK0cUVn9Re4i+AT2TrmEJAYKyui70XkY43pDaugR\n/fWnwGbc+8v/TqPtxSOrtTXJtTNKe3u+vjzRWnIlJ+NU9yxONORDKdFjiTpy\nQNwT\r\n=PoNa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEK3WArC8ixS64M5sJvVzX+WBwKklbz+zzgoB9IqmK0GAiBLrZp5ptEhI2abjMi6tWHgXN91UNYczir7qAXwOqqoiQ=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.6_1570641821587_0.6711491841770203"},"_hasShrinkwrap":false},"2.1.7-alpha-fix-image-proptype-5327.1.0":{"name":"@crave/farmblocks-modal","version":"2.1.7-alpha-fix-image-proptype-5327.1.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.17-alpha-fix-image-proptype-5327.1.12+4f04a7a7","@crave/farmblocks-empty-state":"^3.3.9-alpha-fix-image-proptype-5327.1.12+4f04a7a7","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4f04a7a7fd6f6a0f1537b0a3f319008983fffcac","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.7-alpha-fix-image-proptype-5327.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-cmA9LeBeeNduB3FhVx0hzitS0+zVqsDzAh1EGlGnpeMyJwRBIz1WqyKWd61BIlLdA0L2RFDGb63jet0BWnhO1A==","shasum":"992fa36c2bbc3e462031a2a6e5b8d03241761dd6","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.7-alpha-fix-image-proptype-5327.1.0.tgz","fileCount":12,"unpackedSize":37241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpH87CRA9TVsSAnZWagAA44UP/3Yo0XNzulCBHTzL0RxU\nNgCN81fhuFE3NadSvtC+U6K/YEoZGQoXhl0/gDum9dFDgCvCjo7qcsoEtTdT\naudbFzv+5xPb8sfKhCqn7/MGzhtli38Y7ESGUDG39Y4s1/YIpl6p9HpGHLas\n6IojPeMBdFXsPPV6fOnnLNIZINeNBv/M056E3lgznofR1BlhAEUput6v90Aw\nKcWp/PL+K43p01zUX6iAm1WL8Snik4jKIA9r3fagNKXY6mr6p3s6frbezT9b\nuG6SFr6yoBt5C7jgxNMbAD4RIEC0EZ6YYr2dLYXlYPnqlUaAnOk18WkSh6o+\no3SGNaL1VOMUq+4M8RWzi2Urmzdo06hNG+d48ouyowDO0f9sY51et6VvMBUz\n0aBRSFbKcE6fWczcknOck1jY4uKXflfXTusz82fHckdrwpFWLxVZZ/cDKbuS\nQa83VuvYtz6x4favwKoHjstZ6J9/s/Ppb03snjhej4U29OyZaaCw3yP2tiQ5\ncNh/jBrsmNOuvU65h57yRXEgcbKxKK0CSzKhDetfxcd87XAjSvLmJkgLdH1+\nR93SSBLP2UrgzAKKuwLSPdW6rKUSpDtPaRwgncruxNWaBaYHyWw0P4lLHfXZ\n+4OWuMqfKMJ+nc0ZbvifskuNiJa6jPkqyMEBOVbIy18QeYrHlOvJ7m8hURZN\nW98j\r\n=cLSP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxtNzQtrXsF+IafGpwjGA5FW1x68bzjx8jEJffSyIH6gIgBhZIHqo2Gyb6aYKmhF0Ud42WebpmxPn2weoKaUQSKSs="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.7-alpha-fix-image-proptype-5327.1.0_1571061563263_0.05191811861147766"},"_hasShrinkwrap":false},"2.1.7-alpha-side-nav-js-5342.1.18":{"name":"@crave/farmblocks-modal","version":"2.1.7-alpha-side-nav-js-5342.1.18","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.16","@crave/farmblocks-empty-state":"^3.3.8","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"63867f37d4af89e9d5efa637b390c14c7fcdb4c6","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.7-alpha-side-nav-js-5342.1.18","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Gzlr0sVb4ZLZ4/Ok4nNkj46608K7OwR7jlC5FOlUI4/NOuyzlvwchCs1HsCRd6QOwYzFyrmbZOfmFjKEJPxYsA==","shasum":"ae8c6797f74ad6c5ecbfd1cdb0e1ec96112fe337","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.7-alpha-side-nav-js-5342.1.18.tgz","fileCount":12,"unpackedSize":37324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpczXCRA9TVsSAnZWagAAv+UQAIRpvyqRqbAFqoxeD/7e\nOBhvHo8N+FQX/n1up+WiwDTWy+cPTx2Ca1rtXUm9quSXVMXxKD7syNiTtmxs\n1jydPWB8LzsPLMTnljojQ95YKW6tXm6jJwIHYUUE1TrVv2l6cM6+d7v3E+V8\n4qnMIwMHVcs/1bd7lWusJtfapxqA8xp/3JkAr9mf6bHLsp0keIhVEGvJcmGO\nVs8iIr+ZwVXczpbW0CsQP79xStJTOI9PyaNI5tGlDhHSTWtWZQwiKbvq7n/u\nSEFncjlS2/duZGr0rknn9pjedJV4i1Dlbtvj6+6zI5i+Zt6O4GkJwB+lrZiv\nLTwbP+bYJFgmDRYgyNjMlfbO1fLafI0tz2G3SfZWP+tIqzTAWDqqsytJZNPG\nm9tuDEGukrdMhLeDCs9OFw8gr5n+fFUkV4umCL9xDvwCRM585R/ONgsqII2p\nbp6vlqnj2JToe+hlZTMzJtSi3XeO1k4ThzMUTslfQy8CN4x54IJbvWVH9NXY\nFXTrPGD9gvqq5P5vhLARcHngD9CSOU3P0hygoPd6QPLLZggsAcfbEDfjUqNI\n39hh95hqAWfXxiLHa1rCG4pMfrPulDp9cInPVwVqZK5Q056q0OodtRfr9I10\ntq0tsvBd3Z/6TztXyAtCjCqpGzlOw4JGOLdS/c3CQsmAqMPnrFz2RH8gN9kb\nG0Bk\r\n=B1qK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChqLOC7qtsd3D0w9xnnNLXWFgIPiX4DzBg6nIPxaw/BAIhALzKD7jvUDZX9FWvyhTB0B5Sa+J7rr5tdhIuZG1OuH/l"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.7-alpha-side-nav-js-5342.1.18_1571146967241_0.374154297199907"},"_hasShrinkwrap":false},"2.1.7-alpha-fix-image-proptype-5356.1.0":{"name":"@crave/farmblocks-modal","version":"2.1.7-alpha-fix-image-proptype-5356.1.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.17-alpha-fix-image-proptype-5356.1.12+95b873bd","@crave/farmblocks-empty-state":"^3.3.9-alpha-fix-image-proptype-5356.1.12+95b873bd","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"95b873bd9f223fbc473075ea0945416fbfd3577a","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.7-alpha-fix-image-proptype-5356.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-7WOQxyC+u85LXB4YDR+2my0hCB9fUtIzcXZ2Absi56PbGhx9YkFWfU5ih8Y0psreCDRNEIomo0SZkIQug2tDPQ==","shasum":"4011d4c7ce9a2a6531de00169e61d20d960186c5","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.7-alpha-fix-image-proptype-5356.1.0.tgz","fileCount":12,"unpackedSize":37241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpw9aCRA9TVsSAnZWagAAOxgQAJsAPmqMtM8bQIFk35El\nKrYsRw+epkf1QnaaMjWp2jF/FTzPhqdlcvCWMxsCZkUINLY8PoS1rZHqrbtW\nZvI4kI2bbVDpecbNisZArXIIqHZRFDv+hdTg0nijC+7//A5dPkBTTH88klYs\nx5Qa9+DIducQ1nAS1fRXA5vb25zLqf85Abx46oNuJ6dbMbPUKt0SZ8OhluQk\nMzr1zR17kJgcFHOMgKUMr+0D2dIfylZMFAjehLBoGZ7gGlvIT0K73TYtDHk7\nEgQ2ANDmXdcOPWJPsL3jztVWlnPNHPiWFjyOJjj714eW0SupbBmodlYaRWYJ\nqrHy08Jv4iz0mzN3zZPbEbqVcqBH0kZigg+s+RaXwLRI2q6urLy0YsH7SWo6\nWfWkXKmEZwC/ML9QHm9nxJuxE8zXCSrjad4FiChafV9vhPbukzq2+wClauTU\nRZX/g7Qx4v0PlxLpsFb9jOPXCuavuj5yjvJi0FmPrgirD1F/GLbo7QZD+EAk\nlCDD4E3gdWO+5pSqMUpjTcaneX5woIoo0LwczOKCti2EkJV0KuR9g8EXCPUa\ngjB5XbTLLu3ZubEec2AkQunODlNmIvzfZITec/O4R0luIm2hae6/E0P2AMBv\n41W6N4h6n+zzNB1FdsE/RRjrFSR5mBn5CK5YLpyV7TpHuK6G8ZwPBrBP2xrr\nvwOY\r\n=ptPx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHXbBCVHppUkh6D1eXCiG4oCmIM1w9z++8Q5dNIn4hP0AiAyfTq21dErReCnxaDS07LfzlVZTjRpYDzEwBQ/uDkGKQ=="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.7-alpha-fix-image-proptype-5356.1.0_1571229530182_0.2926508305002329"},"_hasShrinkwrap":false},"2.1.7-alpha-fix-image-proptype-5388.1.2":{"name":"@crave/farmblocks-modal","version":"2.1.7-alpha-fix-image-proptype-5388.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.17-alpha-fix-image-proptype-5388.1.14+81ca6e65","@crave/farmblocks-empty-state":"^3.3.9-alpha-fix-image-proptype-5388.1.14+81ca6e65","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"81ca6e65aaeaedb130e2a07110ea8f0f5069b43c","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.7-alpha-fix-image-proptype-5388.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Hh2BDhbJsG8WimwUFnAotJshaGPDnY/EYUXEcon6/dAfAR1+T00ZFWlQ2Cz6giMEoQCyXrcVdO4hfD9hDxcuQg==","shasum":"fe62a8f12d39b37fdc6aa822ce7a0c7a99b70e40","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.7-alpha-fix-image-proptype-5388.1.2.tgz","fileCount":12,"unpackedSize":37241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqf64CRA9TVsSAnZWagAAoIMP/i0XjdcE7Fl9Er2jBduX\nLO7AE+I9JAZKw1BlPyY5ZK2AIpnG0Wi6ciVH4Pevit1VtsjZXhhopOZe2b1r\nEi4zQM59lgy5iBf99kqeWlBROzpxfGadgLQN6uEi8zvdQLwIJaWVx8mMTaWL\nl9Jt2kQ+goWHEOOrad6OXeVqB1Q0bvpqalZSjofbCPv0WTAB/xHlECZ7Vpvt\nH/h0IbNwWre3OceyY1fnajYneZz4HASwtho+3OfudUFQPJrqGtK3xV8d+xZ0\nCxS+7p7KDkEIsgHGXh174zbGnmKBHmK6JUQyFYxEwaONCtdnXV9ht1KlkMxp\n6xHewYHKT3MOujsQJXqom2fESm3nK+lwVtyPt8KM4wHPniG4wjPoVeHSSs1W\nWqOEneVYIC6oh9xukPr4VWD7h8WJF8CoTXFM8oiKZ/vymN+Z5cdcePtFRiJ3\n4EZkqhXXOyn/CzfEZ05gLyqhKbZAy3h0r+Nm2XzD0xP6WrnPkLr6RRCRst2T\nJy5v58g6ZoL8FDppHVAZ10b6EuErCyLNlPuupaO2VUlIt+yDEayuV8xIahnp\n/A5lB7FZjtMqDrNrjf3CECFiDVWvCbic6QUvT3aFukWP8nLBp0fdTUYpKslf\n9aFC+tkKJiC7TYOPddQQAwRAU7cf0rU/ApkS4axWKeMnZ4mVoj+uyoVYXNW3\ndz9k\r\n=+XzW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTstUQP8rtEf1Aeis0FUuRIGf7YyOZc2WjmMmen6LctAIhALF6e+hq8Ls1paxDYUP4USe9fBV9BesXAHeO5xQInGvs"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.7-alpha-fix-image-proptype-5388.1.2_1571421879947_0.16346092897960962"},"_hasShrinkwrap":false},"2.1.7":{"name":"@crave/farmblocks-modal","version":"2.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.1","@crave/farmblocks-card":"^2.2.17","@crave/farmblocks-empty-state":"^3.3.9","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"191bf757fa58ea9d9a420b2a510463642aab0b04","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Mnq4+LFdEqP8nPMglO0o2qcMaQhf2RQy3o768f7QGHkzwE/7ovfjcVUEP6FRjgBnV5twOedP4c3xpoakUww+Yg==","shasum":"b8fde45dba8522ca7d90ebc26901c8da3faa893b","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.7.tgz","fileCount":12,"unpackedSize":37315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqheSCRA9TVsSAnZWagAAUTMP/jkJcyn6kp6Q1yucLPNG\nhsmFX9gq/vKy841eVf4OV7Y1wLYEMh2rXuBxXY+mRLd7YztnsNIMmP7g4mtU\n6He4LsHRCeXky9hwDiBn0Atv54zTtGD5kuxrRgyM0qNvqq++nPmCudDk2YeQ\noCRx7Ia/R6QliR9tlSUX3Kvc5nhPSby9Uf9IJ5KVTP5oPA0eyRMFxBJLT+JJ\nepvhd2I5uU7I6j1tV7CIbfnRnxBMkCrBauN/zpKzvP5gUeccQFU1WvTGgihK\nzSBDtv1uoYOIf4XyfgLokmGzTg12mSjYzdZ1lbMuYywSntfCdq/XqaSD7z1E\nkoggULBf65QCRtMv5nVjGP7XDK7lfHIbmQ5RlQDgD4By4pz8ulbPL5DcYMFf\n+zBUgszJ05zyXqyfS0S5tHU3tYPvm1XY4dBI3JiH/aBHv8TIl/JYFagh+Co/\nCwzYQY5jILWf/a53vLqde7S/HaG7+GW9oaoAIHrpyOmPbAnQUsYyX6ucM+7l\n6DwUZUhQZL35v3nCgCfeb9V53RPc45hpS8G9l7ALINwXU3h86zoeDlXro3kg\nq0+LpBZOYMslad+mai26Ra56FjHjJlqv8WLkutt9tbf9TCma1hOOWt0uW281\n+6G9nfHR9/mfiZd/bw2s/3UDX+lwcZfZFwbOKDNLkmZcfZNcS0xu+FnzFi0k\nCLDw\r\n=Ol6y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPNQCdfUx891EiTjQu0zwgRFYxPcCqemIrkMJ0kUHjhAiBWqCRpNfegTPOB+uE4znu33isrbjHIWS04+KA0tEI1UA=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.7_1571428242125_0.007291087128401763"},"_hasShrinkwrap":false},"2.1.8-alpha-side-nav-js-5441.1.50":{"name":"@crave/farmblocks-modal","version":"2.1.8-alpha-side-nav-js-5441.1.50","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.2-alpha-side-nav-js-5441.1.50+4fc1e7b1","@crave/farmblocks-card":"^2.2.19-alpha-side-nav-js-5441.1.47+4fc1e7b1","@crave/farmblocks-empty-state":"^3.3.10-alpha-side-nav-js-5441.1.50+4fc1e7b1","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4fc1e7b1c75f3616e2f11ed11ebb2874b98df4c3","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.8-alpha-side-nav-js-5441.1.50","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Mg6E0qs6tU+CER1vTnjis6S1w5W9wALI8J9EqLu2c8aCmXCdUMbNKHfNkyPXrMTjW8gfCkybd8MnL4ON6zxR6A==","shasum":"afee9033d49566528674fdeb91e9173039104415","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.8-alpha-side-nav-js-5441.1.50.tgz","fileCount":12,"unpackedSize":37641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdty5GCRA9TVsSAnZWagAAzdwP/1ho9u7mYDaQE7Q3gNPx\n26/TM6F7dIE2hRYT3tCyyhUm9C/2/Mihi/veusJE8tufW826umBj8dv6QbiV\nrdw4d7mzrl3JAGvoDcifVHGYz98B2c6UhneO6kNBgsgQV8D3XivZHr7nxeLL\n6OWJBr3wekAw8Hh8mO6qjG3QQMTdP2d48mvHgyKXSF16wi+/dUQg/+lh8/t/\nkxSObUGdmh8xuloJbPYJJrut05Kt0VFpxfe1ohl3F2ap1vgImH81sOnAzygL\nTdqp2fiJGsYKmT6y4O0pGLkymtidFwxrHTtylvMAHbcrkPQ2/61BUfVdj1kn\nk/YoP5QyRyLUC6BzuX+36G3ZIegAI7xpK5MKL1zkiit29eU2gjHAcTOTvZYH\nejA69F/GFi702GQKqvwbTLrHjFxKtcFRHshpT003HLM2tsnFbebXrePstYHK\nPaQyBVkPB28pT7wY2OnugLtqWRNvgEJ+nX9lwU8nkjPu1MDIzYi5z7uaktK/\nKdg7GLm9TklO5JovrxzO33u/06ShQm9HsNcAHuHT90cHQx5l4AF9UmU5xHAC\nrPWujAqanW85QpORmWIyoWphkZvLVELtUjrgnojMrSRCRLL4cOnJgeP6ZCtD\nCS59AzQ+U85QDcxhL++Pi043jIgyH6FRRbsb9EPAUdtdHsIS3cUnOBEE585Y\nsXCA\r\n=1hA9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOoEMbpInxtOBzZo3Yrs7EwY78HJ5m2xWM2LaETA4bwwIgO0RnBGPTS3S6l5/OLVoTWsOx1wJ0/IVvVntH+HIDNl8="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.8-alpha-side-nav-js-5441.1.50_1572286022271_0.5129719631828431"},"_hasShrinkwrap":false},"2.1.8":{"name":"@crave/farmblocks-modal","version":"2.1.8","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.2","@crave/farmblocks-card":"^2.2.19","@crave/farmblocks-empty-state":"^3.3.10","@crave/farmblocks-text":"^3.4.3","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"067154b4fcf88027dce3998aafbb58410db0f2ab","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-8as4s2r5FqmGIrui7OL1wOtRwlfD0seGWBJ4Md990qotInOygHe4ui6i32IWcA4T7PN5+xTJizHsyW13JWuCeg==","shasum":"662d6192d11e23ee44a75bfb9a5d1ac5722cf901","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.8.tgz","fileCount":12,"unpackedSize":37521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdu0kTCRA9TVsSAnZWagAADXUP/Rgk5xoqmaLOYQLVHZot\nq+Wu5YDrbRk6jKjgOVunENRS7wrIs0Rl+4Oge08gO5DRwdzah/fbODc+7gcQ\nbbJtH0hX1CI7murkk114Dc/kOlqk/hDrGyMLrcciM4K71swDQTqg68NCfGss\nGDcsR55svpgQn0Xfn/Y4fZJcm8AQRRzwfcToMqYqrdzFBBNwj7MUu018qM3U\noSog5SpcJv1JGlCGyaQh6bHAlUyEmGPaexV+1q5LxajUbSDBNIIeLiuq52wo\n9MP5wnhSNppL0TOGy/6ueNDf9SryFFRr8kPIaTh7s9OAXCP9U7uVSoIb1fw1\n9lcEV1f1n8jHAMb6DF2iXhqqZm4m8FZIkD5eePO7OiE9yl34ANmClrKDU0iE\nZVpCbRVDc4Cdjf4SmLUx2Eaug4nkFgQwyU0llbTVZF73wbctzS2Y7Fa8KrTl\nIHUbaRFw0/yJacfNBpZD4w8Eh7qxGbrQ5hASeAM5sRH+eAEDfv1y/yFRcL33\ns5RaQDb7yi2mcu+yQ7aOj6LifAuMAXZ+4NZxwRrg49wFWFfCT6fTKzn0Ur/0\nn7Cr9hz3AjBtwo9+BpJOa8vGJKCRiawQ33hCzvrVjJwcdDM31YX0neUawTn6\nTByD22Ed511w7h7luZwzgZfMGQudmv7f+cipN+XrDA+bX9ba1PsPMV20+tNU\nPFvP\r\n=ghm/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2YUACO8w6FcToJTAwJDraJuprAn3rUdssjV+CO64iPAIgQycK+Asg0SE4XDx03zUyEB/XyuCVlEbdi9trPp1TQRY="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.8_1572555027254_0.48862476708166946"},"_hasShrinkwrap":false},"2.1.9-alpha-mobile-tooltip-5522.1.5":{"name":"@crave/farmblocks-modal","version":"2.1.9-alpha-mobile-tooltip-5522.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.2","@crave/farmblocks-card":"^2.2.20-alpha-mobile-tooltip-5522.1.5+afe1f4b3","@crave/farmblocks-empty-state":"^3.3.10","@crave/farmblocks-text":"^3.4.3","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"afe1f4b34df816ef08d0f1bb285decfa30918383","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.9-alpha-mobile-tooltip-5522.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-K+foXRUdCgtWs6E7fGP+xDCZxBkDyJ0lPGv1CxgBLFFjTBXbsLX7P8mn2YlRJ8jcNlWuAjK0gt7wKmU974bHFQ==","shasum":"9d19f80f5d46404f823f302378a5c8a335b8c586","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.9-alpha-mobile-tooltip-5522.1.5.tgz","fileCount":12,"unpackedSize":37599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdys6WCRA9TVsSAnZWagAAIT0P/j2HWqcHsVSjfwuIWNsG\nauuvBkz5o6UnhXdr1Ur7gn1cAMEd9Yg7M0hXP21m2lajzY3qGY3FezE4APdq\nzJsiOhV3T8dv87P0cFj4vuamxd4yFBMXNcwb71U/Aycpq7st+K461fnA53fS\nThX5zF4fPskIVzL2qqfwrUVi52wvVL20GEtzZrl9K9UcPD6gDVIS6xATtVg1\nTRdOnj3mUyhnwAmhE1aeXtBq590XaT8I1HBgs2JQQeUzkS4mq5Idv8gLDKqL\n1+xTBelOqQWRilBBm6PxPoBLGA4xcvE7GMjDpSYD6yCHpwPMVnTTk98Y7t8V\nkWE9VDQ//Zbvdswwirf+hUaJ7/QOqbHJVuMWqKaXdTh2jloxGGKc155ihDzW\nOLrY9+o0ZB71dIcUU5hkpL/bki4IyST0XpZinM0eTV7JGLAcVGNuR3z4RX7F\ndUn856Gruta2AhbKst+GS8bZFdh3aGrf+2uqTpS0/fjpMimzOJDcHwPVFx3B\n2HP79YuTH3VaWJjjCb3zpdBuafHaF3RGF4kqzkq8+IVoGI86BisCOlLEQ9JD\nbeE/xKkynTJrWRN+D8vTIbwgje6/NZCfnptfLDy2YiKFN4hvpo3yhl6YJUv0\nCoB1OqXY3x9kp2oDmRtUqmXiFRADLhtPAtdXyrQICp7E2XTB4wksO2wa8QA5\nEqGQ\r\n=oU35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk0/sxXADozkjqa/MdaDvstgJ+/u5FLjKa0fp0iQ/RngIgVdQuvZuASDxAvX2U4QvRvv4qOxEueeF+MZEBuMX7QfY="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.9-alpha-mobile-tooltip-5522.1.5_1573572245831_0.411932615265173"},"_hasShrinkwrap":false},"2.1.9-alpha-use-new-icons-5530.1.24":{"name":"@crave/farmblocks-modal","version":"2.1.9-alpha-use-new-icons-5530.1.24","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.0.3-alpha-use-new-icons-5530.1.24+5e59f4bc","@crave/farmblocks-card":"^2.2.20-alpha-use-new-icons-5530.1.24+5e59f4bc","@crave/farmblocks-empty-state":"^3.3.11-alpha-use-new-icons-5530.1.24+5e59f4bc","@crave/farmblocks-icon":"^0.2.0","@crave/farmblocks-text":"^3.4.3","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"5e59f4bca4ff8464befaccc59e4f9bc812c867c8","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.1.9-alpha-use-new-icons-5530.1.24","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-uBMTfsVtBzBJ5qQnn4RVkfsDJg6tKsRG4RcPszukNCx7CAsi5CkYXHNpcN8IEaIgGyrlaePPVVpE5Fn5kAtpHw==","shasum":"55d6fc362fec7a258b1a3a804d082c1a6c0ef166","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.1.9-alpha-use-new-icons-5530.1.24.tgz","fileCount":12,"unpackedSize":37905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyvNxCRA9TVsSAnZWagAAG68QAIRmpNF4Q/kIIGJAR79W\nMW26vIWBge5SHNeaIv0UJ5qdYbcF3Zp6Ihkw9mVsJx21BlARqiOVGx2vsQQC\n7fZTvO8cqfaS1fosYzAMch0lLN79M8MXxqRg0BKx6lULx4yqwvVKgg2tNZ/p\nFcezkOdrgTb7tikyM7rH+KYCg+mcMPdlL/hbbk4qCMW72V6YGAbKlQZ7K/TI\nBXL+cj7yxRc4rPFxwMVYqAUXscJJXNu7wSZF1nsf/haplOvBVA4dF/BPod8T\nWyDSTtIK2Ju7oJSeFpl6JPVyyyaV1EVBxciFX0M2RVsEgjkw3Tzjsyqs10hw\nT6YnaVpRlwbXQ/LjDG8Y6oJtYYtcLiT0QbSlFNqU1plgWjwMmHc9pfKl9JVC\n7HJ1SpQDgRmoCjfUI5ShAsW7WBbA04CRNYuo7kNc5UiB+2OxvnOdiQJdFXJj\nUiQCAqTHmAqbCZaw35ZHZQNcqX9OQwIokV0Na66CfYreN2CEFwxtspmh62tv\nqMc/WDIfuJIDZkg8jkmddnLBCrW0g7ij5v1tLoji3VmBKB5wyzyjC68i4ky/\nJ9OcJBL1VECOoM9i/+wLVkXpBlbgtn9JOiowmAmU1NHxiSvjfotFVGJIj1db\ncd4+qfiMak/M6rlKOTiG5P9ntDjs6pxLXcX0kuAfWL5YwqT/PDrDm+VUF1rm\nU9TT\r\n=uv83\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFMx7kAjNGo4bLu8Gt0f/Pd6/G6mrPbgwbAuycfO+FiIAiBX53zEs5SgkU2UCEiwrciGBOdS2xxenlEEFWmwalBpFw=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.1.9-alpha-use-new-icons-5530.1.24_1573581681533_0.9383463167059647"},"_hasShrinkwrap":false},"2.2.0":{"name":"@crave/farmblocks-modal","version":"2.2.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.1.0","@crave/farmblocks-card":"^2.3.0","@crave/farmblocks-empty-state":"^3.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4d208c11aab8de7dec980d87d8386e1afa265e20","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@2.2.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-XMpJRyYGOpXrfk+ytELBtHcetkIFqNn8e0VRr1TgfWe5meAitebHfKzuQTKmo94bwmIuKmky10KKgWOIDTo59g==","shasum":"afcc5eb8a8840fd7ea2976b165c50a6eb2ddf0e3","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.2.0.tgz","fileCount":12,"unpackedSize":38133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzD6ECRA9TVsSAnZWagAAp/kP/R/t37mcRm3i+VfcNdyl\neJxbiLlNM9+oFUJaPQVjfslohrUxfLrcm+iF+TkSOaQhDpaHeuWTHW4ewKgq\nYSLz/v6yUl7lfEN3kyy6tGrEneTYMe3haZ5J+CI9itWloDY91jGWxBFl8qFP\nhi+9Lp1DBomzgMYuMqJ3MB1E3tN2bOeNC9rTqYcd7ha6XiGUebAIoCyA3Bql\nhqUQ2ccaot+xkX9Nen6cZg7LSpPa+YwDSGXDU8Fwv8Huw5ccnKEbZ6FU10pm\n3jzOqx6AplHI+oqE6/jMprjMt/7nTh0nkZ3gBZKuUf46raxouU4RdG5gUiM5\nswBbU851NJZ/XGUDj1mLxd79/d636v0B8AaCfTheQzJ8LXLlyzxC+7KJnI+d\nS2O9G4gyqEnYD6wvStql0XyjpIK1GRxNKFwSwV5zh5CE+pDSN6KtqmsLBqTC\n2WaEE0ge0sK8cGOqbYmAJ0KNOeXYM517qixd4QCvo88m018HitzlGN1rgqNZ\nZ7Gr3vRKslYHLb3Ye4XZQJ/4fVEEJmKemT8T4JVSqaw7aC5NssGz52E2bzRq\n/br7315k3GLBB0o2QI4kTccF5h7Ho2EQBwOQNXue5CMkyK7BwNTj0dQu8TGK\nrLubK+Zg3OVVbd7x04vxcIy8BXIbbrFlNxkOXmIp4LXSfPKMklBRlJa1KREa\nBB+s\r\n=2wPC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSEme0zl5wdXoGiHsEcKEF/s814P+vw8g5PQ2qcOKy0AIgRtCfXM98I8gsDPvqvEAFeBNqBIM1PG5QyoGzw3dz16c="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.2.0_1573666436367_0.08686047720855083"},"_hasShrinkwrap":false},"2.2.1-alpha-mobile-tooltip-5545.1.5":{"name":"@crave/farmblocks-modal","version":"2.2.1-alpha-mobile-tooltip-5545.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.1.0","@crave/farmblocks-card":"^2.3.1-alpha-mobile-tooltip-5545.1.5+52685bb7","@crave/farmblocks-empty-state":"^3.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"52685bb7d9fb513747202de0f208adeb6902755b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.2.1-alpha-mobile-tooltip-5545.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-a9kXJM2uo3maKKuptYJvmfE67IhW4vtHZRt790ggFGi0zMXpu3KBJ1Ajksy5lwIBTxNtRrNfpqt76+cx+htYag==","shasum":"770376050ffcd4413cc33430ca3d265a49081e56","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.2.1-alpha-mobile-tooltip-5545.1.5.tgz","fileCount":12,"unpackedSize":38211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzFUKCRA9TVsSAnZWagAANsEP/3b38oKcgr3AKiE2sU72\nLWEfiDiiJQkKSHqHSUUiwzuIWQ64N/G/FPse96xaAGEqyWL2YKS6yeY0DIeR\nTisEYJM7utLZggpFKeKesRAOxEHUcww6mccJfXJ2vjjcBLGeggoL0BMBn66i\nhT8IAK8XU1n/RiISUAJAmibL7bzb+3lFlZrl/vZ2XoLz3LqS3V5ijPBNmJ6t\nY33OjpuYoQZIcGrqQyhRioPTO/AbKYH3HbtYr/9HkcB06RNNXdhbZX+zy/Q4\nqzvk/n+CdJuT3hZBtEnoTc6yFdMmoORQnBz85mZI3VrOLBuwjKkyDJI0eK21\n1wuoEkEN52kPb5WZyAtkzEyhNvpUzmMC9H5EAlyfhj5xLBM0c7/1n06Nw4S6\n+pW6iXpNUqiq71BhZYvCKaXbII76K8jaV1wZLVgJ++Ibk6jntBitOOSc4pA1\nK1Uuq1gr7fEAt/o7QBUgYktuYxQbWP+fj7VuU/vIRb2GLCxOvsOXj3v20qge\n4BpEos5wa5JdxGVEiVEr5L70fF+0VfCr41qnVhkvyJmoQTENFSFRTRqPIC3a\nueYtEm3VARrXbW8S/M/0neLU/liQPH6+rGc/VOrwDnKqEFn8Ra5H+7n9Rc/Y\ny1giQuWbc9kkRrt6ZROA0mnE08vyIbbEU6XpaF1OA2uJBXu/t22Wk3L2h8zq\n5yih\r\n=LD4f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHvaQlDB/z6EFKfynXMV4reLM2/RTiEKpzC2kibv0TyQIgIoMyAMCBYSE4L7OMpeeVyI/cC4InMwVHosJn0Knjl3s="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.2.1-alpha-mobile-tooltip-5545.1.5_1573672202090_0.21243660548008725"},"_hasShrinkwrap":false},"2.2.1-alpha-use-new-icons-5553.1.26":{"name":"@crave/farmblocks-modal","version":"2.2.1-alpha-use-new-icons-5553.1.26","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.1.1-alpha-use-new-icons-5553.1.26+03146354","@crave/farmblocks-card":"^2.3.1-alpha-use-new-icons-5553.1.26+03146354","@crave/farmblocks-empty-state":"^3.4.1-alpha-use-new-icons-5553.1.26+03146354","@crave/farmblocks-icon":"^0.3.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"0314635482b06bdef18fff305b0b4f2143ea37dc","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.2.1-alpha-use-new-icons-5553.1.26","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-+I3TrXXNNr6+OFTz38U8H/39r5iy7Oi9WrRzu2MIYZ7UgGtKEnhNVf3SiaSVDbmEU/FOM8fxlt3YOiEF8klisw==","shasum":"1f75dfab39bbed46d48b2895b548e31848e78d3b","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.2.1-alpha-use-new-icons-5553.1.26.tgz","fileCount":12,"unpackedSize":38517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXp1CRA9TVsSAnZWagAA9W8QAIDUxTH4VtQSNma597mB\n3X70UAq4wtx1CSDGId5uyLCQlTPgwe688h5NAVnHDpdiCbHENx2XtFV1XKDf\nMvxi4tgD5FnXoi7yzfMclaJUXz2Uo4DbnPUl4bvSA3cUfBB9ubmyytFvYSbS\n2xPOoxUhvAzEnxHdYVj7u/gl2UWzm9NuPqsM+tgL4Pq1ymtVyDbStpXVU4v6\nr71Vxp4wefnM/J4YqjjhX1U43g+BRYCrAuKz43dCjXV2IL58L+V4nRWXtIln\nUAbAQIUsifZX8OrllqQpyudEMWvG4SJxv9+duwO4STipC13Wqjh3OIqL2yrP\n99NnVsf17ZiOgrntprZfE7M0Lwet5/DZ/pY8tDkRbQHXjLlKqPNUMAp6dXj7\ngSLZjSsRKNiP76r9O4+IGTrMyb+kULFLwy2oFbYsXoQGm6D/GEiRxPKJokb7\nl5QP3O908JUdUxY05PiIoq8xYk7E2m5Ums/5p6nDvsrDbUlyNkcJjXowktrR\n1f8fICJGLCgwEJx9turW8aTpyXLgkjGMUWWIieNB3sTvnOdkxSLFXPCqkPlE\n47rLZOSxzeBkI34sGxcf2YTZnBvWA70VW8XOwbavwbG7ytlt0GngDHXRo2o/\nomid3iL5bQWRO52oyJEJpVvxubHC4rMPWCJXGktC4+Z9WEXyWLsIPtqPUq3b\n8wuJ\r\n=cUAA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDo5uyE9EfBBopaWDYC5lvSKW17YqZOyRBKW3ic5JnYYwIhAM4jPnZk/H1TX+FD4ELi9Nc3YfZduo7SqHIsbYz23Dki"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.2.1-alpha-use-new-icons-5553.1.26_1573747316957_0.4348926281502046"},"_hasShrinkwrap":false},"2.2.1-alpha-mobile-tooltip-5561.1.12":{"name":"@crave/farmblocks-modal","version":"2.2.1-alpha-mobile-tooltip-5561.1.12","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.1.0","@crave/farmblocks-card":"^2.3.1-alpha-mobile-tooltip-5561.1.12+b969ffd2","@crave/farmblocks-empty-state":"^3.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b969ffd2b56d5bad573d88ae9e2b7d7748119e37","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extended Components](#extended-components)\n - [DialogModal](#dialogmodal)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.2.1-alpha-mobile-tooltip-5561.1.12","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-/NXij0R62NY099zJ4wO6R+ruGHyYeTEXUs7ufOpg3eOhtVypw9ZzADTcw4qCDrZjDsGLpK8IaJFV2pOkoiFYfQ==","shasum":"3812b61fde18176bb08e709b9acb37eea6a4e81e","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.2.1-alpha-mobile-tooltip-5561.1.12.tgz","fileCount":12,"unpackedSize":38213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0qCbCRA9TVsSAnZWagAAtFkP/2lxNKyOmJx/A4LIb3d1\nu6hzt5dtZSy6cazfKewoyMl8pjvAJUmKTEK06WsNSHW+ohEqVZJJlkPAEWeV\ngb2kzt8w5Atw7VMKzItmKeb2Up7rNqr4VZPOx4ynOCFAj1Qwi7lSakJhr0rJ\nZSrg+a2C0JT73kNARayZw4B+xVm6pB8GWVdbgHhnV92QqQMvLHS99Wft65o2\n0urqSiWrWyh0YqxDRvPf/OZpgBT9E32sIemEmHWBe0BmVVKLbJpLZGTSe1C3\nXLRMipadApJ3fLL4GKh5UxdRK0nxah/jwYUcReCg5q+IFCTEL3TGLh+3Cv6Q\nvK1BTNvorMhnb5fA/vH01U81NugSdMY2OEDkNfLKH60uSgYCeSET/TlozJad\n1cgtPYM9qKgJk4htwLP+jfbZZm3ks2lzM0kKJ46AFCkTj/cSWaIrX+VYtl3c\nPiROnVpQjfSbTDzc1MxRngLqd7Au4szOanunU3DELZuIYWQUdTcujcEnZljY\n2dvJ8iy6DAXUxyMdPMTYiT4ZfO471NP+rkAgH80B9o7I4idsCx557IpCr/05\nh576pp8YsbfPbXI04Q3yx1mLKs1mhrbbf2ct11wgfCmr/8N/XIwQ5Xu3a9vN\nHc66iC1/GlnLZprIgNakrHlKwgeM+yHUKES9vK+t2LmDqyehl7ci8dIZJuT5\nDUSh\r\n=krgy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOThdOOwKqU6qwjprIl1nsOXFajv+lKUw1xvlTCkl9RQIhAJ8Z2Fh619KZDaATzl0T//4/FaOLfSFmEeHde6ccI7ZA"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.2.1-alpha-mobile-tooltip-5561.1.12_1574084763451_0.0726372245613991"},"_hasShrinkwrap":false},"2.2.1-alpha-use-new-icons-5568.1.29":{"name":"@crave/farmblocks-modal","version":"2.2.1-alpha-use-new-icons-5568.1.29","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.1.1-alpha-use-new-icons-5568.1.29+87f08172","@crave/farmblocks-card":"^2.3.1-alpha-use-new-icons-5568.1.29+87f08172","@crave/farmblocks-empty-state":"^3.4.1-alpha-use-new-icons-5568.1.29+87f08172","@crave/farmblocks-icon":"^0.3.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"87f08172518bc1514f4b60bb58d601b6c208358d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.2.1-alpha-use-new-icons-5568.1.29","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-nshbFBYxQJ3VlIbnH5q6/Z1f3vZOO29dHO5dC9MTaij7aacPXImm7EWfeIyA20pNpRTXqKmqr4aHLObfxjV3IA==","shasum":"1681b251291fd5f8797064659abde33f38f321fa","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.2.1-alpha-use-new-icons-5568.1.29.tgz","fileCount":12,"unpackedSize":38543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0wbmCRA9TVsSAnZWagAAMWEP/1OxcWpzmvxiagCG2OcD\n/+Baz+NxoWa8lwWeJzWlqNFeB6w4HGximzZZ7AgaMWUvreZ9ggzIJBjF8TrS\nCbB7A/MWiHhpqiJcBQlCefSnbrQORSep0y9Qpm8HVrNymGQfh7QBa+YouLGR\nyJQM11v0J0snk26wPvBqhZF06nGJZGj2X64kRTmRId/6H9dEMlq9AM3j4+5u\nwtFavYNPctPJenFTI3iekxri8rdy1bmNjVCflaMRTnTIAb8DJnGSlByBlA2g\nEOovecjh1vyO/0s2gLHB7W8CinMCp3iSES+VvyoSo+DUTqUjW4oCNnfjGXCi\n0MdIrMpCEDWY6KHjPUA4cTCOupPQN53SHJ+uMi6dJT/xRWRq99HKXbobj9N9\nbanyXLVS51JQHd0EZWuz3XQ1l3ps4O0Blq9rDOVwbGREJDaBQ77PZN4i8SRs\nxER7YI0yKMfBEbCqFi7qjYQPtM13PhHomqs6BwSSaNV8UoblpHwljsdgvrN1\nT9RogiWE0EEDloaiveOOkjP81SO28xKDHsdrApLi6FBQluG32obBPpkuq1Nd\nFRWYzxz80/ATNP+c0mladiMNOZAl/nBv94DEPGOcQlW0EVzIBCfkyCadqf9a\nvj7+mHW25kJ3Rc4fWp6YQvlewACquL4U8OxPyBirJx+x7R74qi3RKPT7xGcu\nX34V\r\n=+8Z+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDM4CH3oOV001GpyNCaGdqCbpwMblpvr7JVPGbBP7r74AiEAsv1p3Qr+ekaNIpY5U7ag8299pvW4sGdqhngE2DOPspQ="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.2.1-alpha-use-new-icons-5568.1.29_1574110950523_0.47034975203694773"},"_hasShrinkwrap":false},"2.2.1-alpha-use-new-icons-5574.1.34":{"name":"@crave/farmblocks-modal","version":"2.2.1-alpha-use-new-icons-5574.1.34","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.1.1-alpha-use-new-icons-5574.1.34+786ed1af","@crave/farmblocks-card":"^2.3.1-alpha-use-new-icons-5574.1.34+786ed1af","@crave/farmblocks-empty-state":"^3.4.1-alpha-use-new-icons-5574.1.34+786ed1af","@crave/farmblocks-icon":"^0.3.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"786ed1af7a501119a79b8e92642772480116b4fd","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.2.1-alpha-use-new-icons-5574.1.34","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-GIkHS0a5OW0HuzZztSdjLYzpE70wpfMRp5AVSi8R7SfXGPFMvszjqh2N7Y61dZj6KU55HcTRkSuSdZbgieRnsA==","shasum":"bf9c5f77541ae5d8e20fb2725a79f20534cb4b57","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.2.1-alpha-use-new-icons-5574.1.34.tgz","fileCount":12,"unpackedSize":38543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1CbBCRA9TVsSAnZWagAA1VMP/28bWg15qFD9GI3Nc6ED\nMP80ZPF1W+FGr1GukvheNjO1i55F7khcAlXXNVdZHCn8UfCQyLu3gzVilPgX\nlwuYqTF6Y8jjGjCkz2F8uUbW8FNxHlFOJkmnl9JYrlAmf0kMsvFgZdZiRrB5\n8xVTqSvR8/UgfBYJSabhQAYEuT3wxFVK3RMC4RjS06IjVWi3Ye+5/Nl4Hq/J\nIBw472d7b44v8QxZw2YyFVVS9VevoqL9MPsSwqiYPzwDxVEPAQkNuPNwR1p8\nnsqIvntPrW7+pzIaOI6KXcEipOz5e6piN8c67A0e1VgvfdAkOUuIYbtdXavh\nK8YnFesKTi89yg5x3Nndk/zLa6zuP0kpLuRQzg9a746BL1VVZ46lmvyQT/hz\n23T0yGVlEx+dlaWgj+an/1uAzPGYN63y7gqiOCQo1TI0AS8wTzdvsQnqSlPb\nQ5eas6cVJqPHJbu8e+yI52GGaNQcD3xIfph+KSVFLe8ghLOrXxfcwgHhfnkw\nzSjykoevdHfjWHYkM9z2eHwUtYdqAFPsromECemepn5vCH9qvMf7p8i8X5Ra\nslxcUCelwJvalOpajtzsxy6pTw4P/RAvRrPaIGgsCQH9vd+3FKyWsJi0DlBB\nnwBVI+cS+VeED05oUgYFTtAUmvylum4VlesvrwbL1bfu3buaUq50YU1MyWn7\nA1Oo\r\n=Dstd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyQPj5kpPtkdiZwJl+2gE9iAOpAvrXNcDQ35MiyesX2QIhAO+VlX7vcvholOR4QX6YBpHVOWdIvNwHHSuadkZVK5WI"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.2.1-alpha-use-new-icons-5574.1.34_1574184640770_0.0858914441484413"},"_hasShrinkwrap":false},"2.2.1-alpha-use-new-icons-5576.1.28":{"name":"@crave/farmblocks-modal","version":"2.2.1-alpha-use-new-icons-5576.1.28","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^7.1.1-alpha-use-new-icons-5576.1.28+44673423","@crave/farmblocks-card":"^2.3.1-alpha-use-new-icons-5576.1.28+44673423","@crave/farmblocks-empty-state":"^3.4.1-alpha-use-new-icons-5576.1.28+44673423","@crave/farmblocks-icon":"^0.3.1-alpha-use-new-icons-5576.1.28+44673423","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4467342328b41236dc1397d195b44ac7ae1ddc13","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@2.2.1-alpha-use-new-icons-5576.1.28","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-G/WWdNRlN64TmDsahRV6ZE+kFxLPU5OiWuV2Tm6K16OLpF9IaoUGEhdIz05EtTwMqgUj218li28d9hznuGmFTA==","shasum":"5f328983ed8aec91dbfdf0ba3d2d9ca83844438d","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-2.2.1-alpha-use-new-icons-5576.1.28.tgz","fileCount":12,"unpackedSize":38582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1CrdCRA9TVsSAnZWagAAER0P/3PvinGJE4zzhPQlhzbT\nt8THOaGxxxaNWdsfSaDnHBngXjiR6UF2pWNoVIXpScQ6mjtrqxgJJKJGG8Zo\ntMhiRfUS7sNFR4lzih3T5Y43u9uL049sz9sRBtKzY5Y2W6N8eR9zWeudA/Zm\nZKRXpKX+hi/hfFZUANXMl2agMNm+In1zvFRQyL0u2WnpAYlbCTLkSQ9GYPm6\nJ690SbtaO+xBuuIeNUszfAAjbmzyZn70XcQqMn6tJNewdMhrTSpXAGcy8w7+\nT8x70tyxz1/MFKGmEJwSXjugy3dAsGRpQK4sDDyGdnUX9tbhFnaeZqjWTnMK\nFlSbxmeDHmaTdCMGXs/JMwqS5INHMKXn7iPdsHWOFsud/bBH2PYCZQ8k0TXL\nFLwEZda1f+DmmsEc6f4PdA/JLv6euavZfA85nJzS+qd2IaZBNE3eYTwef8I6\njjQjyyr3gjYepTFRHcTO18/LeLXhCd2YvxIdaAN5uFm3WqkDGhe80Ss+ung8\nBUuku1wxd7zxhCkKpaE6YIyjrMbJ2muD7k2YizmYs2sZ6pmHmHpRlbwn8A1H\nfTjMV0fntfHyDgW1TXanKRpOUzJA9XVzC/fkdIDUCY1THlZqND78nemj6jD4\nLUCae5xyI+7fDGRsnB5pzGPkqoQZmlno6EGpHjhaDl/qfW6eIrokLs/Z8zPv\nVByn\r\n=bpAS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3JFkj8a10DTpP7pJg9w/qF/eZtwRYU+QvHopVSCvo0AiEA+7CfT6CXGDc8x1jA2h/3JAKPA9v4R8pcDqYss9+fib8="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_2.2.1-alpha-use-new-icons-5576.1.28_1574185693401_0.4225163708463142"},"_hasShrinkwrap":false},"3.0.0":{"name":"@crave/farmblocks-modal","version":"3.0.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^2.3.1","@crave/farmblocks-empty-state":"^4.0.0","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"9695821f91987c2f33270dc3074e7393311e98c5","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.0.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-jAURIMSnPfypSqlvIiUmu1iUjiwjewdsD71KoGswnhRaeRvzgYYGXJrHBR7kmFmqZygol8AxTlqQkNdPUpnjzg==","shasum":"93bb625343b9b634c49ac1ecd1eb96f6a3568e79","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.0.0.tgz","fileCount":12,"unpackedSize":38778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1C43CRA9TVsSAnZWagAA51EQAJiG796V4Tvnl/k5ZtdP\nV2pj6mNKNjGDffXfRPlWIVgr1kK3/BqnNIEZ/pq1p+4dVN0zKUT5uqvSWTQe\nWxStudz/dk2MN9xW5Pzd/I8BqsGl3x4bKgAfT8gvte8pLRL148oOwmbuiVmz\nXemELBNNffpy/WQ998KZDnWlRNDWpfCWMyIt8ZPnRSK7V1sbPJQn1dSPiIj/\nz0A195QCPab4qG5zxzZPqnbwIu1HABqOxz9U+Gbr2yzsbNKDC1I1M+iDSFaX\n/M4kbQpTWqw0+Cs6xs4fF4SqRmPIO8EL60qhAKNkY9g3cu8OARwudBnpjFJN\nWvwAuhizVCMdL8LzQZbFe5DqqTa+nz5Nr6OOTy7HTNrpxDgzyhn+k/X4rg/z\n2OPn0ebxTcUaDwlEaqK2aUj9eUam2frtR44YQ5fA9tuaPkfBjARMdpiJkxND\n44c+rO7reeMG1yUvvA8/jc0WHwMskveZ0/86otpOXIeZHMwLOfqIIOqQvh1U\nEjXKu6zAxJxwFkpMgfl+GaKLMUtJr7GBrydLupEXUnEg4g5L7jeX63MlVCQl\n4sFUBacSKIlKQlZY2goS4uDPzJK0CNVjRkmsn0XEhRW6x6is3KQdwtQVOIf6\nNIRZ+1o9XI+WtOWNxUqXWqufeKqbcjGnKJBb2uNquLIFLA8VgNf6e9zyfbry\nDrYD\r\n=bdZC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLMZQ+vJQgs8YcNM1EWZfpFnNaovtgaxS7Cw4sl7S5UQIgAaVt+/YusEqYkHTCd3TycusZJ1gBTTgccC8JF2eyjOo="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.0.0_1574186550811_0.1003858483200506"},"_hasShrinkwrap":false},"3.0.1-alpha-mobile-tooltip-5579.1.12":{"name":"@crave/farmblocks-modal","version":"3.0.1-alpha-mobile-tooltip-5579.1.12","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^2.3.2-alpha-mobile-tooltip-5579.1.12+144ec5dc","@crave/farmblocks-empty-state":"^4.0.0","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"144ec5dca3cfe8bf178077cc38374569e1a92b06","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.0.1-alpha-mobile-tooltip-5579.1.12","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-jDFXRofXlHyMis3GVf0RsgtvETQnczMeoM6mpfNVZ6DBWN3X3E6ZGYPyNyoQ7zf/8Oe6w4k9/OahdkHSPGFemw==","shasum":"87c457ec5e48c9a4842b5fc2212185dcb9b89089","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.0.1-alpha-mobile-tooltip-5579.1.12.tgz","fileCount":12,"unpackedSize":38858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1E1dCRA9TVsSAnZWagAAUgQP/2dAvin166WOtazmtO6I\nuvVnNeqYAzPW+A7oEh6W33XPsbPZtVIl2w7w1/YwoCIUgqNpDX9YkY8aY9eh\nr4zEYE4Aomnu1byq5CdR0xZIOC5uwxhN0zlHH/+bm/6x8ejU/dlndvq+LLFN\njR43LG3t69WCiIHR85yhXrYTfiXjzLqH4XgG27hnepOoYJIInNdYU3SFxi9l\nQB4Tk4D4DUfhv0Jm9DmCohnsJ1PDmjtlJ7yYUTaUKxJOrE9s4GgVGlaZI6XJ\nSM6+NTdtL/kvRCukwBIIkly7qf2bep0WiuACRt6/HJKj5isbru+mo5PBylK6\nqoJZhK/zw7jnoGf4nAXhAF2vgKI5aaDBwcIRR5AwCpKO04F4jdHwHRf33rKI\nD1V0HddGyjn+RtwkAtFCdd+GdJCaiNkdhFeCwaB29SXehtff74cqVrDgda4O\no0a3Z9N7xkvePKpyWc2ERMe0uu79e2xy0FvvMzQciD87FTWK3Tq9oC1Js+on\nNuojWazE0/3AskTGSEX2dndIN9R0VydSJdcQa7iFXfc+yr/o5oGFNSItu/BZ\nxbuV4ryqKj/t/NJbDLJkpRjfbnjXNR5r1vp3ExS/1tWPmN8iaWTV66sTALHU\nH0bZV6dbtWFLO0mJmhwrD8Bd+1bOu+DCQ9LhtavV58ggTrTWgu/q0Sf/6VcT\nb8qH\r\n=MU0W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5NxSkTJ5xUQErEQAwmzrKqPR9hLg8hESsQrr8X8mzJgIgZ96z8XBEmWD/fvZcgmFsHaGElT2o8bookZ7/sqyNR00="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.0.1-alpha-mobile-tooltip-5579.1.12_1574194524606_0.022039499647546368"},"_hasShrinkwrap":false},"3.0.1-alpha-responsive-modal-5591.1.7":{"name":"@crave/farmblocks-modal","version":"3.0.1-alpha-responsive-modal-5591.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^2.3.2-alpha-responsive-modal-5591.1.7+acd4ffa6","@crave/farmblocks-empty-state":"^4.0.1-alpha-responsive-modal-5591.1.7+acd4ffa6","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"acd4ffa6d42e520c847a5029bd56a83cd59ae948","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.0.1-alpha-responsive-modal-5591.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-NnuH8423Np3iu2y3jMIqha1rBGZhtz1/DZsQm/Ch6wXx5sCTC5oAez58OvahK802vRl5SrJn1ubrKVkp0ZkoPA==","shasum":"923cb139e71967d4c0651636fadc831aa3496a75","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.0.1-alpha-responsive-modal-5591.1.7.tgz","fileCount":12,"unpackedSize":39231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2DeZCRA9TVsSAnZWagAAI2MP/1z6oPcXoFvs/x0TRo3w\noGdm/859w60A/ROxxol8JaEyqg9OT7Fw/eJEuXxxq8sBrQEIhf1KCmkT1srx\noz311z7rEVm987m03fnFUPwPmCM7yH3wE1pFEDIW/VoO/JsGjGxmfFvo8itG\nkBm3mNbyvYt0OLv5OA9CnauLtA2P+RjvdvbUd3zO7anVUDV8cge8hUt2dQuG\nfXs9HpogrWBq57rknsdGHenUyCOJx0KYtXm/ifWVhIuYJqJ6Ngbm7IkRgrz4\nwnDJZuw20gm6asMUkjV00vnvm1eMNShJqJXYMCoa68DlB9C/7aZ9LpICqqiW\ni7cHjIIZlVdEgDvMB//iQG7cGi5+SgcwR6j1yi2L+X9kqewUR+LKG6If0Z45\nXcGsO7IcEu5LYqGgay6UcnQST6dPF7exNe3oEMX4uVx5BjdMumzFn7Qe/IZi\nmb03/oXU68BTP+xuD6uQL1StcAqxmbHj4w2HQil/3Y1pfLZTeZ34SyJ2GW/g\neZ/mwgwkqqotvzZ/3Fh0JMbKZkwVXSkcHYyDB7L/OQPXkS12zc8hwp0M/utw\nzekV9BI4jGXSZg0OzUYRabfNoHUnI5V0JwojogSjmi6Zs3qjkuVLMp3ggj/y\nVuOmCcscNqo7L+xJYC8SHQ8W7Z/0RZnBKvt2w1si6+B0CIsBbLCkeE8SH/q3\nsLyC\r\n=nSph\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGYlvrYppm6sW1YbBQ+QDBoDQdCbuv9lZgs8tFetxybEAiEA9CF1y0is8PfAWUn2fHwxhq8rjlOoKU7BUaTfbjmkczM="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.0.1-alpha-responsive-modal-5591.1.7_1574451096990_0.8827353188879934"},"_hasShrinkwrap":false},"3.0.1-alpha-responsive-modal-5594.1.9":{"name":"@crave/farmblocks-modal","version":"3.0.1-alpha-responsive-modal-5594.1.9","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^2.3.1","@crave/farmblocks-empty-state":"^4.0.0","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"745c34b68019162a39e62b5b9b90952708ff1946","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_String_ || _String[]_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.0.1-alpha-responsive-modal-5594.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-r0TUkW2+x0lOGXvNVipa4Rnz8reKORxV/MqByrNi0YI3pQN15XI40UK4GejHJ21CS3cdgci+4wz2MItQQjsq9w==","shasum":"594c5890e0f25afb3b1ed24b9ce7affbdd87f327","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.0.1-alpha-responsive-modal-5594.1.9.tgz","fileCount":12,"unpackedSize":39184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Tr3CRA9TVsSAnZWagAA120P/2LKV6ADjxhh5gRWdR97\nsnDd2zdh9zyFXi4oSFSSx5Vu4u88BbItOFS2r9Ky+2Aqw/yj1wDmpjawOPlF\nCOn5vYIMA91iGSv3C0AqCJGxEPpjKZRBBoDhK4eb1FT1cgx3KffQydTVFqTg\n7OWj9U84U97R2SU5oMuvt8At6OryFUk9O5uW6Ju+AAWe6BFA9LgXNxCSrf/8\nJRrAMHBCKZSv8lYth8b8qRaodw/0f7BBx1WBA20SC5evdKOXnR4ZBB/zWJTi\ng+D+GDxEqxJqUotQgpXTGfqfq3W9xa7+YeBYnYq15Nk0jU66TbtOdNamzSaD\nVTBZsJWk0CoUgBscugZiwfZZXvfT8lKq7pMPAY38pTf7xqaEWfg43erNYQQ3\nMzVofYvHebJT+T0wAfKqWdQTC7/AOrH8a0Zlpuur9ZvnpJaCftR6RbulFfyY\n18qwk1cGr4ntZ1KGCW23sLh8OmqRWthiwdUu8EwnLSdLXkzv+ChYnHRMqR7C\nfQ4V9U/898wcg1rAlJ+0ss/zkcSJJfBoed+H/qHVAQDSSwg1ousOiysZrPC2\nqmUGESEsAtgjwpSjfzd/0JF0XSV1rtlGlhY9sMgSYVQyvlVwfMRSdL+w7gdY\ntB9Auewk4mMwrX4Vn/5mpuaVbNM4TbZrNY5mybcvgSmFRJXPaWrKIVg4Jtpf\nY67T\r\n=aiW7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlXjHgI8bP39cM1POATAb5Ke7uQ5WmFgnFAw25bVZLZQIgG26O0RuoO19CH/BqbtpDXzNxtbtI7Cczo6Co1yC/RJI="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.0.1-alpha-responsive-modal-5594.1.9_1574779638973_0.33477166019414306"},"_hasShrinkwrap":false},"3.0.1-alpha-responsive-modal-5596.1.9":{"name":"@crave/farmblocks-modal","version":"3.0.1-alpha-responsive-modal-5596.1.9","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^2.3.1","@crave/farmblocks-empty-state":"^4.0.0","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"745c34b68019162a39e62b5b9b90952708ff1946","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_String_ || _String[]_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.0.1-alpha-responsive-modal-5596.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-I6ZqE9HOZtQZfEWxWPlw8Yl0YOToWc8nDhg3M6DZRNoj7MAOfSXytjzWIUKuJVl949e4aAwnsRuZ5peZCgwa7A==","shasum":"bcf3f3020c9a2e27114346fd9675da3db2ee3a38","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.0.1-alpha-responsive-modal-5596.1.9.tgz","fileCount":12,"unpackedSize":39184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3TsHCRA9TVsSAnZWagAALHAP/0x/Wn5vtZSSTE3Pq1iw\n/u/HgFgHHZNhQsT2VxnxWnfYljrk4WbOQEst7bdIEdZwQKY7CzdMlxrqMoQD\nJZADc5bcQZ21lM03N7ssuMAyW0xnNGWCIis/hexgLNUmYte9QLJ3Sw++DTkd\nMUT+1CpFxmcBViRg4PpezFQVOvZl1JoWQYs4Lm1d13C62wLuuhrPlEkjtPkz\nCjJl2y/0Fg0uYG2ryemDyyAs+O7TfO5ZoWH3aDYwSB/6wfDfWN8gexm+FZID\nTh7jw1muzW2mPn1EeOvoh01uw3RCQO5p2lItbhbNWTiN87oenHS9piXhRwL7\n2xXe422Ee1CbXybKv9gipXFJU9yd0GoCnlkZpgN/Wwv8q1QpIpc9FUPmKvj7\nZZSnaVXkuUIcCxqM7LDy/JX4nF08FzJJXltr/13nt1vEq9XZI/op3Klmz6VM\nf1jOF/R+85VvTiyZCfIm5aTFrn7y7bOS5GvEar1Q6aUSxofy9UcJw/N6i5ky\nuECNEDPl565a30v7v7h1gvfVjDmw/uyaKwD953PLwwKTmmIcmGeClJsvp4xx\nXtwgW4xVKMNgHw+dY6DSStbYxb2VF3w0KV6hAQu4nmAdc+hsBrXRMFNegkTi\nZ36LKNyP8G1oQkg6mIypO1Iicrw2M/e3U181GYb8eYRFusKTSP+ROWCW0p6r\n8/EP\r\n=V0+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSnUryZBtM2ri23ccUV5T4seAnzIanGmLRru476PxTDQIgGtTySmKpXeVJnVw5MGieU9xLu3CMg9fIvhibPHScbNU="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.0.1-alpha-responsive-modal-5596.1.9_1574779654624_0.677798543186015"},"_hasShrinkwrap":false},"3.0.1-alpha-mobile-tooltip-5599.1.14":{"name":"@crave/farmblocks-modal","version":"3.0.1-alpha-mobile-tooltip-5599.1.14","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^2.3.2-alpha-mobile-tooltip-5599.1.14+247e4101","@crave/farmblocks-empty-state":"^4.0.0","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"247e410184c30a178598c873ebcc7f432fbbecb5","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (`\"flex-start\"` | `\"center\"` | `\"flex-end\"`) = `\"flex-start\"`\n\n > Vertical position of the modal at the viewport\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.0.1-alpha-mobile-tooltip-5599.1.14","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-VnnW9pDzJQKfFByKax8rXvOj6yLKgHTuj3ueiBjBwQAQx+J3Ysb2auUYz5FxRNkW3RBWTwGkykdjBFJEicYaiQ==","shasum":"73e3979cc444bd7e892ffc6c3f4f007a6da0b969","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.0.1-alpha-mobile-tooltip-5599.1.14.tgz","fileCount":12,"unpackedSize":38858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3VTNCRA9TVsSAnZWagAAgFYP/32UhK6+l4Yqiao2mem4\nH66Ld8mcyncuV1YvnbP5K9GAdCtcpjZTFYQkqbZiAIujkayip6BrOgZ0Ypal\n0OiMlYgMw2Jja6kcohMtX2JNomd33qEVe4PpOhlLq6ZMVOdr+jejDDazWax4\nUJlvZlCILsdxAAWlgnZ3jB2Yd0eB15b0Z/ABW3yTgzoAZ9omSo2NQVAVzGI/\nO30Ct6sOht13tK5oo5GfVEjnT8s8xTvHlikAeL3kjFGHhtWrhKd0Jff6XwL4\nJVPWJrp+oQtz4c/Jplr9bROGUEJI9816iMJsQWOVQX0H+NnbwCtYk8Sm7XvX\nc3O9mf83M76uJRarvjuNgYFzRma+7Tz65H1FDnOyee4S1Oa3dKMe2eItWu0P\nnjBl+/u/ebNz3AZJSCOKySCjgcr/qDQJ3mTfkkwkslONiG5qqPRtMLLvaETQ\nTxgHkOJgm5jwA0dlq1JPVbfFabPGCp2v/QoJz3AN4YXEVaefEvtcoMbQ1+QD\nDBrG1B4JH1RedhsoW9g8zgkK5YBgKXhXmnkB+1saVoAKYDswlkyLnb2EmRyP\nBuNJUbk45x9nV+QJ/IIWBgyJ0tvlajT8WHDyiXYu9/DtjfhUB4v0sI7xelMH\nYT5CuVBY5ZCv99EiAp6nhJFbuExdXxxwIfiN3eWy0hQP0na5io8aaANlgvp3\nwWcF\r\n=UNyN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLDW7A33rcHDMWWIdmF1c9IggyPiq7LdAB/Y5IfcqjEwIhAL4Q0Tsy7AeAuSG3cKdO62TY/7/Eq4R1f4QBr3i+P4JX"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.0.1-alpha-mobile-tooltip-5599.1.14_1574786252678_0.66565214467259"},"_hasShrinkwrap":false},"3.0.1-alpha-responsive-modal-5603.1.10":{"name":"@crave/farmblocks-modal","version":"3.0.1-alpha-responsive-modal-5603.1.10","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^2.3.2-alpha-responsive-modal-5603.1.10+b9a23e73","@crave/farmblocks-empty-state":"^4.0.0","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b9a23e73bd1aa79ffcadd8eb62a317911d61d0a8","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.0.1-alpha-responsive-modal-5603.1.10","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-D9vk7sqdqvIWFzjb058zxQNfZ8CaFEvngEVnh6up6u2fwy8bEU/w8J3R7n2+JjCOqHXY8uaglrmpRGENj3YggQ==","shasum":"a25c5ded78f70ebdb9f10b35310313611052049a","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.0.1-alpha-responsive-modal-5603.1.10.tgz","fileCount":12,"unpackedSize":39206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3XMhCRA9TVsSAnZWagAAZisP/ihpwu03xJlOG6t05OdY\ngH3ReKN5GU3bGCEsB9TyU/916O5iqNMiPlaN807Ojdu/We+Nkig/Se6mAfPI\nLDiLnFLjFukyjfTJ0Wm38mk20PJv5pUaKBAoLjU2QghH5SSciU1E2+LvFXiX\nSFQR0KgNlUmYWRScN3xH3XdZ+JNIBx8YbeUCvPnwqId6cAe1jRpMwOBaMSJA\nJqNvtvVUblhvL4Fw+Pimqw0dpakGep39X+4p4p4zOJxqqXxHu7pQz8SPyEOy\nZmQOr4VNxJuiXZn4B1cuDpPk6P1vR/3Gyt2K75LY/JKZWNI4AMZoJChm4vVR\njlz5aeA/gW2w1tOszCeVk+BK3YYBYtrmklIHMFxwTfOZZC+NnWlu+PzNP0sp\npPCDVjAlBULSf9ESsC+3E+MFNhcJAjODewowIlM36BQkA2hThE1VRWVR7/IY\nxx3lTj0O4TbH1S6RpNPIoWj/h2D+o7tp8DcT8KlN4aXYujAWHrenjMrjYXeP\nfahfnpp0bc6OT6ZhPsgPwMsLVFw0/3Cnt0tabzJv2zF9DwD3icJw65nL0hnU\nhPa1Fpw0iloA0o0sjK9B4gjUe4OXZyCPs1P2dISen/cUEMawYfpluJMbE5ld\n8cNN05NC9pOKfdAdR8/32NAIBnzj1uHl3TY7WwurbNpTDtrTbSXTWPPOK3sw\n++le\r\n=BW22\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8Pal9N58CbKzRTL6Me917ee9XpxFHtvi5//n4/RNi9AIgK/KKC7/D8RR03ZjnqdLy5CYFCKAxu2pcw9R5eNzCgoI="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.0.1-alpha-responsive-modal-5603.1.10_1574794017218_0.6276767885317622"},"_hasShrinkwrap":false},"3.0.1":{"name":"@crave/farmblocks-modal","version":"3.0.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^2.3.2","@crave/farmblocks-empty-state":"^4.0.0","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"e70eafbdf477f897f65dc6167d3e54da59ae1fba","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.0.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-OzDKOM6e2qxkcMSujYhID+qhGLg6ekcs+zG0nd9gpxW3Rh5LjURKu8SdoImUYu2jm8gDE9Z55v/7w9087vZuug==","shasum":"07c7e88fecf5f270af5aee151376365addf53d93","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.0.1.tgz","fileCount":12,"unpackedSize":38983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3XkSCRA9TVsSAnZWagAAJFgP/RlpzG63E5GCP0LGfIXf\nXUJ3q9P+lbrZJF0RsfPNg39ojlgCRst/b9ZPSgRwwXKof0Zhx89F0vdqnWFI\nu20e/r3CbfiD0W/IJYzvp4eCtGLdSWklSpE89INMzGmczrtBayone9amvu0Q\nRypPPRNNqcwoj6XjBOJEThvPA9BjiS6ZX1tRO5q9wRAaCRpzMiTxEY2QIpm5\n5eviIlZh/B8g/EGok99bDTQqg2d6rNp97TgzcLW+LdrgU+ERlAyKEgDq4rNC\nxjMXNd4shKLjsUoCRUUsuEEz13lc72Jo2PshBn7FYUqOHPUr2sGtXbvXcUe7\ngCgvXojt4hnieaCftiEXABh1JUMeODEbDLKkmwSqaupekY9UDVisgUEbyP1N\nfSFAPHGP5ea8Xk/Wtdw5cgpbY/sBHXo1dEYKwwTIxafPOI4jFXLpY/sG8ZMs\nFFgw9TaKnfaYuBxj+sx0MrJrwgrMCL1exJdUFynHTdr1QPLuwFsPCDJg8/ca\nnzIJZASmiZCXV8Lj5mjAp7oR6gU/RrsCNua83vnkGgJSJVtwxg/Jm+Utx+TV\nz68dN2jFXGzheeORX6a97iyptgqN3ZAXI2/bCI3hf4LMbJdGlP3StlPiWihi\ndrndlR/TV/nL1PwNDFfkGdnoq0tMYDVE+STZF2p0UQzl1xx/DhwBS/wtvVnH\nAivJ\r\n=KMwA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHEHvdORzl12J3E2ONDoOjcUqM1C2SA9Ue3vfyJAebQTAiAiZ+uYl5qwPdCKomNr7rz6bPLH1anK9GttllLxwiOGQA=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.0.1_1574795538434_0.0726832627844991"},"_hasShrinkwrap":false},"3.0.1-alpha-responsive-modal-5618.1.12":{"name":"@crave/farmblocks-modal","version":"3.0.1-alpha-responsive-modal-5618.1.12","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^2.3.1","@crave/farmblocks-empty-state":"^4.0.0","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"ba3563d4cdc3cc269b5ac4100a1e6ad5a4473d6b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.0.1-alpha-responsive-modal-5618.1.12","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-kEnlhpInid0WRBVNtEa7Mpwmwitjz2YCaLWDloT69ctK1TXv0OyG1TZ+vOfN3NRG/cSituah+H7cmRZbguz9dA==","shasum":"448568b3efc8aaffba99462b0730c292273a1c65","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.0.1-alpha-responsive-modal-5618.1.12.tgz","fileCount":12,"unpackedSize":39161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3sOtCRA9TVsSAnZWagAAgMoP/0ynUtwRdR+ZS9DwwxMd\nNzgxZpg7ucWXoy+AlROlBfHtIF5jRJ1BUyTr1LQgpQZTnyJyOhUEm0fiOmFI\nCT300xsd+SmJ1ErwXtMQ93a+wlZP5hEV5fqgVRYl5Nl3/UaQogfZ++XbbZd+\nA0ElMdNkW4/HWaNOSRuzpXcEGCnmpmNWz4IphsDBvixPUnAqtzzIChDmXVfL\neIo5jCNHN7LmUwl3ooXsZYIGsPhazgQt5U7BOFXGlTR5ewlwCxsNK9cXEafM\nBceSVH7cA/GlsMdDhIoMSi2n75swlDTPRsMgiQTlP0xMKSKTDhKw5gfRj/Qo\nr30RwuCnWCp7Y5vCnq7gr3b7FV5hAKXzocQz3Y4v7SjNFzYQnjc2MLGL8fZD\npG1EIRnGgErsJ2BL/JocXi/JxZ6rjPRPLc/aiLNkDfDAJN8QGGo2eisHBTHv\nQILBQ9DoH4nW935C6yDG5HtwTsKPIuHup+flGHLOevuI7hDwikQP8hVZ/XnN\nSKutvECZqriPsC5k31jDKno4POYfrlV2D3gMr5NeWJYJRMKs7n6oGJGA+yJY\nkyRY6QwGNBpdqNrPaY2dmjNODcmK1zDVg/lorvZ6jkh6V4BwbWZVfVTGhYVy\nYFaI2vlbglNDCyqv7BtmBOPVq6fScMwsliWh7qI506BvnUrYTjoBMTxCT3aZ\nArMG\r\n=XuWF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNApqEYIT/Aga2vPrpQnGbITBvxdcyD8WjahvU8tS6YAiBWSw4WKbV/j/CrJ6PChM6F1mmQcPyDdUQGE9R+6Nzb3w=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.0.1-alpha-responsive-modal-5618.1.12_1574880172784_0.33185524059229565"},"_hasShrinkwrap":false},"3.0.2-alpha-responsive-modal-5622.1.8":{"name":"@crave/farmblocks-modal","version":"3.0.2-alpha-responsive-modal-5622.1.8","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^2.3.2","@crave/farmblocks-empty-state":"^4.0.0","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"7212772f472b71916e1cd42fcbf4a9e0931b8a48","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.0.2-alpha-responsive-modal-5622.1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-7bxsgjC/gECnLhPYfFSkaUDmQ/RPpRjoQlfFD6aVUBS0Qvwk8yCnS/pR9vcl0lP0MCVp45BVhuXhDT+4S4yVHw==","shasum":"edd23a7f5e72c5b7eb54aa6fe828171639720669","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.0.2-alpha-responsive-modal-5622.1.8.tgz","fileCount":12,"unpackedSize":39365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3sbECRA9TVsSAnZWagAAsekQAJjCBcdSkdtvks5Jz4x4\n+KUKeQ3fluPjbuy3A9Sz1X/zAMJL7HG2VKgYmXb8ZzlF1hhOVrQT2PLGTbru\n0U9uJZm30EK5/q2zHQdfBygaluV89HSWNTmN15wdJclY6372hN1CKbA06P8p\n/+c2FY3pQabUQrZtUnBlAH2EIt/8kHg6aBwYoNxT4nTUEvw61xbu5Ey2FNL3\nOJLdm9ThGyVEZTHjoszPDnChgs38EjIJ6I4WJM9lmbHVUC3OWtSmh3wtTUyM\nKuAnoFuN2pnns1LihcBsAlWl4huZc/1boBIIAJm8ilyCB9rLc/+rAApULZdr\nxZjB4xkuZ78fQKRpEgzx5r07ijOKRwRCAqqq+ztd3ke7uNuHLcLWpCg4mT1U\nxAEU7x6DQbTCNVKFSgKHEbUIzUu7HUH7Rf63kejKNO7waRX7WmmCr2RT+7JP\nU03vYN8aB6efP0phX4iOtKVBKuydTXRZr/e+StU242kz1lUFSJ4BQKIXquEv\nc74wXNa+toxxzD5O1clYOxXDfuu0TeUbIKGMHdmlpxMPsPf848vzrTof0fPK\nYWE2CUKVD6Neo7n4wPoueZCuNRhWfqzBJU5AnF7ligw1waJK14PcDpyd7HBh\n4/iq9pvlldgoFk9U7RdqhEDGrngg9dKs/M6aIWlB4zeRkvWiwJ2WcNPNlN/C\njauB\r\n=mJxE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICONjo7ehBRrjb3KjhsXAudNzOTx2+On3LImNmVoVT7iAiEAvssbkm4/KWUqUwZkSMBPmj163YZRXaBuZA/LVqZleAY="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.0.2-alpha-responsive-modal-5622.1.8_1574880963738_0.08196757549738987"},"_hasShrinkwrap":false},"3.1.0":{"name":"@crave/farmblocks-modal","version":"3.1.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.0","@crave/farmblocks-card":"^3.0.0","@crave/farmblocks-empty-state":"^4.1.0","@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"6beb6f6dd146bf1ff937bab132598aef39cd1783","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-IXR5/r7i40Kq8n/o8RQATbAFwNzYmJG1Dkbg+aGIrLurB7yCyBYx3h1Go9CYvgZJYxaAgjBlp7cV3ldctqjPSw==","shasum":"e035afd746b08dbd2ccbfc5d9be18a422b2f8cb7","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.0.tgz","fileCount":12,"unpackedSize":39769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3svpCRA9TVsSAnZWagAAAmAP/0aGyD4NScFrQJS/vvj0\nrEnGsQmw83XEuDZTcabb384wAWhtSrR96loGZ9KW6V7xYbbF8s5wHehdiuRl\nDrulQdm9aYa7tsxNBZFmpvHXWYG2mPUL0NFK86SvSxZSNmYaSBhRxri/T6ak\nweaTe7xL+4xDxMa1DUDVAXeQjoBBxkNK4pQ1O+7/5lpxMAuEjsGjZyfoZpfu\nkQSyAMvaiiGWBJvfFaYJfmK67R96Lumd6argxBofOGrdMfMCHWLHHq5NoM8h\nuEszghRd+CG3H2dHIUYudGyU1YpJ3Pe021Wfv6kFpNhtAv4tepUVdNvGd2D/\nPpueOvy0dFF/0pHE6Ph3YB3BthQGtLxOPbkUHafcYJaRd+LZO5HPII88k+wi\njy0J79CTIWThtJepeB5Uog305yL95qcz4Xv1JiQWkRJfmXfULU0LLd8LoXhe\nUtPpdKpGWTIrEHDI6XFB4aa/BEV2AbVC3kxwbzPD+QhGwDfFojWeInnBj3UC\nfukUKtD7fx8VN5gCh+c3lvcGZ+u9K3basSq+Paww2oYo1H5/3aXlyPNpE/jN\nG2fwLCIoIqeNNhnLGijQLITypqqmmpTsKHYFlnwOwjJDQScGeEQxYUYD9osw\nYitK4SshPRaGqef8Bqro8iXELBOHLTWL/5azDk/ok6m2BqpYZRX1v+RRfocE\nI6hA\r\n=GVFX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC31zBI1yqZ8AKXQ5OaUtzDlxbStF2v8aLkBfkdqg0ZwAIgVsAX3CSze/DczY3mhZbLFj7Y7iQXFSXUrVA2ewdfkuQ="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.0_1574882281358_0.7776337051275566"},"_hasShrinkwrap":false},"3.1.1":{"name":"@crave/farmblocks-modal","version":"3.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.1","@crave/farmblocks-card":"^3.0.1","@crave/farmblocks-empty-state":"^4.1.1","@crave/farmblocks-icon":"^0.4.1","@crave/farmblocks-text":"^3.5.1","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"45d82593f4597cd7418ae37fdc7d2ccf6cc2f099","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-lyCPa5A6gaKF9RizvufTKeNR8avb1d3gFUsNWwop1UeiKv6ITIkYiiVo/3A4/Cwj1JMFzQRYN3vbHrZhTpnQHQ==","shasum":"51f90a876ed86966deeab5d7b1224a8bba1902c8","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.1.tgz","fileCount":12,"unpackedSize":40870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3tybCRA9TVsSAnZWagAAAyYQAJeRvWq0Gatg/201ypop\n4grtYOzu6v9YVJY7wA1pub3INGjq1wBgHuzIqb0CYVzdNhVr3soNtABeiph2\nR11knDKRAKpPhOGNs7TOu25qRRJHGz1WEQsWv+lii19UslMZmjMXsF3RKU8r\n6EEo5lSm8sBjAtTeMKdVRbT0dwxo+81lypBBy1313T11v2+kjYqwtEryo/W6\n0GeG1LgjY6zUtih0149I45ftB1lUW7tUSDTo0JNPfF3dCmn7zf+rYF925Vz2\n15RTSFhCX5f/WhIY/iC97lwNTZfCoF5rR6BAFkkTkA7Px20Z+QKvmqbq9RIZ\nhNwz9WCQN/9VyGASF24EX9UxcX3uBBhd6+KuPY55MMn43od9cGJWRnvTjB/a\ndPIthpccEI3Tt/0sv/DBlID7UELIOcYEQtqcWGZxc7XG+dwEiyg9VgMN27UL\nY0rrRR+l+YJTW6KzLdyqIw7xnM6LnZHWplAtdkxS2alppqvW0D4F15az7JEs\n/KiSzG9SS10dt/bAcVYCbVhn3eTVbuDiR3s1kkpWxe3WN0D2Zzg026aQnkoz\nzJGuMXpf3x+8iwM8rALG7MFniX7bYskmPzLW+WyKYmZ2iEWooZKewr9PPXyG\ng8q3QLE08fhUN69zA62QPSp07wmN5bSGKQg6Nf3+4zuAk4XzdovUZhKlWDym\nHuLA\r\n=Zdm4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS0LmgNtK8AcheY6g6KK/YkMJsY7EHijs8IpvgdNx39AIgE38xRk7/BR500cnX8hnxM0e+ERtvTl+qs2SyaPi2mAE="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.1_1574886554670_0.3224207649376558"},"_hasShrinkwrap":false},"3.1.2-alpha-fix-proptype-warning-5631.1.1":{"name":"@crave/farmblocks-modal","version":"3.1.2-alpha-fix-proptype-warning-5631.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.1","@crave/farmblocks-card":"^3.0.2-alpha-fix-proptype-warning-5631.1.1+95c37ff9","@crave/farmblocks-empty-state":"^4.1.2-alpha-fix-proptype-warning-5631.1.1+95c37ff9","@crave/farmblocks-icon":"^0.4.1","@crave/farmblocks-text":"^3.5.1","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"95c37ff9a35c5bbecd211b6fc3a87f098dad289d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.2-alpha-fix-proptype-warning-5631.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-shIYKbI9emIB73tWru45mUWG+568gAADwlnITb+DszN14AEXuMtP72vpI0j8HJXzRlLZ7IgSoLSXUiZThQedsg==","shasum":"e1ac1ff471cda688add82c8e171f76876ac4cb4c","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.2-alpha-fix-proptype-warning-5631.1.1.tgz","fileCount":12,"unpackedSize":41005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4CUPCRA9TVsSAnZWagAAl9AP/iMpdpKgfuVHPRdD7fPH\nNi/y5ex8J9mGxg1P1cSLgfUfK7PlSHuCh1Tmpaut95cdd5aNKtQj88l0EF8O\n2Rnaubn2zGBO4ush7Huz65P6gL8KiwOBdUMynoSKNjQ4VQFT16GWWwTw0LzP\ng2B/pVkCEkZodeGgo3/BOXfTnmHZ3l56dxH4Ypx1OrrT4JmgKz3beyzov04k\npmealc0wwlrNgyi5NfP9V5Wr5AR5q59GdAMzdSkFk/bhti5Rb3Oy1mRrVY5m\nWz50YbhHfLzX1EHj/GxKKYGBIqzS8T0auZrSTyrvXFll8v/PQTXmfW3R2tHq\ntFSBy8SgG5ZLsS/iosYTg9dHohYllEIvlFnNklRTXMcoVBUFMrvWbpqljmnq\nDEiMMgRqap1h6bfn1s0SIGenYUs6aABRTAVV00e2jFy7pYV39/Bxrm2e0Hn0\nA/XkFYJi2U1yLcwG68gW6zG/1eKNDiLuRwEPZo2SeSexoZhNDfbQeUJCm7Pb\nIa48oqTdLbYhg0I/fOICca+2CC9VAF8As7Vvb6cZxLXFtiDmT35I9G7aZ3yg\nlbwdNHIG/0pf1bltQVhAMGCbgoYLO8kAny9y82RQ/eXU0bIZ73wM/aU6PEZq\npmFcP96eRZfs817eYlBHRGiStKBlzhTk70D/JYkzRMKNV5cyj8mvGdVleyo8\nJOXX\r\n=sbj1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7RHcNdVFkf/Etmp74dQBBeKxIocOS98n1cXWTPXUywAiApGegKhDpuMHVy6bO2/8ybgrs9c8ggV/Zp7Z5+XlNy1g=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.2-alpha-fix-proptype-warning-5631.1.1_1574970639397_0.2504181027563166"},"_hasShrinkwrap":false},"3.1.2":{"name":"@crave/farmblocks-modal","version":"3.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.1","@crave/farmblocks-card":"^3.0.2","@crave/farmblocks-empty-state":"^4.1.2","@crave/farmblocks-icon":"^0.4.1","@crave/farmblocks-text":"^3.5.1","@crave/farmblocks-theme":"^1.6.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"26927977a91a31e67354c6b722a3b1a5981efa17","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-wpfv85IMaPXU/VGrvccqv4rlCJV8X3PuRyCCGUIflOFOOSWjoxhHcmOnFfLIX9lR8TKNrxKZAw4QW+5r+I9eag==","shasum":"6ff2c6636c28ba0b4848b34d69acd4ddbf0c1137","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.2.tgz","fileCount":12,"unpackedSize":41075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4CjsCRA9TVsSAnZWagAAL/0QAIzmO6cwKlqIonXC73Ul\nqpHPHNQcRbljZSLpZFiO9O7UdgtPJnzFRDhfUSrl8z8ceD3QGfr9SNy3d/K1\nfCJ4fPikKL5kiHZxzpZ2XnbMdvsGwUsEo0DcMgD0FNAPAAslzbRTApNLHs3C\nJVkO6olpjyAJq5WK9rQjOExvcxZQtB7fLIZuN0ROsk5qlFUjs63bnXKEWcOh\nMdTytgdiQ6IIcC97ZQNfIvhzdQHgoNzIHJwHo1wKXXDQmp70SkI7TueRcHqM\nYR1HczBG03wT1gHUWliJ1xJvp9JD/5WqFGy0AUqcti2lrc9NPRG1o8P2gN3s\n7L9oSltI6Fu8qTYfm494G/97ipQOjpUcUdO8QoIrLiHotB1DoC1MJ/UGguc+\n009p4nEKLU6UGQH1endhNBE1yauNhfjzk2RV0kujWYMNGLMdQHXO6Mwsc4ML\nJhAYidsYmzkVuHubNPBTUdORlAzULgXH2/YaDdvYvS2xgjFdrTgpMluuH1Py\nXjGuELK0aZQOEJj8WDnZbLVLjtc3PZrYugZCK0uBRHdnECobxriymbBd6MwI\nymL9iqSJXXmxysD2SvT6IHccgWMAgFtpyY9XLEzgnr5CJg5qT8Q+Jfb7n6Ht\nMmgse2ZInqLRtffhq5ABbjwodi4kWSleL2+bM0CsGSRxrKhAYGNGenxSpiIv\nTbvg\r\n=YQyV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKjzMn3JoDneiLXjFlCaTk1aJC6Ik+rLuO7/oa5p/EogIgfrkdfGkd7JUeRiTHz+8BdTPGrQZzP0ePXVVca+BZnmo="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.2_1574971628077_0.33205437189013454"},"_hasShrinkwrap":false},"3.1.3-alpha-tangerine-5635.1.1":{"name":"@crave/farmblocks-modal","version":"3.1.3-alpha-tangerine-5635.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.2-alpha-tangerine-5635.1.4+911bc365","@crave/farmblocks-card":"^3.0.3-alpha-tangerine-5635.1.1+911bc365","@crave/farmblocks-empty-state":"^4.1.3-alpha-tangerine-5635.1.1+911bc365","@crave/farmblocks-icon":"^0.4.1","@crave/farmblocks-text":"^3.5.2-alpha-tangerine-5635.1.4+911bc365","@crave/farmblocks-theme":"^1.6.4-alpha-tangerine-5635.1.22+911bc365","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"911bc3651e3096adce16861d7845aa567dcb0e7c","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.3-alpha-tangerine-5635.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-kIUgUMsNM6cTgNQXbDly9Bm5O/XlIimfxU7UG3pWhimav2o9fc3p8/BdMZoH7Cs93ckyB9v1uPEJsISRs3KyiA==","shasum":"5a1582df5cd87a239cba65e3ea0637b00afea660","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.3-alpha-tangerine-5635.1.1.tgz","fileCount":12,"unpackedSize":41280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5q+4CRA9TVsSAnZWagAA2S0P/jKgW4XwBqK0XUc4ExTK\nKK4pPjPnEcLmkLLjYBYM/iviPH5+dQ1BsYrfaM2WtTk1PAOAUL3pUFHorpMo\n3J8aaCbMQxjaWO+G8wQ7PGBNe9P3aohImrlSkDzC5tTgarp4LVKYHn2auFU2\nemyjZ8KinNcPxJ9lshHpzzcrP+uIcFD3kI5KOK812NnW9SlWLkrx0TnvY/aU\nru2bo/k8XNmu8uQ9fTvAthmFF3yewx12yTgUeQBNbd8AY6UiuQkcq62Y5/TV\n22S2O60L1qTqGBWs6KLW9RToow2HRIQS9yi6Nukd6Fnae6YucAFbkPbS8De3\nHbPYE4fsjOh+CFsp6suhfzIGUQ5NGcVPlwNKsFZN4oZv0yCdMIW4k0Qd+gVL\n8FPKUOHreqvvNabmdusic+SFTg+InM/ZH5h2NIk0LeWV16CYBVYSi9xA/ukh\neFRtp6PNSBRQNaYSxLaF/mDpxnMmPDTGzcgEL4nzlLv3OvZdE9eqMK8og9+o\n9VHaDzUdfxrdt9xwBgxAysgPnejeUa6Ra8+WlRRNjv4vJGRUr9BOOVOfVwYh\nZAxNKjKz7blfxhPdrk363XJePOzmoooQUaKSrECwDpMcYdyCpHOG41uKcQG5\ns61oSAJb8lId3HwL0mgFY+6e4x7eD942M+EdKxHnKUDRyu9aAobwgGEwR33M\nU5KO\r\n=SzYF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/R0EVcC0qQ1lHT1y/oFk8fMClureFEzyMC9MuVU3OOgIhAMEAnU0LSJkGkRzYKOnRtK4/5P9kzhBOGyGDpyQDkYSx"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.3-alpha-tangerine-5635.1.1_1575399352055_0.6096801471364834"},"_hasShrinkwrap":false},"3.1.3":{"name":"@crave/farmblocks-modal","version":"3.1.3","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.2","@crave/farmblocks-card":"^3.0.3","@crave/farmblocks-empty-state":"^4.1.3","@crave/farmblocks-icon":"^0.4.1","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"5857c6db26db5a7d3c313fda882afc5752941621","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-EblnuGYd6B1lXT2zjBXs3WVzgeYNxClFW8HGAXGF0xmBNoLCT1kxWSmC5xaXwjOZeFbwby+CCwhyGC12d2HPtQ==","shasum":"76e8d2747455f14feaef9e663430e2ef534ca2e1","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.3.tgz","fileCount":12,"unpackedSize":41280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5rUFCRA9TVsSAnZWagAAS4kQAIO7UmXhQdVG92ef7TVT\nvc6JWhrvE4dWpFLUnP4U8zoVlZuJUtJoxjFeHLpcJok6RUEWm4BOJ0suJjIM\nn2i03Zu0pK6nNrVVdFogB5iTdHrP3KfjkP62gwj4GEjsdln4opbPGSlqRiPr\nvgKilBECoENie5u9cg0KJy+otbgxRDOZ8WuhzUueCHwYk32pJstDQjKXRsdy\nUCQw2zru8uQWJUkiLh/juphtV71uFSU23wPh3CEqbbv4HrV/Eln2yg4B2mKR\ny5Fv0LIINyXSctRTWZ1hQwscsU+D3yuA/pXAHSSf+2cpBizCaVYL8L/KsCxD\npnaLD3AcnRjp69Uscaq++Hy5lwo4vmrMORejWr3xwWjorvRMhXSAvgjC94pv\nyWfUtP1sxjCQJdB/4L3wHNs8zPJclf15G2G8sWEqu3W3jZOgRfZSFfI1QC7h\nqE7w4N2+GAdi4aUn5i9zR4oemrY2CLopjwsHc7XZgmhhJ8BmxxQNyFH5bODo\nrf/9eSkFEE3wE8lA93po0KDr7AqCv3q0FOkDUKSJ8/p+1JxRnBe6Z06feHHO\ndQyG1aLvXzRbWkJ4JpSUOIYp8TE6K48wmQRwICqEiR+mxQJfzwwRbxNti2PQ\nkR5v6JrAg7ObMFZLwZc42JWkRfMKhyXOld0VahsfSGCcYM/fi0IQRZLSSWOE\n5RCC\r\n=1Zi0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfTQa72R85A5b4zVNAUsyHaqUGsZAAwdv9st+PwdQsvAiBNnc7++wi01Kda4snB4+Hr6eKJwzbeAPa6Srckok1P6w=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.3_1575400709021_0.47945243578739727"},"_hasShrinkwrap":false},"3.1.4":{"name":"@crave/farmblocks-modal","version":"3.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.3","@crave/farmblocks-card":"^3.0.4","@crave/farmblocks-empty-state":"^4.1.4","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"342ad4e3c27368ca02c4ea9c55becd823e45b617","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-GAdx3q078BgemwcDTacbPfdDAdaExdybTaZV9O/E2YHCEKEBegbl8YLcfPjYQNIWemBmlH9VAn8NcQyG3QhwOA==","shasum":"09e80607c136c045d0d5857f411c3a0c435e0de2","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.4.tgz","fileCount":12,"unpackedSize":41485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+louCRA9TVsSAnZWagAAnCIP/RdmVRtmkh3M2hZnOoCz\nfQJ5bjYJbtRmRSYFufgk+W8ICmLn6iGf46tSttOZZgoilO+Iqj/dIOv8SEut\ndk1ELvAMTbZQdtv0i82Yo/igFq9hMkUoZP6/Wws7HC7c8gM+Cm8A4qBbxLha\nFIfRi4bOHYFkK9/1yQbE4kIIjxAvvtn68AAHF7+eS5g7F68Nhp6wPioxOdnq\nM7qNQ3vpo5rUyYNgw920A6MSZV31iHpbnpNFhO3hDvazAbqE9R39z9ZaLB0P\nxbV7SQ4W7+JH00zWuVzeK3VHWaeGRiUrpJHaH8ZYIZu1eZpA6j/zCcRkJWdt\n1RhjAxrw7/x03nEHYRXwK3I8kXzrEvDMMzK5sBb9YQL04+0QChHO9HnoCFqO\nk/GIcWmjlJpoYn0BqAHEBEp1v49AwnkX9VNE9Djjil8HP5vPNYaGTZmbVHfC\npx/s5tq5QOl8oP08ExCq+KYLufxsJoQ4KIlsRVbLbnx5CWwfPIvv1ymIUGlo\nN9hGwZnXQkm/Gcmcq/89PCFA7WIW+TlnOYVulu7iAK4P/9uElD7xBFYQ6K2K\noHFN9lCtzzKMdQJSJuWIev0xwB9AHtCN3Mlqs9y1fsnyS1YDUf2eZ3xhBCG7\ny1dVmZ5UkIYpPWdA5hV/a2btOXQwM6Z8ZLbHV+oloW0cyDkyqXLMn+hi14CP\nFz3S\r\n=wmmU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk60xv21asu486y+FlWhYnJxr0mQOlkAUqlEen9TuLiAIhAMFIOSiU+8A4C8+aObUmJD1Yqkr4OkhQMoT15YE1cI7f"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.4_1576688173907_0.4584973325023749"},"_hasShrinkwrap":false},"3.1.5-alpha-image-with-box-shadow-5646.1.2":{"name":"@crave/farmblocks-modal","version":"3.1.5-alpha-image-with-box-shadow-5646.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.3","@crave/farmblocks-card":"^3.0.5-alpha-image-with-box-shadow-5646.1.2+aac48af0","@crave/farmblocks-empty-state":"^4.1.5-alpha-image-with-box-shadow-5646.1.2+aac48af0","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"aac48af08d12ba3c4cd38fc3d4575b5520647283","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.5-alpha-image-with-box-shadow-5646.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-hn9C8E/Hb7y0edsAZfDUFkfVfuyYwAqnxMQT4Tl+k2mR1TuTrvn99y9No15AbhZ88N/UyaJ2gbWPZF3+c4bW6A==","shasum":"dc4369ade5b5b279fdbdcdf776fd9e169f3f83da","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.5-alpha-image-with-box-shadow-5646.1.2.tgz","fileCount":12,"unpackedSize":41623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBk5kCRA9TVsSAnZWagAA5goP/0MqlVMhZfGnl5HZNK7p\nu2rmHFNfNmEc3bxW6l0FoZ4sumxdiQmUadrBtN6f+5Cn5s05ZRMFX/fXJ3O4\nq1cTRQptbHwYUWcnfirCWTyp6s8ErrC++ct8dC3UIgNhEiCU4aGoE2Jacnjz\nvSkZB9UBgrEUBezD0vQu6fzolhpbLufv7pFk3ipIpBp81tOaej3oNX4MJ252\nmTjopBJxbDA0LKj8QFgprV74NvoQyKbeUdnw3Bjmfvebh3BKPyK9X6BuYJj8\nDQkIGdxN86ySw7ACJKPAFFnu35Q0kCc+9MPHPQCLHTQo/2foWg9ps68/K+F2\nr/Uwmbfx5jJH4VWAl+LOrQKx/PSczwK0jEpdq9uE6WKkDOCUbG/w6XR2Fx6h\nmlQZ0IKJF3IU7135mx7Ay/xAYncGmiLra5wWovU8H8JZBPW7fzxJZV9JdzoO\nhEVXXiclCl0YZUJDO6fm2i0b8DCTihdbW9Zl4wzSAuasEc7+pd2wBjWNOVw1\ndpUKd5WKtOQEwFA21op6B1s+A/UEzKEUXmxHpi7teuEl00XSm/j5inICL3hj\ni5Eh9KtbyxG68X8cStb6YpXwzvalNE4gT86JHsaEpV6esarJSNMOMVITABKe\ntbV+X4tgUzqTuxpxm3TIK4BWKV90Cn7EbTK0AP1fcMpa6dIo35MaGwA7y2h8\nIyx7\r\n=3Asz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGboNMkV5sXB1oNEX+lFsxbbrwXtghRwpHjiD1Wawi1AiAOby7zwqrsxGypawDquAFvm5WC0mvoA5kQIIAB7pa1xg=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.5-alpha-image-with-box-shadow-5646.1.2_1577471587777_0.606657156022417"},"_hasShrinkwrap":false},"3.1.5":{"name":"@crave/farmblocks-modal","version":"3.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.3","@crave/farmblocks-card":"^3.0.5","@crave/farmblocks-empty-state":"^4.1.5","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"5b1089ca8d327cb69181d786fe43fbbb8ebba65f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-l9TPPvtOpuK1t36mdCd6wQIpg8N2OlPoQMeX6in5MqWGSsL4kfVA9fq+Hv4SRj7s7oAzP+bkIwDo4oJsCta8ew==","shasum":"fa8a305c2dab64dfbe6bbfef116dd2fbcff04ff5","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.5.tgz","fileCount":12,"unpackedSize":41690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBlIHCRA9TVsSAnZWagAAYBQQAJMJEqxqoLAKH+AE9dFO\nqVclOac3cqbkyD17+3UKiAkJ9ugQe4rjlvPnynYNBiZ0t4peJCXCa3A/rHZC\n5lLYIEIsd/PPyShHaaqQ68N2ciz9YItjQDsqgoamT6GXOQpfG8bAYQiSzYOj\n5zHegSWb5/W45eGUELRXr0Wj5tJ1UF5G7A4iZhKnCWD7DOl7sS0j6OO7ue1e\nTDfV/KSOpRk7J4H5twdPy+VNcmSTzhALYhbEuLxHsKCy2/dtMRQScUFDDVz7\nJB/mcKACsM2OQobEyCuaEnpxQ4uw7OKWfA1XkcJVsSKlFdvkgfUSxzW/P0N0\nhnGnWxXegfOBsS+xftIReg/7GAB0tZhesn+ryOUsLjZjwv1mnlZB0+UrxvGB\nCFXDHGWxKd4ri9xg1FbPickD2xV59DoMSlsqlAB+eZD6+hifhNog8x2mu2ej\nCle9ktFnLNWxILpLUzO4a9afh64IBCv5fuq5H9ewIitTeKJsA5pMjD7/mLU7\nRb+HTMhGSNf2GauxmI58duAsu/VAqRq8jI9VeNJZNB7DtpQizDdJZTB1mV/N\nB1FBhfrSd9e6rVE7nPxphXKwqsUcGciqtS65AdTnSnwiUV3y2YpahkgzCAc8\n8Fz6eMsZYK/JeGuc7kRqxGXOrBK3PjD4+HGtFZFfBBYdUyU4d7Y8NbybJpqw\nY9fg\r\n=P0zR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtQlogbx2kpSqu0i9V6Dp29VlNhyR1LQry72YEYzGX7AIgZpSRh6jVasl2qBxNB+uT+HBNSZIuvGrmEZ4/HaKSo5Q="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.5_1577472519459_0.3715858469436457"},"_hasShrinkwrap":false},"3.1.6-alpha-link-fontweight-5650.1.2":{"name":"@crave/farmblocks-modal","version":"3.1.6-alpha-link-fontweight-5650.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.3","@crave/farmblocks-card":"^3.0.6-alpha-link-fontweight-5650.1.2+1f1d2194","@crave/farmblocks-empty-state":"^4.1.5","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"1f1d2194cf9e8640f7edcc0e4ae7478547b8aea6","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.6-alpha-link-fontweight-5650.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-1l4xV1yM3KEIkISviGxLSXmjpGmb0xGSdJ7rlxyRXf3YpeqEpa1z9kiojD1tbsv/zY8j0OeqZsVi9NhAimBsmQ==","shasum":"b4cac7226c2f7f3dc44f85c358a4cfe3dd3a1023","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.6-alpha-link-fontweight-5650.1.2.tgz","fileCount":12,"unpackedSize":41770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4AACRA9TVsSAnZWagAAiLIP/jLejnYcnp5s5nCBVLr/\nan7kj3hq1irzMInGwNoxzstXh/FV+kVSn4cVguTEu+h7YBCJcJn/r3WA9gH5\nZRFLAxpzWyFJKZGIBYZQSp3V7HBaZfK838kGm5uOj7Ioz+Zm3SRJdNgpgoxt\nj7zTEl+D5FMbgHUAst7IcHxN9QowOCGjCatdq+EAnTGOFqvhgi/ukSBKRr0B\nOYnNu4hF8+YNZY561ITQvHvU8r/dhB291fwY9VaWOB4DOfcnsohUDE7CF+4w\n6gtjgRyWPZLEM/y8dZQVieM2LUcTypkoK8+VsOrqykZ1fg2nbQ7qNZjUbUKw\nfeFYiA3xAKuo4qe2qxggpJEb0itObfw4bOPK6t8bQBlcB26Cogugsquv9jKO\nlucGZhlPeySgXwGu5YhVCDT9Eg555p1pHIg+Gnc87KVUDZ8vsQfe2c5f/nvN\nLTKS0YHdpns08u0LD36D3jG8Q4HvvUEoPnTicH8OFL9h7xwTbKf+/se872Ga\n/qIgTaBxVhJA8byIHfBWXRyLvdtSA08SX7vQ+adXB06PbGIzaaLzPN/XNW0D\nflXWd71Nkw8LWR4lqdJUQSOUZ2XThshJnwbYg1lW65JhKwySqj2rx/QXmGIC\nkWALw+WdpJ9DpcTHGNDsOVnHdb+Fxh+ykQ3fOwAkCP/hNyZQkQymXLIMOxpv\nc8Eq\r\n=NG4N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+CBDpjHUa8dCTEbmAoHuOvb0vQ67Qqke9oMoKp3nmtAiBmucH8pOCkilE5os/3sT+qyE5gu6ZgymViXJRP6aPWsw=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.6-alpha-link-fontweight-5650.1.2_1578074112273_0.2932649877581983"},"_hasShrinkwrap":false},"3.1.6":{"name":"@crave/farmblocks-modal","version":"3.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.3","@crave/farmblocks-card":"^3.0.6","@crave/farmblocks-empty-state":"^4.1.5","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4599bdbc2e1dee1f2060d96b2b31fdaa025aeb49","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-PD3zoskC1F3Y5GXC60ooxIQOmwo5BeAlTk4IHVKHZpt+x8Jk52nhGJuxmtey0eG85TGgK4T4msKFIm7DjK9ptw==","shasum":"fc2060b164caac876a658a79120f23ff69dabeb8","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.6.tgz","fileCount":12,"unpackedSize":41895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4msCRA9TVsSAnZWagAArQEP/j3xhEsDQvZt8MGNbZ2s\nQr7yva0lvOdd0/yAspFuw2wUMG0mc6jS+zbMZ9U9k3NcNRMQTssPuFXrj1C8\nEjDOz16p2zGdscfWrstywBCQey1f6Jhf7NdsaFoPLaswElLE8Lj5zF3R4im4\nPteU+B+iESFrkQ1rDrska1lN+2zMFxiQiax3bHbsgwQS5xywqpL4hXF7ux47\n02mkZpFhOCsKIGqEYaR1dVi9jEsHLG+8kHd3iM6HcGrCjyJzExS9mJT2+R4h\n4hk5we8G+rzictHDrTEOuWY195pCoiEN+7nb1iZse4yffH8E5sjt8Kgw292+\nd0xCyHbHTpAie2dF9MZIXbBuwjs2nsglB2Rd0k+Wo9T8XkeQ/EjLKxZsR4dw\ngn1t5nGdiBOU5Izs0e831N1/sywf/RqfVRyAy/pM/f4v3QDIpQF8kJc3Z4sl\njGzblMYZmiixL9FuEmcUZA0x80t/Ii9fnW5vC6mZ7leRaLILgXLeg3//ryVE\njUE1Mp2AtCL3kxho6YDpEPBOIBiRmCbSVGtc3mh0CHarIoibl9a5+2oQdLN9\n72MtcvEK/XpJKyz0+BeYS0b33dVhRCfn7t2Uc1yJ3o4nG4qnx8jhTDEd5z5E\nXs+NwhUeMsKII7hrzQvl9/mfG5CWo1M9QhG0Szh/ZH9cGwBJqyxbZCkpsk97\nmpF+\r\n=3mAj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxQJuC/rENfjstdSufy0F9e0wvAC0GU7T7bOZKhVRH2AiA3nB1LcbCOpmhhpAPshfyP1tYdRp6FNlsjzcDhMXM7Dw=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.6_1578076588320_0.2509464997789308"},"_hasShrinkwrap":false},"3.1.7-alpha-new-primary-button-colors-5656.1.2":{"name":"@crave/farmblocks-modal","version":"3.1.7-alpha-new-primary-button-colors-5656.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.0.4-alpha-new-primary-button-colors-5656.1.8+585cd423","@crave/farmblocks-card":"^3.0.7-alpha-new-primary-button-colors-5656.1.2+585cd423","@crave/farmblocks-empty-state":"^4.1.6-alpha-new-primary-button-colors-5656.1.5+585cd423","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"585cd423b49d4f8cee8b02db2e7f788f0985c7ae","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.7-alpha-new-primary-button-colors-5656.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-X4kAKRG0qwukeXGN9NnNSvjqwjboTADT0uDDmj+85WR7OVC+RNaaxBwUTq4UBaOuoTCZSgA9TpHNkY1Rsc6Ibg==","shasum":"10a695603125300737f6ca12833e85610eeee42f","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.7-alpha-new-primary-button-colors-5656.1.2.tgz","fileCount":12,"unpackedSize":42095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg1NCRA9TVsSAnZWagAAIWQP/1q/fb3xaU2rEBeBxJzJ\nja4sHj9O6sZjP2PADVuzvb9X0/bW0ZlwsxN+VYyl6Zk61tyYkpHtPvibultQ\nE2WEooIfmSTFmu+rqfRB3kApYCPVqKDgbptMtkcxzFOh1FMeQu7Q6aqJ44vu\n3R5wKIWiFnEtvZNHUs27xht+P18sTmvIQeOahcgCJJsKF+bzrk7rEPjJDP4D\npNADQQ4dyggjJr6d3yubIXE5jPxrFDHzcNQAH3/ER509w+K5Ut7t/oVzXQF0\nVIN4/ibEqDLUiPv0r2RcR3GWay85PCEDifBicN5N4d4S8FYtVYRMCfbYSa8l\nMKNfwefRk1uavg3UeLxAbR+NlJobWfA03QN8EU7kmCdunst0TMX35mldrINw\nqU0h7Z72XllU5DZmuW7SAQY7ii/YGneCgQ8J06hU12xYTMaoKpZe6WtE2rNM\nGU2v867jFCZDQEsDeDtjH0r8JIquuQXA93G9ezVsHhS5Vp+YLFxp+/eOsk3j\nk5CA6HhAnu4Y27DgCtAC4yq5CBiqcfMIMKfAFJJdlkWOzU/z2VRJvnwsS/9l\n/QN2kmuI/fULtf3ApuuVlDqGX/63yFwGny5P/tEb/dVJmXyzxDhy3oT6g91e\n0gD5RzF8sjcUlDC5aUt/6/+kux+pXm9Hl3S/lwtZ/BJu3nTQglxbJnugWn/q\nuDiC\r\n=HhkD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEoL9A4dVBJF0JWpdrFWO2mkg/VjvUt8d5NLZ97IRv24AiA3+NXdtVmrnYWe5Y7oaPdEd7mVBQQ8SUTReN/ifybHoQ=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.7-alpha-new-primary-button-colors-5656.1.2_1578503500576_0.3111089531102804"},"_hasShrinkwrap":false},"3.1.7":{"name":"@crave/farmblocks-modal","version":"3.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.0","@crave/farmblocks-card":"^3.0.7","@crave/farmblocks-empty-state":"^4.1.6","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.5.3","@crave/farmblocks-theme":"^1.8.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"2a1f45615786366e38edd13359913dbb6ec223ea","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-NrghvGCC99AqtLY8kKmfe1ZA/hq6vMLjyGkfOwTilgFDk7c52SGSRoou4CHX6zN56Nhy5buq1rDAo+v0HpIR3g==","shasum":"388d5aaa5c96efc24c3628162aaf80d9b6ac792c","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.7.tgz","fileCount":12,"unpackedSize":42100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhJsCRA9TVsSAnZWagAAUIMP/03ZX7WZQrad6D0G/Up8\nBbvFSiWZL30jX5pr1dhN0MenZwn65BbhDtHh0nd9Nb2R89/0Gj+4UO2cFmfP\n4FPackxUxduvvsfjkdYcLGmTZeE1wwQtXbZHn2/x1X+/hJukZ7dTr2KnzZbp\n7WSY/jn/cQubbbUa3KDZmwllkqpgJxBm3c14PT5PSaKHBx9/yXuWsXxgJ9pM\nQCU24aQamcbRXVsG45UXzWjexvZtV+2YROsT92zqm+Aw3qS7I/eIagJp4kbx\nwe5X6Akgq7sd36SnpZhJ8A1x/J0cG5n1nGA5EDmFCKyPjqczGRJPdjl5oLHl\n0BNIzSmPO4lQvzvihIiXrOMnd1ideCogqOY/Nzj3nciWopgADLuZOjaRbyHV\ny4Nw/E1e4e/2sCf/0pnhtAf0wTdlPW4W2+P3gsjwqpJFUL28u7dCQe4WGJ+u\nJxG3pUbrl3Yq8n01uIfkMbChGYnbZeRuyargS+LQ21mmxUfgbisqNAZsXLaj\nIL8mEkl/nhmjIvw99GkvqWLWccjkIRPcxpmq1DIGnTgcP8i7mv1+1rcSiSLy\nUJa0F8MYbfPH/80xeqVNScd3quqp6V0Qtb/I5WSE9jVBocjT8UcbmARtJjt6\ndqm8TsF+D+qeGLg90ztHV51dLTcGzOzqc6c1PMqyetm3Y9o8MGMMqtleLJZ+\nqyOQ\r\n=nJW5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClvzNYcf7+YZWOinVAqFm/DIAJ36BhbRa5MNvKcVLaNQIgc5Bcv3K+TIQV9rfD4Ky4VYLHlcU7KlQT8S4O4IBfXkw="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.7_1578504812187_0.8996906254587109"},"_hasShrinkwrap":false},"3.1.8-alpha-responsive-text-5665.1.6":{"name":"@crave/farmblocks-modal","version":"3.1.8-alpha-responsive-text-5665.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.0","@crave/farmblocks-card":"^3.0.8-alpha-responsive-text-5665.1.6+dabfc974","@crave/farmblocks-empty-state":"^4.1.7-alpha-responsive-text-5665.1.6+dabfc974","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.5.4-alpha-responsive-text-5665.1.6+dabfc974","@crave/farmblocks-theme":"^1.8.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"dabfc9745a201b94becba3917bbb61f4792ef51d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.8-alpha-responsive-text-5665.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-bbgpBP+3RY/mp4pY0RYJrp2WQEdYV9mNHGSoR4Pi69uRz/UOlboGktWkp6RBs+OAHpNFqSTawEHbcOti1aO6SQ==","shasum":"3a5cc3804776227aefdcaef18cbb3577b3584460","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.8-alpha-responsive-text-5665.1.6.tgz","fileCount":12,"unpackedSize":42260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMEg3CRA9TVsSAnZWagAAerEQAJCHacXrILpEQ2x1G0xc\nLmivJcYhTTvt73V6uHdt6Wr01nHfhckx3S9eOKF8+Gj6GhM4CmDaMwq2ERMB\n+qNK/Eu/XS4y4O19E7mDiADzKsiTAB0m6ncmw1JAd+92UGNdJkf7X06v89Yk\n7XIy1yXJOQiuuXq9LoVS1Qw4ghJhBN9v3bi8voFMB8KrTlw6BuHU41gRVMwp\nk9SkBZbqHd4WG1Wh7eVvCiDoliC4C3orQilax95/tnw2mmCv5TmbXBOe5bpe\naRS/VFjqdBLaq06Q3+nmmx3QN95smuSWnC5Hqy8ZOhlyePYiHRx0MAExLvUJ\nzNlVnSVUFiSJh3PzI+44tfJmVAPp+qrUrVAma7fjpWZSi/vsFvHxeMIw7RJk\nsjpd6+3rlZtwyEbS2VYFlTWNcX5YAA61DEfVCrSgW7ttPh/2cbDVjMSa3DWY\nKaSYmgfkXMCHSTWUiRbXfWwYS6QBRJBsw2fKv5HLvDWdTUGno8gMmwD05nCa\nfTypEZx7IgwGwa6B5doCZT2BNkqLLnPyXsLIHZCcfTfMx0W4pOwxUBMVUDFv\nIrsaEctaj7eshNdskCfJArq0E/0lkh/jhZs7rfmDnoPu7e5RmtQ62G30ESMt\nsHOM3lFIZZkqk7uXUcdTruItVhbIDw58fzmzYDA5vM7KKRhuaXwKfiqO5TPc\nTDA6\r\n=b10f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBC7+ghYPBrk+rjXUDTKZdd3+tZ9/lj/cn9Mv4eOiCBuAiAKcdflyyzBYi1EonRstt/TnpIgBG72iZGFqecChUxInQ=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.8-alpha-responsive-text-5665.1.6_1580222519365_0.7027864992801842"},"_hasShrinkwrap":false},"3.1.8":{"name":"@crave/farmblocks-modal","version":"3.1.8","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.0","@crave/farmblocks-card":"^3.0.8","@crave/farmblocks-empty-state":"^4.1.7","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.6.0","@crave/farmblocks-theme":"^1.8.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"d2798e1b3b424538dac08d6e770782fbcd636bd2","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-OcgR+4HZrcN6HY6qSag4jNAnOmE0Oq3PZUTfO8o+PkkQOu+9nK8Q9QWLTPP1dV1R/ueM94JnthKokylVpp73/Q==","shasum":"6fd260682081be876f11b17745847462fec8d78a","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.8.tgz","fileCount":12,"unpackedSize":42305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMIW7CRA9TVsSAnZWagAACJ0P/jtyLizmdAbtcvTaI2Vy\nI4C/7Ka+E9YhXLJs05LRPIZYcjXqx4NYwpCC1cO6yVdw94BI8qJcYYER3tnh\nhN3Dx1yXZk24miwInfUwY9p6qy616IjjeP0zC0MOXbNu6QeEIl2QQmVWb818\ng8SUqRfEAXEe4oIQAP+VGcPDRfbFovw+ZehlZM8fsOJFa31yeRo/6HCDuTAL\no5kQ2O7Z2xJ2QSh5nQtO8xjcHaRcttmKGPGjwCWBIMyZ9EAp3INIUSpnaEgR\n1hXz+ML3XnocVaO9OZU0/JeDl/jcumxyTCItXVSWc3U9ZuxNzMJ56PUexKKE\nIitfP6PnNH9DoA4vMJHlBRlcsCSNZtneQK7zIKq8USTsSwnBVga9zCVzQJEO\nQWKNZ31weJQV6Uwn6PTUwScdDxPXXrl0tyY0DrVHty/40UAvXM9/a7gtTVyc\nFnpgVqp3D9lughVhdp6pgw5BvjbjE9t6ayYcOO642L+lD5zNo67P2HY3przU\nW59clBUq9iiIb2zLVtxQXznlOdmMEnYQxZ2fEuUiWwybkCj66oxwrPY3evNS\n+KqQFTgDRsgdEtoTVIEVMfGmz0BqHgy7S/YW5wwYobFwE2jICYzGEAldzh3a\nMBVWuf7NRM7+fNcNiRj2zzzwjPYtp6MYkl5FExBVDAVs206C8xAOhsMTVe4V\ni3OM\r\n=WAh2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQSejRzhQpOCMucD5cdpAyha6foCrBaCAEN1361wVA5AIhAP//wh1Gsj83MjtB2N00xaDRwrJ8ARw0yq3b9tgUdO6K"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.8_1580238266750_0.6430768679592007"},"_hasShrinkwrap":false},"3.1.9-alpha-card-border-5671.1.2":{"name":"@crave/farmblocks-modal","version":"3.1.9-alpha-card-border-5671.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.0","@crave/farmblocks-card":"^3.0.9-alpha-card-border-5671.1.2+a479d3de","@crave/farmblocks-empty-state":"^4.1.7","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.6.0","@crave/farmblocks-theme":"^1.8.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"a479d3deb7e187cbc335ae99eec7ee606c7047ad","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.9-alpha-card-border-5671.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-gRYLVqHuaRWnieyErPiimunxJci0HgjbbUsmgS+0VC/SM8sE/pqVPSxq3xfRSz7Db+/YyqC0jc190kUl26w9Dw==","shasum":"75bada2b8b4cda9e33a35ceae6b76b2a42eef10d","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.9-alpha-card-border-5671.1.2.tgz","fileCount":12,"unpackedSize":42377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOHzzCRA9TVsSAnZWagAA8YgQAIL+8+qZm5yl79d1NJj3\nUpq4wjyidaQCZxaAi5sNGEPpSb06tQO0QEdY8C1Vyktt1JTpBFpCaeGywFR5\n30gSS4sc51yPe5KQcgT3Kr6HwkAoiaBxSGI2bO9ON0N2CGcAtk/dKx8nPPuU\nV2Hnv5h0myCk9jWJsRLBnTDL9jWEx15gOJ3JDg7NQ9YW7Y3dONMau6H34Dd9\nOrB15hQ1ZlMF/ci6GZVAWB1lxd1hnSrZPIHk7WOiBzdhb1iBVeZuQhpUVsws\nvNGlKAnR98jiyiHP1jLG9v2SYshmR+BwJzJHyg1j1VAn0szBHhqUPvgRxm15\nXlfhtbmfSfSzrr4GfO5JjIKBVGUTKm2h20nmTcrAp1EZ60xdtb3ogdEDvijw\nWyZilRuy3YLOMIHjuWZRMtGbEU1JT2P8M5FhAaD/FcDaCZ8KDmDcxxpxv7xO\nmUzVxaWqed9SbU6VkQbEk4nd5b0Q9PFLDVM4vyqgjIo3Xwa6ctVZxiMnI7cR\nAtzNs47+B/bA70cRxixt/ejweFLA+b8OimVlAVSrIhfiierf2Fa0YUxYEJMe\nrn4PLGrX+J2XT68tPNLVvzlA5WZBDipjQ3Uz09NCz1AEzY0Nq4ioExohKccz\nyein+9nOQbqpJulTHd9cNICN2WZ0iDiKwiYtmQyNrSpmjWEv8P4UC2IGHvPp\nSsf0\r\n=NorE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYmdj/MpUFcTtMkoglsvPMfFfH/hqZrX3tS/p1Tks83AiEAktALd0WKS3+9EHsmuorZS2qPPCd/4fJ8EmRtd7uZt5g="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.9-alpha-card-border-5671.1.2_1580760306752_0.0007366457414732519"},"_hasShrinkwrap":false},"3.1.9-alpha-card-border-5673.1.3":{"name":"@crave/farmblocks-modal","version":"3.1.9-alpha-card-border-5673.1.3","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.1-alpha-card-border-5673.1.9+64037a6f","@crave/farmblocks-card":"^3.0.9-alpha-card-border-5673.1.3+64037a6f","@crave/farmblocks-empty-state":"^4.1.8-alpha-card-border-5673.1.3+64037a6f","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.6.1-alpha-card-border-5673.1.3+64037a6f","@crave/farmblocks-theme":"^1.8.1-alpha-card-border-5673.1.9+64037a6f","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"64037a6f9a1396dd7835c585902e6edc164aa305","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.9-alpha-card-border-5673.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-ECTMSjQ64O0XBFJZ7pIZxE1LBi592c6UK3PSefnO67fdYicFxtsjyleLJddzmO1fV25hQeZem/yLlZI1zCZ0qw==","shasum":"14dc7f00abf204cba97224d44fb4da1f20b911ea","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.9-alpha-card-border-5673.1.3.tgz","fileCount":12,"unpackedSize":42521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOXyFCRA9TVsSAnZWagAAKPQP/35iLmwfArvENyS0svxN\nXfBYu6CH9VmRjEc1IhAbWL/3uz865I5b9Tiaa4V5BVR8pfT17zBdz6pH9xOP\nfcnomkxJObx6c+Ao0riUgOKNEbxNUgnC43zIMdPsFQZilHEIKXHZLRaa4KnV\nSnpbd6xRhb8VDzRsw4rYW5Xm2CXMT7w+UgQy5x0gTM0QkjAG57u3rBQXpjQs\nr2XTiKZJoV46tIg2RT/Rm1STrgKo1ys1k9dVDSE44M9kiGfnwlh4QEnlDj2U\n7vEzyoA1NYMGg8pmegpGSfrmA6YMAVBJWibOAScJhhAEUIlc93p1VgIEB4ZC\n2s2EGeZC2IMt+QpijfAjocvQku8w5X2Thvn9WL1TI5xYnfER9pOdB9dViWs2\nz17bU/dqJxnBAF3niyn8CHhQf6vMzQWToOCxWnGr2LeeYDpt9oimAb3ytBMg\n0ofbwpYUWXcQL3xGG4HXNBIDNmOt0iWuvdslXmhatL6aAxpxpNt/PvgpZCrE\nBJALNZVk1j1YSGTNDRO5urgErmxKnz7N5bkzBEvws1XoedBXNv1Tbf63ThRP\nbrjZc0wlf1sm8gCrM3Dg0fayXM7OGTkgVC4YkIvWaLthOpzepVjGedzDuAaL\npeUYiald6EQHoXJWrnlZRhSMD6pVGDFeCsFdcMy2Gqzfc9ivAI36XMMZ6N4i\nIj9a\r\n=w+9r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOlAAADc+t+3ymvkGYeQfqTBpcd3muLTa+3M4uIFHKiQIhAMg7XmyplMbB+qm4BML4EA0OQjspdS0IynXscw9Aqmzm"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.9-alpha-card-border-5673.1.3_1580825733028_0.48312944756459775"},"_hasShrinkwrap":false},"3.1.9":{"name":"@crave/farmblocks-modal","version":"3.1.9","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","react-spring":"^8.0.27","styled-components":"^4.3.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.1","@crave/farmblocks-card":"^3.1.0","@crave/farmblocks-empty-state":"^4.1.8","@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-text":"^3.6.1","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"bb3f171a3b5b9fcecba102f5c5529ac1334537f8","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-t/6TU9qicPZuQ1gHjz5vKmXIg8u8ublbH5ZxlB9DF7ySN28F/6IQ917wQc38nVxCeRgHVcy0m/97C213uqPK7g==","shasum":"791164a608bf97e8a4b6d6f052425acb41c2cc52","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.9.tgz","fileCount":12,"unpackedSize":42510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOahcCRA9TVsSAnZWagAA3xMP/2BfuQ1xT2YYEsxcLBz6\nY5p13D1GuzHp5m4Q2eS/8wACRdQiwqPZM9vOOG+5BT5HFjfkRAk0hH/DWEWd\nHqqw7H+GYW+l8yWVnIUjhoIOH+/ohGmohMKjiMJdcc9Ypo60SSD9Buut12F7\nMC/MnikggX98igHr1LW5SlLrVxMLPrRURiIB/3UZ1r9FxN7CPKtyZ/I24T/S\nT3x2E0q1BU+dFh+cZWTS996ZhVFcTkC7H38vSQmwum9vJOvzXeWqygz+3arV\nSJs194wc2mGtJwEhpGW1oq3+DKwFdEhxZc5p8uonnrtp5Lo3mkaIh/XuVcH9\nszXi9PT+n7hqxLCeviYoyom08hQlTpLMtOL7gPhVIS1AJEivFpIVPXzJxjV2\nNYPJmyipl7e9FamhuZkvApt/ZmnJMOh0649bv6cnRJvmdWtzfv6qi3uOZRyN\nZF3jAxXSTsyrCdSdiWBK3mx7q4QqA9lygW8X72CwojHS61mkqQ9mXSuqOgtQ\nt9fsVIQTCQ5hGEN54blFwmxJ1wiRTKTEdtjwaHSn3oWkgm5T7bXwqbnq2uvj\nkR5nmYPhGoYB4d2cm2uVElj1IJiN7GHV46lu2G57uGluIvmELJCqPAblgKNS\ncjL9VTw7iyHde6ujeCUl2ox9ljUTVuTghyNpbf11OMizP2k/BVYXAJSj9hOu\n11K9\r\n=PquA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFPNMtuk94kM8WOMHc2AqIC9nLilH0VlQjPLSD5WryTqAiEA7kCYnumbzIOJ727jWd2hBdh6WJGDUBAE13yK+FsQ7bw="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.9_1580836956032_0.6431133127486961"},"_hasShrinkwrap":false},"3.1.10-alpha-upd-dep-280220-5690.1.28":{"name":"@crave/farmblocks-modal","version":"3.1.10-alpha-upd-dep-280220-5690.1.28","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.2-alpha-upd-dep-280220-5690.1.28+a8cea52a","@crave/farmblocks-card":"^3.1.1-alpha-upd-dep-280220-5690.1.28+a8cea52a","@crave/farmblocks-empty-state":"^4.1.9-alpha-upd-dep-280220-5690.1.28+a8cea52a","@crave/farmblocks-icon":"^0.5.1-alpha-upd-dep-280220-5690.1.46+a8cea52a","@crave/farmblocks-text":"^3.6.2-alpha-upd-dep-280220-5690.1.28+a8cea52a","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"a8cea52aabb860ab7cb09fc73c87568bdf11ccde","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.10-alpha-upd-dep-280220-5690.1.28","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-YpcM2e6Petogk+bZxQQ7Oa0DlFiJuyvAXoJKbgxP7IRl0uRVNJ8Vp7FfdI2gJ1TeUz0SE/8ns+yACUQljwm7EQ==","shasum":"32a875c9ec3ebc388fe0d95f651f139125d4e69e","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.10-alpha-upd-dep-280220-5690.1.28.tgz","fileCount":12,"unpackedSize":42805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVmXCRA9TVsSAnZWagAAlLEP/0hlBmHhXum22ZG1FCT6\nlZpowCTEaBF56tjAtEtrnTfBLeNzX17k/IzjUQJHA584XyWUAhhSUJWlsXML\n1JB2kvwgvo3XIoTrkW8qGCPvBUHap9Mra9vOirIJoRUvnN3X7Gsehp53JyJL\nXeTeO3wja/IiwxDgLnpyjh2FAqSV+7Pe1ep5xvF9oAn47m5K/VKfwK5UgMJK\nJ3O7NNVQFsX/TBKlzdIHsNj+EHgy4nYpzfyINDFdcc4wiBBBEHCfMDfXQk99\nCOG7qGERor5WGF9DtPAqtZ+WTgMjShQ+Tynyjbsmnzk2ivS49ZhLNwAO0Zjw\nOr4/vTPWk+7SLSmiIMZtxyEeO6cb0J/fcimFYMB+SPvB2963k5Pg6n+nSrRR\niveqcmnChncwzFrytqphEvUa//4/wVlGkKqbFSyYIaZiPwTnfJEtbzK9WpGf\nijk6x83iAVRstOLn4WlHlSE23u1XLFcRuzpW8asKQpAkM2/XQTFAbvns/RZF\nnif9wwILinzPZnfBhnz04vGw1BX1Nro4RcdGGLAzpeBZvZ0gbnDSJPNgtHE5\nH2/xq+F9stLt12Iqukjh4A/slVHoh/ARMoYnwlAPjxod5tyfyAhrjb9PD05v\nIpKTyoLcFslStSHk3V1gHx1u20ZOumHMeFZxUZQ5DB3o+UId7UW82lWIDIAD\nulhN\r\n=hLmw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICa9lTj9dtJ0g3lssENAuUsoVTAw5N0OEeM5LnNanih4AiBHknYsWlaimuCHQryjydr6o7eVcBKw7UwdYbPslZgOuQ=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.10-alpha-upd-dep-280220-5690.1.28_1583438230525_0.057170362423180965"},"_hasShrinkwrap":false},"3.1.10":{"name":"@crave/farmblocks-modal","version":"3.1.10","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.2","@crave/farmblocks-card":"^3.1.1","@crave/farmblocks-empty-state":"^4.1.9","@crave/farmblocks-icon":"^0.5.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"6f23e8cd16a268a0f14d582e9880bc591d758995","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.10","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-lR+vgtxtgq7ml0oQ/MILT914a3J97+Ppr7pI6PMRp1jO8WxDmMHcSP01RHPJupGhAKXL8HEy13nk660MO/726Q==","shasum":"c227b3148ea89eebf7978f070968dfed84309b87","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.10.tgz","fileCount":12,"unpackedSize":42772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYm6RCRA9TVsSAnZWagAAPJYP/iOzEgvyP46ND0GuAN1J\n0gQWSrdPwG1XC5dX0zOEIWsEB3UnvNkbfn9YqiNzBGdZ524xek+hKrgEAtYY\nHejPxkTkfKZNROyF/Xe4KP1Q7Xk8jSTQDqlz1IuWJJu5WFy6AJI/sCcLgkkk\n6cohjoARw8egRmezkQ4ICtg7oPr6EU07B2gfahMwgHMgakj9wQDWgj5Y/ehi\n0CEXhkF1XJ0ZXm2mK4+PbWOrWFU0bqWekHp6BDyKNYL97fB/f5Ty5HGg3+8q\nBYFX4uA6qftklhJ0S/mG1C+LvFaioy0tUUArFYs/THmrwYfo/lNfvILMKKGg\nJZXj/e8yjAe/JoODhzUABbe4cynV7UnpS5LXprpcrS8POYv0VWSTYUYc7t1Z\nF5SXSrXdfxrjNsg2se0+p2n7ZiDw3XekOrpLOpkSZ9vi6lT6BhAAY0YCZesJ\nEj76kdUcdEHJ88H+Ts7q2aAjSeS6SnLEopbDRv0E3Ia9zUtCeUYRmyMOCv7K\nkQYz/mFTvtuS9Kd+up2DQ/f2JQQaIRdKHoDXZ+b5fJYENGLvrOG5Hh4yw+7N\npap2S1ax3aKnLt89eUICuPqXifLS4VDXk5GTmpiMtyzsJ96WR+9nr6JyB/2/\nyocIjc8xyXI6qrpWTJFbpyhzoI8GGEdJEHWMMG/dvKJcwjKazjmGznZiFvMf\nRO7i\r\n=c8B0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUki64RWtJg3dsIQiUvP5s56J2N3iYNHWE6Fjw6WnA/wIhAP69LwrsAzDfnyO+hCIzQ77c8aRkbgOQVRN7JAHXgrHj"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.10_1583509136634_0.5576678123030046"},"_hasShrinkwrap":false},"3.1.11":{"name":"@crave/farmblocks-modal","version":"3.1.11","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.3","@crave/farmblocks-card":"^3.1.2","@crave/farmblocks-empty-state":"^4.1.10","@crave/farmblocks-icon":"^0.6.0","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"06d6db2af409b4d1c42e1c3a038aa5bdc9fc5654","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.11","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-X0m17qIhY9cBJV/0t8EbPm9S+nIcR1PC4mBmuZtiI5uO4DLmudEzzHQPlZ2MczSZbp8BrdQxdPcj7AbYpJiPAw==","shasum":"c1a514eb4d03a4f33e2a9631922fdcdf47725217","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.11.tgz","fileCount":12,"unpackedSize":42981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevDqJCRA9TVsSAnZWagAAKiQP/iwDe4u2sZUC8qg1dpOz\nSfkasmm/9ujQ7pfPj+IhbnvjtBrROTQlAScdOTySlGCrc2fN2H+5cxYkvcxt\nn7p3BpGCVfpqnrLRctXcRLG+Sq/DCtdn2l3ctoWvtasopGp97MxddE/jlV0N\nhuGop76BX+9zHkRNmC7liExqhWcJhf3pdFAawLp/BWtNS2TlYAKCkeA1m1c7\nYrSeOCpHquqyMqOld3ffcIsSb/pm/sIE70ZwjKzrLHpOq65BRVXe6+o5WV13\nJ1uX9GCurfa4C+NHJ8Z48tCXsK9ensR8iAUd8a8ehu59ITJEspTwqR9lfHqo\n7/iv12OonUucllP3cFV/opzd9bRRnsUixbTW9DYH8KYUOLxcPJzwWWjlLuYD\nj/2uUVDLr99jcup+18Esh9SYuRY5Rj0cp4Zrf/qwbfeNJ6oJ/GKLcxM8NA56\nqdu9BKdJEXRiTd6UkIhN4LGoFJotYP/58o5QRrJXLLnxxQxrccolR+K8P7u3\nh0oeUvJIW2QxGEuaD+zaBkqkD40Awd8uofAR+74cNLMFMzgryx8Xsn2symls\nZZvn+h0wk1jYgDMLahG3Lvkls61M+fOUJUXMDTTzHiiS0qEtxzZadTg9EG2g\numvz7p/c4e9UJPSrAQmTsQU7LfXmmalXqL1m6mwLsI4bSXR5jZfI483v4tad\n77KM\r\n=DFqT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5x3iqy96w7nUjGBfwGFir1o7BBsT/cPklFuOSYu2RdAiBR2viOohkQ9CLfm5zmv20ObPIg5zPGIw0R8XgejWI93g=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.11_1589394056820_0.383352700225408"},"_hasShrinkwrap":false},"3.1.12":{"name":"@crave/farmblocks-modal","version":"3.1.12","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.3","@crave/farmblocks-empty-state":"^4.1.11","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"f53cbec934d2c236ef9e41ce2e51d2bdf37e2914","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.12","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-fkAIE5n36EubKpnPzuk9Wt1TrK8WoP7CG+Vzob2rv79tcz+DCJX/fal549CHVwQVLnGIVyJn/rGySLx+ZOuOMA==","shasum":"76eedad08c0d7883e6797ad3b3fdf9618119ac64","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.12.tgz","fileCount":12,"unpackedSize":43189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVZPCRA9TVsSAnZWagAArtEP/2r6kAe8DvLVmtV8CsDR\nPgSmuQw9g+r9m7soFJhr88KyCM004L3uX6uz8913haZH/dnfth34vNKRCOAN\nhKd7PLFKEKH6YqCfl8CfgLCCojv5PXs85VzEj6RC7USWTew6msmuyqQsmpLG\nSDvrhkGZ0F3jo6oQBIP+Ntt68oKBhWDvt+2FCyYST8kF1w0vnAmwEscDLPlu\n0q4Bfjf2N4M1EVb5Y+rfHj/MRcyAdOwXbttO7unl2FArB9ccjRUpt46RdU0C\nkSMSSFTqghgDNXkC451Jk1phSmMBY/1KY7dbEWteAqfj2Ykcdpv+yUFH0a4E\ndRNxlK1vEULFrm8+/uis7EZzV3ga+eBF2UMzu3+G+hV5Cjx1LhqoE13N20sQ\nejb0xzgg8WR8+XP7UHQkYjJJj/irlSn9K9Ab7Sr2tVfHP9D9ccRjN3+gUxlQ\notR5Llog3Y1DTnzhMjkMUQLLpScKuSWyHjTbxO9SQPrOlkawx16nwVmfnwIL\nFbTB0E92zZUB3UyiBQsbep4Tv0AdKvja0dLS2aOeRTm7uvFGKfKVgLbzknKu\nJDwJuqbBhpgD4HKBX+DXeDCTjqC0AN43gFBPVL5CPW5JrrQNXylgxVEfHcy3\nq/L6EmOhjcD561pm3KXgw8C7vIZGoX/oq2JGgt022v2/c0JKhpqyr6v+wdZ1\nDn8n\r\n=EyYm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTC/5I8TvI0sGBlm3he6t+GZHA2awcEmpEOrD5bwZQjAiEAln2URamaPYj2J9RuyKBN1BDMBFtpe5qsTjJJbym8avk="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.12_1589466703098_0.8696291350360958"},"_hasShrinkwrap":false},"3.1.13-alpha-new-label-5742.1.5":{"name":"@crave/farmblocks-modal","version":"3.1.13-alpha-new-label-5742.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.4-alpha-new-label-5742.1.5+868553f6","@crave/farmblocks-empty-state":"^4.1.12-alpha-new-label-5742.1.5+868553f6","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"868553f65440a9c443059bc2eb14ea8d033c4fdb","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.13-alpha-new-label-5742.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-yfEn1HoOajG8p437NAlIYuLkQA/vQ73kkpE1/FfUiTmPISe8swShfDrC66SQMPN4RDO/kTO3texG/ofMFQXg7Q==","shasum":"5c8718b4d61a6f061b596b16ac867d90c568eab6","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.13-alpha-new-label-5742.1.5.tgz","fileCount":12,"unpackedSize":43291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RM+CRA9TVsSAnZWagAAsEsQAKSxrF39xk/BNRqRzTSS\nrYgHjlY/noqu5gFaFodPUa5d6vXOPYDop05akBSPdwuPzjzw8/7qjvj4qeBY\nNumRAAmsTmet7zOoCy69I2VGUNX8YQsAgYGiI9tU4+5eANu85pJGLbamAqHa\nM+6aBaoDIsUkjEB26sVnRZhAqyAztqcRoW9Jdidh++vTdLb04sw5lKM2pEn3\nWB6ee9ftCYUQzL1j1selUTGM9azK4XXVyW0BV8n1qBNLehkXKKcrpz99nox4\nCNpz9tuA/8eCAhDDrbPxJxIPh2LUkli5n04cPlP/Tj+Qa69NdaB2EAOUmjCE\nhlOVNM3u1p1XcBtB+whvSiVkSU8QtLalx/17hzu198LsRlm8rZTA/x1PtDpe\nlJBi4uf/2Ko5jO/efwFnR4N2nCCnVMhjsOVYL7sT58WfHE/3MWL+6yT/6tZa\ntDCYvQkf/B6SoVLhZcrW+Zx8fRQ8EWRSFBel7w/ikFjaCyPE8Et6RU3hYy+k\nMmcho1zzda25JYYWeSNqMbWZcd9yJpZ+ESoGrNLcX/cNzSegO+eK41i1TVlJ\ng9Z0lEnzpJCGgkGwUP0/euTsnRFS7BujPXxOl3frd2B51G/zOZc8KaK6qg+3\n30AwgG45h2Xq0xAeavpBUHV03hu56mkU6qxzNPeDuzp/Z2SIwL1E39/Kn0jQ\no1dz\r\n=J8eR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGorv+/0NJ/MdJX7LT2/pyhfjJlgtn0K2RT9f8PjRulPAiBV5VvgXQGY3ZI4JoRf7RviLC4dQ8KVkHYiYFeMl6f55w=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.13-alpha-new-label-5742.1.5_1592595262537_0.22169629527958712"},"_hasShrinkwrap":false},"3.1.13-alpha-redesign-form-fields-5751.1.9":{"name":"@crave/farmblocks-modal","version":"3.1.13-alpha-redesign-form-fields-5751.1.9","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.4-alpha-redesign-form-fields-5751.1.9+460347c0","@crave/farmblocks-empty-state":"^4.1.12-alpha-redesign-form-fields-5751.1.9+460347c0","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"460347c067a56a7bd7f316c45b5fa96edb5ede83","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.13-alpha-redesign-form-fields-5751.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-0UNXdSBDstV4s/mstJnPW8D/lc1iAItT7uK3GNgwIj9z37pmZHONULF68JJ+pxQDiylxy05Jee006uhJQeUB/Q==","shasum":"2fa9a882555da524b97750e2776029e943bfa7ff","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.13-alpha-redesign-form-fields-5751.1.9.tgz","fileCount":12,"unpackedSize":43324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8g2LCRA9TVsSAnZWagAA1ncP/3jjKaIkOtx087C7D1Iy\nJEDpAzWE36ErhHxDd+VDPhDezuKBN/ebMFkSXeRWCpdG0yGCjaiTlUGD3TnR\nFNFIpdrxS5YgrgVZ3fy6K9wz1SlkpIC2BDEMRZ1hUVywVBhGN4/g2uMm7j16\nUG9Y6XPzrZZq61vMx2yc0djL1pRB/x6JTYtxFaVkPPEPx9n8cWe9nJPG602a\nyPLp8maoFtMx0IpwGtg+v7RHMDUpMfoS4g1NtJXDZpJEfO2hFgBNFZ90UORj\nSqkj3xwNT3tVxQax0NIZL6FHnaL+ptqPhuUUrPGgdFgdn6dlGHvScdPBg6MK\nRW4JSQBuPFGK0oHYDOjyPgO5c8XV19Pmm0EC6V4X20L+Y/SnNpgunkzoWVfE\njtLkFM4ax051o9R64zdk05ixBf5wDoHVoyjNBNUWBD3FX2nZMywW7/AeUEbx\nUyZvjZ7+0i95Wza9QaLbYE3EZWNZnykyOKTF7A9+ycn6zlD1qeyYHRrSgFUf\nOD20sdAIswAyFiu4Klb7CsyrDdyLKrByFfW2esWokhdkNztwhVxkVeOfR2gz\n8zWBbJJTdioUTzie2isVssMoydK2eqstfxOj3Gf40VOEvG+5JQJU8XeU+RVT\nBLyMukDdtsYxIXbSafT97GDCWa6995ByEebjCPV9/CpME7tdAmyLD04EIY9Z\n99/p\r\n=VceJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAxuvmSHS5aptHRmWG6HiAxJoCdaCRSKYJwi3t3Pa2z7AiAOoVX+SbeAaXR+bpj89I54XkRqQr7WD03vIPtW4B84bg=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.13-alpha-redesign-form-fields-5751.1.9_1592921482893_0.4803154030275514"},"_hasShrinkwrap":false},"3.1.13-alpha-redesign-form-fields-5753.1.9":{"name":"@crave/farmblocks-modal","version":"3.1.13-alpha-redesign-form-fields-5753.1.9","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.4-alpha-redesign-form-fields-5753.1.9+10dfe5cc","@crave/farmblocks-empty-state":"^4.1.12-alpha-redesign-form-fields-5753.1.9+10dfe5cc","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"10dfe5ccb18dc462ac1834b6b52a31c88bd79167","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.13-alpha-redesign-form-fields-5753.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-bwiO1B9JQMMAqEM0NesuAPqRjB33GVeH+ReAHG+EY6/FD70Yb+k0o+xi1RSw/5j+fJo/PZ5h9MT0fGgayTnJkw==","shasum":"2f4c61cac43c2a5a1980c4c833e31cf921015f5d","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.13-alpha-redesign-form-fields-5753.1.9.tgz","fileCount":12,"unpackedSize":43324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hb1CRA9TVsSAnZWagAAmbYP/iYqxwbxkNS838h1kysm\neevsqBAZw2kWswZOt1aCYifxpTbWvZmgoz4ob/Mf0FwDChzXfPiuvN+pUuXB\nvcf93NO0jWqmkLXn9vm9RmLmlc07jFtm4TO5rqgf0agEtX2CyHambnDE0f9O\njoCkhfZMnNyZIGF9ldVJCjErEzHZVk92kT7O7DL569muJdpFmezvG7e/hSIU\nJUGQGJaEMgD7+Hj1cPSRaxk9N2gkQ5C/rIfVb1xZETx9jm+OwOtLqdfd9AQK\nttIQm3E99mKch4KUzNwFZNrNFt5d/06JmXHOJYNSdzUl0AxqxoMaB00OEj4w\n34ECM3eSPVtzqxUeDLuyW9nEnDU65OAy1eWu0g8+avcNm58wE3YbxIlmxIIQ\nR4Tth27BGTGJENxj4hIa98q5rgOpHHxlQYHmav8DQea2xfWtCt2jDfP3TEsE\n4GCnAcerLlmCWyuNFoPmf4Wqz1SKgcWxZ+ZiuMUniLT8tCKrvmnkQX6gTWbo\nFvSpwyvctsom1dIfnPgE6Rd3hHx+TXZSwCIybRlUwys/J9ORQHNc3854Ycta\nQfPViPC4Iy1mDn8YeEu/imqEWR01Gs6XEbkruVrHXphHpUsfLXrIMv+cIFRG\ngLCKp6HwTrVU57ckq7AOl2vi+foaXBdFb08lBEmdYqEvWpEmdDzcYNsNZXaC\nBbr/\r\n=AtPc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcTOyGzsGOJPcKF7WZ+iZOTOAOTn4gT2G6RMp8yDhZ6AiEA2TWvncjbfjn4dD14u/gOclXok8+fO4WlOfLxmsJ6wAw="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.13-alpha-redesign-form-fields-5753.1.9_1592923893060_0.518686828125922"},"_hasShrinkwrap":false},"3.1.13-alpha-new-label-5765.1.5":{"name":"@crave/farmblocks-modal","version":"3.1.13-alpha-new-label-5765.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.4-alpha-new-label-5765.1.5+17a98f6f","@crave/farmblocks-empty-state":"^4.1.12-alpha-new-label-5765.1.5+17a98f6f","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"17a98f6fca5cbf7510f25f734e2d9310344f8d78","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.13-alpha-new-label-5765.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-IOGEgASzVYwiUAX9yQ3mavR9U3OahqGnG/LngLMg/PIAUWMii72dLcuoPTzt5lO7JMGd61ZwHjCZpPshkbvomg==","shasum":"becd615c0589e7022453bd2d1e54634a5cd20846","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.13-alpha-new-label-5765.1.5.tgz","fileCount":12,"unpackedSize":43291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9Jp7CRA9TVsSAnZWagAAYSkP/3pLF6vH95QQ6PXqy0HZ\n/qKFIjYULXmwWfz4oY/Nj+mPe7zh3+BWqJkoWF2KXcpF1dE8vKkwSZfRO2xB\n4Akw8XFj9I3iuZQXwvryYpCmtoQPBvpQ88rbzi5Bxd/Bx3CBuXxJq+x9Rj29\nxVva4AILQSJhp0oDZJtbv4zomtYcWfj6a/291gPVjL2CSORFEn2s3aujI5bb\nUskpCp1I3f1FKHxCtM3VgB3VTzu00ysclPAWOl1GQxFHnna6AqmPiKUINUWx\nDyHvVLtF6M3yLQkWJ9YPgAPrfL8dd9unZjlEEIJU5MUeOJm70V0UdHOlwvgS\nNP3dh3qjVNtlgE44ew8m0qHV4/kpKSjDckpb/ND06NfO+pvd7bPZYW+Wg1zK\nUuHFbubTNLnqDHyMQ7FhZ5QpGkk4cfwP1Y7Lx7OSVSSZBFUAWHr+PZriRVg7\n6hY45Gi/FJ/U36wNa96NTQGL1p5eSllIxj5Yggv+IyV+z0l1eyQKs/7vthhM\nFwyapLP4ZXAW+Cg2u9J5zAE4TScELDOEvNT99XnTBujDMt+g/Ylz7dLzaxr5\n96zNq+U3HdJ5gFYNQI+d9f/MsGcKcUZYzVyOwvmSN4NawJx7G+tVFfiyfF/v\nL9oe8lR+4AQfNUOKUrWq+hAvpcU4uLi1iZHPjhQnFickDZ6934h4BwmEM5TM\npBiN\r\n=PUzL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+I0EBYpsp62XM/3oNH3q4xpdDrWs9EVuoEG/nbv85XQIgae/Rl6TlKhGLWtlHA/qL5Bxva/9lVB6xx+lrG8xdQMw="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.13-alpha-new-label-5765.1.5_1593088634938_0.5139836083699452"},"_hasShrinkwrap":false},"3.1.13":{"name":"@crave/farmblocks-modal","version":"3.1.13","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.4","@crave/farmblocks-empty-state":"^4.1.12","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"900495453780bf6dabe00c745a05f0839c0a7b54","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.13","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Pm4QzgSWrqyR8P9EVjMD/BUbhOBJd5TtCJgFKNUWTzPYcDB/Sq0MPdfdRYeK1OIWXct0iyWFwgHDFz7iArIvRQ==","shasum":"b774c4dad64bc51d5157f4936ac3cf2065e89ec3","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.13.tgz","fileCount":12,"unpackedSize":43397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9MhICRA9TVsSAnZWagAAMDsQAKG+DbbE4cUiMTrqd4G8\nCGO/VQYnKckhV9XSMweyQbga8qn7HXm15k6NPnUcojVpw5SsPdMyrXq3iaZ/\nczCgGt0ukG32zvvYg/QvSZn9tnDpbB/rdQHgJx4JE43f2YlIS2AIJVIsFanc\nf+JftX5hMde2UItwkwk/XGZBbyig8b881KUFY2Liwp3Kj7kuBSyLtX+Zjjq8\nwCkl1r4MicTbiNy3cYLlkIeOL+l33tJfaot//2aLfcvhXRp9mLI+/4EPkcog\nMh9dXX/J+Xxv/EFWSCDXq8fTMoUKK8rXqvxwXTrU+uH59bZj8L/0z+AG2PUE\naKwXmHcxuYx2pP9G+S9cGdJHBHdY788By0ExU8OPyMvDwFy/+PdZEkiTgdT4\nvGPTTx0jjfdQ5WXN1DGl460K/4ipSCAQBKiTNmvCYsgKCUdCFrn711xTtgtw\nQA6keq4PYhONZFYCHkc6axaf0UJI5UUDETvAYLOiXYzvepsN8/BCL1deO5L8\n5M42Sz3jS1t8dmR6Xby+kJ+hxexi8f2mHy8CRglojbxU35bVvqdrLx8gj+zV\nRZy8xXh+SHQjIomLmnfeNv9YXtAGAt8gV/8O4jRKqXWJsdjbvZn4ghULDjEq\n61hZFx8o4OjHmAcKPrnQigjOPdD6Ch6fGDCRVHXAkOyUXew1sumvUeAE4KzE\n4elu\r\n=FUIm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNoeHjPCc8XUiQ/tIzZXh1EvkJ+aF0LqUSxQpe4X4HbwIgC8cCb6cM+9W8QiRenl60nVolVmRIN3XFU1qmXl+uUAc="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.13_1593100359568_0.3387041067153387"},"_hasShrinkwrap":false},"3.1.13-alpha-redesign-form-fields-5772.1.8":{"name":"@crave/farmblocks-modal","version":"3.1.13-alpha-redesign-form-fields-5772.1.8","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.4-alpha-redesign-form-fields-5772.1.8+c522bb30","@crave/farmblocks-empty-state":"^4.1.12-alpha-redesign-form-fields-5772.1.8+c522bb30","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"c522bb3090eae71437fc84d99184b006288bfa06","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.13-alpha-redesign-form-fields-5772.1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-1oPOp/Ugj5HlLHy9p1fEm22ha21+psXESPBtl8Ngu7BH/rnTRttqczJU8KwUE0Qd1Z2GIrZwbh3HihfzKf80fQ==","shasum":"b810bc67258034fce754128d3b20b9da6efe618a","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.13-alpha-redesign-form-fields-5772.1.8.tgz","fileCount":12,"unpackedSize":43324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9NBXCRA9TVsSAnZWagAAp5QP/0dxqbcxJRyftc0aPee4\n8fE+h1ePQvhQ+WPLW3hr+NhgInzCWmrRNNwvfAOlTwP+umZORyLShsCGAVMN\nah7b1JI8ebO7gBZOSCK9L3qSgx3dZ3bk7HI+rmwP0oMB07vA/+95Af7NnIa+\nYLLqhETDv2oNKrynQc3BmIaYgTBd3Y2OEdyvCEeOgs5GrajI9P3fhRKm5CSo\nrxx3F/bOVYmG2M+Qc8gHGILiR2sJ7YfHSvudMQzoobE+1AZN7f77TNpGpYpt\nD9xQAJZuNbr8NPYAeEe5k8GH15rFOtCyZHaczKi7/0oDmK7uf+yAbQSsDQtR\nYgwfsdpiSemkfSVHpjoYAFZ1LiryoMRVAZZdRguenUM6XI7mmwz42rxyLqwS\nRfr8+cADZobL0krtGj+z3YrduEQC0aeZVl4/BZfSOz785RVCS4MePd1kyCZn\ngaWRYomkvundZpJqu+ZiL6m6hLiAS8bSf3Y6BlfYcxq0S2xMiOiCBCKyp48E\nURgssiT9uO5NVOtQZLNyxGxKurk10m7j4M4jjcH9JwSnVPEqvVF/XljtBbNI\nR3TRS8Ca6AEgw6suUMYUSx45qzTm6uaufKGpuVimva/dS4aYEMR3hnRX5HdM\nYtLiDpu1f365udRJ718a2Y4T4ZyeMaCju/EgEBNl3ZHxdhfoXnGA6iv7zXOA\nVbzB\r\n=CIro\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTaI8b30lZts75qwpaj2W4a5+Kdxzkny6f05JvU9+NxAiAP0HqlKCE/QpZ/sSmvw6aeoI8pkKXejvIDhNFaKPTrfw=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.13-alpha-redesign-form-fields-5772.1.8_1593102422993_0.24495939483385487"},"_hasShrinkwrap":false},"3.1.14-alpha-redesign-form-fields-5774.1.4":{"name":"@crave/farmblocks-modal","version":"3.1.14-alpha-redesign-form-fields-5774.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.5-alpha-redesign-form-fields-5774.1.4+c0a0dfc0","@crave/farmblocks-empty-state":"^4.1.13-alpha-redesign-form-fields-5774.1.4+c0a0dfc0","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"c0a0dfc0987d8ce29815780d78fc283480e297df","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.14-alpha-redesign-form-fields-5774.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Ors0L2iN1EeI88e0A/Tqogq6eEaUjaWlucEx+3HalMYX7zEdIw6i+h2xk4rnzn9JsTMW1oM4tcQgxwDL1G/e6Q==","shasum":"e0d0490ee121bf0dc84ae962388b31ef49fc44ad","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.14-alpha-redesign-form-fields-5774.1.4.tgz","fileCount":12,"unpackedSize":43532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9NFjCRA9TVsSAnZWagAAC6AP/0dEZLrBlAnVtLAbVo87\nlZS+Bok3stzsztC9mO6Ehu2SpNNPOh5Vt0VccIi38UGDUeX0PyoVhjG2o1S6\n+Yl6dR92M5rWMUrtn4sPpbRZFKILnU25Tk7yo2z/iikupX0gkAy5Kc3r4R20\nTwUh3RaI0GoW4X03QXOAJUa0b4H3HzLsOMCVby4c2IVCPatD2PDWfsOAzyHJ\nwjnwrWL8f+eyq2U39Rnc+a12sAbk6Jh7h6vonKRunQS4Y8fNtHRZ4G74BfHJ\n+9Zn7AEhL8TsQFpW+ej8gUuJhaTDYawrLtvBM2UpcHygQj6+FaHhCA+93ST1\naS3+kQT10h0OXAZ7rPXNHx4oCj57HNjx3oRoOE7g+gPtkVxZtek1wrwYx/Dq\nhIfh+gLgYTD9prAWaoptmnXwKkeAmM3DRbH+IJmsvA44vnHBKWFrH+SQn+GK\nmBMySvIux4TX1eHEQRAl2CA+jlFrsKN8AA593qdTyWeI/YHXUTtApzzrBYf1\ng9AlvayAvLoLzfQMyqdm7Z+qhRuJ9p8AkQl3ydnkYTviJoRj7csy+XgfOvYM\nKtZ2kCu2iw1yWmCGmZPjCdc/S0Kg1f/usFeZkT9HI6w8USmZOtCvOXF4GsAn\nE35jhSjyfhu1KWp1AuiBiT1zuanTp87hu6TJOox7dmu1qjb5GYkFl9U5/+/t\njBIA\r\n=tngq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHahxeOYea8vQbb8v/83KlvG0yOyxQRIqfd+ftiu8HxzAiALgzWM6zAo5bxTF8HJdRYkolmrrh9rcAg111BUpO0V4Q=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.14-alpha-redesign-form-fields-5774.1.4_1593102690900_0.9499289355301543"},"_hasShrinkwrap":false},"3.1.14-alpha-redesign-form-fields-5775.1.6":{"name":"@crave/farmblocks-modal","version":"3.1.14-alpha-redesign-form-fields-5775.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.5-alpha-redesign-form-fields-5775.1.6+4fcbb59c","@crave/farmblocks-empty-state":"^4.1.13-alpha-redesign-form-fields-5775.1.6+4fcbb59c","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4fcbb59c5ad9d1844f18b102efa792f409ed61d5","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.14-alpha-redesign-form-fields-5775.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-hfZWktBb85qhM0JVBl9rxwCdiww7n1+PGCjz0NAN2GDZ0uVF6NuZxMsfMx9XKpITTdX8UOy2L2SAF7JED4hiPw==","shasum":"b746ebe8be788566038e7b5235a34494de396158","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.14-alpha-redesign-form-fields-5775.1.6.tgz","fileCount":12,"unpackedSize":43532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9NM3CRA9TVsSAnZWagAAT7QP/j++eVdtLBlwphHCC0yu\ngz9NQGyr2xUsuIA+7sn/tiLJj079s8TTTkS7ijIczzcT/W26ZRTEVkHVqJIP\nEl76u3zsJOSx3c/KT+zY560QkFi2cjnAC7kcwAyJC5NpFBb5v4YN3R995U7o\n4VONldjFDlqsduWpP34cCMnHojT2H0dvHwBntU2kIvkgUHT9EfX+Qlai9jjq\n0vuleiTOFUr/pQDE29yCXUrH3nAsRvnWJJxirh3btzliSLtZy+dixQoGsiq4\noC5MbIQdDP7bZogQ9moJgp0F3IIe9QH6d0EigiX8Vrk1twlniOkVm7ybGMUc\nEX9TTmfykmHeXUoOELfXRWDmm7ZNe3jkfJfHiB0YWgTr9bTYrkgmrKdooHJb\nlnVP8+rmQpHM/VKr5IPcMh+BnxDB0gn659Padr2usME3XS4kFFIYF6qKcNsh\nBYu4mC09JDqXEHLnnTsF83/sKOYA1CYvuwpoUHSLhpjYUaOpjOI8+cvnzcnJ\ndG7naRcNan5Ic6QylPRdeNd/VtDOFPmqWXMvIlah0C6hX1Dgt5gp2xnmijgV\nQyOpH1Fe4RbmzpbpWGQ3W0FpmHAXNZraCW1r/7XkBcuDyHbDx+LKJn0riG28\n+gXRJa6uCO55/Jd3v70y88CxYbXOZ/1IJXLbVpxSU9yfJMGo0oGprfICz+Pa\nR/mz\r\n=03TE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAeEAfwgdMFeyjjry/ANY9dnoHSVB7wdy+ninE3uBew1AiEAmDJ6ChMUjP1Df0n+19nt0K5wQq/t0AK0IzI8xV5/TkM="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.14-alpha-redesign-form-fields-5775.1.6_1593103158885_0.35392664453877565"},"_hasShrinkwrap":false},"3.1.14-alpha-redesign-form-fields-5777.1.6":{"name":"@crave/farmblocks-modal","version":"3.1.14-alpha-redesign-form-fields-5777.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.5-alpha-redesign-form-fields-5777.1.6+49c322e7","@crave/farmblocks-empty-state":"^4.1.13-alpha-redesign-form-fields-5777.1.6+49c322e7","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"49c322e77dd1c883b4ef795fedbfb875750e861c","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.14-alpha-redesign-form-fields-5777.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-kxJKA5uz6XTJe6LZzrDnIGer50MQI+9nij44ON7UG3T18r2f9ZKPB+51HVrHKLsW0/2xnndd08+Ia5jhuZlknQ==","shasum":"44ac7332ad4b34dcb2f1b7c1af680f0dd42520e0","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.14-alpha-redesign-form-fields-5777.1.6.tgz","fileCount":12,"unpackedSize":43532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9NXWCRA9TVsSAnZWagAAAIMP/Aq36o/YEbN5MMaJI4Sr\njkqRhRsfjTczR84JN752blux4qmmIbeSXAG7NhfbQKWeF4Pe/80gpZ7jI/LK\n7zY1/d5oNDF1xLO9Wvd7dbl4y/C9k2uf2uoqF0/6Q9RlpQRc+hTl/xeFL+rg\nXSINnnzoNBImKRxRLZ7I/9V6vabQ+JjfImVNlyZd58rms91m5sunqrbNSr2x\nVl2EXv5TtHVI7f5Xq/e6RoahupiHQvS5KvRwF0Cx0XcmuZeFu6P21HwKIvIx\ntZQb4WEAmJlpWtT9kGyHHiDDb4xo09kGvxNWF3SrSfE8aVRW+ZmYa4jzt6FF\nI6qVnCyp8cMymjX9HFeZjJwesjb7m52rGRevMEARj8WtEVvSHg40TzVp2ZSh\nMjjCbljptL/oNqqKtGK/y3TFp2xsFqBAGHFIWaBPjBTKmZC2aHzi/cmTHZlE\nYvG91b9WBYZ+c7UJxFiwCbwTC25x6vyXKFgH4RQmJQxDlFozEXRJzcvXhXjv\nZd3w2gZhrZsAxXLl/JxE7OuhUaQ8wxSV6taghRixQtNsQGO9ty6PSIMYn1hw\nZOHlQxo2tHGdco1uPo0F3gi3Lt4u1xfdBGgWMTLKiyxsAPuOkTuZX+/1lbks\nd2W2iv1HAe9vMe5bNy2X2e0wh918rBoQYWyBtcrA1UaaSIerV46j1EHMXcYO\nb2JM\r\n=puks\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZ+XwpuQgVaMzpqGOCF5KWlro71ScJ1F3vuh0Eo2xwfwIgBI/Woo/Sdi1LJIsNd2CJQF2ZfvRnNvokAqc59/6FoYU="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.14-alpha-redesign-form-fields-5777.1.6_1593103829911_0.6486712058747284"},"_hasShrinkwrap":false},"3.1.14-alpha-redesign-form-fields-5789.1.7":{"name":"@crave/farmblocks-modal","version":"3.1.14-alpha-redesign-form-fields-5789.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.5-alpha-redesign-form-fields-5789.1.7+6153dd6c","@crave/farmblocks-empty-state":"^4.1.13-alpha-redesign-form-fields-5789.1.7+6153dd6c","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"6153dd6c550579eda90f7dbb7495b3b7355cab31","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.14-alpha-redesign-form-fields-5789.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-z6Mgh9JKf1E3FeXgZpgeHdq1RUzSwyQMOfQzVT/hZxXTRTJVB9a/zYnTwTIDF2IAPyGeKllLZGwVW69RfZDGTA==","shasum":"882a74ed77b06fc5736ae783dfe1221879683d9a","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.14-alpha-redesign-form-fields-5789.1.7.tgz","fileCount":12,"unpackedSize":43532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+0YRCRA9TVsSAnZWagAA3cQP/1zukAumCTcca7vju9sC\nPuBtTjJV/vKrtPYxMe0MGS4JDIeVFPcePhp9vAkClqTU4xz6jlBNvU8Tg3+b\njvfnceZvSt1rriTGXqu9aRDCsR2EBaYpK4FTX05HU3FrBeMFWGwGZ0e0aLNG\nqq9T+dR2yVaZObWwC3Bb2eOPSuZToyC+H4EcQP5ETx7rQtw4Gff6IlufrTmA\nU7+KY6U93bs0pJdQsMFqk6mmFkJ+7XrqFnCxNSMyDe7kSdDYrm8BMcQWl5rh\nzcNJ2SYYnffPE0PexNQ8qSkOHACTuw+6LRdhnHRd1UgxqvNruXktVr2RpKGN\nqncZCeG2GUPccRHiwh6OBhAstylZWGbH7sdc+eJ845+WFe2Tbo8TEz12hgG7\ngubdLueFZ+A3noj2SKsFfOL5DBM8RWZ0CE/SXSPu6Yx2LJkTX+em8JrFp0in\n3S+QUSkB4mai1egtWs07q/H2amo595gAZ2TXAA7lDlNA9yV2uZZp7unir75S\n4SBZLCXJMQWjDU/1+jgDc35Ci0CW65pou/g0kQUDQCokCUnyfLk+SnZIxvhr\neLdSQA2iRI4OsXj4yfQVeUVC3jUb4DWgVm4ZEyld5fCybcRy5m5lkah6D9wC\nkjDfCcLE44VlbtFhQjkD98dQ4eVw5dPxmg9hTTJpIaitAo821nDt+j9VOc4V\nrj33\r\n=/gry\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdSSx47Q9bIqmRysM/pP4oqKCvtr+ycmmSZvo7RkUpMAiEAmx9Rz6ZyYCauypTnzFHAOGeGWmJMhi3bu6lZ60qGHkQ="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.14-alpha-redesign-form-fields-5789.1.7_1593525776652_0.49880523831387813"},"_hasShrinkwrap":false},"3.1.14":{"name":"@crave/farmblocks-modal","version":"3.1.14","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.4","@crave/farmblocks-card":"^3.1.5","@crave/farmblocks-empty-state":"^4.1.13","@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"a63e7c1f90592b684fc83fe6b721c2b5231037d5","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.14","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-c4QtFLuVyygex7aDYi44UNnk0WLk9TKITE+nHaYJPgY2KOYfAjPfMF2V8hQ91qF5xuKmYxeSpnxCTId3N3jXJg==","shasum":"768a6877ddc75471ea229c9de60cce13571f68d1","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.14.tgz","fileCount":12,"unpackedSize":43605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+0fqCRA9TVsSAnZWagAAmwwP/2TDXddF01ZWu5GViX29\nQrEWIA1CHGRTGzzXysqIca72X2ixyjZzWk+pl5ETMIK+1mF96pohjaAWhkWC\nXhbWk/TJAxgNY4kL017lcdb3Sn2atFW2EBFqda4FCpwL0Xo7j6/F5hUeR51L\nShGTrFEaMNk2heKqzVzQg087FOC4e8bhjBEmwiNdF3WPBhKkGyiYlAVPKvBI\nhZLz8HuSX5dJNpIY1WaKcCMaw52SZp28QyhVJzpgsqOLE7GQxBXdmg+OD/ng\nfSnD1mgKDRS4sz8RQffVM4gaNLviK0UIeDOHmRrcTbNrjrchmu0RlLBVUrlA\nLflDltxrmTbTZwKpzDcNLCe9dtkz15/+SuESQ6ovoSMbr24jjCtG6JZGALRA\n9KVEqcgCurbLGN6BHbQ/wFFx5IHwYDn/4zy91MCR14oS3jC7zm4Mf49F5iVV\nP2xHoNFLc0dtsaoiGCkw3y1KznQdBXgbHfpI2G9X8RD3eUz/SYEcDTjD+GrS\nNWxQq8SvmB8xZ8ZZ65LXK2nC6RhiAejMNhFQec2WfKa6Imz3z28CRsT0oOKc\n6TOJtUnppm1qZBhAltZm7UyWkMRN0d2PrNuXIo95Q3QTzlfPmQ0hT/XhYvwK\nMJD9Uu1hzFGJWljt66yHYRu6mbdZXfQR+a4QW41IcKwPg3I+WJrjbPimWzDE\n+Rue\r\n=s66/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA4HR3gy504UyegqT8rpuJMpuZIGiXHaZm7d4LKM6znbAiEAoNeDiXxfp1LJXjNaXTmTekQj603CBASIMUNsJxBClF4="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.14_1593526250287_0.33474514408998624"},"_hasShrinkwrap":false},"3.1.15-alpha-dropdown-button-props-5805.1.3":{"name":"@crave/farmblocks-modal","version":"3.1.15-alpha-dropdown-button-props-5805.1.3","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.5-alpha-dropdown-button-props-5805.1.15+087d20d5","@crave/farmblocks-card":"^3.1.6-alpha-dropdown-button-props-5805.1.3+087d20d5","@crave/farmblocks-empty-state":"^4.1.14-alpha-dropdown-button-props-5805.1.3+087d20d5","@crave/farmblocks-icon":"^0.6.2-alpha-dropdown-button-props-5805.1.15+087d20d5","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"087d20d5ca67da637b28d58fb92e302aa787a58b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.15-alpha-dropdown-button-props-5805.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Z3L+SVaVWayqNKEno4NPWh3DjI5xqowG5eEopR/S9fxSM66zU7ZNGD/ocNkEe4+Rhpn5Mnro0tq4mvxagNdF8Q==","shasum":"3a3eb1c8c90689a79d5441e44bb47f90e4678011","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.15-alpha-dropdown-button-props-5805.1.3.tgz","fileCount":12,"unpackedSize":43837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBJOkCRA9TVsSAnZWagAAaRsP/i1p83TFIn+ngnCqEcj1\n2+W6JRNd5OE8FbIBhzDtKsw6Wrhz8lT/WYIY6FrNCoEoGjHx/eM1qbKNi/Dk\ngY1VxzbfqG2VQgUlLTBdTsYTeB4QqzNAMFURl8mi9p8gpwgxMem6k5LvZXsn\n6lvY3B6fg/bT0NzwS0s3FTwvAb/T+dnB9sbVsBvI7Yy/WtpTlujT+pw08k5C\n38lqqNS5kxwz7xk0svowin/jUwEhwH76t0DQNZIUb1SsfPLM2O2sg9XxnHmT\nEXwDQW7Bfte2P0nsFV/Prq472V1EX09XLpJs2wFVwMqXqVKYBqN7bPiJuVp1\nbfm15CBpPE03en/mu4BivJCG7z72+i5rv03JL3Yj7Tc03PF7cvjn9VBNncKr\n0XId1CqbQ2XNWE0We7bp6t7nujZ+qvCKvSvqHN66rK4lhubKbBkGTORyhvvU\n4tQrehhlmfFgHfaUbdVRlQlkT8ShvgCDk+xVgq6x4BZkR2vq9iO0peruMAXy\n9l72e26KyU+LtJ0OLOrOb2CkV9iqlS1hlsnHmPWQvJ9CJpE3QVq0YbUI9O/e\ndCnB421UGHn44GWmsl+bdxuACR40rP4kIKNQjnqOZAeyThctIsuEVlA9D+QH\nOFaF9Khi22BGJP0BmOqlv/3xp9AU9WFIC12bwz4mOP1ql2g2xRqvmEWQFXBt\nUwKL\r\n=vruF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWeCpxsL7zynr8W9iYumRMOq3WmiF+UjgTmYbeOuvUnAIhAO1os+eqkqVGBb86rpvHaMUYo6CvOALm0LrCmLLtGweq"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.15-alpha-dropdown-button-props-5805.1.3_1594135459956_0.8868918079446164"},"_hasShrinkwrap":false},"3.1.15":{"name":"@crave/farmblocks-modal","version":"3.1.15","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.5","@crave/farmblocks-card":"^3.1.6","@crave/farmblocks-empty-state":"^4.1.14","@crave/farmblocks-icon":"^0.7.0","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"29ab4fc429ced210f74af9f5f1c06a8ac3d33af9","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@3.1.15","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-jhDe1d6O+miq5B25o/iL4Md/EnSa1aY1bgvJOqP4gdwNF6TRrZjXWu62eluBGgDoDLqaH+6liz+Ubn2m8QJ57Q==","shasum":"c407724341141e9362f62d69601f27639d237cc4","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.15.tgz","fileCount":12,"unpackedSize":43813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBbDUCRA9TVsSAnZWagAA8/kP/0mb/3dI9AwWdpKkJTJL\nrquVZlX+gyt28pu5V+kczhwPaWm0Vi2QqG9oII2GkB5w9Ab/TvKctnu7qLJd\nzK5PR0H4Vy+uYUJc6gjL96slOzE4zY0wQ0BpAnlrVHIajGKagZk7Sm8zE2He\nEtwh1ZYoYdqB07YZz58AJ8pIcjGArLNcDLobWjQIXqNpXAXqOJciF4Z1kFj6\n3rjot2iQZKno7aVkQOAMjzwZOCmuMWAx5qj4Bm9Jprcuw/B6F4KRiHkUHhh2\njLtADx+uOGw1WhcO/zHCbaBiSclyCgfOQR6KBXwStuictlWHCGRAX4jsj4pW\nUnH2x1pHVaHS/xRMLZxFFt0x4dxmNtXJg86woRFsyxjt8dVKIBujwebh/hpk\nIhY0iRFSbQaXLBdRJonXa3DUzU44bY7kna4KZyOKqSKuH9VjnocSQmyUqs54\n9qNa8/XSsOTw171AQ0M8V98TBAk1Yxj/50hChAXR+0lGUFR75VQoS9DYX5nG\nIw7VJA+GYObo7YC5YfVYMmcuvoqixLYuMhwzlFj6Q+JmQyBGhlRKbMmrEtiH\nSyH45WwMrQVaRD6M/e2DW93iTNB4tj70SIym02+O190JtSu9uWKViFsX8LXR\n1uvDNtFEWgmtUnJ9efdpgxq5TtSqn17GL8tooM8jxuTd5bsGQwcyz1M7o06g\nMEr/\r\n=/1d9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoooq4L1RBEBI/o9dm+u/Ffh+ylVnLPKes0tWBE62CfQIhAJ5MHeWw6Iy73TQoussQYFTOA8+Q1n7fuoJkoAILJiyq"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.15_1594208468551_0.20493223355750656"},"_hasShrinkwrap":false},"3.1.16-alpha-fix-icons-react-import-5808.1.2":{"name":"@crave/farmblocks-modal","version":"3.1.16-alpha-fix-icons-react-import-5808.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.6-alpha-fix-icons-react-import-5808.1.2+0cdbbcaf","@crave/farmblocks-card":"^3.1.7-alpha-fix-icons-react-import-5808.1.2+0cdbbcaf","@crave/farmblocks-empty-state":"^4.1.15-alpha-fix-icons-react-import-5808.1.2+0cdbbcaf","@crave/farmblocks-icon":"^0.7.1-alpha-fix-icons-react-import-5808.1.2+0cdbbcaf","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"0cdbbcaf66b03f65920eec7a6627deecb674d66b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.16-alpha-fix-icons-react-import-5808.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-70fjszWvH89Un7tuo5mZNZIlRPiRI1knNe6IRAMhLDcppZbtszysEZvZiApWb0O6Pcbr8apPs8I1T/4gysHaBw==","shasum":"2280d0b1b5464c1c6e1dcadbf8abe71b26a89f50","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.16-alpha-fix-icons-react-import-5808.1.2.tgz","fileCount":12,"unpackedSize":44048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBy/NCRA9TVsSAnZWagAAHNwP/1VkqEQOFwGn5kJsogT2\n/vDIOxKEP7EvFSxGd4w8gA/MIkiwzY1VKIwAJePYio2xDGTZ0cYL1FaN5M50\nxjTd9Fx6YFoHyaiGddMzadiIJtHgTQ6Fo0DZ6OOkmYjsAO8tW5h9eTud2qA+\nvZXlLveFCp6C4MnOfjZHZJDLc768xnNI0CL0ScyBrGcWT5aG24DrbzkN2TKr\nCeKb6ciYEl8R0QEyLHCXld4I6oZPTUaUC1tE7LQ15qoVDzkkVYk7N/6TGP69\ndnVn+GLCPF5z/spkum8rO0leRILrxmln+IheT3lNQX4G/NPtSrCnmkjBxkgi\nbVVuKGbUL7eN78ZNaHqLM+UB11DuqE6/LQ5sLuX4hWVwt65/qCToev5HNEZD\nOgUfmMUtVN26q0LrUt8K3Bo2EEZxfJ7LCdTM3AUex1crumLvTjuB8u7mTnSX\nMrSWV80DkAdhFG0lecSrvyvO3pagxtHds/2cj/THm9X4h4eua8iBZHsE/KjI\nufYynT6DdkP5AUTQUnw3QslAk+5Je8GdZ2N5qq3I8RIkS7G+vJCDaK+2ufGv\nmzmoyeER2J6/8FmPtuXSKx+GAaxanMSzpHbB+wHj+pKP/GfB8gGeHcQZVUPl\nqDcJESx36y8aSVQTWR4PAqHe0AWcPJBf3pRDYNZmPJBMKfeOrhizGGyYM4Qy\nAZ2k\r\n=fv0c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMgoBus9/vrZ3Gli9yifPUaMFz9CkWL5/djXtcG5LmXwIhAKAdp+5iAnFZ23am+tmP8CXZuQ3O8dlXrKiqNKEZ0rCE"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.16-alpha-fix-icons-react-import-5808.1.2_1594306509354_0.9642238533850602"},"_hasShrinkwrap":false},"3.1.16-alpha-fix-icons-react-import-5810.1.3":{"name":"@crave/farmblocks-modal","version":"3.1.16-alpha-fix-icons-react-import-5810.1.3","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.6-alpha-fix-icons-react-import-5810.1.3+9340310d","@crave/farmblocks-card":"^3.1.7-alpha-fix-icons-react-import-5810.1.3+9340310d","@crave/farmblocks-empty-state":"^4.1.15-alpha-fix-icons-react-import-5810.1.3+9340310d","@crave/farmblocks-icon":"^0.7.1-alpha-fix-icons-react-import-5810.1.3+9340310d","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"9340310dfa8fe15c8c0b0893fc6dc14cb96f6c67","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.16-alpha-fix-icons-react-import-5810.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-JhN1UAdBOU+BG0jmDC01sKMT+pICFhsI5k/jW2vtYE6ENWq3j7zhD+CWu497zPPPf2fbAVHd3su+UwM2uZ9Xog==","shasum":"0adba9de2344eea8f727ffa79e8626e98698a7c3","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.16-alpha-fix-icons-react-import-5810.1.3.tgz","fileCount":12,"unpackedSize":44048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB0GACRA9TVsSAnZWagAA4qMP/0j0MwZLvxDhPtXG8/Mb\nNs+03mNvBTpbWb8d+EWJ1a+PpmDlvFij8mph7j/J5cdzs9Vw4UkFaFzatWr7\nmUo/1r/z0/BVJKl1QiDbBlWW1nsOHPt41oZjpFPDGWwJ1kRGXn/HD30+XA31\nvEMWPrc+LW/qxQvueAUSvKNBo6ylv6/9KNrsYathmLbo0c3nsPw6K0JYVcuz\nftPNw9+tmbgrwd/A2RJsZubAS9HCqVNcVas8AnJ2FPZ+zHN3KJ5V8Yfa3Faa\noHAUMbhp+HkHlEwiJf/s0Mo5dmMKcQdeHBPWbB44q/mqElIWJSsKTqpkO0+6\neCnz7Gb//LiMId8EBrOW/erqWrMVhq6zhD2rFsm1BbJdInR5GvlYOjSH4Ycj\nTtPGlsUnIXx4CdAugQz4iffVH/TTLq+qkU36Refw6NgWxhBQboFQawBZtJCU\nbtzmJWSFtrITnz0RzzB1WllETC03iavT1qNHXX8P549TIgmxF678YJFgi68r\nOlv374KLpymGV550kegN+hCkCiEysM03ZxlpSAckOp3krhJXXGZ+K65QD6tH\n5xZN333lhhfwjQZhaldS5VvCb9VjJVpWMBsDG2ZwvpUnxDj8MC/0335XfBMj\nCrVOj1McetKzdW66LEcXetJXkcOT8TuUd8Ic/nmJJDytmhBKV7qbMYf3ftc/\nH29p\r\n=TYj0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGzbtvAZZUzs+I8tbg8LjCt1MBg/W8/TQzvl7Dz1RJZ/AiEAuHugBhaLTytmyP82ryC215jUEm/aIfI/8iNBG1QowBY="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.16-alpha-fix-icons-react-import-5810.1.3_1594311040281_0.242518098890814"},"_hasShrinkwrap":false},"3.1.16-alpha-fix-icons-react-import-5812.1.4":{"name":"@crave/farmblocks-modal","version":"3.1.16-alpha-fix-icons-react-import-5812.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.6-alpha-fix-icons-react-import-5812.1.4+a6b9188c","@crave/farmblocks-card":"^3.1.7-alpha-fix-icons-react-import-5812.1.4+a6b9188c","@crave/farmblocks-empty-state":"^4.1.15-alpha-fix-icons-react-import-5812.1.4+a6b9188c","@crave/farmblocks-icon":"^0.7.1-alpha-fix-icons-react-import-5812.1.4+a6b9188c","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"a6b9188cc7e45d2be17bc698d73ae301cbb79ec3","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.16-alpha-fix-icons-react-import-5812.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Rhb4jXHLUI6Z9py6tlPg9d/UG3mnP5dwlE1PF59Te4IgjC0fHUKMrkh14DJIRcLJAVwYepQIQ39Z9rZZ3JDnBg==","shasum":"aa533fb3e9cc62d53570e8dae2bb976b923066f9","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.16-alpha-fix-icons-react-import-5812.1.4.tgz","fileCount":12,"unpackedSize":44048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB0QpCRA9TVsSAnZWagAAYUUP/Ryzen48NxOsryH/zano\ntDiWRua6CXMB00cGdkWXljn0qFJyKau0IsgEHs2zoJeik6Hal1KeMLcLcfHG\nhQoURtKwOwKqUt2cvw2l8tTUklw+sIc9r9pdlsDDVIRCuMZZfuwuHUEvp5Gq\nR4nVsPceSlO1os+cd0GMsRDnKi4PHIOK9uC7Rb0/wT3AxkGm7CcQkS76rvoD\nhYQgsqAFVNbtJUJ/h0xtGj7JjT4Sib1wPgs9CRefUlkskOPtcmKlyjFLJV60\n9NGQ1JTuC2eYaOk6J5T262rxFmdE0xtE4OsEudpYrIoYfRMz9aiNmy1gP4Pd\nOHc+n2xqNUqiBORg1SttX6ouRAsHTUCHlEFuGNCLFsbywNg/qQFcCjLbMtHQ\nQmhYqIyxTI82gqXOLl4Vjhxa+uVP8Ppvo9fr0MSuKiAC5pl0daUOF6In+3bT\nVlKaVB0D1CMdIq2yDYtN+43y/+DKMWYaeGs+IyC4rYeGEHTh4QVsokcafDo2\ntpXll1LPngcKM1T6sF2JW4U89RPOXo31PMuSiuIbVUvVBsHZLhWbRdDpxoVV\nqMHe4TRELWbvHShVw4F6BE/y3YRnR16CYTr84qiwbN8Lo+PbRMO/KsXzctuF\n9zW1SMphJLDk1pqMpHH26v/z+Mfn+cJeMpw7TbZ5+Uq39bMLikZ6phTN7j/M\nEZ3i\r\n=xGLJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOIgoN66mv2ubEN7jQ/KGxEtEaqZHdgKx/iXnwP9lXUAiEA1Bs8GhKTvReg5kdf962ewqV4QaI7eHZJQ2vGz3QT4zY="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.16-alpha-fix-icons-react-import-5812.1.4_1594311719551_0.7427814190895987"},"_hasShrinkwrap":false},"3.1.16-alpha-fix-icons-react-import-5814.1.2":{"name":"@crave/farmblocks-modal","version":"3.1.16-alpha-fix-icons-react-import-5814.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.6-alpha-fix-icons-react-import-5814.1.2+0cdbbcaf","@crave/farmblocks-card":"^3.1.7-alpha-fix-icons-react-import-5814.1.2+0cdbbcaf","@crave/farmblocks-empty-state":"^4.1.15-alpha-fix-icons-react-import-5814.1.2+0cdbbcaf","@crave/farmblocks-icon":"^0.7.1-alpha-fix-icons-react-import-5814.1.2+0cdbbcaf","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"0cdbbcaf66b03f65920eec7a6627deecb674d66b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.16-alpha-fix-icons-react-import-5814.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-m0/GvJn1KQEz+1IaJGPUwKepDgM1MlgpgxvwVOS2skmFrow0hkL0Ke5U3ulh+jFYYwVbrmkYbp4VW+uejHMqxQ==","shasum":"e7fd51214866a61f37e758487804ca7da3a30af2","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.16-alpha-fix-icons-react-import-5814.1.2.tgz","fileCount":12,"unpackedSize":44048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1BNCRA9TVsSAnZWagAA/70QAJK9tx7RHZ+BavYSYb/5\nXGZLFMiZnYSeeCiVCqfUrR/FCXUCDM/td71FcDZQJOmJDdcJEFqjSa0G9i5g\nPplqC+tay7gI2bG7bhnXoxPvD1T85rYBHRDt+8BBzyX31e1ABOpg13QL34P6\nQW6GSKM/cj/vSYh7g73T6G/QLuf1XAZIKXVI8WCqnAUiMJPmRURbx74/VYIs\nhSqOxzUaHmfUxfcuI2k7IDi/UvHI8Kdlq4yXVdgKVd+2Bl+OUHF5wLhw5ma+\nb1h8y5m0dLBPInScCLwVnvdeom5nnGokRsKuilhqiOtNxX6xMf4dMgbw8PI7\nPpulkMyahhIZjzDi4enLVT+cfThFz9iQYCQUEFaFDcm0mfG9Cg6HhSdnY5Ht\nXjJWMZD/C/fOC8N4vkpiShQvzMLJgbgRsz+b2iQkZ5EWHdlxvgyRlnSoYWMI\nvq55+GkFdkLdNmVNK8Ogp6icGuD7Ku497cfcq9JXF+Q1sBkyJ7JU9FDGwWJU\nEzTID00HFwWvKPj2ooprJ+ce/h/OJ+TMzTzbJtZ2ME1QgnOEN5Bd9r7cc41c\nUNAovayh7OMK7q+mXPmE4jMRucM3vecvUcCBZC2ss/BovWJxk5Knab1qHt0i\nR+gEJ3/2KpfxbxY24AT/Z0XfpORsHVLb51w4pNdLU4zgJuN6T3zrZdinfGY2\nrInw\r\n=IH43\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwBuTCO9pYqKNj1geptA569u5SDs1OKIejve7UeF+IqQIhAJWErwE8QQSUkUB8ne5hYIC5PtosAxZONRfBmJ2DNsT2"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.16-alpha-fix-icons-react-import-5814.1.2_1594314828740_0.7456186714479947"},"_hasShrinkwrap":false},"3.1.16-alpha-fix-icons-react-import-5816.1.3":{"name":"@crave/farmblocks-modal","version":"3.1.16-alpha-fix-icons-react-import-5816.1.3","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.6-alpha-fix-icons-react-import-5816.1.3+3cb6b84f","@crave/farmblocks-card":"^3.1.7-alpha-fix-icons-react-import-5816.1.3+3cb6b84f","@crave/farmblocks-empty-state":"^4.1.15-alpha-fix-icons-react-import-5816.1.3+3cb6b84f","@crave/farmblocks-icon":"^0.7.1-alpha-fix-icons-react-import-5816.1.3+3cb6b84f","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"3cb6b84fca37c25b5f2bd5b61cb59b4f08aedb9c","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.16-alpha-fix-icons-react-import-5816.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-rR53UsyM2Nli1F4OUkzRBepVC9ZJK6kZV6pLefMigO1+c7VbZ0yoCzXYkHP+nAAeggNOMciGU0P3q6HAVLEnBQ==","shasum":"a49f48cebf01a66c242c03ff1168b2f925b1b598","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.16-alpha-fix-icons-react-import-5816.1.3.tgz","fileCount":12,"unpackedSize":44048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1K8CRA9TVsSAnZWagAAalkP/1k6Pn6j44QpJoiGKzA8\n3jRw5Bj5p/MOg9yW+LGjyz2eIazQ3f+h2rYxV4Qa5MG2binzZDgaekI31+Ym\nbG5G+IAALAtM028aXkQW7Oo0aDcEyFsuEKQ/0ZML48RWJc1u9ADDxAvdzpqE\n4trPByuKtavpUzkrUYou4jZ9euYjn+1DqDLmK0KW7/nbqsXhzJjUbQ77j/dM\nX2sGkgn6VcTFRUaEGZKtKPl6FQYPLqKC8S0X0dVaOfyuQdzlxI7sZrFp/AEA\nLNVaaV16wXjLz8ulTIo9l9n9YtLZXwLPXoQdNTGaRqCLwpYHWk4Sv0LRFMMR\nRc30daexqGQc5b7vNeM46yAMhEIayAGmgX2JdHdMPzBX38rp/Z9tGBfouw1Y\nmuiZdLaqaFybZWjNDJVl/ex8xKpcuU19is+xxgKRSUeexNXTfoYPPm1bTgq5\nUQiJkx03AoRHVYRpM2wbrNfINOoAmwMu1pDjfAckBIOIStpUuKVxAobS/SYK\nEOFdqIChvYhLyeTIVJgIw8S/Oepg3JgkG/G0MHof5+7km1hVf8Z6sjUBE8NE\n/3oWvXeP0NrZkHiWMpKy7SDcJJgnodpWcBmpMsSlIaoQI3JnnVp5xCDOFdvb\nUBdRAA1UBpJl1cemk6F431Pl30rJwuH2Q4D0/FyYgsUqka4Fb/HI23hcRjj+\nIkRz\r\n=b2T7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUFkr0O9y7Eb8jxfX2ahvFRYpyBdL2p72dA12vCMOrzAiEAqXIgr0SbCz8byBpETSu9Z2Zv0Ucbdroxpzkoz0c4pv8="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.16-alpha-fix-icons-react-import-5816.1.3_1594315452099_0.25938011079472"},"_hasShrinkwrap":false},"3.1.16-alpha-fix-github-dribbble-icons-5818.1.1":{"name":"@crave/farmblocks-modal","version":"3.1.16-alpha-fix-github-dribbble-icons-5818.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.6-alpha-fix-github-dribbble-icons-5818.1.1+0c424252","@crave/farmblocks-card":"^3.1.7-alpha-fix-github-dribbble-icons-5818.1.1+0c424252","@crave/farmblocks-empty-state":"^4.1.15-alpha-fix-github-dribbble-icons-5818.1.1+0c424252","@crave/farmblocks-icon":"^0.7.1-alpha-fix-github-dribbble-icons-5818.1.1+0c424252","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"0c4242525cb5ad68afbeb2f532cc7a394654227a","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.16-alpha-fix-github-dribbble-icons-5818.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-1eMLzsVN5tb+Ol2HuZuhkYynLgbF18h+cC9D1aQfYQjI0avFZ0dRhi/IsCjQoSSQpN9kHEQFTwHc+wfQEaDe+w==","shasum":"0a278d330651f8aace601c23cd89c31815827381","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.16-alpha-fix-github-dribbble-icons-5818.1.1.tgz","fileCount":12,"unpackedSize":44063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1gJCRA9TVsSAnZWagAArsMP/212dBLj7jYyic5uZVnp\nrx2el1GUkIRIhvTCdei0wYDulaXRiYl4QA+2827XPW44a8tyxWD389q7Pq5r\nkIyhZ/Hhb/LePSRdm/5eW/GsWXN62NdPwZoTx9yEV0oLpOuFIFvmJKxSNuxA\nFxj8PCDoebyKmoFEzcAHPPhV6UVgRqYsOXaGPVL9wZnGKJwXpW2iacnpgMXO\n8K/SYRR6asuQgMa4C7KuQT0TMZCJ7oqFp4Ns4RLEucYvs7TebeFVNRJYwiYC\n4Th52Cy5X4PmX9JjimB3v98zNmWFYx5i+cblD7iAmR7ibmXwRM70UqJpvHOd\n2K8woNyiH6MWIMzRmKkeg4GEZAZQaR6u1PkQJQe72wrpaD0yMeBTozirdxUE\nbhP+x0PqTpaBf5OmgbVHtPqs5Tk3nF1QM6353m5v3wBrPI6eJfXIypJIz5kZ\nBvyElmaPIIETTZW5UELQHGewtCin57oIfPqK5MKCLEsOtrJytCNxA06yK1w0\ng/OZWN6/vNHhIN8mQp2av6HD8rgXShwuJfTRE9ZBEGvdMkLDQ9TGwy9wDgS6\n8wA2//8Pff4PWec0w/6AlmyHQY3hbrUzEGZNUTNRPN+WkrFjVK9KbDLrCJqG\nBQ61jIIGKgIjJ4wWEpc3n22UId0SzsdDXrjnR7cx4NWLITWRSpijgxm2/klo\n+pqo\r\n=EfdO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICkK2bEy6OKr5KdosKmFRrYIpbrcHoraTr38n2Y8Tnc5AiA40Dbaid6Qx9xhNawmExJO4CyBGeDcZSLp9G7Wf8nvpg=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.16-alpha-fix-github-dribbble-icons-5818.1.1_1594316809461_0.5665426843945911"},"_hasShrinkwrap":false},"3.1.16-alpha-another-icon-test-5829.1.4":{"name":"@crave/farmblocks-modal","version":"3.1.16-alpha-another-icon-test-5829.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.6-alpha-another-icon-test-5829.1.4+c443d910","@crave/farmblocks-card":"^3.1.7-alpha-another-icon-test-5829.1.4+c443d910","@crave/farmblocks-empty-state":"^4.1.15-alpha-another-icon-test-5829.1.4+c443d910","@crave/farmblocks-icon":"^0.7.1-alpha-another-icon-test-5829.1.4+c443d910","@crave/farmblocks-text":"^3.6.3-alpha-another-icon-test-5829.1.28+c443d910","@crave/farmblocks-theme":"^1.9.1-alpha-another-icon-test-5829.1.34+c443d910","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"c443d910049b4bb0eb5542aa7606fc53d3cf3775","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.16-alpha-another-icon-test-5829.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-3kZmpRrZ8OkXrf5RzOVmP3PQ1+6xAJs2EdJwXGCQTtuoiT/3IAD/4/SyKzv+1CL+k5N/maTQVeGoAUZt9ScFSA==","shasum":"3a162243e4a4365abefa0ef0f031617c38e48aab","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.16-alpha-another-icon-test-5829.1.4.tgz","fileCount":12,"unpackedSize":44109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDHh3CRA9TVsSAnZWagAAC/wP/2W7itV3U1hsBv9NL4Ik\nHEeoNFwgD0NbMQ/5ccXl1gfnJEntTsZf6gzfKRg3TqUHPAp7+35bo5ZHgF1n\nX+mhtQDVGQzx7HZ6C+QjrtUjk/Cnol8unzVyZKykKUoVroKDCi/wN1LQFRmv\nwxzw3ZkhPkTnAGErz/+HSDm8ym3H8ZKqzoVe6VBlAEDp4bh80HoK25C7wDAC\ngFm79pcA2u2fAzeRYjaiK9MzQ753Fs7372OU2YFsl43CaLbuLucxPHT8/kmC\nnjlKXTawuUBcY96ZPSTVa7+ffAHRDFaNminJiYnAT7UB9jtbn+Zq3Y5hN3Rx\nJN7SIeTVOQ6Mj4XYg3HcKckyd8XPTbNi2yf55KXWzdPVHcaj+CwIYf/SSpoB\nJdTgp+1Q3Iq3GqIImW5G6OfMcztJqLWKZ5MRtLP54AaSQSxO5I1O4pqj4nyc\nxM5eU5kJuwUl50upX6b64w+3a88p+OIxot24frePviDUPiz9AxTYEFYlbGHy\nGeffaf2nBP7Yhwu8P64neSx5ScusBIR1wHQV2sRHoHURVE0QQPUs13tU4NBk\nhxmJIB3UW6CToOIfBE3R3R6VXK7YTY3xshRevMhrvpDtZ1YQMHN+odQXxkoc\nKOWlqzmlNKOS5jjkZfgl46gpuBq2zbn878BR2eivN6JhWO3yTjiQDSaj6/2N\n25/f\r\n=jOhv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICxZVpbwTx7zKu69LOXVimxk6yxRbWK/L1xsoYPIzFA5AiEA/khXA1DbVJk8GdNk4pa+yC2tT+XyJJE5S/CmLLuSGo8="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.16-alpha-another-icon-test-5829.1.4_1594652791155_0.23830552769478852"},"_hasShrinkwrap":false},"3.1.16-alpha-another-icon-test-5832.1.6":{"name":"@crave/farmblocks-modal","version":"3.1.16-alpha-another-icon-test-5832.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^8.1.6-alpha-another-icon-test-5832.1.6+fa9d7b16","@crave/farmblocks-card":"^3.1.7-alpha-another-icon-test-5832.1.6+fa9d7b16","@crave/farmblocks-empty-state":"^4.1.15-alpha-another-icon-test-5832.1.6+fa9d7b16","@crave/farmblocks-icon":"^0.7.1-alpha-another-icon-test-5832.1.6+fa9d7b16","@crave/farmblocks-text":"^3.6.3-alpha-another-icon-test-5832.1.30+fa9d7b16","@crave/farmblocks-theme":"^1.9.1-alpha-another-icon-test-5832.1.36+fa9d7b16","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"fa9d7b16a427797355a316c1e6401af20c646623","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@3.1.16-alpha-another-icon-test-5832.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-JQR9mYdg6B4Hs7IUmgVjHz1GrXh8phGdtPMGOh8W7wzWcuqrzLtIxLNw7zoyZkOCac4tjJFzZElcRK5rEHzmeA==","shasum":"6dd7f0f10680d967d4c997080a4814cf60471c13","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-3.1.16-alpha-another-icon-test-5832.1.6.tgz","fileCount":12,"unpackedSize":44109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDH6tCRA9TVsSAnZWagAA6RsP/jA+YeE5rtZtSX/yB77H\n71CCXS/uZG9VNum1baGV5Ndjvb5x5nWf78uYEt95uz3fxnudpDZvUE8tE5Lu\nsC6u5BiKu6e564bOvinrQW6tPuU7O6px1RHNmliykR4hcExhf/5eTJ0/XwfE\nq4hfH+QSdXIvN6PX5CpNabfXhQRazL8c5O4wCufMwXO5ZXLAKiKjTXgDHLrz\nhE8Oi90Z1PXq+VHzhXk3tdx9/jsKw3dTzepDtpGGFM/Co2n0XjRhKRKz8JMN\nW1zRzh4DW67IK3SknVR43LWYi8/uPJHzCMRo2ZsI+D0o6nqtTAnb7widg2pd\nN9SvXPKeTs0j6YA4yM2YFICbKsjyA4WCE7jq8hoHtNZcVP4M5cNCPotlR1Su\nbAUZjr5JKWaSlQhbxiXFzzOx0CD1BrKD5CjIqdX2o+7VO5E8cioCaNOBZLEf\nNZs9gGkzOiTIwCQWRx9yF0jnnXaHxyt4LE6u36isN/MWuL8uJz3bIy3I0oD6\neP/Dfi03Mde1lMdTgaEXkpe9DyzVCxwsrDRA1Ywq0pkIh6YJWQ2cUmJk8jEv\nVex4TDNgoiXGjlVsQfx+6OG/rilmQjVtcgvVd77gKSqp3OCJxIONVk5tlTeS\nvPfoRa2AciADl6Ep93PAOw3RFyT/pEZ7P8rs1KY9nn7ifIBsoR5bWvmVfMTh\n0wmc\r\n=Arkg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZYsZDBbcXEsKmLdG0h8asGVzZnIEuXMYetHN/US6IcAiEApN6j+xKFvBEq3FGL5RtLUI+Ai3HVJlQjm0i6g9BVEDI="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_3.1.16-alpha-another-icon-test-5832.1.6_1594654381490_0.3257952613267652"},"_hasShrinkwrap":false},"4.0.0":{"name":"@crave/farmblocks-modal","version":"4.0.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^9.0.0","@crave/farmblocks-card":"^3.1.7","@crave/farmblocks-empty-state":"^5.0.0","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"4317cdd64c0f94ebc553064903b3aa6da724253b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.0.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-MOrRLa0Q0aPR5toJVGHt2nWjglYMcBBs2ZGfPgdak1BcXn43jof7afN+z01bY5sd/aizLUvNMNPBlLfOWwHPNw==","shasum":"8ca2f78388dc81073a3b146085e25d3b01af18f2","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.0.0.tgz","fileCount":12,"unpackedSize":44271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDdw7CRA9TVsSAnZWagAAbQAP/3wjvHlJBjvfug8Lylv5\nqxNzyyFkrltLu05ApfsYsUWpmQRpSteX7BgFF14194guWHGiXWxG0KzdHdei\nJlIqtsxDW75XHq7TzT93ikj7QtuQzaSXyNosHrFuioqvsE27KTLHP3lfNuRS\n9BJ6tkyDrIHbxhU++8vN/G1oPbC50+Ki6UehCgz2Tx4LLDtJdUq0Zy/EdqUW\nAS75cD8BJsbZi07mJfyY4TlHN6m7QivEeyVi39jbVHl5ieVr3Eus1IvaJU2b\n9J/W2Npj9C9OzlhwjeggwqUdUtBD1BxxLEEmK4dRbbDyhmUUNauOt65r4tne\nkepXr7jweiRRFJLfr0Ib8wN4hBg2fDQEab/yJ2JdnsxR2Ixz9ehBBmvt6Tfj\ndoI51mtuDRnQInNct7UJPGo5d0PcnmXTYKVVRZfFsCs/cpCYA5GF7xitZYeM\n1TDLXvkYSzXs4LM3tWELTf2Xx24AWi4BX9mVj1QfBjqEELEPW4sQ2OdL1/uv\nvEHvROlU6EtkInqPUguzqLxLN4icq3teFM8HSs4QfU6i1CwwoOyz9onnxdxF\nyS/AyTDVid5GdGn3yHzD1AvxFt7suMEtVBkNf2a/TSCn6zti9XzPKsc97RBp\nJC66CejpvubK/edNu1KLDMq99noA8fe8/pyxtLB2sLx2HM9Ofovc4EqUPsI9\nHfub\r\n=Znd/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkIpHYe2JpDBLn726I0Q375qu/MHlc/Lkoqn5ZeQMt2AiEAlAUuDFDeplcXd4nWsCOOfh4e8TVEPrGYAdnp+8RnGPI="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.0.0_1594743866928_0.9987891620008265"},"_hasShrinkwrap":false},"4.0.1-alpha-protected-currency-5867.1.9":{"name":"@crave/farmblocks-modal","version":"4.0.1-alpha-protected-currency-5867.1.9","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^9.0.1-alpha-protected-currency-5867.1.9+58734103","@crave/farmblocks-card":"^3.1.9-alpha-protected-currency-5867.1.7+58734103","@crave/farmblocks-empty-state":"^5.0.1-alpha-protected-currency-5867.1.9+58734103","@crave/farmblocks-text":"^3.6.3-alpha-protected-currency-5867.1.36+58734103","@crave/farmblocks-theme":"^1.9.1-alpha-protected-currency-5867.1.42+58734103","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"58734103b0e6767231a40c638b9caea4ad9e085f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.0.1-alpha-protected-currency-5867.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-FSNOvFdP3PKfQg331JgpnYWILoRN1yDAzosui+zGap1lLDwAS6v+4TKmVoBxj/vypXqnfhk1jx8DOkzys1Mqqw==","shasum":"a05baded15fcc23df20c3a481e437e25123f7daa","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.0.1-alpha-protected-currency-5867.1.9.tgz","fileCount":12,"unpackedSize":45854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKa+MCRA9TVsSAnZWagAAZwkP/AuNdflHcnolkN0EUUX4\n/NJ+Wu8QYBFRA8arjYVyAxNYhWXyOOc0I7G6eUhWJdN4NY94DBBK+myXKXlB\n3AAn1H0UzKEoDHQUkf1phnguAoP4gxcBBxCgSXVjVRocr4sbpiCO+SZxn70u\nOeNmGLrCzALnv8+84+B7rzbCqaDWlm5CFwahnvAb5QAiTfN2yN3gv0vliHIl\nnl7PjiocPTiWR8t7w8XZyDJP/0U73kxs7VGYFenOxKMCrZMEAHRmKA9L8vV8\nx3T8k04ALEAkrPBu5WwtWR4Xg1LlVuztLUd4ty/lz5/rWafLOIWCucx9O0UN\nuznpG38zsY/6qROEInFb1GB88u2BqyF1CzZKAX5TeZfOzm7vLeIYJtEEStWm\ntbtc6E9D+ZyQ8SVtI/GVfkqbWUCBtSjv7IgOHGdH5wfR8qe0qzemDVdHz3PG\niBF3x1GWIIg+ApbtISSKOwSby6fSKyqGgDnipI//LvD5KwVzpiEHu8oDRqZd\nPX53O3PXjn5TQUTfAoQa8mi3Tz/UEI0Y/RJ2v9Be12UMfVIrend4ejHaRzEj\nMPqmwx4tk2bRaULeXn7W+eno8ZO87c6b30OsTFuKNBR1HYgNGhZ++Ic8qnsC\nRyP45J+LNageiTEiErHI0MfIUvTwkaEt7x7H1VDGqGJICJzmM9+XwswEebLo\nBQLX\r\n=agHj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHtQoKnWZnP8DEhZDMzy6ug3fVChPyEOSkUNRehN6wnJAiAArD3gRwo/+NwqlnD35pKoyxNR1fOhf3HKoNq0+KNh/g=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.0.1-alpha-protected-currency-5867.1.9_1596567435784_0.8172190480743151"},"_hasShrinkwrap":false},"4.0.1-alpha-button-redesign-5884.1.23":{"name":"@crave/farmblocks-modal","version":"4.0.1-alpha-button-redesign-5884.1.23","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^9.0.1-alpha-button-redesign-5884.1.23+165a9e98","@crave/farmblocks-card":"^3.1.9-alpha-button-redesign-5884.1.21+165a9e98","@crave/farmblocks-empty-state":"^5.0.1-alpha-button-redesign-5884.1.23+165a9e98","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"165a9e989844e690e495c88a644b0e5cd0b78e4f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.0.1-alpha-button-redesign-5884.1.23","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-TpcMySJhhHzSMWtVKfEJFJIxiqE53bR/ojnqUpBNOcsODsoO59gwGKxsQvPCEnJxAOs7XQfsrUU5y3Kp/DQLvA==","shasum":"1e703ede61c240be5c09344c62b26b73c4755448","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.0.1-alpha-button-redesign-5884.1.23.tgz","fileCount":12,"unpackedSize":45785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfT/fwCRA9TVsSAnZWagAACMsP+weVpU8sAwXfMJ15Mf7v\na6oAhi/JQGakHnqbJyYi4mzJUJ66UDM2+K6GsSB5p+TwO6qJrwB+4MgbOsWr\nQ/VleYItcg8tBLUoVwAv/X7nM0nnqV/8ObtLRplkT59q1POLZsny53grQHRA\nf3mdfD/HKKHr1CVukjsx8n3C7WbPXG6zGgH/WLyEmrVmb46NvimuK/fgAj4u\ni9oxX1aOY6oLort6gNHM6mgLw9++HzhvgIFA6A0AQNNEFEcHaG2BGdDpOBbT\nWnvjFtDX/oKgi6+CJsraaCkJwy6mRxUAZ2GeT8FNIUO0FlR9ijLk+R8xzifz\nOZN09Jzjt/Cr9XQj2XUn7dm0KLIPyuhmE5f1nUF/C6UUjh9NWxeVI0hBLF71\nH0RFj3i9XXFPAIu7hP2rSM+1GKQ2Guwj9lERy4iQBJgLs0zOU7040x6TLltv\nl6I8+WiUdnM5jOcqVwTBuV6MJGmHoF6gh3ytGWZQqun6T0Um/9vmqjWVG/Af\nlhiCnBKS0gCSCy8z/EUQdhk2EiRkPkEf55QKz9apbUN870UGGUg8YK9Ci2CM\nokwEu6NVCVSf+oEanb1apXBOI20J4H/yp+4tWT4pfRU3PpzHK0vDqOoOsk9U\nheNOPeRln/ONQRMkU2hdU1aP1Q4pveWNfnMgxVDrjneLsdypqBW37PWmNHBB\nbutL\r\n=lD3P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZfJA3RnbEsVboCdvbN2UmWkjFEUyH3ZyIAL/TqLXdMwIgDF355d2syR28JlZkoeL77sZ7goeINRCDjnneUNnsUF8="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.0.1-alpha-button-redesign-5884.1.23_1599076335508_0.8405782012279948"},"_hasShrinkwrap":false},"4.0.1-alpha-button-redesign-5888.1.26":{"name":"@crave/farmblocks-modal","version":"4.0.1-alpha-button-redesign-5888.1.26","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^9.0.1-alpha-button-redesign-5888.1.26+1e83bb2e","@crave/farmblocks-card":"^3.1.9-alpha-button-redesign-5888.1.24+1e83bb2e","@crave/farmblocks-empty-state":"^5.0.1-alpha-button-redesign-5888.1.26+1e83bb2e","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"1e83bb2e333e3dc07b75e571bcd43e86fccfdbdb","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.0.1-alpha-button-redesign-5888.1.26","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-IoGrQuVjAaZwNvHbaLHFNWmGYMeHdJyFtCKJauwjhMzE2QtLMFD/NpDie9i7YopZDzz+jQWzEx1JApVfixUA3w==","shasum":"de1b2b3fdc6db06a91aa71682cca0dcb6b5f18cb","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.0.1-alpha-button-redesign-5888.1.26.tgz","fileCount":12,"unpackedSize":45785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUZ+CRA9TVsSAnZWagAA7HkP/R/ucQjauE1LAXN1GP8i\n1qYdYsChLgK/mhvOceR4iLVD8JARU0HH6RD4eFFlGodpMs7mPZk4ndno1Bmd\np70VmmRYWb/9vytTRwcfHpOlMh4McIfMwgToJLTRe3E81to0DTCSYX5ayaJX\naLr/bIQwYsp6D1q4yJaBwxU9s2Ri6I8P0zj4e6UFNeW0DnjhVqX3Uw+9R4zN\n6B+7ss7sCPfgiDI8GuQzbSbfg8/uHi6gKpFX/4o7x/kIi1lw4thSgOsmPM/8\ny8cAaRwgUFOUuY9JllmJ8NPx1Uhjbg/Q4iQjI9C/rbQP2YvFQrkMbhgkz56x\nNKlGNBLD6PxTpEx2QEtqvAmHTkmsMZw7XRbMrYKJVBE2kbd40IkwDyJKXqz1\nPLDTpYdBk4aTq6kKVG4tbqf1LIwuRaNzNQ+ty/nicQWg/f+y2171xH8ePJ9/\nRYF/lo0O74zA4TdFcphYzrWmGtUymLdNNCXsItApzfZDaGUrK5wVznZA3Jg7\n1gmwFKcwE9mWlGt9VbFEBe6y6If7OXsjsCJzfIk4fk0w88EfEyYeWCz0o7bu\nilsf2piBpD96b5fkMvZw8ySg3WlVWV+Y/xzxNuLl300crpKUQS+dsZLsHaa9\nPEPttY7JDLlaUQOln5mkADgUKL4MzK6GS04g37CvQyUcnv+o6bORRYqJ9ZRk\ncYbS\r\n=YFf/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfcd3vq3o5wjFVEFllBhDoYHehFlEY7DB9tAxOtY6JIAiBwQQew0XWqXt9GJNIiJya7B9eLfpaD7bBEYGY04Q0Hfg=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.0.1-alpha-button-redesign-5888.1.26_1599161982228_0.11422769942792121"},"_hasShrinkwrap":false},"4.0.1-alpha-button-redesign-5890.1.26":{"name":"@crave/farmblocks-modal","version":"4.0.1-alpha-button-redesign-5890.1.26","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^9.0.1-alpha-button-redesign-5890.1.26+c3050bb7","@crave/farmblocks-card":"^3.1.9-alpha-button-redesign-5890.1.24+c3050bb7","@crave/farmblocks-empty-state":"^5.0.1-alpha-button-redesign-5890.1.26+c3050bb7","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"c3050bb7b0b0e8458b76b2a8723d53bb9030c471","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.0.1-alpha-button-redesign-5890.1.26","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-/aNoYozRyQszXCDP5UCJJQi47UvpexWPZjqNidDJOshLWabZdnGS5CLdZtLvzG+i9F5L4pVGGQ0idKqQiYJJdA==","shasum":"e952ecf6f153f3d7a73100e9fc86ec10fc4845cc","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.0.1-alpha-button-redesign-5890.1.26.tgz","fileCount":12,"unpackedSize":45785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUinCRA9TVsSAnZWagAAVLsP/0SRixOh8UY+3wDcASZ0\nXZzg2rl1KQTAoK1jGJ8y5blmycFvvX/edF+wbOCgFFWnjiC6TXLtD2CL6tjg\npZHc41FuipmDNfao1A8AwHR1bDxS0ksojsjV3dLFhEwCYFts3Qyq9+98fi0r\nChRsE8aBbZ0Xl3o6UuoSH5s5iL1lBmL29D/aUnq3jMSlzHLlK6rCbjboACXc\nWZBE7boCZhUexdo7I/11grtCSDYGoAVlFlHiUi6Qoi3LrnT46WTWz7SHoLFF\nBY6QPX99Qik82sgkWFckNM7uYuKHFWxpACmpsL9wHUBBmCXC3afFQnHt2b3a\nkKbjv66IzdAjLTuiMvE8Ac+VXcpyeUNCTR8caTYHHybWeAicQCYsBTP6jhuU\nVwhAd3sgmMIO1JhZwuxQeF3pPsafPoPhyIMTCkMFhknEZC6VSwPbjhg3mLDa\nAflRSfI7yLj5J/lq0rJwnhs7KJHcj0JsPQSZHfeuZ5P8yWl6YpSpz67Y5pMp\nNlGYh2fLYe4/ZPp+5K7JxX+y6C6+OvZVxhe+OWxFzsekki+rYxLp4kNYZIA3\nPCUE5ag7mto5vepEJh6wSuTxnquY+k5kS3saQdIFM/C0mV5oD3ikpoLbk5M5\n6WD0xJUGgdvOaJ+vyzZx8BuO86r/4JkjoRJKuTS3k0ExvmFQm1iTL+y1zIPj\nFjjt\r\n=ruSe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdu1S2wo3fzFIJeCkBzkhnnjwnjzi387InJRTlyAo+1AiEAmEQpj0wIGRJ2F6hX2bHdJgu4gYR3aQniUZVueOROqUM="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.0.1-alpha-button-redesign-5890.1.26_1599162535536_0.7114474679583824"},"_hasShrinkwrap":false},"4.0.1-alpha-button-redesign-5892.1.22":{"name":"@crave/farmblocks-modal","version":"4.0.1-alpha-button-redesign-5892.1.22","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^9.0.1-alpha-button-redesign-5892.1.22+b05b0309","@crave/farmblocks-card":"^3.1.9-alpha-button-redesign-5892.1.20+b05b0309","@crave/farmblocks-empty-state":"^5.0.1-alpha-button-redesign-5892.1.22+b05b0309","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b05b0309cd5ad5f6b6161e44adfec0414a193ee1","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.0.1-alpha-button-redesign-5892.1.22","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-+EKlgSrsDURL/QACB8BKY3m8UqBqUAzFdDqQXvCT6cDCg62NjrpxNjggjgXEcJ5GQWbyowQtzM5aIztV+Zi6tw==","shasum":"7c98d44b75580dbc26da7f3a55345f9bc18862bc","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.0.1-alpha-button-redesign-5892.1.22.tgz","fileCount":12,"unpackedSize":45785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUm0CCRA9TVsSAnZWagAA9p0P/R6vm5vW6el4sIdE9Siy\ndVae7y7Z70kYcPJp1rUM/yVql4faunouHvKdlQ28EFM60Y/eClIHCeQ40Vci\nUJd7dBlp3raSydxqLJzEL57FG+ZXzVemp1M0+aPByB312W5Py2GrWlfEVIKx\nFa5L8k7NF/WoH8QjXbw2fP+wr9W0cNrTGupPf/ilgdXcB5b/RROYuT/hDY74\notVfrHnJF1eMLhIemEzT8da+gwt4F0hrpEELAwtiJ4nXfNXa+hbgDNoNQ/zI\nJejB9gkUe9YGw/BDGLpzA7OGZCfl/+tCjzGrCWNEa/8rDPLxE8xb2HgN0Ju6\ntQnQrs2nLkKZAxrySh34zbavkHmBr7aiwO2eZyTL/b56Thmgo4Z8lmwfOLRv\nvS0jXrus7IeToiAE8o8sT2ksvGDkHF66kn03PWuA3dPjyGCEFzzo8bj3jttE\nB0CbQPCGpiP3Tqt7O82PvV76XE/KiDclfbLc5aBBw4WvNwU3qZoIYwqAQNmO\nGFQrhgGjkqkfbIjheHxReLcatg56UF6N2XImH8DbLPgcD/N/OzscmsryXaas\nAToVk9i0UEVpsTI9XN8tBo8AjyUUAgbSs7TZppp8wI8lCyeESZE2+cJzZbwX\nauN+r13R6EzjLArdLmBFCVI6NK+PLh5EH2L49Scwzue4MlRXlXfy0e+v42Xq\nGoJP\r\n=m48/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDrFPs5H4PDcYVwtmpKSo1gUYkrYuuMbibDo/xHc6El0AiEAzyPTEKLtb9sfMBdHlG51NUnAbW4m2zZ45/3m8qjzSw8="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.0.1-alpha-button-redesign-5892.1.22_1599237378246_0.009143890477564476"},"_hasShrinkwrap":false},"4.1.0":{"name":"@crave/farmblocks-modal","version":"4.1.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.0","@crave/farmblocks-card":"^3.1.9","@crave/farmblocks-empty-state":"^5.1.0","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"11d8e81fedf57a21ea8c27c7e975534552867662","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-7/ykQVow47gOVDdpGSpMcz9iTJaWbcpaBYZU8OoKUx2cFBN8w/H7otNawCXRml5BlbynQY0PA+aDeUucd7mSbw==","shasum":"f21e41e3e3e570c26175076ba2d26e27c259f3cf","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.0.tgz","fileCount":12,"unpackedSize":45906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUnE2CRA9TVsSAnZWagAAyvYQAJWAqymTWzg6QYa2vJWi\n+8N8ungJcc3QsxiHc4ZBSW2Spx1OKhQks7TPPZT1G7k7+eXiXECxMqAw8VFR\nSFWXP9GLD7YHZN9oq9pGkTsHgqY2je/1jsKJhtO4TBVGVPaxUyH027HPbHku\niJpv02OKsONzOrM0lh9iluYQUEiItDS9Vib5s13QP/Nnoq865IULBeQ5R4Er\n9xQxiJrfPhWpdCC9+0BYEeSo4Vyv7ALxMPa3dD23ZG5SpfkjjSRQ0TRKWunJ\nowfON+il2aUBUzsg7E7/VNOr/S5Yl38kgU725wKSR6o9NP3VB8yowGzfXti8\nQngaNOOcHtB8fj9fx0dEACNMg61bsWzio8uQ3m+Cvdwq1CnZ8VXINI0HQ4vn\nF+q+oGHqbSChqe1Bi4OlchL8ZDpHBbtIpUGIgNFBe9kIo38rWD9E2MaU9JJY\nrRqS31i8OmyU4YumrGZcxU/ed3lqAkHetFPzk9IQmH7RyoZdwlr8ZGkde/24\nbGi9iSTkgU+UfrVBTo6M+JsQcIYxYY14fXPdtOQ/EpXgiPjjo02+M+IPFqUg\nDmLPUriDQMjxhKorkzxk8F7F7H6mumNqxbXFUTBrHc1dsIMZ8+8kPATXZaS5\nkHfpmjGn8Vq59OPDfvLg2hy51O76yIgaPfNRIeeEzYZuiHKNRc6VAYWw++el\nQCQ+\r\n=F04i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8iyLslRz/i3noWCQP3e2d/IC3d/zB+re2fN8ft7k8gAIhAM6agobmPzwDZYWzhp2tpM7Wecx9lktxvtETYTW4NbYE"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.0_1599238453609_0.1545096148178915"},"_hasShrinkwrap":false},"4.1.1-alpha-fix-button-white-space-5896.1.2":{"name":"@crave/farmblocks-modal","version":"4.1.1-alpha-fix-button-white-space-5896.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.1-alpha-fix-button-white-space-5896.1.2+eb265109","@crave/farmblocks-card":"^3.1.10-alpha-fix-button-white-space-5896.1.2+eb265109","@crave/farmblocks-empty-state":"^5.1.1-alpha-fix-button-white-space-5896.1.2+eb265109","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"eb265109b3f15d2ffa4cdee65d60990d2609bfe3","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.1-alpha-fix-button-white-space-5896.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-xfgn+ULClh/ds34t9jqbYw18nqNpmYTVZTQ17Omk5Ni6iGBsyWdoWiZBK9BA5fj1N+g+LIvcZgJ665MIBdxHLw==","shasum":"894e4743ddbbd95fcaa3f51e98d4a7c889fd1bfa","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.1-alpha-fix-button-white-space-5896.1.2.tgz","fileCount":12,"unpackedSize":46095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWOarCRA9TVsSAnZWagAAlN4P/i2lsT8W8dGjuxN4dwDc\n4CKoqP2jMV8psqW+pQU4xwWrobWkxe0BpIPEnXcWO6tNFWfGDSJWnPF2nz6I\nXoOgaPLCHo89Hug8XznpPeglcI3HnEwGN8cXIYO+ECIGHJe3/Xpzn5KNpeOo\nh7DKjIOV7z6GTOMFE3h3B5LZ/oI+pC7kfLpuut2mcCh5FaR1jHMEcBNILH/A\n6uUC+gcsL3x275zyMqPaP9whnHpniRX63gyHC0h/P+wcIEEiK/u+V4viQH3T\n+vL7sfp20mIMUamCucPWezWbcAwKJWa17pryx+i6HQdEwOJO9/QFwASbePE9\nmQEQ9PCqrDfCm1VnVlHQn2/KLuNZ3EyTZo51HNkx3rjhC5uUlKF7hIm55GF0\nOLoZa+o2nptm1o3q0kF2ELsLqj8PuM3f/CE0HxZgIfE753xfzIVSL8p8j9J5\nWjPc2ryy/dPNUc7VNCyQZbv5x3NLeNUUrDtDUU+TVxsc2AigcyPnd9YJ160N\ntIop+N6iGgjz/7O8/FQivODSEb+c82ZpDCpP0XCk2zq6QqfJIoQHnScsJ+t1\nVCrXtjye4ZW19sdh8k61fCw6ulV/Bpg51hnYxkI2k6s1Fzv8sc8ybCg1EXO3\nIpYFAuerEhIxXHOiEnKo7rJdqNi3OfAry6yifoq5RSRXzlsxofN6eGlYuimd\nW2Gj\r\n=P4WK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVgdOEdgNKETvn+GLCCU3aUg47E/TBkGWdbZARlCXUOAiEAh9hSvYF0I271xmIxjGxLbjwglbljACpxkRXqRuQ0/Ac="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.1-alpha-fix-button-white-space-5896.1.2_1599661739161_0.3580999957843247"},"_hasShrinkwrap":false},"4.1.1-alpha-fix-button-white-space-5898.1.2":{"name":"@crave/farmblocks-modal","version":"4.1.1-alpha-fix-button-white-space-5898.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.1-alpha-fix-button-white-space-5898.1.2+6daaf17d","@crave/farmblocks-card":"^3.1.10-alpha-fix-button-white-space-5898.1.2+6daaf17d","@crave/farmblocks-empty-state":"^5.1.1-alpha-fix-button-white-space-5898.1.2+6daaf17d","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"6daaf17df634c3d7ace061791f08e3b1a87e9f1b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.1-alpha-fix-button-white-space-5898.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-FNCRUiJSEBWneefl2r4U0bm+H1JC0M+/KmaBNXx91rRKwsy1mORdDsWzLn5CNtISbSXmWcKtterRoPbAFU2Hew==","shasum":"f0bfb0904410a536d6631dfb0eb1862814c29407","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.1-alpha-fix-button-white-space-5898.1.2.tgz","fileCount":12,"unpackedSize":46095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWSilCRA9TVsSAnZWagAAlrMQAIRV5v5C27XRPqN7Zpv8\nv/1RWiZByMlc5dxvuEhY03bozXiTq0IyfCXk6xb9755elqYvJnAvwET3KPgE\nVWE4MAkSoOHUibhwBoOOV89a7/zQr6EWgU4ulXFuDWZhDhfQti0Ud/N3cimG\n/Rq5G4YzJpXu9x/6t4HPbNOw6saVKL1Nz1OyXjvtvmxXfXBgSNX8IV7bUSWX\nv4Vy+jRxx5FkEdloZHKKTdWOizG9hp7Z/aPXi9FugBNkZAmfpcR5J8T4/r6m\n3JVZ+fhSJyOl01wdGv84Rvwh81U6q21WcIBpraOFL7XOLEl0OlSQ6TOvuARu\nZKA2GDEjjYjMJsbFcYEQM/qK6H4t8N1/ly28B/vylyHC13wk9hYdAWfUZckL\nkatVg3E/4iJozTVycgdL2ipMKVem5gCAGtqgtJ7PPslU+ahcLqINEb9g+neY\n8ChvQvEF5BC/CbbNA7HAFJBvnQGaDs1eIDwEQ5j4wt8f/ZjqM6b5azHpI7xk\nXVcT8aqwLf+MCRQTDUdKaSOrARZt28Fdc8j794gm8LMAbZ+pAYluFo3KOZtD\nSib4PPibB/B9qK4pCWGLt8q3r2alut9QaHeHPhHQdIztt4ZMDyQ3mU/6mkEE\nE9HHngdX5C4VzyG/nVPb6mdZvqay2Nb0mDLOqlBCM5V7minb7PDYcOh31XCL\ntWmM\r\n=sUWn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYrgQOrFTW/KnFby/VKuXCPJbh56xiii7q4IHslqJzXQIgFXuLKAizpFyG7NkJTLBBrnCP/0g6bETuB/phLR7vccg="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.1-alpha-fix-button-white-space-5898.1.2_1599678629225_0.28168237149037"},"_hasShrinkwrap":false},"4.1.1":{"name":"@crave/farmblocks-modal","version":"4.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.1","@crave/farmblocks-card":"^3.1.10","@crave/farmblocks-empty-state":"^5.1.1","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"3142da0604d437ac2fac724f45578286f255ba86","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-uxA+XHIO4rtXE7PQY6+PZZGE4yS3Zr9kuBanpbK6iVMe45tKt01y6xRCIexRENrt6qRDCXAjW8jVt+r+Dru8VQ==","shasum":"b2dffcf8d1c2cbb1610d63e19739ad792925452d","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.1.tgz","fileCount":12,"unpackedSize":46112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWS4QCRA9TVsSAnZWagAAEMIP/R7r+MwKiGuKm25UQMOQ\nZX7H0gIdpyxYQYIB2zCSuWV3XraV5U+vPkprnAM3xc/SjoULCLso6yPH+dyV\nNPio8xM5//NDdmSvIA5c+UgAsOvLhBKFxh+pFgs2z8zQr5TNIdFe+QGNXjbo\ngAtP67YvdnS8eu1/MJtySm6u2yNSSchxeiWWs3brekiQ3oVtKz/L4yqKyosp\nKgy6Xk8PHWztmbgx17t68M1FcoFWtfddZz4VzRsYEl/K+wnIeKKHv1l8Svia\nGiYZk65wo1rUCMXphdkwqbYrtrsOJzxQ7BdobqOgh9kbaEpAa/l0PoeuQoCT\nJUAIjExRWdYjb2StG4JiEGVa9CuY4Mz2jiwDx2WQIk0kMWBsMKb4zYt93YbZ\nUdaEviNIpSa84vWr0Y0zKUOr7sylb8KDh1GdISHZQ8yR6x6vu72oypm+kz/L\nFOa5sQIE4/7DuSvMEH27mxSUqdWrrDl7xqiu5kBnb2DdU4yPgNb7ML/ms9h5\nrJyz6lVMKEFK8o4DyW8ru+pLLBCJ/30MuBnUwaMk50fYOABv//Eva8THppTs\n849hAJbm+MmbiocVOYb8eFEquYNm6y3j95RdpJqyZf3+6vz0YdXQybrRT9/u\n6Lq7YjJ9+OQIam0uOscKn8I1v+7jp/qM7JDxyBjL1LIe9vtz4wnDGC+FFNOd\n6omw\r\n=Ec0P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8OA1Y2J++f//r/9FlvqMyfIUteFI27f4IzQWJoE07QAiA0d3VGXWBSd2oQA/rA1a9+IHVwYd2YorQg8l7r0cOxnA=="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.1_1599680015772_0.9754349316431967"},"_hasShrinkwrap":false},"4.1.2-alpha-button-line-height-5901.1.2":{"name":"@crave/farmblocks-modal","version":"4.1.2-alpha-button-line-height-5901.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.2-alpha-button-line-height-5901.1.2+afc0dfae","@crave/farmblocks-card":"^3.1.11-alpha-button-line-height-5901.1.2+afc0dfae","@crave/farmblocks-empty-state":"^5.1.2-alpha-button-line-height-5901.1.2+afc0dfae","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"afc0dfaec408e9f6b57619a9f4f8de4bc0e2355d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.2-alpha-button-line-height-5901.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-a9m3vM4kV1rxdShmuSm3fyMZAdDUThZ1Dh4PWuQMDr/pRx4d4JceJxIxmndGyEuEHQUWLp44YCoAePUIyx6xWg==","shasum":"c87227d666c6dbe627f229e5d6461bbf79741c6b","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.2-alpha-button-line-height-5901.1.2.tgz","fileCount":12,"unpackedSize":46284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWhn/CRA9TVsSAnZWagAAFugP/idIQCCQe7OMZI1+/CmS\nXLDx3bqato5XH2WDtI3kv6p6pIv8wdzHfXmMO5aeZloLWLkKDGwJDdIc0+H4\n6kjIyCiZ0jTT4A4CEfz1vyV3mjaJybNOk4vuBMQqKhr7D9Zi7pZVE+JJtn7O\npQtVQBSuhw+1xIiLLlIyCVDMGlvnQQHeCuBnh9vBNNS5AdllJr+tSIgKa/n7\nU/7TotSpIqE/lQAqBumB7ICfrSVLR789dEI43CfDZ1c7t1ag0cehfSJzPpfN\nP/xOmj4XAqMqAEwGfLZg2LqECMosBcdoCK3B2NIjmS613hgllUhMNYNM81ni\nR8HcedFM8Bo40+0qD/94mXvLoIIujlSyNpG7DZtT8MplyQi51ORMPSMIUq7+\n2Q+ntorFozefI27aOYQ7o2BtcH015AqiWWlxPzrIvMvOYVpv2VrlsVY09zOc\nZqR5i8lYqNJoMe11OkSJt5QLcc9yU+rqs0RWX5DQMr0VjKRY3eZUzmZHqNTM\npM301i6O+KuyH6xeMzzS6uH23MzQgYrbWqVv19S+0Uogw+xVvPeowB5lPLYg\nDIjB0AS24Ztt6fkALFGd3Sd+pN8yl+Rml6UThWor5qg4mTHEnlN5NmYen1pB\nB4mFwxEDvx/QZOAU48sJwNGdTdYiaN6JufH9P/9ayw0PrqgwIzo6qIMnK8vS\nUfXl\r\n=c8KR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5qJagN9dEW/HyG0WOsU+YVhVXROxYpvRQkamqk32MSAiBt51JIP9WnwXgTwSjhlDFXDTxXhL723abS1Vq1CwJtjw=="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.2-alpha-button-line-height-5901.1.2_1599740415050_0.12299103505681708"},"_hasShrinkwrap":false},"4.1.2":{"name":"@crave/farmblocks-modal","version":"4.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.2","@crave/farmblocks-card":"^3.1.11","@crave/farmblocks-empty-state":"^5.1.2","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"f4f0d5946372177aebc2d6e1568b3507040d1fcd","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-iDUpzIib07vVdcL8VkHC2UMXa2NBG+UgZVRyaSo0446BOWXLSRD+nupEwsHm9jYw9ZPylrDpInvyVAFX0NSj5w==","shasum":"fcb282241ce039db1a50f0f42d5e7e278535b162","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.2.tgz","fileCount":12,"unpackedSize":46317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWiGSCRA9TVsSAnZWagAA364QAKRbrhk1zlzdmN7WZukO\nZONmnx4+nTAdV6dGl/LURbBKixJHq/rkp03yHxxo4x35c0HcTcdA2w0oJN7p\n7pa1M7U6z6WpdVPc14NX/LaPhSVyYdqu5ixLfY6OiQ3BuNUyOI3XaNvnY9NI\nlCRPke7gIWGklDnuufR59RiTZShT5cDgkQ/Q7Vu2GolB19GvpUpNwiIYcuBU\ndJSjCdbMRQIODQBXKftxE402/hbpC7ld4q45PWcxG/kdgWWAxEfyX0UEyaD9\nyCaEglgMZyfkUhE2JFn4f1KNlMLtQBWj8yjmrWS4PX0rqTHewTADfkk+1qcY\nsSJQj7BB7M8SJ3V49bogxnQrSAOMZuNP1vCD/435m3DEXE6VQqwdV2baMM3x\nzGpGHg8QDRaSOjrQAu4nnoO9d7ueMYrob/Ck+5dH/0z2CutM/gedG/QpiEj2\n+3QMwuQIMdsCpSW1GCF3sjGwAu8zzRIjLVPMklvEZPlG0bTHNAFmXdxviREm\niZddOAZuLwhU99oFAZVHtj3njBzDUcE4/2LhtXf3wIItduZqhdxVvlzxzRZn\nNo7djEImLy/XS0klSALCnav0QilOtCI8u21G9TEuSa706K4kugEWP5lRqrDP\nIHQ5R0Mv8VzUwrNI5o1jLGPM4DKRJZ9VvVYKGCDIv7PYq+rJ7Y7H5bYOlPcS\nELAP\r\n=zxUH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3bpQCIwH4R0Mksw84I1MwUlbvEdPd9kgnWkjuyA2cBgIgZpVn9tNXuJfbZMG8rrqTNh2INCFXmCGB0M3vCR0O73Q="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.2_1599742354100_0.41166030635701545"},"_hasShrinkwrap":false},"4.1.3-alpha-modal-ssr-5906.1.1":{"name":"@crave/farmblocks-modal","version":"4.1.3-alpha-modal-ssr-5906.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.2","@crave/farmblocks-card":"^3.1.11","@crave/farmblocks-empty-state":"^5.1.2","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"77f053cb983fb2adc6d77f234f10b9d7c01736ef","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.3-alpha-modal-ssr-5906.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-6jOZQ/I4bLXAOMf5t6pi83983ZVlGb0d8tq+7/6+Vf0c/kGEutO2zSifpNqeIgqjeW/Zrsbgl7IN7jqAuI1UBA==","shasum":"f2954e50cbdfaede06ab704c05e0641685032418","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.3-alpha-modal-ssr-5906.1.1.tgz","fileCount":12,"unpackedSize":46459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbjohCRA9TVsSAnZWagAABAQP/3NkQGFpx8k+MoKhBGRr\nUo6CjpBfD4Bzyh+09jdxZt+D0U8xjZlDgjoj/AtrBHaVmsQQOdFPR0Swmd+T\nCDJ5rZQLLvzLw0jWjcxHBarV6//s6DFf3CS376/XYP7z6nXBXZnyyRYbPJAA\nfLIi29xKdN1T61RAFsbFrawlFiP4JJegf047FRnBE6lIQIY9MkSIZ2D9B4Gh\nW2jWGEg3IYrabXr6/GO4bHfVzarCCVzIHfKiJffyaLUXkQ76eRtl+0bPdkyr\n+QeIlXSCGO7reqlUXYFwMKUfUmIBROk9Z307RJPhU22R/0ClZ6Twbfs/+tNh\nihTyjeVwMfdQpRdz8qSAcvhimdgkZrh6nUh0hD4Vhr4RZJG2ZmjZAOTccFsc\nZ3IvtjsX1QwU3HBRyjAttGzPPzGyeijCxDPizWfNjnjF/VWamCoy65K09HRx\nymIhcHA4wYaaOXUFFOfxVDwJjVXV9imW8WututZTAUBNhaTo2PO6CL1pNsE6\nlV5omStou6wgRhDxD9iLRQAvsJx57mYbfP5CqpxKSB2MOKYcRSGYFzdgMv1E\nVGcl5SreMDe+XMAZFTZgupSLmUn9kt3CqdKYe8GXwB2CE38tVWBN5MPQefeN\nkltJuW1mRHqvHehooItCo58hzn27yHgCNR278Cj4xGBoTdA0aHrh7D6uG9Mz\nz1CH\r\n=otQo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYiue8mO847BiDRgZYG/PjpY83dX/LyVfkvri5rdUwmAIgJZEEGbeHKfQaS2XPjxglHZxE7PDSTuIBdOT4xp73Lv4="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.3-alpha-modal-ssr-5906.1.1_1601059360681_0.9648798239119369"},"_hasShrinkwrap":false},"4.1.3":{"name":"@crave/farmblocks-modal","version":"4.1.3","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.2","@crave/farmblocks-card":"^3.1.11","@crave/farmblocks-empty-state":"^5.1.2","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"04062d7ef2541903899285fd33ea80514ebda79f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-uGb4QmzqEF4cS+VUl+KEzkv3Tx1BimLSsIsI5Aadq02qv5Qugu7nlDvqvqDlxt/DmxpuzoBbO1lDlMpCrJrpsA==","shasum":"a66ace1d33032926df444b9c70b38290c09357e3","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.3.tgz","fileCount":12,"unpackedSize":46731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcdaBCRA9TVsSAnZWagAA/K8P/iwkk6aZi2sAWnOaLJU5\nB4Q9i0FLoAhdj5UlFpPnuYlChBQ3xXcuUQ3H3b9LdJqzKTGgKo3l7rIqMUIJ\n/uM9PGGcEiHz15yQqoX7KWEKzZ4QGuv9ts1sjyMjRfypHCTY2m1VrsYUFp1U\nsZHRTwQSQXbUhBfk9ZYiMDtSdpE9PheGXCuBegvzzThzyoo2Mdmic4xx2fQf\n8nI6kd2JX/ChKN8jNii+kn9d/UO9dw8MFjEk5hIkOQEYltQDbe+/PnocUcfe\nX/o6GlYnyVfHGeGCiZBeqyZc27GrNCM1YQxKqlPYwUXQp/RZzJfnBrgmUItt\nWzbYP+wTZvm4JWccGqlkYaLkVsOR1+lfhhT/RGcfUux1H4wbVmI79Uf/4h4A\n0pY87a14u682PG1hMXQJZHZPB56rmJgJtp7+7S0XD7fFG+gquKu9LO+IU/F/\n0j+Yo5/pJpzW/xVg5Wp5+fxDnox3C++Y4v2YduWaed8BQ2aVTNY6Kr5qrtEZ\n3195mShewIW9ikFOgAroU4W0MWJwhBZWOMJ0Elutq/MnSBWHzKaRjhhex8zc\ndRSxN6RmWD7/AxL87TH+4MrKk4ucHp705Sm+E+aV9j1ZUGNSKapiEcOZRp0Y\nVVtyLKe7ULJglpJVHeHz10m1X5RmBbtu5vuV5TK5R4WRCQo75U0lc9MVirFA\nyyZl\r\n=/Fdu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3T5FCYg058yYLI7HE4cKJ15wimKk/qpqoK1VmTYQYmAIhAJqXxj3X1YQu6LaVue08LIQg5MiHYpMjDVoyaoJlJr02"}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.3_1601296000692_0.21780685331721017"},"_hasShrinkwrap":false},"4.1.4-alpha-esmodules-5917.1.6":{"name":"@crave/farmblocks-modal","version":"4.1.4-alpha-esmodules-5917.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.3-alpha-esmodules-5917.1.9+fba2e8e1","@crave/farmblocks-card":"^3.1.12-alpha-esmodules-5917.1.9+fba2e8e1","@crave/farmblocks-empty-state":"^5.1.3-alpha-esmodules-5917.1.9+fba2e8e1","@crave/farmblocks-text":"^3.6.4-alpha-esmodules-5917.1.15+fba2e8e1","@crave/farmblocks-theme":"^1.10.1-alpha-esmodules-5917.1.15+fba2e8e1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"fba2e8e1c6303f559cbf01d9cb3d038c18b455ca","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.4-alpha-esmodules-5917.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-V2E/I/diqp9SxBm4rbyMQZHiDVPKdNY215vttW7Ud7WbE/7YvpdLp/srphvShuwccO/7iKyzGkOr/gENyKTP5g==","shasum":"7f01d97ae4af4e2fdfcb7b001508d9778affafb7","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.4-alpha-esmodules-5917.1.6.tgz","fileCount":12,"unpackedSize":33026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhw8fCRA9TVsSAnZWagAA+ewP/36y//YtzuG1LKUO2t6n\nU8hEomNR412m23Uw0ZmclZvOReaU9UlDNCq3/wnhPJgyqTu+ZVj1jvHXS9b7\nbajIekbhfTNb5K2zreKB1YVSDnj+KRCUkRi5BcB4lSI2MB+0zssMpfep50Ut\nml90o2kA4c62OO16k7Sk9ryVozzQfXwBcjDxPVwEqvvItbNSz87H/185yZci\ntx3JL6NFx6HFsVfzM2mrfE041aeT6XP3KKmFwlIV7Pq2ydcOMARma6OO9638\n6xkTwLr9NucH+5vCfSUcxYY2dVxfBYrsBT5vjHxfs3rKAX5oky9EUTR0HSxe\nkq2gScToPWWloyvt2f2jxfpSafHzLTn+FJfu8zy1FS57K7q04iEV2oBsXKEe\n6fM/TATVpREw5r9sMKH7cIrXPuHTeJPUa0sVWgEsNLNLAY+fVAU+xl/wlivj\nWbqd15PCxsa9DTCFRIS50tcWyb5n80s3LpXFHYrIjhB0NtL76bidjGIBeZP1\nJ34ZmF5XpvYFctP2oZ7IEo5oxAn+AGjqxYauDnlYCDeymKYb7lqFOJ7c1z5o\nfdvPbTvn/x6ZQmwCi7gHq5RxaasgHyjwabLQ95LIS88iJ6Yt05wnYMi4W+TF\npnxqlueZM5b+FmpzoRS5f6CpuTZH4N8RKq7j8DS3k3cKwS6yTksevyDkhpzE\nH0E2\r\n=8OaR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCC6ftdMxEPGPQ4hYay8qOsYfqgNpj9asNtOgIk35XOigIgKjPLWKBaROmNTSkruyIZbeR2Gen2XrGhdTtL5tX7STc="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.4-alpha-esmodules-5917.1.6_1602686751202_0.9269482822505808"},"_hasShrinkwrap":false},"4.1.4-alpha-esmodules-5921.1.7":{"name":"@crave/farmblocks-modal","version":"4.1.4-alpha-esmodules-5921.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.3-alpha-esmodules-5921.1.10+70d2ded0","@crave/farmblocks-card":"^3.1.12-alpha-esmodules-5921.1.10+70d2ded0","@crave/farmblocks-empty-state":"^5.1.3-alpha-esmodules-5921.1.10+70d2ded0","@crave/farmblocks-text":"^3.6.4-alpha-esmodules-5921.1.16+70d2ded0","@crave/farmblocks-theme":"^1.10.1-alpha-esmodules-5921.1.16+70d2ded0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"70d2ded0f0da8165b6c1fe00ba671ff9d0a9e0d1","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.4-alpha-esmodules-5921.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-t+3epavplGGZBv3k+n7E+FPIHPC8htUu/uFKRUJP0cPMvq06j9+/nzseYlHcZqOn6fppMdaTw9upeztZon69mQ==","shasum":"01074fa3fe3b3d1b7345fe96e385cf9bd20019d9","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.4-alpha-esmodules-5921.1.7.tgz","fileCount":12,"unpackedSize":33029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiE7yCRA9TVsSAnZWagAAcmwP/jB21A88JVWAw5Pues7t\nk7dxT2R8oL7/9dsIr+qaYVcwdvIExmxf52GuRH9BpseBFF8VBOBZTnkNBB9/\nCLdXel/9++f0RHdDV2xwOlC3L7f9jQlmSW4S0byCa6PH4qjuiJC6q22F6HvW\nlJSY3eGdew7THTiYnO1tKAHmyBuJxih7mkZWpnLozc2ZyrlV/ftG1ZP0T8rU\nFotWY397tX9+I74NJVMuJ4CejL2ABk4TLPKmNyxRCrfZH/x3R++eJduxTUHm\nvHbdZ89FZc3xtW2cN7M8QR8eiclY4IuFItt1cW4OIeAoSdc31adxj5lkpIVA\nWZzUe8vQmhORwQUSSYjRHwo6XE7J+Wj7pYSQfyM97+hynQMBxm0hOURDynDl\njf/02wVjaSKj8xtjDaPZig3Iikw0YWg4VA3Vs+W2cHpcOdcOnjC3rNt5WGnu\neqQ9t4eNFzE/Gdd9Kg81M6QHPF4X7MuKDlEyedeRbEusDgRacNpwP9/wGDG4\nxw06XHjuhi5zwZAULNyeh8jmdmL8h+Dqadr24TU1kXN2Nk/Ho2dXNrmxqR43\ntGLoiyEDqaWtqCJ1a36jDS/yCvgiNDx2YZPhg6XtJ6StovH9WuONjkaPyhiJ\n2CB6MvslEKIGN1EDjZls6u/0wS5Zby/PdXU/jJtKlbI897GJ5UxKh7zOz8rh\nyikU\r\n=Rwto\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKb891yOmsD//U8q3NNhFz0eVTZz0k8iaSYJG89evcAAiBPNajPkbWTrC52cqae5BZ9HJnjRAWdHORktxUZS3PMmQ=="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.4-alpha-esmodules-5921.1.7_1602768626123_0.3461892197122325"},"_hasShrinkwrap":false},"4.1.4-alpha-esmodules-5925.1.6":{"name":"@crave/farmblocks-modal","version":"4.1.4-alpha-esmodules-5925.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.3-alpha-esmodules-5925.1.9+b26b4097","@crave/farmblocks-card":"^3.1.12-alpha-esmodules-5925.1.9+b26b4097","@crave/farmblocks-empty-state":"^5.1.3-alpha-esmodules-5925.1.9+b26b4097","@crave/farmblocks-text":"^3.6.4-alpha-esmodules-5925.1.15+b26b4097","@crave/farmblocks-theme":"^1.10.1-alpha-esmodules-5925.1.15+b26b4097","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b26b40974c07b25d7e73cb336962a061a93f02eb","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.4-alpha-esmodules-5925.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-oNPTAmZ/YUotETcP7r1K7qjnQXzPYsvb0BFFfGb7Hay6pjBMVcZOfW9GFbJ6j91ynwmCAuoKbNINv6K3Wg1GcA==","shasum":"0007eca6eb9331e3ae1f665202a6cbbfaf012595","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.4-alpha-esmodules-5925.1.6.tgz","fileCount":12,"unpackedSize":33026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkH3CCRA9TVsSAnZWagAATzMQAI9b8/zwI1UqIngwtU3D\n28WiqM4G8/9KSzUKxji50UkCAUFUnjcWzQqsdpFoVNqTrOLo3Xjift5xknR9\nUJYHwRBDCwxGsvQ6XhcehzpCp4YHSc5ZFq1RAICsr0a9gZ9tEP+lQRBJ+dJr\nV9hYTNGtWVH0HNsAHlyHFX+SEtwKl+9ZyDSlZ6Q4xIYspblVSxLq0CcxZSGD\nHdkpI0u+0A5/oEw7pm+Sur1LgXQtOQUQjDlta8ApR6YvNyq8BX1G2ttRpeUN\numX+9cZaoR+iUy8cmDYDZ9CQn0INqG8BoCPX7eb0GKkg7A6Y8ed/d25m8dOv\n5aJg6LmgQlaiYOJKttjaVF91OX+cBwBAc6CTKA+qiUtoU+7tc7wOiOTxCwDn\nu4hKYTdc6pRWGbVntGD0ads9qR30iMHR09MV2HFnza8fvt2Emo6pEMz3nVI/\nuPkclbkusc1GYbA93YtiWG1Y2l9CzVflmJwCd7SYlynKb9sYsI8jr5fYyaSE\nTMzUdFLN9haeFfeQ9w8K/fCjWpVc5yiPsBjSOzp59C7pwHJ7yHPSBvON0kHu\n3Oz4piRrVMbfieDSVb/C6wh6UpKFc2LrRKbVkImDdtzj0nWAXnRUqTOvO3DX\nLgp6ORma36/Mc7RBv40VU5UQ/3t0CWys0TCr72rM3FEydnbp4ydG/dHH6Ise\n/M6e\r\n=2R64\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzOExgF4wSbvh3MuMnfj+42WPWBdwRCVglo4S8l3vHbwIhAMoPilm4H78xXadS1AOnIjvFj+xT5t2DhmMIku+XgSGE"}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.4-alpha-esmodules-5925.1.6_1603304898274_0.2900287772259731"},"_hasShrinkwrap":false},"4.1.4":{"name":"@crave/farmblocks-modal","version":"4.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.3","@crave/farmblocks-card":"^3.1.12","@crave/farmblocks-empty-state":"^5.1.3","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"2ae9bc148a9cfe2a81cb52e32130cfb3a4cfbfc9","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-w1Qa4zBeZesDnRzV4ktMIoP0E2ErtcgWi4TrFMu6BYEGSf7wmc0wJ5vUhbZrgCnvYMo13MDMYVvimIu4WFZOJw==","shasum":"4b2c9d65986bd230a66fbc7cbe9443b42c3b491d","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.4.tgz","fileCount":12,"unpackedSize":33025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkIvqCRA9TVsSAnZWagAAgt0P/2sdrotlfRfIe3vO/Ol7\nQj13ujmfK56HmmQ7kj2itC03OkjwGwVEnesAIo29mA4KSFRTA829y4UW7hv3\nguaMOZaiEfZaYFR05JHU5tJdGBfAJucCWYKbVG9VFtNWteIuIlVwvqb84I+o\nyDBPOlbz5L4SlLboIMZdcuuP0iaSe0dZ4/RvdtDXF0uDiv91sUTcwCIs67Y0\nV/WkduiecpkPL5SPprkuWLp98xlW2HlPYaKN9p0L+YA0aiqsrTOSYCVJ8BS+\nbt2EpraK5Z9j316GZuF0hlKwQF3B+Cz0CS1rjHM40rKiTyqs9lJua8bOx4x2\nOyZojSSvtF4AIPZwv7rLj/EUqMb/5w3HWaqyN1H2xMhYTby5o7/+giPAjAgU\nMPYT4CSDSbc6meOlEPhmCStMp357u/+CJjqhLkbFXCBMN6+x6PQZ4R+0IFYl\nYtX2Ov9+iCoB+Z1n8V5OOlIJtgo9X9VPltDTnyD8eul/PKfHIyJx485ke8MG\ns6T8+yB4NiVD8WeN2wYTxnADxhbelxginubG6x+ip1JcngrfSqFby+W6uxba\nV+0jEfAXtkUjjAeLo8A2ZSq7YpP8q5eVmOxduhk7um/ZxYvhIW1NuhJ90Qq2\nUtoyNABRBNy9C6BUNUaEnvP71cXHdKINv2DmQks027rzY8OYuFVajhj0EDTi\ncEK9\r\n=5PdQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgBnzr1FX+ybRH/XJxoonS2iQEJBe8bVxOsToQSwXCnAiBMEq9Erg9xq5d5Xm2ObhypFQpnMVUsUBfmdDmo+pMpkg=="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.4_1603308521985_0.9624738712693615"},"_hasShrinkwrap":false},"4.1.5-alpha-icon-publish-5935.1.5":{"name":"@crave/farmblocks-modal","version":"4.1.5-alpha-icon-publish-5935.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.4-alpha-icon-publish-5935.1.5+867e408f","@crave/farmblocks-card":"^3.1.13-alpha-icon-publish-5935.1.5+867e408f","@crave/farmblocks-empty-state":"^5.1.4-alpha-icon-publish-5935.1.5+867e408f","@crave/farmblocks-text":"^3.6.5-alpha-icon-publish-5935.1.5+867e408f","@crave/farmblocks-theme":"^1.10.2-alpha-icon-publish-5935.1.5+867e408f","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"867e408f76f049072ac6b6512868005b088f3ec1","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.5-alpha-icon-publish-5935.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-REjmsEaLRuUy5pL7bCWyuJtrVUYioGfOS7dw612Qm/H//wSWVLeAnJt1oqbrsNbWAq8MbWK+XWtOHLcWykQOUw==","shasum":"5e5fcc4915abcef7a153109e6b0f4019cd7e7d0e","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.5-alpha-icon-publish-5935.1.5.tgz","fileCount":12,"unpackedSize":33247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmq6bCRA9TVsSAnZWagAAX64P+gIARhqVTsFxGfGUdmoK\nKLDB9kR0xWK/99yA3RJp7tO9GKj1hHhx8jCYrkerHN4d4NTw1k5Pk+kzqOJA\n+B6Occww2/Q+gwyF/FDYEJXNU56PRIX1YwFuZ7HtxzF8QS35BoRouoVcMF8+\nhwVBqOx9rsuC5sRVjC3GTvaoBGS8+mL74uS1xkJxoX4lyl4ypCcwMCi+pF0K\nGSnZpIREWHg1TBX0xu92wQ+jodDZgmLzfYfTXxbz9YRgZrHvZm7MWxqaLmmA\n7ES7hLrQIGXVm+bkNeUqKKeOx4cSiB/IW9BcY8RoqSTPsbzMFEcPqIb/NLA6\n7mSJEWQi/oNKIqoU9hKJzkEs5zWIjaQBF+FwD5GBT+OPT3CDoCZcO75w/Y3Q\nF2ugn3DMRg0ixkq+11ORxt5EyXnH3j8hQrxSByb39yZI8BlzCyuic6e9sgZs\ngSdgrkXgw0nOAINvHbXYmRAdVUqW1Rca2R0FzOZnoSMu2juV1iEbMbfvuCDM\nBcfUJqPM0kQxiSp/Xuw1YdmbVGtz8Vo5qYOQhdS+IJBZ6httVjYgTSJtjkhu\n2f3ds0c6ZlT6vgP+ZeqcYkBzeDfcemQdzG3s8+nHMcIwHIGAsAe/ktHFt1y+\nJU5qOEffcxD/eNqfGia/m86KHVovr5jCOvYItpW8xUm7+LjV1m2F/uGQwRR3\ng//z\r\n=FWnr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfaCjvubybWP1HbOMtw0qsmcry8KMB4b1rk5jTWb01kAIgC9yTgPWbJWg7cG8LVTzDlvNPMPUw3NbjtfhQiDXdC4I="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.5-alpha-icon-publish-5935.1.5_1603972763207_0.1496621080688456"},"_hasShrinkwrap":false},"4.1.5":{"name":"@crave/farmblocks-modal","version":"4.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.4","@crave/farmblocks-card":"^3.1.13","@crave/farmblocks-empty-state":"^5.1.4","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"82e001ed74484daf52957946b6e4a022cbff24e9","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-UpC8zK+2p1inCXV/3q9z7zL4Ycg2KldIEk0hj5QUpZeKYSyUxR8d49O3uwWqJO/D80ZKn/g8JPG0IigISfwI/A==","shasum":"97b28563ec9f18de14c2977d67968e9f7792b0a5","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.5.tgz","fileCount":12,"unpackedSize":33230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfms+aCRA9TVsSAnZWagAA6yoP/1gSBbMKP9NvoRY1YWHu\n/Rqj0QRXSeE22jMCFB/XgVg8p0+wDrDdubEtirsGYT8CQ1oIfTeVVT+qebuV\nd6AB2cQCYOoOoVaNKpl2nm4ZEIZ6n8NjYCbFnLTEqTFt1jqo0jWhDqAZbMZ5\n687WlALBHHsOmeRf4ipzKPM3Rq+5QKhNehdVBBf6CPI0llmWnzoFby1/nnBt\nV7kBmN2342CvMXobnJ15emBX5bIjENCEiRzK0Wq6i5Ba177KYmV8MkfoHQ4i\nOJYZR4NThf3l0HRvrX+xAbzwQtlBFd0r2N/mq4UxBTlaSXZGZqrODVLI+9Is\nzeMplb5WsNuzNjacxnWtDC09ne6eot/UB2z0mZaTOWJrww3AlXCZDHXTvovY\nyyoc0tYPjamxJL2i8AbMJRNLkVNEaMf9J+j6RbmUp85fU6zUK/TIwIF1dzhu\nop+LMKfq6LZEANniQpxGlSt942TWEBVtivxqrsJioqgQ0VUhofpQLRR4GpPD\nw95KlBP9wUF/QMWiD4YOmmQID7PPrvpQxZQRlnHPYWqAzKTA04riwG0nJYHN\nBd6ymSPJ5iR4k4l0Dq5qs38A/3vdTBXocoqE6j+Zwm/m64mppuI58coTp6z1\nYAOVS0WYMUANKf/T7hM+74xZ/IysBvPbeblQyjjklCONrrRV1FEbNchXJWag\nj9O2\r\n=1vqy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR8lDAbAB2uHNvyzpYUGJ5CaycYrWFqvh+8pZCz2U9OAIgDRnS4JYelY6akbUAGKaRCzr3tNsTVXnREknInrYrIBw="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.5_1603981209958_0.4291964689351375"},"_hasShrinkwrap":false},"4.1.6-alpha-table-redesign-manual-1.8":{"name":"@crave/farmblocks-modal","version":"4.1.6-alpha-table-redesign-manual-1.8","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.5-alpha-table-redesign-manual-1.8+93fa0935","@crave/farmblocks-card":"^3.1.14-alpha-table-redesign-manual-1.8+93fa0935","@crave/farmblocks-empty-state":"^5.1.5-alpha-table-redesign-manual-1.8+93fa0935","@crave/farmblocks-text":"^3.6.5-alpha-table-redesign-manual-1.11+93fa0935","@crave/farmblocks-theme":"^1.10.2-alpha-table-redesign-manual-1.11+93fa0935","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"93fa09359d4f4108a68b5c1b5dc04bc65e8d4000","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **headerProps** (_Object_)\n\n > Properties passed to the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.6-alpha-table-redesign-manual-1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-NCiu8VC1EtMBgXU7XRft33rXBKbip0i8c60d0/fRromT4TYl4CUPGlBpbXoljzmDLWFhPXhU3uXW+I+p5cq5zA==","shasum":"59b0b50d01fed39a3d7ef76fc4a7db0fcbe80a2a","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.6-alpha-table-redesign-manual-1.8.tgz","fileCount":12,"unpackedSize":33478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCXAzCRA9TVsSAnZWagAAIv8P/05hVCMNeL271xLZ2GQr\nkbtMLmqpbhbYCxdQUz2UYHSGy38g0elSajFbeIVXay55kMgC63YQWRgAvKFg\no7Ty7mbWZzGeH2v9AloskRErwbS3W/XCxp9UURp6rV/AkTnhUjQLLYwNb6VK\nwuSW3j5LsNkeK6aoyOqk4nSxtM9qpjBwjgx2t27hEhCDI+YWNqe7WzrWe/6c\neCodCmD5sRybDErU2JD+1JhPVOHX0v+t7ESeQFB/AzMcefdxnLDWQTMsozco\nZN74Bn38AXDXc7i0trXr18kmiLQwcGJ/J4CG/ewH8Y2/NdJLc/eH77XKALaG\niGzTLgXSyfchP56dkc0KKnDpl+yjbFm4AADi/lckEquwcwelFuhvwuOYmZQu\nL7+rvjdWgPjmFGxU2/h7IlVdQ1gWQh2nZEA4Py0TZJBoybeiKmztEiFGaSHt\niTVEno5a+rgJ24gn1EcFqvDhdP2oWZB5Rhu5XjM0MCnBmAsNA2IZr0rt/vMN\n5ITHa6h0ffu9YhP8K/oEbHQ+XLMze0pzZFYy5ZbUZ3Th4VttPH6NVi69b47y\noIjAFP1TkzGOpxHqbTZ+U83jSNnP+2iIOwyVvJJKdYmxUn3OtIkY3Ldhkkpl\ncMRhS93ib2kYBQMhmxdW4F+EX1oyXyKDGAsUiM2SW9FhbwtLbPF5rg5qXR1Y\nzC4Q\r\n=1hm7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkVE98RpsEC2DVOdmx38w1LErQI7tDUYisjHD6qs027gIgCikEBrudOYjiQ8NbLOQLTyIQ+q8NrPnAyDBwovbX9N8="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.6-alpha-table-redesign-manual-1.8_1611231282711_0.8768755244045676"},"_hasShrinkwrap":false},"4.1.6-alpha-modal-adjusts-5972.1.18":{"name":"@crave/farmblocks-modal","version":"4.1.6-alpha-modal-adjusts-5972.1.18","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.4","@crave/farmblocks-card":"^3.1.13","@crave/farmblocks-empty-state":"^5.1.4","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"66bf7307f55762a14a0795bae64f175e9e946cba","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.6-alpha-modal-adjusts-5972.1.18","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-9W50lnHSHfyOxL7fxiWb9cT38g4IYcSowj/0YskoaZHBDtmi8jUhylTKrGcZIt+MyPPREcWTma67RBR5r9WZEQ==","shasum":"725022fa410a84e8f83d911edca0c73cca37b0aa","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.6-alpha-modal-adjusts-5972.1.18.tgz","fileCount":12,"unpackedSize":33146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIpRYCRA9TVsSAnZWagAAq64QAIYqVzHgaYrcaJlmJPXz\nhvBWSpof10l2ZhEcHFU9wP/+nVK/eaC3H+k6ST7V+MJGXl+JfXf0L/4xi0Ad\n8+/ovK5TwkQxcerd1+dYYDxZQQIhEOYo7hEX+nrbcnDNrt6oOyi0NMxcPSXB\nN6ZRmyPou1mpnCNMNiAyAYzQcF72gttJF0Algt3lN6aGL3GlJ2cVfkfQHEdw\nT6YPl6+DZqQz8mi2y2y+OlBdq8TBFYtxf+QEL7MNl+IW5jAORr1wjdkjf5Os\nT4qfwYoOLJpkEac+tpg6W8LQvADknvGGKBY36t5d8OCm/WyeeNxIFtdko5HY\nvd/zCU6+29CxAi9w9gAsyFa1NvpkbBJvlj7wWNyy4imU6fskKZauzEtvO7bB\noZTXqv9wGKak4FE8F39iYG41wPtGk/AxTbLSrwwISPl+04NZQamhHVvAT8cc\nNC6X3VThbCsG71AuFaU2y08wA1Gzp6PDaoZ6IH8vjQwt+wfbRUaZz5RjV/9n\nZO8WI6YpvyFhVVjujMtXuTW3HaM4EKFK8DuNMKixjeUHN2JnMPNSLnAOE6Kd\nDcKGZFCxVIHkLPWrrcwCA7UOh3IO25fYMRKwFxOnLQswLeU4JMV9omSXQR3m\nWvoB0pC95i0S0H+gOcMblAAg5CM3x+2gpqvf27dFbclosoLGLSQGR4c1tPmX\nM2QF\r\n=K+5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGU+PdpzYZCq3wUWv3AApLrYtjc2lht86jgACMK+XtEAiEA4nxFD9B9fZaJm/MtQUn9lTm6JuVCM1Jx4tbWkci43qQ="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.6-alpha-modal-adjusts-5972.1.18_1612878936157_0.8788366037865483"},"_hasShrinkwrap":false},"4.1.6-alpha-modal-adjusts-5974.1.19":{"name":"@crave/farmblocks-modal","version":"4.1.6-alpha-modal-adjusts-5974.1.19","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.4","@crave/farmblocks-card":"^3.1.13","@crave/farmblocks-empty-state":"^5.1.4","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"2ec9d5f4090c68d952d0983de89f1310cb441ef2","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.6-alpha-modal-adjusts-5974.1.19","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-BpAUl6cXzhzXDpFq3UHBOyiUevowq3IRp33NdcZObc5EBMtJN/7tIlTe5XXkA+MQuOFcC3VEfY2tiXsB99O8qg==","shasum":"adb8e570703b7a3f87c5f8ffabfd95a1c00d5b47","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.6-alpha-modal-adjusts-5974.1.19.tgz","fileCount":12,"unpackedSize":33146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIulTCRA9TVsSAnZWagAAR88P/02Z8g6dhP4l4UUpjRCR\nwUrPz2FUXUquZywi2BoTMX9XHAA7Rr3hfxX1Kpl3+L6/2YMwNT67F+lyFSxz\n9uWs/2qYr88owk9AqrN7IhmFLkXQnvSz8AwtaRnb6IaXHQxZwBTLgPPiIdMB\nvV+B6Zh8rLQCPcMjtC0JXr71xN+O+anSVNCHvDrwljCaXBjXeck0D3PV50V6\ns+qX8B1PFicKrlD2VYZKoApHyZLn7nNwKhpupMb+viV4OntWHru4tO1IK4E8\n2aUIC8VvOINODJvYHBsLnXtEjfW8rj7o3Ow5N7fwbWOhggtPkCJp5/ogTzZW\nkyVtzf/rY4jMskHrp1KIRrz6uHyd6HCaQh+a2uQFgodfWihxdhqytP2VPfe3\nPAEWUsm9GGwDZFpdXeMyjAPEIqyFulyzNw6+8LiafzecIRtZO+fSVpEGapQo\nyXz1vjY0iKABLmWLRZPsw81ITaJ96g/9ipvZCjoPigtoOrQ4ysagq8Gvz0As\nJpD4lixtSBBNQAV43DAZlVzc1bj2KlQOFmureAiI3y78b5c9fFuXE42uhPTF\nN9AR4RvQHGfLw3dkY3hrDVouxX8nRxQbul24Ih7guTmGC4mr0YHgol4eRVwx\nT8rcLjD6qI1wufMFP1eQkmnLOmp2hmjb0uMsJwCSQ3kLfAlCWXJjVJAV/wfE\nDC4N\r\n=jUVE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFh1+bEN7GGUJnuDCLolz8dy2Zrcv3t+aNBVfeXPNaDHAiEA1fBnz3viXrFwPfF6nYZKVgkobWS5r+YK5PE7AkG8xkM="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.6-alpha-modal-adjusts-5974.1.19_1612900690962_0.08578221777268547"},"_hasShrinkwrap":false},"4.1.6":{"name":"@crave/farmblocks-modal","version":"4.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.4","@crave/farmblocks-card":"^3.1.13","@crave/farmblocks-empty-state":"^5.1.4","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"616891eba51c45743cab3929448ac87911d10b7a","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-eh0usSBNvYpQatgtNjekoX2I4m86VB8ime2UtUTtPkEhXzDJHiyX6OwysLUTAkJ9vq2PKiD7Ec9NQ76CFfRbEQ==","shasum":"b05d9a97dc5f050be684950899a422daff2e55fd","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.6.tgz","fileCount":12,"unpackedSize":33399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgI+tOCRA9TVsSAnZWagAAX6UP/iytbI7Q9bXEb4f5wdqd\n69J2pM7pg32SmWFNYG+V0yj5NTDdn21dMEPQs8QfRZFLhiJndM6NZ7FXd7ir\n7BG43+qLGaOTxKaNzZMpcsKqIeh31AzcpxRxPK5RZ0+I1NWv7CE3J3J2t9Hd\nGPDZLRNdLLfPZHCf2rU7kxFRhETWV3gpXT8MxFEIWdLGkbU+P24FmIUycHFL\nzb2yzHNmwxO7R1ga1/WIXHcFjPU04hvT5uah4ulc34mCUxitfIrKpiTcxgDX\npt3dk1Cyw1kuXDk5WoD20CkjVqZFAMH/4B7L6ZzWoBYKYYBroTrjW+NvgkPs\nUDwuZOjH1DJ64QNegkZKrVuxiX3Zuke02+rvVzAuUO+4lmR4hY/GpHOA1Y5a\n72bYgAQhqmvdlzBxCPwMMJZCFjkzhalLCtw/OAzpVilvaop3ByaDQc/ePtuc\nv3Z6fs+mLYmB1sGdE9Tm1KMg6Jf88MAjcL98F/qZyNaqR/TrDBSHwNIjDu/W\nN2X5yApXU3NRTPvgyAtzjnR1z7UUIUILwH6b6xYwJK3C9Gd4YaG+qL8E+67y\nDUDK66rVWB9iDq+px/A3yKzTs7cIIvrjf/li9r/QqM01zIfSioqXTzs1lvxG\n8nXO/Fw6lOjJuDQIz0NO1Rhz1jD44pK/goPoO6P58O5CunOZm8d7fFWLU8AP\ni0lR\r\n=MQk1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxO2sTczWM/S5JnFbCe49F7SUP96g9GdkmCkD+dgr/yAiBbly9cK8+0B2499ZPgHoFVQt0AmbhgFifupZ7l6qLfgA=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.6_1612966733195_0.8453109233692375"},"_hasShrinkwrap":false},"4.1.7-alpha-fix-empty-state-proptype-5977.1.1":{"name":"@crave/farmblocks-modal","version":"4.1.7-alpha-fix-empty-state-proptype-5977.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.4","@crave/farmblocks-card":"^3.1.14-alpha-fix-empty-state-proptype-5977.1.20+7e86e63c","@crave/farmblocks-empty-state":"^5.1.5-alpha-fix-empty-state-proptype-5977.1.20+7e86e63c","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"7e86e63c5183247b98851b47978ec860df75b4a3","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.7-alpha-fix-empty-state-proptype-5977.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-5ysLt0Nywan8/vojbf4zofk7uqDMu34XjvwDGIITIlGs3TVSTpl/wnSvsSowFmvkeL560h4oFxw6HDHmn2PJJg==","shasum":"c3c42b6bbff68f5e4434628dc2159636a1d56741","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.7-alpha-fix-empty-state-proptype-5977.1.1.tgz","fileCount":12,"unpackedSize":33548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJE7OCRA9TVsSAnZWagAAye8QAISci330g1IoUADnJazc\nGVWJehHrQKF4BFX+pH8Uq8IC/8ZH8OXpDSX4f9MEaYNiwfgXMmThxRLCyhVC\nCDRKzDr7TRyDrHuSb4JR7EZS93nN+uXDmUEMdToiEBqpzkrTjJv6Ppl6cz3L\nr8B3YFHOd8XdogDpkPnlibuh1B3bbXqLzI3inq7RF+AGw8R3q+TTKeHY1ezc\naMdZSBIxvr16Y2Hn73DrNOjUmz0m53++m/TibP1Taw+qN+ll5u3WcB4kRoSM\nrGAyFQ5thbIAPrAqcG3shJGT6vbXJ6WtiA52HogQUttAyZt5+TiimBTl7END\nnGSMRfsx1+MhpPvk4IYvrL2QTO3VG4/+0QC4Jpx+OnDFeN8TJB9KZ8Y6E3GC\nArDLMO09/m5M6qiYhdKK4fv/6py3gTmzZ2Tdvz669NVFEdyfykrvVtnBKnku\nKOfM0TvuIdVw9PtyZY7JRcQmnvjwW+ctCWqw/ktgMtaN3cQENNEz5o5YI0b2\nbIVLOL5CPXnvv0YYwQ207AyXAphLqmEf/IKgE0b/zWRkj/AdOdlbKXNCHV0F\nZoQ5sqsBnYQS1CwNA5RHLQFnC/UjuqQdpaWHfmwOUvTgZafosYyNICxKW8Mn\nNf7htIOJa6ZLEdbYXJU3IPtlANpydl9r5kbMvMjJiqQGDww4wC/iaAM2kx4R\nllbd\r\n=/FEZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICzB1wvAU5XQE7McLSWMMyfPR9X3FJktXUnWs8z5ARKRAiA7+itaG9Q5yYg9sBuTd2ynpWJf/MRmI3choXZd1/IkXw=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.7-alpha-fix-empty-state-proptype-5977.1.1_1612992206240_0.5126723400063298"},"_hasShrinkwrap":false},"4.1.7":{"name":"@crave/farmblocks-modal","version":"4.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.4","@crave/farmblocks-card":"^3.1.14","@crave/farmblocks-empty-state":"^5.1.5","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"e068722a3cc722a84a8051d244f3d3f4e1871c87","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-LDk9GuHwkc6eh998lrUcQ7avlyfa8uBQ/S8wFkrSyxtTjEj/Esu/Zi/S11l0BMB8cq5M/6mHIXJhBXh/fY4Ydw==","shasum":"be50034ea778985722daaa686dbf19441e2e9e9e","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.7.tgz","fileCount":12,"unpackedSize":33604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJTl6CRA9TVsSAnZWagAA1kQP/3S5e/m21PNj4oNucK7d\ni0krlVqg/9z86B8zbzaEpJm16cpd7sSu+o134UUEv0+1mo+tPwjnIvG2UNDp\n/PgTWeJNWqJGJnDh8rx1lBJ48zBLhXIDAe6aZGpwYHyMug+e43loThQzGx2n\nXUDM2c25PCEHy1srKp+zeez+VWmNkdR9I+Q/Jdcfce9iMZwhNaax8j4+cbFg\nNsJkyIQASx1CpCDf9BEHEJTe+WD28VhJRkjvL2mua0VRJOOrgj+RpfH3lqn7\nxm1OUbLfrOvE6ha52enfOBws7s238af6pU/JsHPxw2vfkelYwe6eeRUc8plD\nIbD33lE7rqed6PlVLYoklQIYRv2dceaIEetPCYG+ccHw1A1HB93RiZjj4u1B\nvIdgIraMOM188PzCZvGJzOHDfJGkUF+BHKQgOjNM2vj64on8+5oWBjXlFp4G\nlM4vORyAJvsDH4os9HwKfWx66OvmMUIE3D6qmw8Lmlx/DDk+v0b/CZM35p9Z\n466j8UYncRfBf+5bQQx2IkRX6TjxzLfFb4BMgwqK+/X9Lc9sFnCdi9+ojte+\ngJL+OMPrXOtZsYtC+TBMrpqMbCC5kmQGMKDgP0lxi7Q9DBhV2alP2sTQg46l\nLQL9Fj28rkp869b8+cXctpysFoN4Ge0ErDyu7+rjWJnEgccJladltg4PnXDb\nCZmS\r\n=ooyn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/HNr4cSQ8oflO3zrUeXcYkJ4diuMSk6HtQHM1D0VRYwIgJiPtFx44wInwLMpdQhi1ajK9SRq3g9TQOcXGtzSzeVk="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.7_1613052282117_0.606917678831193"},"_hasShrinkwrap":false},"4.1.8-alpha-empty-state-styles-5986.1.2":{"name":"@crave/farmblocks-modal","version":"4.1.8-alpha-empty-state-styles-5986.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.4","@crave/farmblocks-card":"^3.1.15-alpha-empty-state-styles-5986.1.2+575693fc","@crave/farmblocks-empty-state":"^5.1.6-alpha-empty-state-styles-5986.1.2+575693fc","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"575693fc071fce20c862bb94606098c61c7ac243","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.8-alpha-empty-state-styles-5986.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-LSUCOzSJUevx8zKzQ0xxfkb7rlp96ppk1VCg+0YvZBw5Qv1Vh6cCWCS8QrvVFmeF5TWDr77QKYayQfFNb18IvA==","shasum":"851bbbfa4f7c24918f8c02bdaf59118835428abe","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.8-alpha-empty-state-styles-5986.1.2.tgz","fileCount":12,"unpackedSize":33733,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKoNRCRA9TVsSAnZWagAAkzYP/1s2I4o7Xwvg6LQ8RQz4\nDQPMvBPjCvu9cuzngzj3N0Ss+whdHOokmqy+2/vtCtvagF9Mi1E6MtGWpbwe\nHecO5gXPnF68pCAjG8u5MzbsaJ43PnmH0q6/TuI/xpAPBY86gGDi0PWq+wO6\nphyLs9zKGRekpsGBP+8gbn5Dm5+yMEzc3fOyrG/Dbv8dYrmX7Rajgo+t72GV\nE4LYC2+m+mpM9dRfG6ZpS7ULANFNTArzHcRE4S2vBn0WMnyalh1CjIjWmcpT\nQBpt/vl0vIlUDs28IIzpnLTYsSf7AxyF+QxHbQbfH6g/ZeJpFeqRB5N0RDFt\npjQQWtA9HvJ21E/RZZPHdFnQOLQKjtJ01IhOEAA42amxhNVeebF1748710l5\ntYslXswrQqoZz7nlPRjFSHPFVVxyR2pTpH1zXHRh2+H7rjSHE+Xs/i5g8wuw\nQpJFigNRlXd6Tf3NcUMyIcavqsDyvpTmsF8R6qFo9GdDSxkWLlAfIEEyTwpO\nJMdOG3Me0m8yiz9y0jpCSjbygt/PvQQj+YUkndqwfdj7jJM0IAiwZ2nrtoWR\nBji0D6yWFRS0hskQsYr3/Sdrp45VsIq+Ansv2LFk0/ZbDzT4pNwJ0RNL564v\nIeR5wqiQG236URGGXfYg8VecvBqSjJrRS0BmIgoRlMfrYTd77vXI8eb7KW3G\nE4ER\r\n=oJ7Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDuE1I+ALrwXVwPbu5LY1qTyIFtexhlXBPngzQTeWsSgIhAL1Mdxaa7jh2E7aB7RKlbW7F8EdyUw+pdessCL/ITDIk"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.8-alpha-empty-state-styles-5986.1.2_1613398860632_0.8547489454103281"},"_hasShrinkwrap":false},"4.1.8-alpha-empty-state-styles-5989.1.2":{"name":"@crave/farmblocks-modal","version":"4.1.8-alpha-empty-state-styles-5989.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.4","@crave/farmblocks-card":"^3.1.15-alpha-empty-state-styles-5989.1.2+ed68449e","@crave/farmblocks-empty-state":"^5.1.6-alpha-empty-state-styles-5989.1.2+ed68449e","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"ed68449e2909cd4b3af05a45cded50b394138eca","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.8-alpha-empty-state-styles-5989.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-0TXJ9y+Kgqfy2ZB7nbG17btzym68DPplt1xY1lMgguWN5YGBsUAyoP/36OABI7MwsF1NzUWP7tPkaCOZv1/LRA==","shasum":"bd5dff673c0258c7728bfc08d10068302f52c720","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.8-alpha-empty-state-styles-5989.1.2.tgz","fileCount":12,"unpackedSize":33733,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLSVjCRA9TVsSAnZWagAAzcwP/0Ui2JbEBGgPD9V1Y7oT\nqgat0cntw19CFwFfXbRmQUWBi8zzKwzhMqbLUGWL3rmu+IAh/B1QKds6j/3k\npSd2+J59pqEET+lZdoJ/8m89Fy5KPZyvCjSRH6yoUjNn7MJ24yEbh/zQpdUj\nLp9Nsdx2iAuundwfhHElc/ZNeIZz2rE9xe24pCuVf/WgLDIWRnB6ezF3ozRi\n4O0gYHcT/KJwBO7juCxSY4ghSGoWwXJEVDVya85nYOspyUgjVi0461SF/sp3\nnqHuISkdo7WLYNnubG7SbKHHCkxnQ2bIuocKCwSd33AXOZtnWk+8Z3qUts0f\nglUwMZm3bscHBnzHvplJDh/HfWu8wlzntqidBSdtaN5ZnUJticuGCWpGmA1D\nkZkk5N7XKcByNlh9BS7ea/nfirqcEcoCg8G89nOsU1odt4MgVS/let+GAkNG\nPhiG/FJZggy+FbSyvcYaigeOYDQWV8go304RWcp+7KDMpowXCJR9fXxo556E\n2KpzP7bbGOKvfYWDQ5YfOMeekY4P6YhoeYMVot6K4YeJakVnToZqBF+rNHUi\nwKxVID4kg5OTiZm9Q2enI7VkAb2f5Pk3t+FZNduWLXfHpyUNti2RNkCnRFFl\nGR1DsfPIGfw9zyKmZFrHC620WwAJp/WuApAM4faRRf5OTGgS2Hp/2LC4N/YI\nfyfO\r\n=dHsY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuZj5mhKdo1iwG8NBxbPgoFfdWWg9y+9x0igLArRVL0AIhALIrjWrc80FRCiW+AyVwKKRHQ9B3mZ/HsNEXXnl6Ox5/"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.8-alpha-empty-state-styles-5989.1.2_1613571427296_0.2519406353354545"},"_hasShrinkwrap":false},"4.1.8":{"name":"@crave/farmblocks-modal","version":"4.1.8","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^8.0.27","styled-components":"^5.0.1","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.4","@crave/farmblocks-card":"^3.1.15","@crave/farmblocks-empty-state":"^5.1.6","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"9e4926254bdefbfec019654cfcb3ea6f11d1b8a4","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-vI6XfQBE22lISAx0b5ZZTFbrChl4pK155lOJnUYU0Ce40AkSqAxBBA7IFAVIfCENh2re+CeUW+wsPDI00OoVJw==","shasum":"476fa9630d226160a21a86bde9e2748025a14154","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.8.tgz","fileCount":12,"unpackedSize":33809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLSmNCRA9TVsSAnZWagAAmEkP/1sSJx7RTVWhdZfwjSe0\ntArfaSFSxpCngnsy8Rzpj2+vMtTKD+SbGC1m0csyxD+pLsuZ0Pgc2yYDt5vm\nJyu5Eg95wvTezCb2pZ+KoajkOHpWqDUE9u3mmncy2K+6sSZLbXg6Qo422LNE\nIm7UpyDQeTP5mCD6GFfdOUj15iAffb6/INWatkORgq2YitpQSJnX9U/k9hGI\nusSP3hjoFmhPdLM2gBN8Tf6vTHY7s/Dk2ctb2SNuEEBhZboTJhYZobbxpKNE\ntICkyGsYIsNRXAquvT+e+8hPGsIk6yTV5fVvxYR4rmFkVC90a0dJ86O67GRs\nYB1hPD8gXPPxFku6LsPuvaC2Njd4PUCJgjof+ulHqYrC2M4C0MDms7LkOXvJ\nCdnWbJ9UKa7SgfOGcu7GTChyAEfSkxTvm7haugX4TrcsCdTJkj47KAyArHAp\nGcPUq5I3ygPlACPd/8P/Nwurs+jhyrf6MNyQHRRxvCz3P7q5Mus2IblU0PNh\nMbXykXM6I7lPQ0me+cglcehBUBer6R1+uEm/EGk4hmNkehmiqnTF0DhTBI+A\n0Fxy7V6TGDltoTYUZIGZKzdc8p4MWgDlh0dJF0AsOW5zWmXPqtsfUtItgefi\nytkCdBbHE25vSiRQHN1u6A+l7aLLEmmYkKfZo16UZXkPwzY7CcLCCzlSqiov\nxVpV\r\n=W0hK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKyYG6R5OgaxWo3YMQSt3nJ9c1OrQxrRAtvEuZlqEHaQIhALShgXtvfAKug4J+tnT1PO7DEWiqfxtdzeXJm1/g6x8w"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.8_1613572492645_0.4786455397890741"},"_hasShrinkwrap":false},"4.1.9-alpha-update-deps-032021-6011.1.17":{"name":"@crave/farmblocks-modal","version":"4.1.9-alpha-update-deps-032021-6011.1.17","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.5-alpha-update-deps-032021-6011.1.42+b07aa4ce","@crave/farmblocks-card":"^3.1.16-alpha-update-deps-032021-6011.1.17+b07aa4ce","@crave/farmblocks-empty-state":"^5.1.7-alpha-update-deps-032021-6011.1.17+b07aa4ce","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b07aa4ceec2dccd95e16d93e56c46c802eeb03f7","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.9-alpha-update-deps-032021-6011.1.17","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-xjB0o0uYjKpatniS+tsSaSI9sMIvjcXbKfS4nRcq1ablGD/U8VVihTimV2E1bfmw5EPg3qZIDbbkBgVMW4agdA==","shasum":"968dc1446d40301e2081585951aeb44fdb37cab0","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.9-alpha-update-deps-032021-6011.1.17.tgz","fileCount":12,"unpackedSize":34026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZIcoCRA9TVsSAnZWagAA2pYP/A0waRVoNbOUA8k7LDIy\n1XJ94WrXZqwMxFwnZIiuheuGewVGaqVP01dNXdLzSgFB0viUI1hjOIx5zlbx\noOQwcHX5RwuVjIx7CtcEpNRA3F9GlwhDM0nEMB/4asCaQA/htSKdErZxn/75\neZk65JZdSW1hVcE0nYqYTVy24bXrU8RFNOvHn02DVT1IEEoB1DenZA0CRSE4\nofsWiHGnoi+rhqhebj0F2IvCM0suxfETdIP5uV0OCCxB0FGF6RlcX9YVBQld\nDCIcLdqqR+CezRsy2Akjy1/cz/aoMRDAjhOIOjMn+k7y7wo11J5XEsfxG2PH\ncx5jzMMlNV8+r+PLDjNygWO/ZvflTaJ3mZmJtSjY2tJRgMPRsuEDfZVN7apL\nVgTZsiOUAM3hhVSwUKkOQEc0H9hgepolJfFowPGYXB+rYlndPcSqEaDvWY1W\nn4ZJno/CkfmGlmSi+y2z1sFVXR87jn5eitdJpiwBj8Tb9nhusWSV+e7YtRub\nMeP1Av1n/sB6pYgncBMV5VUm9QvOdeJqqMOmKnaD4X0IE6lZPUrThU+/E/3U\nCjj4F6yHtFzfgOefqmO7tpy2zh6GsIwGXF71Xo832Wl8tHVJEZbFuBVG2Mcm\n04H8q3NkNYxyQa3ESM4UBrlcfssz1xjrlx82PmjBrzoffYL01d/bnNjNLYBv\nMhWe\r\n=DOwo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz4n4LigAEuoYAKeAvDHIGjwLJc83407FOV2LC7G3c1gIgGAz42o1/6fuPARr1x20oW9gjtQK3KiQTrDtJiAd4nKw="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.9-alpha-update-deps-032021-6011.1.17_1617200936259_0.15828065990408868"},"_hasShrinkwrap":false},"4.1.9-alpha-update-deps-032021-6038.1.36":{"name":"@crave/farmblocks-modal","version":"4.1.9-alpha-update-deps-032021-6038.1.36","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.5-alpha-update-deps-032021-6038.1.59+c16db8e1","@crave/farmblocks-card":"^3.1.16-alpha-update-deps-032021-6038.1.36+c16db8e1","@crave/farmblocks-empty-state":"^5.1.7-alpha-update-deps-032021-6038.1.36+c16db8e1","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"c16db8e1588b4b56f83b9bd54634c32152c9e781","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.9-alpha-update-deps-032021-6038.1.36","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-yBdcnRIxXmSFm7ASlKOc15uy9X1DSfkmVYJ1HkjpoUTybCAvXrxTI4WricobMWT88LQ5QkhGsl6AP4xfhW9e/w==","shasum":"94e4f5cb0b1f99394de6a3f47b5b525eb8358f3f","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.9-alpha-update-deps-032021-6038.1.36.tgz","fileCount":12,"unpackedSize":34026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcKi+CRA9TVsSAnZWagAAWLEP/RLKTewAa6nMAsCwKxpp\nuEpz2FTSx8fEtPVlLrVhadtPlpFWl5D4nHbShFrGurGw82sSDKBwIwRQJO+6\naxwIZgOpyfOcXXZQov2AiGmfFQJqUVkYrtdZaAXu2oMKRCABAG1mQuScRVgw\n2cuse2Mg4K/LdcfW3LQWFcKe/q8Syhay6kES9/GaM0VSRlvYIzUO+bFDJIfG\ngqYxRjTamBjIBT8BW45/k2vVfMCHTmK4XZJzh81vBeDi8RL+GnSNsHsCZNt+\nWCAU7kglepfBknkJbIiLOQsfgZ65NnL36LSuyMwa5I6ODIfboddTGCZrBDbb\nFQuiYiAO+o3MLcsgopdSnE/luGxx5mtsEU2pftXGBp9pSS995ucmF4w+YTNY\nF//nPFmUNCy2kSPbAplig9SBZuqQ7wGwzv603UjH7Xj99pHYgvd4tY2HCJNJ\nszazMShFeMDvAMS58oU14w6PBkbYTNgUXtLCEcZQZ91zNhWuIJYOwQtNii3Y\nKDoYvl5Yb1aANcK5JAdHLxNBgCD20qy/YwFUUrLYUq+WeLjMYDOW/TrQsvtH\nc4fRzg08F3Z/fBXgXqLDV0NfcOAhQ8byG59eCf7gaeqaZMKa1lqiPsYiizXU\nn+ykS5Nwxu63tYoLISJG+8kwtee5aDy0fjFrd0xTV/YPA6YTSgibB0gpORUK\npLF7\r\n=0oHv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSPuGhIdaGvgAPZ/s4nxob0wJSgMHrhwzItGGvWXa5fAiEAgedjYcyGwLEBCnyXWuq5Y6H7fJ9zD1sI1w1n0fyuIxQ="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.9-alpha-update-deps-032021-6038.1.36_1617995965575_0.3238583765023739"},"_hasShrinkwrap":false},"4.1.9":{"name":"@crave/farmblocks-modal","version":"4.1.9","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.5","@crave/farmblocks-card":"^3.1.16","@crave/farmblocks-empty-state":"^5.1.7","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"6c363db25b708288d932745d21cd88d4e3bbce63","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-7EJfpfKKrTYywSfHZ7AP899d8fMyriE26E3J/blsUz6VxHYDqYSzMmvMKbij9M/gcBGYStYAPvNDXKv784Hn9A==","shasum":"b5d31e05ff939bf14650dabb3382632ead7fbedc","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.9.tgz","fileCount":12,"unpackedSize":34135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfZcTCRA9TVsSAnZWagAAnHcQAIiwttGt9XWCol4hmhQb\nKrqa6XANOzAwPy0VAuDIc+GAjnOf6JXk5ymNjdhypkHusDoKxt8gwhvMWDNP\nWfc4v3L3S+cRgNzw/XuwfN+EbQpeNas4EaWQ5m9mc+eo8dmMUJp+/tSVYL3y\nysMljpt4T+qQqs3UJ6fgDhiAKMfEUTpSIbty1Q/aq7zXatG+Q2YAC7I4groS\nXvMzstbRLbIkuBTRBTgDfD1NT2qM0kCXljiOIW74TTD06kS0AU4bHm2meZoN\ngjB3PsLtZPyqPMqCRLt7NXKU6KXAJnTWpAd8leIN0e6g9/HjOCIknb83ULa0\nSQcvcaThQrgM/Gr8VCV5iG4wgkAdJFJ15KOosaCWp14Zrw1/NlFXqmDvNJyj\n/TNkCb/e8sbSrtKzJudzcPf/PcOV4YYns2KgJqc5mYt/UXnCT2tyoiaB/Jr9\nhTfaMKX3DFQyxO1w4Fm0GSDWhRzCjXcKylg3SpHs8fyzvwPc7nETZE6V1cGb\nE9zvtbwSrbEBBGGHu8OrydQoajStSZGuipoyEXNjsBI1x/P0xWtIymw9v+rb\npgl7kmun0obzmur0DHmTUCKpR5ibjcY3QPSiRloNeSaNmD8qDvuOQZsqwKdT\n2q4pkU3yfJOAhIrpk6ushq84joqQY/DUszt6xYKKgYZU63K6kzSITp/1oRBU\nYn2r\r\n=YPoZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTSJ8CFj4QL5aRf7Vx3dt+z2RsXxi/T1Igt8/+GmftnAIhAPN5GqaMbU05iyv/6Wj5Gb6OdHSdfc/lkFMrtkzXj2GC"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.9_1618843411527_0.9487764746567553"},"_hasShrinkwrap":false},"4.1.10-alpha-update-icons-6066.1.4":{"name":"@crave/farmblocks-modal","version":"4.1.10-alpha-update-icons-6066.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.6-alpha-update-icons-6066.1.4+97b9bcd8","@crave/farmblocks-card":"^3.1.17-alpha-update-icons-6066.1.4+97b9bcd8","@crave/farmblocks-empty-state":"^5.1.8-alpha-update-icons-6066.1.4+97b9bcd8","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"97b9bcd8789de8d9c98d163dd9d0e3d929ebd5e8","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.10-alpha-update-icons-6066.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-28RN3qoR7uXQHYW0xXtYXCdyzwyUxAWuLm/BIRwMP4XLAWaG8/Dp84dibdtgDoVpA+biYX2MMm4q7r3eJ5W6PA==","shasum":"595018cf0bd62b60cb739b54d2ebdff3acd411fa","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.10-alpha-update-icons-6066.1.4.tgz","fileCount":12,"unpackedSize":34282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiCi+CRA9TVsSAnZWagAABCoP/RF1goyZE4N0hvXAuKP7\nEi1/dlt/5xW7xqQ+IObjcV0XcIQ43f8NpOcsTeXfsoAhFfFbD4QJuNInNDHL\nJVPRltB+9AMbWcYbIWL9G1KByjj7DaMmZWg8d0wh2u+91nnvbL5fJEvQt6Nq\nqOpbmH7BlfX7MNfvrvuRc95qO+6hA4N11vO5enaT+LGzDB1DEKuPcpO158qq\n6zwSssBOSChmJ3w/W8+lJF2O7CrWj9vt7vEEZDE9WPDJmY/Vp0RRBGBTBobD\nYg9zSXBB9NakK2FoopeSkihnZ1KlaLFgNlf4Qp8rd/4er8rkDV4TxYtRrZUU\nxphynsxXffygUGxr4l7x9lEGvgH0St4gpMzxFoZeus+dikbkgliOjRlnKIpZ\n4KA8nq7YBvj3lTVB+vpMDx4IkNkdYf8Dq+aPJPCo+zaZz9sftYMQtU1b0a08\nmWtvqXbt5esVUv+A8JFkSPIEBWHrKobz0UEe3D+azzr27X6WNYOKR4reJ0ED\nWMWR5sTDLPoRjOK6toCdyP/lQezInx2mibztZLZY8+fTD4R3W2Q/lEFy149+\nvPr1HJhBtutIBoOekQmpZmME+MXYlX1cj1LJ72DdfewXOKG+jd+Nf4GmR4ym\nwmwvg0Wn+iFoDcYgCa8y9MR9OhQK8ZvdoJbNVCXFcXFep4kPrX8gHFIf3S3V\nsgOG\r\n=CnKW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlFa1TySbAQPkCCsXR+E+E2NuKcK0sP3/4aWKcfqPrFAiEAststHLRK8khzwgO8bW/N5/nevtH0zXCkKhEaTNOsoOU="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.10-alpha-update-icons-6066.1.4_1619536061997_0.19158441438076124"},"_hasShrinkwrap":false},"4.1.10-alpha-update-icons-6070.1.4":{"name":"@crave/farmblocks-modal","version":"4.1.10-alpha-update-icons-6070.1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.6-alpha-update-icons-6070.1.4+2e7c4aa0","@crave/farmblocks-card":"^3.1.17-alpha-update-icons-6070.1.4+2e7c4aa0","@crave/farmblocks-empty-state":"^5.1.8-alpha-update-icons-6070.1.4+2e7c4aa0","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"2e7c4aa06c2ce7795a675a07dfa519380c02f03d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.10-alpha-update-icons-6070.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-H8LZNLNiltkB8BVd978zmtIP1Mma/tcIZDrXCRdflhxzsBWzVxmoNEG1spXVrfwxt79fzPGdvst8FddFQRhqLg==","shasum":"bf8e10dc0ad769123e2a653c9b0ee0def4960870","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.10-alpha-update-icons-6070.1.4.tgz","fileCount":12,"unpackedSize":34282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHkGCRA9TVsSAnZWagAAzLMQAIjmpm1afmZK6B9Zhn8M\nbpqIlc0iqbA2AexXYIEycfN1xBeVNOO79/6d/xHMb939vjmdNSjLMw07qC92\nB2EFXmk3UEgEJkgMXLZzWOk3iQ5ivaLgKmdBPlI5MWqtaYvdbUASk7IVpodP\nM78fdZRTwtsrzik52J/rGfJ8WbFbS4DirhPNrjIWlkKqJhiy8dc4ZILJ0vh+\niNhREzpg7uuzebxelDsh4/SWHXaan6+03wxoEewuo+q1x1riRaQAiA0Qusqf\nuK/foqWOLTN+skt+W+Ks+99tdV+vYXygkATM3W9yYPSoB9fFeN/Q0pM6Xj3K\navUfLzDP67rvhJNSzrCNPF9FmVL2Nvz//3EqU1vjrYEBNldLcsJkp31Uf2BI\nW3S5B02oqHezYhlnjFGtRINdjxOM4yojJUSGl6E5GK2esrozo/F5Slc2DGgT\nzmZ7ecFzwMHsDUfsdDNQ9jrHxMb59RRym1T3fomqx0WSJHXIccVkLJM/u/zw\nP4UBgk3MrxqV5r3tKtv8zi1klK0QtFL8MkKuNSeVHSjTGpN+rFiy5yrSXclY\nxVIr+SC21u5X+whSVkRbmzHoIrfO3OGuz+PIMHDUdOeNPbPpTjjSF/Zhd+RN\nvVe10Je6tcX7O3hTRnEBs5+i5twhCcIL3dMD/GI4dN01dKEKTyynXtTE7m96\nHpLu\r\n=p9rY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNSMVEZsA5tS24TGEkcokDoKx85eh70JIraIlgd2VKIgIhAMCfdfM5EZbWEMlRPmtVj0yr5zeu3lp7vPbZaF4iIyXA"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.10-alpha-update-icons-6070.1.4_1619556614476_0.197172488599755"},"_hasShrinkwrap":false},"4.1.10-alpha-update-icons-1.4":{"name":"@crave/farmblocks-modal","version":"4.1.10-alpha-update-icons-1.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.6-alpha-update-icons-1.4+2e7c4aa0","@crave/farmblocks-card":"^3.1.17-alpha-update-icons-1.4+2e7c4aa0","@crave/farmblocks-empty-state":"^5.1.8-alpha-update-icons-1.4+2e7c4aa0","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"2e7c4aa06c2ce7795a675a07dfa519380c02f03d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.10-alpha-update-icons-1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-VChC9cAraLMH4Zav/zVJHJX3mgyVzwwnf7t+o4lKa+PU2DIFmcmrAFU6GreX7nzxRul7piUNs+QqA7UvH7wY0Q==","shasum":"2b9e42bd31f3afc93bdfc6574d2fbb9c7ef208c4","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.10-alpha-update-icons-1.4.tgz","fileCount":12,"unpackedSize":34262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiW/vCRA9TVsSAnZWagAAkGcP/20s17l8LqX7pZ4KA88z\npLMFIlZbzSJqueUuNhQzgZgy2qYEdrvFguhl5RFsqpDjLW7ow2vcJoo5QdkM\no8ftYMeO8VWvu2nmjBLqo7E1BMHLbZNoRxN31IQzalFCcXqVb8eEqAILr6fz\n6vwucye6Srd25C86/ogbfcVShdOmuUZQU9pNE8gVfT6WJpb/2YLgV/jHfeCS\nSfFEeUpZiYXVNWbf+oV+RufOX173maFMfupY/Gb9PEtnURYCDw/kZmCp1aBJ\nC5sR9pPQKAq85f/BKGBJzD3MSPztrC40Y85DEctxo61Unrg+oEnjoFhIYV+n\nm9PZR7H4+0AreMw3yOc7yhoURYJpSpMtt59JXK1ht2VDcDgrrAVeNxkr0Dwl\n97fE0rmXrT1Izf81d2TfRVYoZ7tdOTjaJhWXu7jsnvjjn9AQFtDcyHS6aNJA\nl/Sl+IUe7tJfv+RnkmffSBGy/6OK/0131JGeS6KVNbFdpRMJ2/IdbiEQs1zR\nhU8/b6luavfhIPMBAigs07N1GdrBmf/GTB/8kJviAnpAbcyIDxFADLzZFm0p\n1CrA05noGLoCOpJPquM7uaNDtbtRYxcBP9h7OH//N28EeOvuiv9sUIuRuKeg\nDnAYUJHNgj28dbD/5n2d3xIFZSDEYyiRxZyDEJOKpqtFjFuk8t3nFtR/uCV6\nWNQg\r\n=g2b3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDnqx7xhfQOI3J+inZni9qE/B5qt8DNHFqImLtu5rkH3AiAB51v+JBSNqABqjL7XlXzVeE60e5qrhHMunEDFpzpvjw=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.10-alpha-update-icons-1.4_1619619823049_0.480777038860867"},"_hasShrinkwrap":false},"4.1.10-alpha-update-icons-2.4":{"name":"@crave/farmblocks-modal","version":"4.1.10-alpha-update-icons-2.4","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.6-alpha-update-icons-2.4+2e7c4aa0","@crave/farmblocks-card":"^3.1.17-alpha-update-icons-2.4+2e7c4aa0","@crave/farmblocks-empty-state":"^5.1.8-alpha-update-icons-2.4+2e7c4aa0","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"2e7c4aa06c2ce7795a675a07dfa519380c02f03d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.1.10-alpha-update-icons-2.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-enqq0A6v8Oi+uTjLQHmnuAx2lrP84KL/JjO5Q66X37lX279LgoQuOYfv4gMsPn++rTwLB5XLOVkqccSSKgctzw==","shasum":"636e612167b733b443584d99980107320aec71bf","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.1.10-alpha-update-icons-2.4.tgz","fileCount":12,"unpackedSize":34262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiXz8CRA9TVsSAnZWagAAVnsQAJrbaxnwhuyN+RvZEGmR\neAJFIR3tF7W8IXc1dSDgG4S7n7rRpKX/y6al0hS4Q/faZVG4VPUc9e7gLhaM\nGRfx+/vbkAdMoOmVYthUXVc9UU2X2LwHoIHLZObu2BtwgRjmikSxHC5LOrMl\ngrSJQgNNYUzIHhFTgVigZcH1eNV8q3W19eYjrci0laQat6uk4VoCFS9yrro6\n/ANqa/Z1xhkTV1kfG89tJvhAJXvzJopq2cR8KE0OBnmPsWQ/HdB01SQpQZdp\nBSOuV4hsLvd/4nkte4T2wXr+Iu8j08weJR7A3ItwukRkfxTqIB65ccOvk3Cm\nk1DcZRCuObNDqN73sJJntIqua+SIQFJHGPU5k+ZH1dPs4w7Zp/8+QbCeSCtY\n+wj1GlBJEdW1Ci2kkyHap/QY+JtzRio52g0c7q2N0ONuWQIIoMMt425BOiVr\nXMDqMW3utMX3mZFndTafG8oyN4XOR1Bd4ax0Ebx3CnPRichSf2NAYzLmYhCv\n7Jf7MngPXabfUxdiZGi+tlKAwFc2lTnK8FuvjwAqRW8Np9c7M7XuX5AYETDV\nIJgxyzJzojIYxCiPQtq5zZO47y9SQxHIAmRIiN6yxhRPFYCwSxvJIXwSCJI1\nXuoT22PBK/WuDUw3xSI+2SaX9qJt1FNQhjQvdjxh4vxev44jTZNJhXp1xLpW\nm8HJ\r\n=BrDm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvUyhcZH9qKtYlVUH2gui1gSh9rtiXZqwp7FBd9EoM2AiAaVaa3d7gkj8NOrqCpdNbXRlUzMGjri21bT+mD2Ag5vQ=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.1.10-alpha-update-icons-2.4_1619623164401_0.67210756292112"},"_hasShrinkwrap":false},"4.2.0":{"name":"@crave/farmblocks-modal","version":"4.2.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.6","@crave/farmblocks-card":"^3.1.17","@crave/farmblocks-empty-state":"^5.1.8","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"dbd7c5afbd10a82ed16ab61b74c07ebb482b82ef","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.2.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-mSCB/XFXnYndo+79/ruDgoW+0wEdRHC9BOSqVA2SwdaVxUj49TtBLfyS7KzboJIH7QCLwAb9S/SrjlJ2fntK7w==","shasum":"78c18bc49cc258d49e073cb61c0b533f42c89383","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.0.tgz","fileCount":12,"unpackedSize":34408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiqRiCRA9TVsSAnZWagAA/4wP/3H6ZEPXQJTVbkkMAJ2x\ndt/yBA7SOv7r40PyUGZSZzIzQV7Z1Y0LNd3P9jTNyqoGMbtlTC1r3+BzhpI9\n65/QXKlDDyWWQ5rs1jPIXvJYFS9Asti85il0VlDgaYK+ytqCySlRkmRnb6Wi\nVxHPwgg85p/VsaPe01kE+ElI4oIbwO0MJ7XPqyh3UM71eo+LwxeMp83QNTR/\n4/NB13mzHMBVIYIS/T8+i5A7xliBXLenb1/VF1XUdqKAdI2qHYQZ0G0/W3KJ\nuJGXvGLk7LF28Ky91NFduESe9UJrGkLSu3HTP9mJo4jRhf+mq6tWkp3XQiG4\nfNVsivTstihjzLbPgb3pAb2KnyuiiAU8ontpeii1G+R4OHXTCUTUSdH5kk0y\nsQqX0f2GM3YdLfcJH5SDR/CRvRwZnrtjcyn86If2sbscLCTuJqt9kPPM7zEM\nz7k3wMM8RvFzvQICazZNrxYfs9gbB560OXBDMiJUGjM5Tjh5eNx0jzFCyVHW\n3Ow5uWmZrNH9caXIADgIxjjAv93bM65SIR0UoIOxoQ4n0EdnAi/JoOPWSt5q\nXuGV6ecMYSS13y6l/+r7NQqEdODbIyXn+1YRzrAPK69JwODqxPrmVtP+BC4m\n1xZ7CMFFAbiJAHyqC+Kbln7Ubs0zD2Vtm7mCErmcgzs+NSBuIcLwwcJSZeNh\ngNHh\r\n=NJWy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIUuvshop2L3pwNRN5jQfZiKkQKyT8yll4BcASkfJcsAIhAIQO0gqMhwNglRDSIOHstw+oWOtoNm+mAQBwdowhsKN/"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.0_1619698786092_0.7810759242996033"},"_hasShrinkwrap":false},"4.2.1-alpha-add-font-size-6125.1.7":{"name":"@crave/farmblocks-modal","version":"4.2.1-alpha-add-font-size-6125.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7-alpha-add-font-size-6125.1.7+7f475499","@crave/farmblocks-card":"^3.1.18-alpha-add-font-size-6125.1.7+7f475499","@crave/farmblocks-empty-state":"^5.1.9-alpha-add-font-size-6125.1.7+7f475499","@crave/farmblocks-text":"^3.6.6-alpha-add-font-size-6125.1.10+7f475499","@crave/farmblocks-theme":"^1.10.2-alpha-add-font-size-6125.1.104+7f475499","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"7f475499e3df2fdea986714bf3eec2907eff074b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.1-alpha-add-font-size-6125.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-UncMzy6YJ6vAu2wSht3CCkitHfWyERoPSVuKh12SoKnJS//am2dAltA5f6Sb5cw/8VZl1W/m29nzxjaoO+SLiw==","shasum":"360f5dc4c5af8b0b6cea307c0ea0fb7f517fe332","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.1-alpha-add-font-size-6125.1.7.tgz","fileCount":12,"unpackedSize":34639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5dwhCRA9TVsSAnZWagAAs7EQAIpKQM1bAtpwH8yXmaKl\nq1KCqlBDQCARgHyCA/3Zaw15RhmQHgOcEKDlSEqc/o4MCE0sGFkkyfg/9O9t\nRKpvPGM04SNe324RwMzJToYY+lTNXmOkenj+5t0vrJqMXrscOy0CeXiAaSTf\nsJ/PPdVpBACO1jnfqRkmdxHcTieWvcGPx+3JZKILWTs7BiafQTBMn21wX4N5\nMKmbrzoITAxCVkNiBd7QHB0Tgcy5slVTEUUlzxytNj6nX1nG9HaUmDV5Iq0z\nipHwUztFBQ2bsATS5q31C2RpjSRzfAMVC0StQLQCofVq6iBPJ77wX5j2xjjy\njnNiR9NO8IN7O/9shPBOGeLKxpjmG1uGb+B0m3gdtKROBGRjSj6OF38BVZYN\ne9FtqqHeHR0tHZlFmfk4uk2sSjbhT7ZhG81DDiDvLcA3Txu/aPczlpwHpfLl\nl36t3MiWFFvvOSG2Zb0Y9iQbtUPqCk/s7oqa0L4DZaAcYVb30/I/WBV4Lk4v\nEC3suUMMW/qp/uarY0nWqnn15QMi9OP0Iqj0N8NdcDcVtwNyyD0PxvfaF86T\nbrrhqRtbRRIERoRevRnMawXPhqWP9TK0110KHSCSqfUcURYhP4aZHY2v6NyS\nLxU51LRhoxuMcBJ7jqceA2I6iD82phrmn6+oNrQaThjvTfW7XIOFFDJs4McA\nsxpt\r\n=loOu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfRetTPVLli8G42NLHVMwoZtqHr540nhP5UesU+elWvAIhALVungcbGaV3unDKS/Rmtcw+1fDggc7xcmDUWBC94elY"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.1-alpha-add-font-size-6125.1.7_1625676833132_0.4724996862152675"},"_hasShrinkwrap":false},"4.2.1":{"name":"@crave/farmblocks-modal","version":"4.2.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7","@crave/farmblocks-card":"^3.1.18","@crave/farmblocks-empty-state":"^5.1.9","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"529df422c27b1ee56543ec2e1c331ec17d8d216f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.2.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-BWUfHUGytrY8PAQgiHAae89fNWGOnaLrj4PizmW0/Hxgow9piY1o803p89B4ekt8vj5zQLy+bZR1cwoEn/mAaQ==","shasum":"6e9754e05a9a4003840035d31066a00710826bdd","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.1.tgz","fileCount":12,"unpackedSize":34613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5eM7CRA9TVsSAnZWagAAi0UP+wXd7RmmyGCxftira7hg\nh2qssT+5pBOKC5OJV6zHcYFx9eAfiL2zxKLBGiWN5r+6Kkfplxx+znkhSSQQ\nNJpxFEUxwMSP2n3eSm86ybyGosZqIjsmWF2su83Lx+2aw1mXfHiT8s8FS55Z\nUUkxIXVFT+do4NqJ3KL59d6Cr2cOZ9R83nObTmcIsHG2o5yee4ZaeeNwBROM\nKxk+0teRLMrth9xwa8NSu2JPIuBrQxRfPphXRpjz/p34qKNsrE9bBZmpRbyZ\n6h2W5O1WKdL/uoj8PyizcI0x/DI1QevlvsFccXy/QoepxLajwKsRrK/pUhmS\ncHEt7KUAwdDVIX46LrnYuq8MUsYOIgrVS/5AeR8akAXkWaNEuv38qvkNYvti\nEIQgLAvwn+mvJzat+x5tYMNSipzD7p1oNsm9a9AOgRr0NgcAhxprAymKq4wx\nb16Y82bgl0Qfu+ytqQleWh6vTE/M2/vVN5P2jjS7/WF37UxDez7gdT0rftLt\n7IGXF3vG2uJ8djl+apha/yCWgy+yG7Rkytjma3h7d3tVJNhmwLL0PlF5fbFI\nWh1oIwHTb4wvOcz+8slHPJ10Y4GhCZ+z+9sOuWPMWmguSkB4vJjdLzP5U1gu\n0AUz+JeLj3KTRcK5UEkBjZAe612nU7vS3rLl2GuzzTM44BwkDxfy8vN1SS47\nHo58\r\n=tirz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBOADivL7rLiw4LC+PJ+HOYEzsFFS/4oLLEFE7vC3EtoAiBNm4sZzWb452abYaedRftIkfr+2MQ/zKyZ/J4jzmGCpA=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.1_1625678648742_0.2860120611767074"},"_hasShrinkwrap":false},"4.2.2-alpha-fix-useScrollLock-6130.1.1":{"name":"@crave/farmblocks-modal","version":"4.2.2-alpha-fix-useScrollLock-6130.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7","@crave/farmblocks-card":"^3.1.18","@crave/farmblocks-empty-state":"^5.1.9","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"83eb6ba5f54abcc303045b4ebe36eb7648f06d69","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.2-alpha-fix-useScrollLock-6130.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Ff5tUOPOGMZUMDn/8yg+NWPs/rTRuhOnRpnyRZ0PEkKejkaA4nwogdrmMrJx5o3g63R3g2owrum2xiLmQvAZ5w==","shasum":"a853852aac5c791e2c609e891aaac0a288763f0e","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.2-alpha-fix-useScrollLock-6130.1.1.tgz","fileCount":12,"unpackedSize":34822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+vkECRA9TVsSAnZWagAAOQgQAKDUYX8lXKJz+b3XY9ix\nkBZ6e4ea2qGJszYcZwMtORlUvA3XxI4J6VRs6GcektfTcbmlWLJHMyb4yg/M\nuu4Ih25D2N79ilCfbFLmrFt1LCP8kxkO1yzYLJRaFrkpOASlEJcmyCfCk0uy\nGEZQHT/j9BenQw5H3ZYqc/54MsKwUCqga9mVSCVD95sAKQWW/97F6824DfyN\nLpBPvJLT1E7PGzQ3+x8NrzZukPyPODrkKTaVQaCTSzt8aTZmH41VoPcCZiGp\nQwYybuXN4HASz5e/7wUTWrfD9QFe23nk559a0kj/IOj6LVCMbbgYkQ+fRLIZ\n8eTw/rBErgWCp6qytHMyqRVG40XepQ022iB1AA8x27b3z9uW15xwwq3Ixkwk\nIpFmas4vbdVl85VGqOiAKEJcT6Casg3OhPcX29w/I4TU20YgVx/M/+gZqdfL\nyb4Zc2Cvcqfvjvsf1e24eXfxbdac4ksadzhdqwOfp6mBvV86EJOm8rFZFWco\nKxi51zArB2QihjtA2EXRmLtdShAQFSqjNxkG6o/CfNKU/5R77JX7mRRi2JyE\n5SUscY6dnYD5Hf+IG/FJnadbypjAphldb0qscgfbPMcPvCdD6hLg+YEeqpG9\nVmKhVJY/11aS73e4ICVILVQbrHb/MhGXU0uiPpRJDFtZN4BwQWemMk6wsMHn\nhf4l\r\n=ba/l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbc+B9r0/k1sQi1OPJV0h/MzyAyFaKDyP+UjyYhtWzeAiApirrFONOgdEQLWtTSfeQFm1X1YJ8B2CimcFkrOLnYGg=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.2-alpha-fix-useScrollLock-6130.1.1_1627060484140_0.4832733045941313"},"_hasShrinkwrap":false},"4.2.2-alpha-fix-useScrollLock-6132.1.6":{"name":"@crave/farmblocks-modal","version":"4.2.2-alpha-fix-useScrollLock-6132.1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7","@crave/farmblocks-card":"^3.1.18","@crave/farmblocks-empty-state":"^5.1.9","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"f24406e9929e307b987654f71f09106fd2f5f50e","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.2-alpha-fix-useScrollLock-6132.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-PB/KuUgSJUO4cs6wWLb/TYAolL0o5QVGyap2EP9lMjaccAUJurRGD83yT00o2SjtASNu/TSHRNdPPlIAhTbUNA==","shasum":"5c6eecf0acddfc934127f79b9cb09ecf2c95d09b","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.2-alpha-fix-useScrollLock-6132.1.6.tgz","fileCount":11,"unpackedSize":33753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zfdCRA9TVsSAnZWagAAmVEP/2sM60k3mRbm3ZfMV9Ul\nnVAoK3nroAkqWKyjPEpdQvh6e75iPKiqLYkgOzQAd6PU7BA7PBPpiBX+nsvl\nLajEviimzuTHbSo+PxyRmm34AmpB8iQqqKWbe5bw6M4vi9duEiFFSoNrGh9e\nKCHtObpiZB/xDm0M0lmxWghPCh+iauQ5s3QJzFNTB3CZ4f2pcCdll6EZjlih\nNuWaQ2Z1Wj/vbKCvTc+KI9w67Pc7U1vXuNic4xUOpad79jT7k3H3vsw4XJCR\nYurHQGx9FYrm9Vii/0cgW0xfjsG3l5bfGXW75jge1iCYxr+qGLlOP1OvEr7B\ni99o1KStmwUVWKea/dDjl304nA/Oe6TB3JiUx6stb5Y54op7OkGXqhJxRRPN\n/rznvtondA/3riKO+ToxF22rCeWxSNh8F/c68Vb9MkOE6R2s9meXkAZV8dtf\nQZs1uxMFB0vr/2UAZv3SpjT5pTInSpDskbitAtlKcfuQ3maScDBR1eY9Kw4N\na7hQZ0tYMgSHyWH9KYEHKH0nuuR/NW5PdVkcFahQ/6uVm8+aaLsTNkS65cYC\ne452/9BAr9as5BpUfyMhKf/hxvvpOkANtiu9OjyPwF+RTV16F/C++Zo1Tjkw\nNT3R1zVtu2bvd2hAaxZdJ77kph3Y9kgved3yZd7kAZ6Cpi/GCGkOpIFtJZoF\nTpHH\r\n=mELk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIDOXgCd9vxQtrSo+WY4msD/dfvUGXp+uM/sP7L7eOTysAh9zKaIJgv3oGT1H4k8YGsUfyLaVffd3csj+TWwiPKoH"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.2-alpha-fix-useScrollLock-6132.1.6_1627076573865_0.8842467975207533"},"_hasShrinkwrap":false},"4.2.2-scroll-lock-1.6":{"name":"@crave/farmblocks-modal","version":"4.2.2-scroll-lock-1.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7","@crave/farmblocks-card":"^3.1.18","@crave/farmblocks-empty-state":"^5.1.9","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"f24406e9929e307b987654f71f09106fd2f5f50e","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.2-scroll-lock-1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-BCh3/WazVGQ2Er4ay2IY7X/G6uZmoFdEur+FkX+euD6MxGsHgr7PJ8Xw3+dXq9N3lbul4QZvlGw0jU147oGa9g==","shasum":"e6c30fe5336e3cdf9de17fa462c55388b9ea111c","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.2-scroll-lock-1.6.tgz","fileCount":11,"unpackedSize":33736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zjrCRA9TVsSAnZWagAAZzAP/RHIARnmA3bs4NUSs29d\nXFrfbj6D9FJUdIGj4rgaM5lQ90451xMi6ldxVTvgCihl1xXfeHiNI2mvD5vX\nPdwnfXefO+1HzNFmGwpHvIvkj3LWTUuGfaF9Z4d0xTI7lmDvnE7/sDmK1rbO\nwfeJ5pWAA6u0Ra2cxqEwNWjAHlLpFeJw6P3DZ1C3CGj85gGn0XG7ToCRsZbr\n6xAw6txRDvmKHT5UiiM2eo1vNzTQNJqr44U/sQTSlt0zuu4gUTBxPJnII1Pb\n+QWFJTbTt8d69LV3YQMEpkRy7Pctl3913wfvkB8kUxfrHD/Zoed+vZ8ZzQaU\nNu5gd2QMzSRtSFRx1umV7zwe2tHoBjRk0UBSKnst9TSm/tGwQi07XTHDD6JE\nyo9hgrI6BdsjBs8+5mydT+9re0FcP5yklAZRdyMsLd8087ZPETC5/rredH35\n4RKU5osIxalk05B4zcCwLo2UnsKZT1vusakFi0Z5o4S6CXj/RePXn/85vRHS\nWOozLm9UkigEVBDZVhh0Erj8fClJY1Boh8N+epPxWVTYlnQv6n7/12HW32P0\nhnYvBdOf/UQ/VDualblbWWBE5ppaN4wCOtNuZfdqhnGxJGFkwq0K0XX32ap7\nQq3ndSsRVT+oRWmbcjDpcKHkywWYXc1MvRQVBVmlJb2pY8O6pmL5wXYOBw1q\nW4v0\r\n=ueqc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNnpl8DNANCr5l5iy6d0werR8G02ikypDShXrAT6RBuAiAgQbndVnKXegzORVFGtJoBWYGj7n0EEcBRI2xkeO1VNw=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.2-scroll-lock-1.6_1627076843283_0.5259497390031445"},"_hasShrinkwrap":false},"4.2.2-alpha.6":{"name":"@crave/farmblocks-modal","version":"4.2.2-alpha.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7","@crave/farmblocks-card":"^3.1.18","@crave/farmblocks-empty-state":"^5.1.9","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"f24406e9929e307b987654f71f09106fd2f5f50e","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.2-alpha.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-iW89uxUhcWyXrA/dBUmMUsXJLIiWJMjuNneHNKhw9rVgtuSyxqEedU0VPBgZcaCNxwXoKeuIcnGJqcopd+e2ow==","shasum":"bd07edc5459b50202b4bd1afe6f403b2565367e3","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.2-alpha.6.tgz","fileCount":11,"unpackedSize":33728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zkdCRA9TVsSAnZWagAASrUP/RWVfyQSXqIZe82PxFHB\nrRAamlu4E2/6PkmuRT0fhGastimd9rkyXEWENrlnhywp10CQXKM6z6I7LcK4\nkSrA1n0Jqi3oVFOxSnxghxNAokBaSOoH3QTjkiLVCOhQvkp+jo68tPKSCNaE\nY2WK1mQbHRpzU72MH1R/BWR1xPX/RvKWgtnEEDiM7HwCx2tUi5kHaSDNFKit\nLc0MY9TRO16FTW+LluhqJlq3k58I2QNKMeYucSQ91FHHSxsY0CPFhbRXUupF\nhXqCKuzt4CCjvCsCi07OPtRcuRHYh85J8cyC874LJC7ECNyD0lTuraSDOJRh\na8POLRyKzVtXkD5LRWZz2dvWq3hShnFztYhiDuzMxBizJFQm4sFNsxi/XjHe\n6nVsYQ/MoQoGp6zwMTWt39+dKN3vtFEErJJRPSpY8ieHLBgZbYZ4YUGl8WQq\nEnbREOkdgbY6nUWWHvfqVPkFsmtaEISfT068gK/+HE0LsDZlvE+68ShYURS5\nDMAUnPVL6vbL6hDWWmrhpR76MoKd7x/kb74V70oHNILU3XFF+QZyZlW9DSdr\n/idH1G7RQwtRCZaI3WlqJcviS3qLUtK+ggtp/s1e/ardZaL6skDNPPG+N9mN\nEBzvfQcstD/waih36tzeqYUkD3Y1Xuaa2aVmrirc0O7z1LLYfC3PkRCseQwq\nHWbr\r\n=xQmc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7vvcxjUFjerYnTjljeXWdHqOGmOfz8Tln4Utvpg7sIAIhANDyNnTfjRTRB7UasF21s6Hn6unzGdCMu7/qv+9I6fy4"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.2-alpha.6_1627076893706_0.801079551272948"},"_hasShrinkwrap":false},"4.2.2-alpha-fix-useScrollLock-6134.1.5":{"name":"@crave/farmblocks-modal","version":"4.2.2-alpha-fix-useScrollLock-6134.1.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7","@crave/farmblocks-card":"^3.1.18","@crave/farmblocks-empty-state":"^5.1.9","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b05e47c9b2159c4ff0e04a16d01215a536f3b3c0","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.2-alpha-fix-useScrollLock-6134.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-qtUnHtCCbQgWwqAPQ4S0r7eNO5pdzTs0MjacN0CSQyyZbghAMaspcTwOD960dGQIQ6dJVmM2wAlHbAH8rLzfig==","shasum":"678486ad64943ebbd2df2c31c3d2d9984797da0a","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.2-alpha-fix-useScrollLock-6134.1.5.tgz","fileCount":11,"unpackedSize":33753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zxPCRA9TVsSAnZWagAApAsP/1x85qU+6qA03tziXXHW\nj2YvTDtYdPm3CpGxJmhDR/UpN+sNOaBsHNp/hbpyJlJsrzGS7p5Ll3ki9opF\nw0e9sZF9XveWPJPkLahUyDgj/pDwxdGYM+WF2IthSUw0OqJeNyFXPnF8FjnC\nZba51VBVoiyXcwfn2j+6CYT4UpIdPcOPzNWjdiwXfOTR5AywiOXJtKHoPP+q\nwDa48jyTSziqR1Jm9n70U1gSptLajk4Ij6dVPJ28BYJ9rA4nspRJq/Cv8/+g\nth1ByxYs7ZRgTJFDDsvhl3v25IE/G4IybjvFxm0wUEaWNetpmiDFgqjqDipU\nsQ2xthM5ERFrirs+7LKCb1AwvhmVzWcA5X7VgHYjg4x3fLGV8gehN6s8QPRS\nZ/k5/P9dSY1v1gDD3K1D68N6GNINIxO2e60b459UAWLsdd9NZRyfLb9LJa7w\nFS8/aCImrEb/BsUGkIgn6X6+Sv77VGPkIEM906CZDHTWUrPLjITeJuhoVmIW\n6pGIyMDjoWA/HWhxDr2qsrkwbdV2OnAzN1VGbseYHZDVRAABdvhe6ZVpZRmM\nac/VRWdpK7bs9rqOLxVTBz49eYFFddQmljT7CRpXq/YgL+BGfLOuVle2Rt9D\nu2TozoNVzhzneL4apbs6e4BxJtCWyN4zHB7t2exdH40LsCpZjQJ0Ebu15kwZ\n+f+0\r\n=cbXA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEEcKRxV2nxoCN6b+FwoIx+cYhC1NuYT9BN3EQKtb1m3AiBn/aEn1HCPUoer1MnrDJra/MrJEMLEoK2+QwzmfCop0g=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.2-alpha-fix-useScrollLock-6134.1.5_1627077711069_0.22225341479588634"},"_hasShrinkwrap":false},"4.2.2-scroll-lock-3.5":{"name":"@crave/farmblocks-modal","version":"4.2.2-scroll-lock-3.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7","@crave/farmblocks-card":"^3.1.18","@crave/farmblocks-empty-state":"^5.1.9","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b05e47c9b2159c4ff0e04a16d01215a536f3b3c0","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.2-scroll-lock-3.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-yLUEydeUoQQz0J+B2SXSgiNBHsAVQYZlB9h5xLsqagF/L5c4/DU4zk59wL+iIURWWJkPfRaQF+6kmU8w46SX7A==","shasum":"3e04f9d6e82a5cd728d6656870ddfc7d493ffb2a","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.2-scroll-lock-3.5.tgz","fileCount":11,"unpackedSize":33736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+z0FCRA9TVsSAnZWagAAqj8P/1KM2OA9rGLDcSwmfxrS\nMFkKVDStbv5fqYun3Je9QBNCT33HE3d9+70aXa0ElFaiysZaOIGq+VwMrUBJ\ndjBXZFLJkaby76vKDxVp90fSPPEzM9mHiCvTP9xRaiurfd8gYAa8zUebqJRZ\nqUZUlzs7KwPalxpSmv4tRGJ/x3jVdCK/HlG8yacj7YyliBHO+yXqX9YtmQ0Q\nB6cw9EURakqkto1D74B90OIsogty9OxuFy7voMrIEnitgn3NI2dGNUDjM2hU\n43WkBBlzk0+dLm2DcKc5dtLYGR+7J81nFssMjI0GVqjCR/3PIWkmf6GSAFSc\njlNE4U5p+WORtjdmcGOUWbnsSJAQp8rO77q8rlmmLAZQFGcTaDQnimXCT/9r\nhmipMv8tC+cAg98ioJjqqR7miwZAvYTOgplH4gI+sz/6KTddvDNOo0eSYVAx\nE4HbEa2eqW4vQ3Xdd16Hsgp/BQIsLMpoztFzHEwGTctGUqGvtcIvG4RD7Fd9\nmOYV/GnEh+BVbnZLjN6oN7sTUUeQRAM1WUj8sfrsCIBm63Qy0XNSY+Ocu0VD\n8FmQTpouWesIZEvASJ9lVyJ1R/8i/FYUx/ZcCvdtIf9gF+jsXm9txW4trmoT\nVZ4pFUbrkRxTVQCATsf1MMYupApnLu3QrC1JnZyb7YfMl/e9V52iUkBPDphV\nQTsQ\r\n=JuWP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSXr4N1dlnm5d8WZhiv16xCcpzARqwHWOS7UHMxrc2yAIhAKye7aOxIhlvyf389YdzuwAWd4SL97Mp4i5IU6V+avTE"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.2-scroll-lock-3.5_1627077892952_0.19074664259762297"},"_hasShrinkwrap":false},"4.2.2-scroll-lock-4.5":{"name":"@crave/farmblocks-modal","version":"4.2.2-scroll-lock-4.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7","@crave/farmblocks-card":"^3.1.18","@crave/farmblocks-empty-state":"^5.1.9","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b05e47c9b2159c4ff0e04a16d01215a536f3b3c0","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.2-scroll-lock-4.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-LFaa1XR4vbOeqjZGTqocSPag6qlh0hOyK+W6P2rmOPvy6Lqtp0ge2LR6zm8JaeaOlojUhU7MjdtSLS4ZlljCCA==","shasum":"da5a06965fd155c871f17ab7d6516bdd37edb445","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.2-scroll-lock-4.5.tgz","fileCount":11,"unpackedSize":33736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+z0XCRA9TVsSAnZWagAAFoAQAIWQgB3FydLmduKlZsZI\n/ilC9XQP/StR0iJQ2QbG+M6dQ1rzGL1js9ey+wE2uvQ4ExNSla89ejB15NkF\nMkEZiESJunTWpdgeo/Pgg7RTlT4VK91VWWTuCz3FRmq2ps4Yy9WRKmdX7oln\nssjOJvxAhRT3I+BltzBzMDaeOO/eJ3BW6QCSQFuxGj/uiLbTE4ShE/veARzZ\nqwyDnIm1WXgAZnsKb/YLnLlytbDcs9v5kOS2TD9SvUjwtzC+++DEGldAqHxG\njYksU80wcUo+2nH6Y/v4fnS6Rhl7AeIq9ixPMrGzIJHqmKUjTZia3cgiJSQp\ncBGS5XzmMRcmIZLpdZoCyXeYlhR4V6q7jDOum0invlaBtP64IgJ7/0qEki1x\n/G86e11HVV/FfQw1sM8asy436dRlmv5rJFrn/FHrTfY0GOkfRZphRzvLtEKq\n4NFbvrQ4oVRmkMkcUJFb9lq9wMD7wYWeDEtjcn9AimHkGueQQWMH2Yn8LtH5\nU/QQSTFpS5sMHsSW57AvNMBGEi+6AOHXPVt3/zv3klPLHMGYjy9NXqKwUvEp\n988qZA6JYFpHXpwp8CJZTiCAGLbipO7dau+0eDd/j3Uv8qx/8MfWPpXyAwyU\nhCS8WonoOXz4lowlctc9O3Xw931CzC8BqPG8qocFpVNHsdFUwvO+NHsx1iIX\nC942\r\n=/wQd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDDAQD24lkLs80QB8XDf4BsnEI0TX4ZA3xt7CF7w8keQAiEAxW5dfNR++OJcXyQVlgSfYpKkECTi4PUiNuVQknyzrB0="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.2-scroll-lock-4.5_1627077910991_0.43952837652319676"},"_hasShrinkwrap":false},"4.2.2-scroll-lock-5.5":{"name":"@crave/farmblocks-modal","version":"4.2.2-scroll-lock-5.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7","@crave/farmblocks-card":"^3.1.18","@crave/farmblocks-empty-state":"^5.1.9","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b05e47c9b2159c4ff0e04a16d01215a536f3b3c0","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.2-scroll-lock-5.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-yehUGE2cTVe5WXIy3ey64lXBD1IjE10+Fz12KCQjqWRtEWnd+nhSSUCVpstb+x80ZXDCmLbo0UaXG1CHAsW8TA==","shasum":"648690f99b0f0d80dff9903f591b5faccaf35c20","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.2-scroll-lock-5.5.tgz","fileCount":11,"unpackedSize":33736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+z1XCRA9TVsSAnZWagAAl9sQAJHb5HPEOZdqBZP4VE9a\n0YpcqJCTuDHg3pmN/vJaE/drC9xdaCO0KsjmOPUyvRgurbOlTURnVtANYZLF\nV486QvqPqbYPJVKAfSYIeqqePV22o7oXRwkEaiW3V64GeA1BxE/pqhwERP1b\nWMKJT6AjOrruJ8euQyqY31w1h0Hd/KIMo579wKtsPka7LGx6m+ndTe56/DIT\nfcUPt8vTfXL5GfDIFm7+xwqFUsNIZRT2Z2XcSipaUuUPxXUL9uwN1G76xg6u\nRsZseMKoKaabaIqS3mPxCOo4c92QkTdcuPb703AmCxxSNdPsDx7QXEw6Ho4f\n/lnrWH5GSpy52C3eP8lroDenoTD4ly5XgsbPq//rpByFcps/B7M90lR2e52P\n+1qyD45GTSH5mxBCOEyH6ztVG1+a90fQAH79uTQHHYPogGFbFRLqnMQYUZda\nadPUtRxf2xgPlUu2z0nb9zrF29mqt0R0AX1EIfaw1oCXzd3+ZHgEkJoZkmL8\nKIJiRHBDCVbJ5o71mRtZZGTZDr3bxEZv/2nrHZ4xRpnSHERXs/vUG9vMWzpb\nJqRUq3Zo1CUUUoPk2yahHHGb5YmgEJMCfzwgK3cA6OXQVe9ZFPE5/hJhbAQT\n+71aYhcdnJvV7HIxawH2iFWdB9PgCH4LR4Pq9+dKenho6b1Gyrtp5LWn4r1d\nh7vI\r\n=Ji7m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICODSZXfP8Z4tg/oGnB1/+KmpiOdcqPiuE07oWClAkVHAiEA7TKM0/RykwV4tJQvEFDQ5Xp6NCnFCtymtF2mvQFdPCE="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.2-scroll-lock-5.5_1627077975545_0.8370063831740076"},"_hasShrinkwrap":false},"4.2.2-scroll-lock-6.5":{"name":"@crave/farmblocks-modal","version":"4.2.2-scroll-lock-6.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.7","@crave/farmblocks-card":"^3.1.18","@crave/farmblocks-empty-state":"^5.1.9","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"b05e47c9b2159c4ff0e04a16d01215a536f3b3c0","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.2-scroll-lock-6.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-JlDpEmQIWK66dFeATRjTbx0+vg0jkG8ZfGZB/X6QKy94ktooclfb40Rxjv7kh7enbjq0fnRYFJzUholo4qI2DQ==","shasum":"573ee609bcfc9cc95f65cdb85382bb0619244011","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.2-scroll-lock-6.5.tgz","fileCount":11,"unpackedSize":33736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+z1uCRA9TVsSAnZWagAA4r8P/ic4LSxT5udpJJqsXkPM\nYba93mwTPjxKJIpVGOCY5P7/M7xlIEy56e34JIfKQTfR6KXAMhsIA8oOpP6r\n11IhdxfEqOAWDOlszF5Sy9I5Cq6Bu3GSAlvzZP5Ba8l2fYVDBq7x1LNCIoGF\ntFbZkUWzwZ1IPbvaSk18y4KC/6obVD24TLO7ynUUN89OkZDYll/Q1Wd0zSlP\n7mG3ns1oxOAc+0uG0DohJhx+FLqb2zWfnzbr/L9mqwulnLjtJyodPh29OTFz\nZLgpFS//0ZDB8WVhmhhPaisWLZfobyKsBUNY9EGcjAvRcWqtO4aCIIxvW4pN\nmluAFKNBsNk202K1bKdZ0b2aGO+CKtBPkQICMcSBsjGVogvxPzvjJUjbtRJP\nVK3ckR1ytToizoG5tNbungaDcm7VXQsBZ0PFr8aP1GK0xz7/fBO0n3LGP7C+\ngWNSzXpE80E9ZWO/Hx0HAI6PrOWrA6N0xuv/E4wE0mAiNywAwOkHEjP4LddQ\nOGy1drUtgAWyjb4+dwfOGWbrWD7QNa+YMF9NnczpC0D8BWTvl5WXb9lppWaw\nltfcl96sNKzQBA2BEfX3dHSZKla2q+8hN94zQj9pzaUzlF+YskFMGRXiCWjM\n3HhAtsmPX51Qivmz+UE/KAUHe1eiBrrd35Y7JWxQB5wU4tipmoTbVE48qRaS\nrwA4\r\n=0W6t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPszBZ39DMM8Dfe3j/LvkNncwN7/VNmenbdiFiKiNwjQIhAM4eIbm6Xv8hM4EQBirKgMBExJXjUDn5jGXWw5aQv+Jz"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.2-scroll-lock-6.5_1627077998067_0.6586618081007851"},"_hasShrinkwrap":false},"4.2.2":{"name":"@crave/farmblocks-modal","version":"4.2.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.8","@crave/farmblocks-card":"^3.1.19","@crave/farmblocks-empty-state":"^5.1.10","@crave/farmblocks-text":"^3.6.7","@crave/farmblocks-theme":"^1.12.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"3f925c2d08be62ee3671411e5fe69272aa3c6960","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.2.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-ZhomVVkB4qg2XOt4hg4sJK5TVRW3q7dPgqi/+b4Wj2G8BcNa4RMthwpaAcIaYHJS43tbPW4R7dy2A+08NmkYsg==","shasum":"3d9193a7d752bada3260bc865e3c2669e3411da4","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.2.tgz","fileCount":11,"unpackedSize":34186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+0APCRA9TVsSAnZWagAAtqoP/ilpSOMjxP1fWsI8Hy+S\nYi4ZXcX630c/UN5GR5eIidK3Gf5XdSxnA77T371BWKQJRCGjEkRxATJaqrkS\nHqFUrZ8TlhdZWQ8QJF7c/l1tGW28IfpPIOmzpjanZhXNyDw8L/bAZrN3wK7N\nJYrrCrchn9EF+DiAw3Y3S0xu4CDQYKBoEFEhI9jRZEnleBhzm04+Wa0Y13I5\nDg1d8AeV/+Te8uNoedgyO27yGOA8UgN1AV9WQHsMbdCSfoTIW2diVCKgxUA3\ndPqqB9XLe87RuQEWTtyl43i9lQFOBfEzonvDDOdkYNPga8IWmZAoKnSx9U01\nV6I9GmcE3OF9TjepW4OZ0deT9MUtH11vghEs7a2kiZqC/3HPoX2Dm0/FwsfW\nj9hYwQcrS1HLf6UBEWzr+sUwvv8t02e7S/QSSpmI1SzEHFNjScZlFaK9dHQ7\nKOb/Z/87jqdyqbnfusFiEh6xz3ntUjN1VCirpzeRSLy+rR5I68bsXX9/DFid\nKGxl4tv2BKApaotDoj0/2uMRKDyiiL4DEOEW1O7GNP46BEcoixJ0+ZPIJGOG\nDifC9n0YqC7hDrvBpIJ+uwWApYQmWDyPbqIMYNaSispslB7gimmBQMXoSVD8\n/KeEpPv/Zg5NfuqQQbiRtVQHZf9n+UZs/JydOUE9tcxpoCxxJJzndAMhhTRU\nLxf3\r\n=Ppz4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuPWfzK/2q8h4dMdbvPcPUgh4BMEnThoTEbXG1UksSLAIhANqpSF3rm4VPqoFL551XBWLp+ybwQhKkd6h0w6Pk/ZUu"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.2_1627078671151_0.1480097882132625"},"_hasShrinkwrap":false},"4.2.5-alpha-lerna-force-publish-6137.1.0":{"name":"@crave/farmblocks-modal","version":"4.2.5-alpha-lerna-force-publish-6137.1.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.11-alpha-lerna-force-publish-6137.1.0+091356cb","@crave/farmblocks-card":"^3.1.22-alpha-lerna-force-publish-6137.1.0+091356cb","@crave/farmblocks-empty-state":"^5.1.13-alpha-lerna-force-publish-6137.1.0+091356cb","@crave/farmblocks-text":"^3.6.10-alpha-lerna-force-publish-6137.1.0+091356cb","@crave/farmblocks-theme":"^1.12.3-alpha-lerna-force-publish-6137.1.0+091356cb","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"091356cb26d3d195b382de0928e69fe7f006cfcc","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.5-alpha-lerna-force-publish-6137.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-zV/s2m2ncXxIIv5EeigJS7PHJUccgfBBla/3eFPkE01xg1wNiDVF1yXGo8xJGvXXBAKfv59qSXh5HMl+5Qo9cw==","shasum":"420394e597b21703a7655567fcca651d1586d339","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.5-alpha-lerna-force-publish-6137.1.0.tgz","fileCount":11,"unpackedSize":34862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/r6OCRA9TVsSAnZWagAAp1oP+wfHWOu2PnhLiujWMctw\nAoDWQ/hS7R0MUy6vH56vAxwPOK/Y//kumMRXrUK/VMY56OSocLEM10EqqbIb\nkUlz4MtKIffJbfHwbj3FD+us+TxlKS3WM8FIuVve8tzOzOBf5HewxiVgPBLW\n91f+DN9QwB81QKFWH/ouIOI4E/4WZdcpChWWQzytcKQzu4EBygynSw1c9Wyz\nYzaCzSehSRU8xwBBdlnlB0kShbYZmPlDcr02YXx2ZjyZGRsCfQUgWiZ5nzN4\ntjLfiZnhbY4UBSZAnRn3Yh7TFaG4VS8bfkTv/ziMywX1PQPaE9KXFQlBv1iX\nK+gDXkDRYd6utjBlYg2oWAGtXR63yr8m8Tid9FbcrnqSLBCEubQGQ8Yvawm6\n0YcWe5Pu6V8zzdrXwjrQwgm/JVaD8a5vGTtH33Hqc/7yA6oqOBV1uuOl0TIk\n7jE+iuabC6rGRjoBZErToh8Y5BW2VlU8oEasP3L2fwx9EOlp+dFfTPU7vPq6\nionIXNtR/EapFqE8h+xK8ouALIXI5fQFn/wx91Va7s/jG7R+d6MxOSSnHnRl\nFfxexBYzoQVA8chzU7zpCH09uTWSyUhOaC2CiLM0Ce/IsLFJ28GBoaQJ9A7H\nHRqAmbsNnYsDuhsVgMAunoQ2S//vXa7GnMVT5aMOtrf7+sXD7KKw0qE1D5FI\nDr9g\r\n=mtTl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAiPD2bGM9DZ+KcFoai71qubzaXLYC29wcIocC++57ShAiBxVp1opuaDSp9rR4FOSMQdwALBJTY7CUmP/VCcvkQ2VA=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.5-alpha-lerna-force-publish-6137.1.0_1627307662259_0.22429260476185608"},"_hasShrinkwrap":false},"4.2.5-alpha-adjust-xsmall-font-size-value-6142.1.0":{"name":"@crave/farmblocks-modal","version":"4.2.5-alpha-adjust-xsmall-font-size-value-6142.1.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.11-alpha-adjust-xsmall-font-size-value-6142.1.0+03a0b7e8","@crave/farmblocks-card":"^3.1.22-alpha-adjust-xsmall-font-size-value-6142.1.0+03a0b7e8","@crave/farmblocks-empty-state":"^5.1.13-alpha-adjust-xsmall-font-size-value-6142.1.0+03a0b7e8","@crave/farmblocks-text":"^3.6.10-alpha-adjust-xsmall-font-size-value-6142.1.0+03a0b7e8","@crave/farmblocks-theme":"^1.12.3-alpha-adjust-xsmall-font-size-value-6142.1.0+03a0b7e8","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"03a0b7e879d9889f456636c79fca43fdc271c84a","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.5-alpha-adjust-xsmall-font-size-value-6142.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-XgSv+S+xCsf8ILlnVNh2Vrcv9Xd8CwwMQSW6A3aZYCzKoySBxN2eqJ5+fNeMhH/R9i4eG6o7u4l6JQ/dT6XLEg==","shasum":"ea024f402ba20687cc8187901f055ee17dfe56ac","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.5-alpha-adjust-xsmall-font-size-value-6142.1.0.tgz","fileCount":11,"unpackedSize":34922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAfwCRA9TVsSAnZWagAAWoYP/RI2o9PWFsKk8vaUMPnK\nuy3xpPr+/3WmNRiTPY1UqsAW/I7HoZ52lPPC6vk5eCcVmc8OPHfYBw7ittH5\ngYJDWsfuh6SlqeJRXYhVzK/M+ndADfJS0X87lXCsentxydWPX3q0paRnMf6p\nVZSgi0Feu/BS6tOXP7wk+M6u2UR02GeX7s9X+ffQtGZCKapRwRpLxxyPO4QE\nKYn1Cmf2HNQkiMCvN6DM3yQZnFr4iJv3y50bOrtBvpKQ1RcbQQ3U6DPRbh5B\n7YWcSBIaUKvXCHxkKZRGUD5j6h1GuyD8rZwCpMrCMosBt4rhd1qhf69q7b1i\nkWuNQd5o/PDkft15vcvTwk46uFppsOTKPm9+3SV75NsS9gKlOlCxxxGQY9ft\nn3ULGzUyr4qwJqODoIYNzFcd2zYp4E6/Mdl1oTO0d25pEFWia9YCxNhZZxYU\nFrS8el7rmQ/c8SiZmDsNaKXb0K4AnBL1IoxixvmBH96JFQ4cNeaXBh716SVx\nvlMrtUb4jFVHPoYOkrBbHAnlTOTURwkEzvHMojKSxvYzOQpuX2tuGF6Z/n1Y\nigjTdk9rBClR4Xwslw+H2r+go/SS2bnGmZfkzNT9PQMzNDRoTzCN7JdeAyno\njn3ZzsFddcfNI0B4VpPnZMslFzMzqnDkBmtnzCRXNK+k0XwLNAllrZSaBS76\nKY+C\r\n=wrDa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0YmFPiCMMggpN/19g38i5lPeXo+75NV29vdvL7GqJMAiEA+Pch9c96UEcm+6/e5i373wmVtoheNAk+wvtq3plglHw="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.5-alpha-adjust-xsmall-font-size-value-6142.1.0_1628702704624_0.24602931475351375"},"_hasShrinkwrap":false},"4.2.5":{"name":"@crave/farmblocks-modal","version":"4.2.5","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.11","@crave/farmblocks-card":"^3.1.22","@crave/farmblocks-empty-state":"^5.1.13","@crave/farmblocks-text":"^3.6.10","@crave/farmblocks-theme":"^1.12.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"0c3be1617e4e4bd27d1b07b98987befeea153300","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.2.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-IDYEaZaguh1hm2p84bv2VYxN50ulWfZQRwqnoD7tOLcsYTd0b7GMGvIp8uHyLip+H0+8VSQUrwmSWlpwqkZ7tg==","shasum":"b6c96b10b3024ca6126c0090efd27d0caf06717a","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.5.tgz","fileCount":11,"unpackedSize":34803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFBKXCRA9TVsSAnZWagAA4YsP/26GOEhbq+9cXOL9MVkA\nqHFnOXAP8XtLdqR1ydAYwydtqZ54nrzNyAwwR+oDvWclNiL23udCOSNbRdbo\nKtOJap0E/XJoCKqz2RC6Qvkv5VxpiOhFs0KY66RsdQjZgLYGcz+HtlV41D3K\ntNII+NqgIyQlV5O48ZRPLsqjZIdzcNBKNzFxk4RsXPVDF08F9UUFKvuocJCn\n5IAgmR/nTe07k82LNuDMu8G/qG+/Qj9YUlhByt/NbPZ1vatNMsmlRzepdEJW\nnZllBf/99NxaLWF9pZg0blJKxNXWkjyzRC+9bSrs9gkAy6pGtghcNZgM452y\nmZz0TfvMwOdUArXQoAc1NGsZS2sS2nSr3+UVKh4x5dHwb1sgQ0+C8oG1GV7d\nJuNQXMHVXTEKfTR4rwRscZpC+2yRz9bDU12IlHCdo6uPvKLrsyd3YOA/n3kp\nnbg6CtgeUwKYBNJdcT/SrbsRNw4OaXg1RYE0QI2Cac2wnwnWs4IncSMNQPbL\ndM1Y2zsr1DUAR7h8/6BkXea6d84VNc/QAD2V6+wUF+khxLLziF5YV9w4fOwq\ntsDtfflrJyfJLfIcSNzTe2QtkzmD6XXYHVmYHtcsisbvsMdMW5edBmZgAz/P\nPnjv4XQG5CGJWOykhwPtUDzEM3BB+2ghiITJ9qG+0HJbRTCsyYsKKK8iHFg/\nfdSR\r\n=gR9E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9bujWd9cIs+peLSqWPFSo3jUFFZjfPpggf4kBqH9hmAiEA70FU+Wi/N3QFJrAiDmPq1CesuqZ0F6qh0lr3A9ymmVw="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.5_1628705431346_0.5329299647516841"},"_hasShrinkwrap":false},"4.2.6-alpha-modal-spread-props-6154.1.1":{"name":"@crave/farmblocks-modal","version":"4.2.6-alpha-modal-spread-props-6154.1.1","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.11","@crave/farmblocks-card":"^3.1.22","@crave/farmblocks-empty-state":"^5.1.13","@crave/farmblocks-text":"^3.6.10","@crave/farmblocks-theme":"^1.12.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"aee759138342c70b4ad20adf1db1d710f2e6ed86","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.6-alpha-modal-spread-props-6154.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-5n7nwSawrkIXpDuwlNpX5KXujEIzZOqJuxG+O5kXcZZRCjkxy/Yj9k/TUwsL8dyQLz8JJn268cJOA5u3/0kotQ==","shasum":"58276c11be597f2a431986664528d3b99e4408dc","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.6-alpha-modal-spread-props-6154.1.1.tgz","fileCount":11,"unpackedSize":34875,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBc4oPY9rGM7+o9k267TlbDDbcfC5LumcTiFiLG/11TXAiEA/BNo4Cq7aR8lgVgVbB7crrt5bpDCy2SXOTPO5F0pgqs="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.6-alpha-modal-spread-props-6154.1.1_1634234834897_0.0037432209480334766"},"_hasShrinkwrap":false},"4.2.6":{"name":"@crave/farmblocks-modal","version":"4.2.6","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.11","@crave/farmblocks-card":"^3.1.22","@crave/farmblocks-empty-state":"^5.1.13","@crave/farmblocks-text":"^3.6.10","@crave/farmblocks-theme":"^1.12.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"69e6f077a67b211401711afa5f71d3b7cbf5a213","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.2.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-rn9pSynTZePahfK8aYvv3fNds+P3w/ZSak1BxxGfQMLFl9LKqMjh5OjiKOC8W4OPqpJmK98R3ZCr/IoGsJIREw==","shasum":"656b5e541a490fce36f9c1607df9e979ed596bd0","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.6.tgz","fileCount":11,"unpackedSize":35145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzeFRCRA9TVsSAnZWagAAq28P/AqDjjrJqvoJB7LD2q/C\ngXh0Jj2+c5583aMNWQvGxWoKAFkZ/31cWmtkL3fE7pz8UM40068E5A2TaneI\n3fYARZBcFxF9Bt2DPwX2AgrWv9PWq1o38IP/urBJHJMWszhkN+VZdYTG+jSQ\n8X3nFkQNmHGsgiSxO1sdoIV85O+wOXywTZGPDARvRxlJw+ljeESrsp9tuj4c\nE1C/eQSP8vcEsBA+uWeqIJoTDyLLDlhq+l+Gnf+h/Whw9DQuzT/Y4SQx6Kq8\nzqYv3CfunWGdIc/kACSDiDy7tTIiNZQ8dqb0lQakoNeZul8gQpgdCUXJHD/j\nLFcMvFJrXSsto6RgpTmCVbMyAfOS7elZfYerlBcTt1k1GuJ65yndAZ4g7zHt\nase9jloUh5mor/79RwRsP+/jnDnXzmjC4Oms6Ko2j0xHNT29YJH+6qyDGgnV\ncvJuyXAp8HcLbGDQXKFHZ0/1fXVZO4N0DsVMgzl44wm4vyvlLPp2qVcLFzNi\nR7FNubeYL/UdvUxCbXbPXiDh8kNGNsaoktvymnO08dtkXaXeukpuHXKeK1By\nfUrodC07N+QGNkvQvPsn9JYa4lyy9TzVSrOyPJ7ZgES7kGpHRKLBhcB/A33R\nwCGLgg7OMiiE2L6psM1FtV12yFwmGZE+Q881jLszuGM6vu8KtVqerDlG4RnB\nr9sN\r\n=bf0T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1zYGgXLvJU/POOAf2cphExwfoGJqNhNVs8Lkhesa+hQIhAPhvqk8WQp+K8dAeKz9u1H3dFwONOZUJJEy8eG4DubQe"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.6_1634301242535_0.6874199522557738"},"_hasShrinkwrap":false},"4.2.7-alpha-update-deps-6179.1.7":{"name":"@crave/farmblocks-modal","version":"4.2.7-alpha-update-deps-6179.1.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.0.0","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.11","@crave/farmblocks-card":"^3.1.23-alpha-update-deps-6179.1.10+3161f279","@crave/farmblocks-empty-state":"^5.1.13","@crave/farmblocks-text":"^3.6.10","@crave/farmblocks-theme":"^1.12.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"3161f2795915be4e4054157efa94a3cf970d51a4","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.7-alpha-update-deps-6179.1.7","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-F1O9udiK2bqpADp3yIGXgI4/sQYfyWnfsRj/bda6iia7RHlBHDVYYMEw+ffB0qvbGKY60DPdyn3TiE9yQDn2Kg==","shasum":"4d1cbe735fad4aca89e333b47df8917c03e7f3e1","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.7-alpha-update-deps-6179.1.7.tgz","fileCount":11,"unpackedSize":35218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzfT4CRA9TVsSAnZWagAApXQP/0rH1dcyrcK2haeUbnck\nkS58YBwDnciUG3fObzzfJIcF9p5jQXqG/+PiV35MeDbJc/N77Lc2Z/hcDGAT\nSVPRm7GjwqFAqzOaKCdndES/xpkz6rQcg9BN8wdVDFKY1Ghce3BVP59oUptP\njLRet8YWBcofVjGwTH0JqiuvF/syzRC4TOFnssbIqySX2uBk5arp9lRCxb04\nVkaBjtbMo3atkdd6O/w9uBG3adLMxZY3V85bdr8r0HWmgzMHRFU933Fu3vaI\nFUwiVylPXU9a97JAA3liB06kAOAYjMaXw8h90c9bK2McHb4NsnS/HhuSL/Pu\nlkx76O8yIOXkNJbTxr0hr/omfagHUZF+QXAvwAm8VrrAEeGVp/JEagDDwg1c\nKlauMoje513pAL3drT5SWqByJr4ruBxws8czfksSML95SCTH5v82KtK6NuG1\nCVJZPxLzyBBtKx/CmSqzAMv08LwP0/OuXh401GUB6wCnXGEYqZMOD4VyUHnF\ntDEJyyovDlXr8gtkoo4hCp/W5pU4ddVPBio3qohnqf76h224GPTICIHGhYm2\n2igezRl0lQOeOgeqWXkRjQvfYltl7QxEPbcg02hJtqSxc41u+SXYOzg2KA2m\nlWyDs66eflozbP8HWLAJz5V6eGr0/WAzhnRQwQgkE7DAfuc8LSSU4plDMZcy\n+0rb\r\n=NQpA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjFspH7tQLEn1vtW50hA6IGXin6E6Pvpwur2y5xqBJgQIhAPRSaGGnLHN5h9FTzNHuosQtb2nAY13FBuTWHAFPr436"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.7-alpha-update-deps-6179.1.7_1640887543737_0.5511260840524967"},"_hasShrinkwrap":false},"4.2.7-alpha-update-deps-6183.1.9":{"name":"@crave/farmblocks-modal","version":"4.2.7-alpha-update-deps-6183.1.9","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","react-dom":"^16.13.0","react-spring":"^9.3.3","styled-components":"^5.2.2","styled-system":"^5.1.2"},"dependencies":{"@crave/farmblocks-button":"^10.0.11","@crave/farmblocks-card":"^3.1.22","@crave/farmblocks-empty-state":"^5.1.13","@crave/farmblocks-text":"^3.6.10","@crave/farmblocks-theme":"^1.12.3","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"57d67e663fe158d437c3fe9ee21dae4865c49428","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.7-alpha-update-deps-6183.1.9","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-km0lMN2bi2QcTNqMZUFTBzoc4rCELE8rysRRMkP4wUITHVvhVCWXmYP95Drk2XTEnkIhWemro9i0+BW3ATPbug==","shasum":"26d169b06fc2201beb4929f7b3ae1c86e9f860c0","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.7-alpha-update-deps-6183.1.9.tgz","fileCount":11,"unpackedSize":35165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzfnYCRA9TVsSAnZWagAAzxcQAIjmlE/kcZ0+WDHBsNiG\nrTUFhjSedlQ7SFNd6e8vwvpSh3QbGUZwzYacEClmKqA4eCbgaEH9E7i3evLP\nbV41t9fqjq4ivdszQSTUOBp9sOlBmSeH94tB1i5VLLG5GnsH85y1uyqtL4P5\nst3gK1OyiZ1DpBBvU2XVPw9ucAKeYpe4hPPXoAeGAxZAnJO4kAfZlg+UnDV0\n7po4hqxgIy4g6YLw/4N/q829HG818KMIdym+bzl6T+hVUPWuEY/hIEws5aeX\nVVMcQ0OuXvZ4NMDCoZVzDp3vOoeLc3f92SRgPMjgXtlr/elhNKH4fA8cijZg\noMJd5chrV3xpfI60oWw1AVAjtY09tWMqq7897Isv0iEuUhRNCWlCP/uGvHpb\n52zbpFBiHYfT+mq4Gk68AY+2adLdMyFdshYr7yR7g4NREggzJblrJKeNbIOr\nLGZH17Eu4RpgmozWq4F2xsd69uYiU+wKBoWYQfDA9Fd2K5kS8drv4bOREffO\nu/6+/Mvit6bDNMTqqLFFSjZzz6Iv6USbZ2T9A5nDMtCVRUJ8ucz88Jq3A4d+\nX+Je6LZO+hTOuUPCZ8oggOwwKH7gWXjI2n6CZ2K+se7J/DaesiC2ah0INOHb\nVnssCzchHgZWXjIlPDaxqOATmEhli6UUNT6ojPUarey0qCg5NkPOdVpWIu8q\nrS8D\r\n=i8Id\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGm1Hs0A3Ct/0Edxw1t++e2hlSWpDnybd6xCZ8LJkwIgIhAKLA8W8hDBFLjdfnJFt97K4RhDWlTZgHlpj0ySRFn6B+"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.7-alpha-update-deps-6183.1.9_1640888792646_0.5840977216515832"},"_hasShrinkwrap":false},"4.2.7":{"name":"@crave/farmblocks-modal","version":"4.2.7","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.2","@react-spring/web":"^9.3.2","prop-types":"^15.8.0","react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3","styled-system":"^5.1.5"},"dependencies":{"@crave/farmblocks-button":"^10.0.12","@crave/farmblocks-card":"^3.1.23","@crave/farmblocks-empty-state":"^5.1.14","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"22b3a1773647b5b8be826e84ef0d9dab024ebfb0","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.2.7","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-nGf3rOI0PKGQQwEg8X8YAGhtEVv4wK7lh6Un12NYXCKXbdxVW25Im+qJh1FBmvc62hJK2psrtyEBnZl0mNe3dg==","shasum":"e169aac8ceff6af6991fa88859a43148663af57d","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.7.tgz","fileCount":10,"unpackedSize":18118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ZPmCRA9TVsSAnZWagAAH10P/ikadD0iuk2Qu77axI1f\nq78P6z85M2p8n/gK6B+SMl6sqDBd29dsABrQ36Jh/PanadVrtqbaA0+l8koB\nHyPspJdfHMrPPzt5aVy52gcpfK+ZbbT5mIwMnHg0XPvmCAZmt7EWkGDCsmnj\nPj0FZR2XyjcZ6kwjt0HlSDgrTaVhguB7b42C/M2NK0wkKFCkVkyOBCbTpGZK\nhlUMYualuni7FnJsw6ptzkX32lQnGeVUoU2HcgV1+LzJAl2ertmJ3nUH16OQ\noIxyWhGpW8oCRxVZuC7qCGD7FGzg/RmkbJfyJWzoro0mtb674EcDQYLkiJgw\nPrbyROv6ra1fpOfyEum5U/2+8tSJFZOQOyQulODemtdYrnvg0WdCJBMcWWQV\n7/JqeFqH3KXeOd5aECmsu30JjWr5OFsK+sNUosmsJXcsUixAWb0PDGkQrWU9\nfg95itZ+fwmoF08drfgWafSJ0woMFC4uf6CDI2/K3pCgFQ3VrYGagZ8Zflk0\nzT9P0l7AEIFQtF2ziLZ98bN+pqoJbjvdp55dGwwn+1weiijeVtbh3DtxMHSH\nIieT8EWtbbDJvZInlMt7th9t6c3Yo1lSDtMbWHZ2JawVMFCX+j3776VdW38P\nZ6dgOdz2TpCnDYvnflExNFMFmW8c/sAeRK9sMmbzZtcTM5FOr0euB2RZb76A\nqsud\r\n=onn7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFhIrixQIKEtXEsOhiqYeIZUhQ9Ry3dF8zJB/Aul9kVQIgSa+6tue8b7CRZumOlzFmBzeOJaId/W37vmifovYQhSk="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.7_1641386982152_0.18783179169911213"},"_hasShrinkwrap":false},"4.2.8-alpha-fix-deps-6232.1.2":{"name":"@crave/farmblocks-modal","version":"4.2.8-alpha-fix-deps-6232.1.2","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.3","@react-spring/web":"^9.3.2","prop-types":"^15.8.0","react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3","styled-system":"^5.1.5"},"dependencies":{"@crave/farmblocks-button":"^10.0.13-alpha-fix-deps-6232.1.2+1d3df5d3","@crave/farmblocks-card":"^3.1.24-alpha-fix-deps-6232.1.2+1d3df5d3","@crave/farmblocks-empty-state":"^5.1.15-alpha-fix-deps-6232.1.2+1d3df5d3","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"1d3df5d366925f772bd4889bd76badcc42bc595f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.8-alpha-fix-deps-6232.1.2","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-/NV7lUiwdEYGyBz+xRGwGH3kdF6JdJtu4f16GrpVP7zu5ozk+ayPe9LRRLH7ofYzvRYW/5uWEXK34nuGE5O8zQ==","shasum":"d1cbda05b2be3b376a9ce7e03233a714ca9d0cd9","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.8-alpha-fix-deps-6232.1.2.tgz","fileCount":10,"unpackedSize":18250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBCTKCRA9TVsSAnZWagAAOC8P/imsYgdjK9oIqfejrU0j\nTMzjfWEYTgIHJ5l+0WESYrUrScn0DJCibJLUxepwQAnG/Pvo9FAuO4bfnc2h\nOXnz0N2XmBSLdYgykcnwr8WZ4N87qUj4EZUsext0tZe9ULAKJhT3eL8DUBbF\nxcBFbvu3xAaONXmlcS7AhZOv5O+4CwO0PGw8Yq3eMlnTChMYZr2b57QkyJCY\n9oPHQhY+xsd38xlIfso6ODSbptlBIVO9Oj3HwqOFmkVgTg7RrjT51jb/71XK\nyDqlufD/qQguVLXUyCSCoMRmke4bCvTlc4dUXBAJ7nMTI2BcwvS6t5NWlYqe\n4WQYe+0+TWUY/t12xBRqSACZHzhnQ1/1CdcSoYNq9KUtz+4WDhFg8Q0nPGP2\nSZf99NTFUHZyd4N5Jg1aNQRu276NBBbmpd0MXldfoIFUXkksV95QJlmFAqY4\ne7yfAlFRs3r7vq/XGRfIQv0xwyi+qXtJPt7Fv0rtLXL6F5gsGcNeeL8TxSIk\n+8JckjJsF9LLVjtSxsNIKVShY4KJQdceunrzx0pLm997Gm6bvgZeBMn+zsLp\nf6qQOBFtoozpxibJE6CzEfeRLmZRovpPsQauuxeEb1RCPHGSxZURNumPoQil\n6HaT07JtZ0VRsNzD3bUhY3LKzMgCpU5q8EICXyx8/ZEk5d+6r6Rw0tmbVF9K\nxE/3\r\n=6nRt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2BsnGPICeZCiWJZSxzopXubkF6pDdhHxejJh5zsiFqwIgKuzgmreF4eFl43OQv7nkBlpt3EXscvGTHkNJRVOHVfM="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.8-alpha-fix-deps-6232.1.2_1644438730082_0.7038082782482731"},"_hasShrinkwrap":false},"4.2.8":{"name":"@crave/farmblocks-modal","version":"4.2.8","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.3","@react-spring/web":"^9.3.2","prop-types":"^15.8.0","react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3","styled-system":"^5.1.5"},"dependencies":{"@crave/farmblocks-button":"^10.0.13","@crave/farmblocks-card":"^3.1.24","@crave/farmblocks-empty-state":"^5.1.15","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"aed8b93e683ff6733de9c58d26f2e407f9b1aa73","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.2.8","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-ZUeQeJ37l+adygsRqpu/kevLSBV26j1+LvILuLZEsJu8El75HKBoumh99l1j+xgknx0+o0ULYQYOH5AkWkQ0xQ==","shasum":"d86e2abcef62b31091a23ff6613e6868d90577ec","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.8.tgz","fileCount":10,"unpackedSize":18118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBSRjCRA9TVsSAnZWagAAtP0P/RnXnZMWQP+rYHSNk5aC\nlQHEB6dyuoeDRLWIpCkpOIPohiTPDwTKPDj6uoYPnQDZF1P+yfJs+P4GuztY\n/A5sE89QaU+X9NEm42rYha8Ea1lkh2x/G9OZ0QXaF8YX6uWF/CtwKuElPqkz\n4g21dU6veVt37+4HzeppSFxeaYotyPV9SGI8c7G4wyyhrCXisMcfNqfBSsMy\npIKPCMCWBNe7VhmZudaSppPxGwX2HnHDT2ftl5atPCx68hk/3SUl1v72wCRl\nwnNcYP6IW1/cRzZMpfNinElc6sG6rufnayQd3nbSzASBIWMwnQQiCsnp+cgu\nlAujpXXsEHGzjumbennsOuJ5/ATTD4NFND6b9l4GJusVBADfZeGcBLRsuvgZ\nv19cIjmS/MVWxxU0wjCh21Ukt7XJEFtSWSI2OaQr8SCL/V8BAZ05phaDXNer\neBApYtAT4obBz5XukGiRpy5FUHP57kR4Ck39yD/3XH1LTYouTNsIVKxF4noY\nnG6Pt/nN8Oz1gfX21WDcMbdHD1F5RldB8sJPc7dwrHtMqP7kn0SAklQ8gvLd\n/Ge3PSuPr+NaVtPe1ryoJv3OxrHbQjT0MFZmWh4thocB1EoL5B+O/kdWE7jr\niKYXQh02BXJreNtN/Lj/x/IilbBjgQ1E8PGqq5b0yfg/2GXR5C3lpw29Hq82\nYJTw\r\n=zwVD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBOaTfp5ovbXlxb1fEQtLyjG/23V2OOFpeyDtFnz0//AIhAKz/YcR+cbnESzqnZ7+X3xSZwxXWMyl1DNKUCxFsa1uY"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.8_1644504163529_0.35369927964888204"},"_hasShrinkwrap":false},"4.2.9-alpha-test-rr-6243.1.0":{"name":"@crave/farmblocks-modal","version":"4.2.9-alpha-test-rr-6243.1.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.3","@react-spring/web":"^9.3.2","prop-types":"^15.8.0","react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3","styled-system":"^5.1.5"},"dependencies":{"@crave/farmblocks-button":"^10.0.13","@crave/farmblocks-card":"^3.1.25-alpha-test-rr-6243.1.0+0e09d8de","@crave/farmblocks-empty-state":"^5.1.16-alpha-test-rr-6243.1.0+0e09d8de","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"0e09d8deec08e362409eaa3a6dbcdd0485de328e","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.9-alpha-test-rr-6243.1.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-tn+FASSPz50SEEyf0OjCIwyMoiwdUoAcGsfUV16D5pOBcthvFn19ePU8JS7Kc1TwBcxAXiQgHsZlR0T7BD4UGQ==","shasum":"6041de4cdcb9532b4abd23005c923edc10024611","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.9-alpha-test-rr-6243.1.0.tgz","fileCount":10,"unpackedSize":18214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKPNmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNxg//Um00IKVTcYJLfP0kLZhPCniseFCFCIc3tcEIvwGm134mbD2N\r\nr0rARvN2TarouJn3KPlhH65LavPzGoWqA8lX5mvT45zpy3NTA0+79rxWcqGw\r\nqTSv0YVKTZnk0h9og2vPYDMmjUq2PH5mkan4brc6FrFfyLShKYF+WQz1S/wb\r\nMFa/q8Cbd1IHER0lp3fPutO9JPROUAuOS8EBrBOxisd84fTm+AQ7EA8CKuBW\r\npZEYVN5RHoy3rLtHfRWI8VJDFP3rKX/Amx0Jaj0k5Z2eomLCLprCmwRXPHQB\r\n1faZLkioGwQnlj2sq1xyHzKCKP3ce2DCDquOX/yEEzyfaQum37Cbj3KlvmNf\r\n89fRo/BJXxMMSURhET4eZxEBm9Cm3qp3PJ64eg8ctXEgqh/qfx+R4TAVTclW\r\nVx2OYWtOfqN7hQ31oIhOZvC8APk7T8VG85CBPh4wwe8J7chjz0lWQmiqqkOu\r\nLkXKfWNloO9smrOIiTchC7rn0cBYYdv79qgBzx8H6SKGDIA3ud3QAkI1SB0f\r\nEWphn9gbKUEh6cQdQ1qilHVn1GEEvkkv1u3a0NzYhaY60hYXrR1mC4JJv86U\r\nSuoQDF1LE5i7P12YZenexfw8qJSO7s13NjToOpGEVqH262EViAwWBO+AiOEr\r\ngruKloJWs9JQ8UfJtJ5pUWR7Lon8fgAtnwY=\r\n=zsjA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOYDKEksZdavRcY752RiKhipEVueQCxANzqrDZT9peWAIgOjSfeAd7nrUQ5gQpZJ6X1p1cRMKl/UMDgVyxYbCq1uo="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.9-alpha-test-rr-6243.1.0_1646850918483_0.6535174264365458"},"_hasShrinkwrap":false},"4.2.9-alpha-test-rr-6245.1.0":{"name":"@crave/farmblocks-modal","version":"4.2.9-alpha-test-rr-6245.1.0","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.3","@react-spring/web":"^9.3.2","prop-types":"^15.8.0","react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3","styled-system":"^5.1.5"},"dependencies":{"@crave/farmblocks-button":"^10.0.13","@crave/farmblocks-card":"^3.1.25-alpha-test-rr-6245.1.0+51aaf57b","@crave/farmblocks-empty-state":"^5.1.16-alpha-test-rr-6245.1.0+51aaf57b","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"51aaf57bd5bbf1244c9855e7655f7f76dddb6aa6","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-modal@4.2.9-alpha-test-rr-6245.1.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-TKaY+ZpuQd/VrDH7lFlBvxZz52dX8bvjokv3v9YDQWAX6Tk0oPmR9AO0oVCWr4UHsVXb0WQ0EX+o8CieFcFsZg==","shasum":"a105e4c7d4af9a1f1a3824064958e6a65b939973","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.9-alpha-test-rr-6245.1.0.tgz","fileCount":10,"unpackedSize":18214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKPc9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2EQ/9GDgYg8eolLndXGeTzxNu/1an0K0NaMXKXiSWn7pvgZKVgWOa\r\nXDMMA1PljiFCpc5adnRvbsTEYJ5oXYU/lHet8rfD1tMgE3AZzfNae7Pa6IwV\r\n+riMaFbFJdaFicc8ztgNPqUyXwSoNYO/reojFuSTQVwqGtmog5uvGSZR5f80\r\nEAdjuLiF97QBVICLaTu8cvLbpjrsFHHfwRMmG84LNN4ly5zRPyJkRHHwwYFk\r\n2RaPxBoIVXwZjVS8BSoqCF6K9iWCq7Z9ijafBSNQmWn7s8MJXb8MRMrVQr2j\r\ngTQM71eXRnH5kKb1TdHMKjbDXdZHZQshrS8+E7cOGokPgw4oKxhFFK6GzNmD\r\nCJommF9an3aay6h5SfLdtH5b17T2BdRBRSqx5jlQahd6vedr/hXGPVv8RD7Z\r\nr/N9DdlR1pAwSz8KxOOMHctvgW37C8hMkAfG+J8BjxN/aLy0v6uvZ7gTWXpC\r\nQsJ70eelbgFAKwG+bRWyA4TvNyBhxJX9t+yvYMWBPIMQo+M2NFtfF6aTgtiS\r\neeCUlOdjwFdWBzv9PliDnmxIaTw7dIMtKH6/f87LZ0QT0Tjb7mGjPUQ6mKpL\r\nOlWcZIU+33Mp045C/5m2+vXOavN68HLRC4KRrb0pbJDYEIpu5O6Imr3UmBia\r\n4iD2+JTkF6+VnYkqwTXHdxsSZul84HI4GZE=\r\n=wJb3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfsPVfti1nvp9ehRhc4tJlSAOm3TaR0bcDcODkRy8PFQIhAPoMXEZ2ouAG/T/iTFp0q1bRTJSi46FzUEQYLCTElnmD"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.9-alpha-test-rr-6245.1.0_1646851901068_0.4861422292438049"},"_hasShrinkwrap":false},"4.2.9":{"name":"@crave/farmblocks-modal","version":"4.2.9","description":"A React Modal component","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js','src/lipsum.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.3","@react-spring/web":"^9.3.2","prop-types":"^15.8.0","react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3","styled-system":"^5.1.5"},"dependencies":{"@crave/farmblocks-button":"^10.0.13","@crave/farmblocks-card":"^3.1.25","@crave/farmblocks-empty-state":"^5.1.16","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0"},"gitHead":"6cb8d234c2bd66c0d1d00fed827a074ceda0b19e","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-modal@4.2.9","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-dUVt9IswCZXKadSinFN6rmSiXeBAgvHCWd60SDKtF9obgTFamfjH6tBEH1BoETSbURiZb85MkWeGNuw3qalyGQ==","shasum":"0c8f45ed60319579f0a8b2c28fc84dd254c3db53","tarball":"https://registry.npmjs.org/@crave/farmblocks-modal/-/farmblocks-modal-4.2.9.tgz","fileCount":10,"unpackedSize":18118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKPlSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGAA//UYDiB0jifDPhxCVgAdUF7XiTwdNBSXFG6NhYrdWx4AbEl613\r\ne5EqZuHvNZKcXaCImFp6OeJ5dItK2i3HUzBf38CFzJn05oCpjLLnL712uTp+\r\n6stidJbdkbHmuHRQBIQd8Z1PE4rY2PyZaLDFUaNH9MeDxuya+NaeH17EGD/C\r\njV7f6wK7jaIeaa7erIpgR8TcPSx7HGtBjT4fQ6y6r0iMfFkFL2GjPSPfctgJ\r\nzr4FJeFpUxvoFJ8vkgibPmQeREMJMumBPUC1OtWmyQjkOYYkq6DRlxm+CofL\r\n78cwuM9wDhiomBq2BzIH885I8D5cUFCTr+LPNRht7Xcw+IpOkKMlC0554fea\r\nDDbw7V7sHxD5bqdFmbvmGTpFKeIpvjR3MUnFNlafnsE4NRoKkvizYY62KCZJ\r\nMkWPwaAfhyoM9k/avOrsRqCy3pI2DcKJwFUY5I7AFS/OkE19xV+/F8y8ruX8\r\nZMdhet3Tg7Otsu80F0JRHy01iM64gB2qZF0Jq866OfQ3z0xIwVkNnGZYruLk\r\nalU/ntn1UnJkixvQIS5+HlFsVsUx+JVSL4foe7rTzB+V8rJC+8gHVvwVeIov\r\n7MZGNwldo1TEGuC4bfaaNDg02D/jJfB5Oa/0TxOUDCzSza8lVFoZw4P4Chqv\r\nW2oj12S9wDtROGPI2zVipcOu6KzHVT+w0YQ=\r\n=Z/Vv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnEo3bCsSLn2v3RJFSkzKx1UGayi4XjnHOM5JWM15t/AiEAoU0fttkMeNOcJTLq2tyHVjxBCu1x/kZ3OU7+x5QDC3s="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-modal_4.2.9_1646852433975_0.15144002396582223"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-28T20:06:36.850Z","0.1.1-alpha-modal-4596.1.92":"2019-05-28T20:06:37.199Z","modified":"2022-04-05T01:38:35.281Z","0.1.1-alpha-modal-4600.1.90":"2019-05-29T14:36:56.035Z","0.1.1-alpha-modal-4605.1.88":"2019-05-29T17:25:30.474Z","0.1.1-alpha-modal-4607.1.86":"2019-05-29T18:40:53.873Z","0.1.1-alpha-modal-4609.1.86":"2019-05-29T18:41:33.967Z","0.1.1-alpha-modal-4623.1.74":"2019-05-30T20:11:13.728Z","0.1.1-alpha-modal-4625.1.69":"2019-05-31T13:03:36.818Z","0.1.1-alpha-modal-4627.1.79":"2019-05-31T13:08:58.209Z","0.2.0":"2019-05-31T13:45:49.349Z","0.2.1-alpha-modal-tweaks-4662.1.6":"2019-06-07T17:41:45.947Z","0.2.1-alpha-modal-tweaks-4669.1.7":"2019-06-10T13:52:27.734Z","0.3.0":"2019-06-11T19:46:52.464Z","0.3.1-alpha-text-truncate-4709.1.4":"2019-06-19T13:34:39.137Z","0.3.1-alpha-text-truncate-4713.1.6":"2019-06-19T17:14:14.026Z","0.3.1-alpha-text-truncate-4715.1.6":"2019-06-19T17:32:10.119Z","0.3.1-alpha-text-truncate-4717.1.7":"2019-06-19T18:56:27.867Z","0.3.1":"2019-06-25T14:23:04.038Z","0.3.2-alpha-upd-deps-4809.1.19":"2019-07-05T18:09:47.208Z","0.3.2-alpha-upd-deps-4825.1.23":"2019-07-09T14:18:56.642Z","0.3.2-alpha-upd-deps-4827.1.21":"2019-07-09T16:47:00.340Z","1.0.0":"2019-07-09T19:26:22.264Z","1.0.1-alpha-close-button-style-4853.1.10":"2019-07-11T19:56:19.464Z","1.0.1-alpha-close-button-style-4857.1.10":"2019-07-11T20:12:07.079Z","1.0.1-alpha-close-button-style-4858.1.11":"2019-07-11T20:16:08.787Z","1.0.1-alpha-close-button-style-4862.1.11":"2019-07-11T21:34:46.630Z","1.0.1-alpha-close-button-style-4866.1.11":"2019-07-12T17:50:47.105Z","1.0.1-alpha-close-button-style-4874.1.11":"2019-07-12T21:23:22.445Z","1.0.1-alpha-tooltip-position-4885.1.21":"2019-07-15T14:30:50.733Z","1.0.1-alpha-tooltip-position-4886.1.19":"2019-07-15T14:32:12.177Z","1.0.1-alpha-close-button-style-4891.1.13":"2019-07-15T17:52:42.757Z","1.0.1-alpha-close-button-style-4911.1.14":"2019-07-16T17:27:04.935Z","1.0.1-alpha-tooltip-position-4915.1.30":"2019-07-16T18:38:28.717Z","1.0.1-alpha-close-button-style-4919.1.16":"2019-07-16T19:23:15.504Z","1.0.1-alpha-close-button-style-4917.1.16":"2019-07-16T19:24:01.184Z","1.0.1-alpha-close-button-style-4921.1.17":"2019-07-16T19:29:56.204Z","1.0.1-alpha-close-button-style-4939.1.14":"2019-07-17T17:06:34.294Z","2.0.0":"2019-07-17T17:27:32.721Z","2.0.1-alpha-extra-subrows-4944.1.6":"2019-07-17T18:26:12.280Z","2.0.1":"2019-07-17T19:08:10.089Z","2.0.2-alpha-tooltip-position-4957.1.25":"2019-07-18T19:18:27.317Z","2.0.2":"2019-07-18T19:31:49.922Z","2.0.3-alpha-fix-empty-state-buttons-4980.1.4":"2019-07-19T18:17:21.779Z","2.0.3-alpha-fix-empty-state-buttons-4986.1.5":"2019-07-19T18:36:01.872Z","2.0.3":"2019-07-19T19:35:30.166Z","2.0.4-alpha-memo-modal-5066.1.12":"2019-08-14T12:18:25.575Z","2.1.0":"2019-08-15T17:56:50.383Z","2.1.1-alpha-update-deps-5137.1.10":"2019-09-09T16:55:48.902Z","2.1.1":"2019-09-10T19:28:59.200Z","2.1.1-alpha-image-use-img-5159.1.16":"2019-09-11T21:10:55.703Z","2.1.2-alpha-image-use-img-5161.1.4":"2019-09-11T21:15:55.448Z","2.1.2-alpha-image-use-img-5173.1.4":"2019-09-12T21:14:30.970Z","2.1.2-alpha-image-use-img-5177.1.5":"2019-09-13T13:02:50.487Z","2.1.2-alpha-image-use-img-5185.1.8":"2019-09-13T19:46:48.371Z","2.1.2-alpha-image-use-img-5193.1.17":"2019-09-16T14:31:09.738Z","2.1.2-alpha-fix-tooltip-auto-position-5199.1.4":"2019-09-16T17:14:17.090Z","2.1.2-alpha-image-use-img-5211.1.20":"2019-09-16T18:56:07.424Z","2.1.2-alpha-image-use-img-5213.1.7":"2019-09-16T19:43:19.592Z","2.1.2":"2019-09-16T20:16:15.420Z","2.1.3":"2019-09-18T20:28:13.026Z","2.1.4-alpha-fix-image-overflow-5243.1.8":"2019-10-01T18:17:42.343Z","2.1.4":"2019-10-01T18:35:21.253Z","2.1.5-alpha-modal-fix-5246.1.1":"2019-10-01T18:59:05.238Z","2.1.5":"2019-10-02T13:20:02.661Z","2.1.6-alpha-fix-npm-username-5272.1.1":"2019-10-04T20:44:27.477Z","2.1.6-alpha-fix-npm-username-5299.1.7":"2019-10-09T16:54:02.498Z","2.1.6":"2019-10-09T17:23:41.699Z","2.1.7-alpha-fix-image-proptype-5327.1.0":"2019-10-14T13:59:23.410Z","2.1.7-alpha-side-nav-js-5342.1.18":"2019-10-15T13:42:47.400Z","2.1.7-alpha-fix-image-proptype-5356.1.0":"2019-10-16T12:38:50.432Z","2.1.7-alpha-fix-image-proptype-5388.1.2":"2019-10-18T18:04:40.109Z","2.1.7":"2019-10-18T19:50:42.233Z","2.1.8-alpha-side-nav-js-5441.1.50":"2019-10-28T18:07:02.479Z","2.1.8":"2019-10-31T20:50:27.403Z","2.1.9-alpha-mobile-tooltip-5522.1.5":"2019-11-12T15:24:06.030Z","2.1.9-alpha-use-new-icons-5530.1.24":"2019-11-12T18:01:21.661Z","2.2.0":"2019-11-13T17:33:56.505Z","2.2.1-alpha-mobile-tooltip-5545.1.5":"2019-11-13T19:10:02.248Z","2.2.1-alpha-use-new-icons-5553.1.26":"2019-11-14T16:01:57.074Z","2.2.1-alpha-mobile-tooltip-5561.1.12":"2019-11-18T13:46:03.600Z","2.2.1-alpha-use-new-icons-5568.1.29":"2019-11-18T21:02:30.643Z","2.2.1-alpha-use-new-icons-5574.1.34":"2019-11-19T17:30:40.879Z","2.2.1-alpha-use-new-icons-5576.1.28":"2019-11-19T17:48:13.566Z","3.0.0":"2019-11-19T18:02:30.970Z","3.0.1-alpha-mobile-tooltip-5579.1.12":"2019-11-19T20:15:24.736Z","3.0.1-alpha-responsive-modal-5591.1.7":"2019-11-22T19:31:37.139Z","3.0.1-alpha-responsive-modal-5594.1.9":"2019-11-26T14:47:19.123Z","3.0.1-alpha-responsive-modal-5596.1.9":"2019-11-26T14:47:34.788Z","3.0.1-alpha-mobile-tooltip-5599.1.14":"2019-11-26T16:37:32.826Z","3.0.1-alpha-responsive-modal-5603.1.10":"2019-11-26T18:46:57.374Z","3.0.1":"2019-11-26T19:12:18.599Z","3.0.1-alpha-responsive-modal-5618.1.12":"2019-11-27T18:42:52.929Z","3.0.2-alpha-responsive-modal-5622.1.8":"2019-11-27T18:56:03.868Z","3.1.0":"2019-11-27T19:18:01.508Z","3.1.1":"2019-11-27T20:29:14.830Z","3.1.2-alpha-fix-proptype-warning-5631.1.1":"2019-11-28T19:50:39.582Z","3.1.2":"2019-11-28T20:07:08.190Z","3.1.3-alpha-tangerine-5635.1.1":"2019-12-03T18:55:52.190Z","3.1.3":"2019-12-03T19:18:29.111Z","3.1.4":"2019-12-18T16:56:14.009Z","3.1.5-alpha-image-with-box-shadow-5646.1.2":"2019-12-27T18:33:07.978Z","3.1.5":"2019-12-27T18:48:39.547Z","3.1.6-alpha-link-fontweight-5650.1.2":"2020-01-03T17:55:12.387Z","3.1.6":"2020-01-03T18:36:28.462Z","3.1.7-alpha-new-primary-button-colors-5656.1.2":"2020-01-08T17:11:40.704Z","3.1.7":"2020-01-08T17:33:32.391Z","3.1.8-alpha-responsive-text-5665.1.6":"2020-01-28T14:41:59.500Z","3.1.8":"2020-01-28T19:04:26.930Z","3.1.9-alpha-card-border-5671.1.2":"2020-02-03T20:05:06.910Z","3.1.9-alpha-card-border-5673.1.3":"2020-02-04T14:15:33.312Z","3.1.9":"2020-02-04T17:22:36.141Z","3.1.10-alpha-upd-dep-280220-5690.1.28":"2020-03-05T19:57:10.747Z","3.1.10":"2020-03-06T15:38:56.831Z","3.1.11":"2020-05-13T18:20:56.910Z","3.1.12":"2020-05-14T14:31:43.294Z","3.1.13-alpha-new-label-5742.1.5":"2020-06-19T19:34:22.686Z","3.1.13-alpha-redesign-form-fields-5751.1.9":"2020-06-23T14:11:23.067Z","3.1.13-alpha-redesign-form-fields-5753.1.9":"2020-06-23T14:51:33.205Z","3.1.13-alpha-new-label-5765.1.5":"2020-06-25T12:37:15.234Z","3.1.13":"2020-06-25T15:52:39.681Z","3.1.13-alpha-redesign-form-fields-5772.1.8":"2020-06-25T16:27:03.127Z","3.1.14-alpha-redesign-form-fields-5774.1.4":"2020-06-25T16:31:31.036Z","3.1.14-alpha-redesign-form-fields-5775.1.6":"2020-06-25T16:39:19.006Z","3.1.14-alpha-redesign-form-fields-5777.1.6":"2020-06-25T16:50:30.078Z","3.1.14-alpha-redesign-form-fields-5789.1.7":"2020-06-30T14:02:56.876Z","3.1.14":"2020-06-30T14:10:50.396Z","3.1.15-alpha-dropdown-button-props-5805.1.3":"2020-07-07T15:24:20.112Z","3.1.15":"2020-07-08T11:41:08.664Z","3.1.16-alpha-fix-icons-react-import-5808.1.2":"2020-07-09T14:55:09.447Z","3.1.16-alpha-fix-icons-react-import-5810.1.3":"2020-07-09T16:10:40.437Z","3.1.16-alpha-fix-icons-react-import-5812.1.4":"2020-07-09T16:21:59.722Z","3.1.16-alpha-fix-icons-react-import-5814.1.2":"2020-07-09T17:13:48.854Z","3.1.16-alpha-fix-icons-react-import-5816.1.3":"2020-07-09T17:24:12.308Z","3.1.16-alpha-fix-github-dribbble-icons-5818.1.1":"2020-07-09T17:46:49.589Z","3.1.16-alpha-another-icon-test-5829.1.4":"2020-07-13T15:06:31.278Z","3.1.16-alpha-another-icon-test-5832.1.6":"2020-07-13T15:33:01.647Z","4.0.0":"2020-07-14T16:24:27.082Z","4.0.1-alpha-protected-currency-5867.1.9":"2020-08-04T18:57:15.945Z","4.0.1-alpha-button-redesign-5884.1.23":"2020-09-02T19:52:15.679Z","4.0.1-alpha-button-redesign-5888.1.26":"2020-09-03T19:39:42.325Z","4.0.1-alpha-button-redesign-5890.1.26":"2020-09-03T19:48:55.674Z","4.0.1-alpha-button-redesign-5892.1.22":"2020-09-04T16:36:18.545Z","4.1.0":"2020-09-04T16:54:13.758Z","4.1.1-alpha-fix-button-white-space-5896.1.2":"2020-09-09T14:28:59.298Z","4.1.1-alpha-fix-button-white-space-5898.1.2":"2020-09-09T19:10:29.358Z","4.1.1":"2020-09-09T19:33:35.922Z","4.1.2-alpha-button-line-height-5901.1.2":"2020-09-10T12:20:15.191Z","4.1.2":"2020-09-10T12:52:34.264Z","4.1.3-alpha-modal-ssr-5906.1.1":"2020-09-25T18:42:40.799Z","4.1.3":"2020-09-28T12:26:40.872Z","4.1.4-alpha-esmodules-5917.1.6":"2020-10-14T14:45:51.296Z","4.1.4-alpha-esmodules-5921.1.7":"2020-10-15T13:30:26.270Z","4.1.4-alpha-esmodules-5925.1.6":"2020-10-21T18:28:18.437Z","4.1.4":"2020-10-21T19:28:42.168Z","4.1.5-alpha-icon-publish-5935.1.5":"2020-10-29T11:59:23.367Z","4.1.5":"2020-10-29T14:20:10.159Z","4.1.6-alpha-table-redesign-manual-1.8":"2021-01-21T12:14:42.871Z","4.1.6-alpha-modal-adjusts-5972.1.18":"2021-02-09T13:55:36.332Z","4.1.6-alpha-modal-adjusts-5974.1.19":"2021-02-09T19:58:11.160Z","4.1.6":"2021-02-10T14:18:53.329Z","4.1.7-alpha-fix-empty-state-proptype-5977.1.1":"2021-02-10T21:23:26.367Z","4.1.7":"2021-02-11T14:04:42.301Z","4.1.8-alpha-empty-state-styles-5986.1.2":"2021-02-15T14:21:00.895Z","4.1.8-alpha-empty-state-styles-5989.1.2":"2021-02-17T14:17:07.565Z","4.1.8":"2021-02-17T14:34:52.808Z","4.1.9-alpha-update-deps-032021-6011.1.17":"2021-03-31T14:28:56.433Z","4.1.9-alpha-update-deps-032021-6038.1.36":"2021-04-09T19:19:25.737Z","4.1.9":"2021-04-19T14:43:31.674Z","4.1.10-alpha-update-icons-6066.1.4":"2021-04-27T15:07:42.175Z","4.1.10-alpha-update-icons-6070.1.4":"2021-04-27T20:50:14.660Z","4.1.10-alpha-update-icons-1.4":"2021-04-28T14:23:43.220Z","4.1.10-alpha-update-icons-2.4":"2021-04-28T15:19:24.549Z","4.2.0":"2021-04-29T12:19:46.227Z","4.2.1-alpha-add-font-size-6125.1.7":"2021-07-07T16:53:53.308Z","4.2.1":"2021-07-07T17:24:08.876Z","4.2.2-alpha-fix-useScrollLock-6130.1.1":"2021-07-23T17:14:44.276Z","4.2.2-alpha-fix-useScrollLock-6132.1.6":"2021-07-23T21:42:53.986Z","4.2.2-scroll-lock-1.6":"2021-07-23T21:47:23.490Z","4.2.2-alpha.6":"2021-07-23T21:48:13.908Z","4.2.2-alpha-fix-useScrollLock-6134.1.5":"2021-07-23T22:01:51.211Z","4.2.2-scroll-lock-3.5":"2021-07-23T22:04:53.140Z","4.2.2-scroll-lock-4.5":"2021-07-23T22:05:11.101Z","4.2.2-scroll-lock-5.5":"2021-07-23T22:06:15.698Z","4.2.2-scroll-lock-6.5":"2021-07-23T22:06:38.254Z","4.2.2":"2021-07-23T22:17:51.291Z","4.2.5-alpha-lerna-force-publish-6137.1.0":"2021-07-26T13:54:22.390Z","4.2.5-alpha-adjust-xsmall-font-size-value-6142.1.0":"2021-08-11T17:25:04.750Z","4.2.5":"2021-08-11T18:10:31.473Z","4.2.6-alpha-modal-spread-props-6154.1.1":"2021-10-14T18:07:15.080Z","4.2.6":"2021-10-15T12:34:02.761Z","4.2.7-alpha-update-deps-6179.1.7":"2021-12-30T18:05:44.288Z","4.2.7-alpha-update-deps-6183.1.9":"2021-12-30T18:26:32.849Z","4.2.7":"2022-01-05T12:49:42.306Z","4.2.8-alpha-fix-deps-6232.1.2":"2022-02-09T20:32:10.213Z","4.2.8":"2022-02-10T14:42:43.712Z","4.2.9-alpha-test-rr-6243.1.0":"2022-03-09T18:35:18.687Z","4.2.9-alpha-test-rr-6245.1.0":"2022-03-09T18:51:41.213Z","4.2.9":"2022-03-09T19:00:34.135Z"},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"description":"A React Modal component","homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"author":{"name":"Crave Food Systems and AUTHORS"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"license":"MIT","readme":"\n\n# Farmblocks Modal \n\nA React Modal component\n\n## Table of Contents \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Helpers](#helpers)\n - [useModal](#usemodal)\n - [ModalManager](#modalmanager)\n- [Extra Components](#extra-components)\n - [DialogModal](#dialogmodal)\n - [ModalTitle](#modaltitle)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-modal\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Modal from \"@crave/farmblocks-modal\";\n\nconst App = () => (\n
\n This is the regular content\n This is the modal content\n
\n);\n\nrender(, document.getElementById(\"root\"));\n```\n\nThis code will render:\n\n\n\n## API\n\n- **isOpen** (_Boolean_) = `false`\n\n > Whether the modal is visible or not.\n\n- **verticalAlign** (_Array_ || _String_) = `[\"flex-end\", \"flex-start\"]`\n\n > Vertical position of the modal at the viewport. All justify-content values are valid.\n\n- **parentNode** (_HTMLElement_) = `document.body`\n\n > Element in which the modal should be attached.\n > Can be either inside or outside the ReactDOM root but not the same element.\n\n- **shouldCloseOnOverlayClick** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the overlay is clicked.\n\n- **shouldCloseOnEsc** (_Boolean_) = `true`\n\n > Whether `onRequestClose` should be called or not when the ESC key is pressed.\n\n- **showCloseButton** (_Boolean_) = `true`\n\n > Whether the close button should be visible or not. When visible, it will be rendered inside the `header` section whether there's a header or not.\n\n- **onRequestClose** (_Function_)\n\n > Function to call when the overlay or close icon are clicked, or the ESC key is pressed. \n > It passes either a [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) or a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) depending on the action.\n\n- **onOpen** (_Function_)\n\n > Function to call when the modal opens.\n\n- **onClose** (_Function_)\n\n > Function to call when the modal closes.\n\n- **cardProps** (_Object_)\n\n > Props to be passed to the [Card](https://www.npmjs.com/package/@crave/farmblocks-card) component that wraps the modal.\n\n- **closeButtonProps** (_Object_)\n\n > Props to be passed to the [Button](https://www.npmjs.com/package/@crave/farmblocks-button) component used for the close button.\n\n- **zIndex** (_Number_) = `1500`\n\n > Value for the `z-index` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).\n\n- **header** (_Node_)\n\n > Node for the header section\n\n- **footer** (_Node_)\n\n > Node for the footer section\n\n- **footerProps** (_Object_)\n\n > Properties passed to the footer section\n\n## Helpers\n\n### useModal\n\nThe Modal component is stateless. So the visibility is controlled exclusively by the `isOpen` prop, and the close actions (close icon, overlay click and ESC key) won't change it automatically.\nYou need to create a function for `onRequestClose` that will handle the state and change the `isOpen` prop accordingly.\n\nThe `useModal` hook helps to manage the state for the component. It will return 2 objects:\n\n- **props**, containing `isOpen` and `onRequestClose` properly bound to a `useState`.\n- **actions**, containing the `open`, `close` and `toggle` functions that can be used inside or outside the modal.\n\n```jsx\nimport Modal, { useModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => {\n const [myModalProps, { open, close }] = useModal();\n\n return (\n <>\n \n Close} {...myModalProps}>\n This is the a modal.\n \n \n );\n};\n```\n\nOptionally, it can receive an options object:\n\n```js\nconst [props, actions] = useModal({ openAtMount: true });\n```\n\n- **openAtMount** (_Boolean_) = `false`\n\n > The initial state for the `isOpen` prop.\n\n### ModalManager\n\nA class component version of `useModal`. It expects a function as the `children` prop and passes the hook results as arguments.\n\n```jsx\nimport Modal, { ModalManager } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n \n {(myModalProps, { open }) => (\n <>\n \n This is the a modal.\n \n )}\n \n);\n```\n\n## Extra Components\n\n### DialogModal\n\nThis is a combination of the Modal and the [Empty State](https://www.npmjs.com/package/@crave/farmblocks-empty-state) Components.\nIt accepts all the props from both of them.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\nimport { MdAlert } from \"@crave/farmblocks-icon\";\n\nconst Example = () => (\n }\n title=\"Delete entry?\"\n description=\"This action can't be undone\"\n actions={[\n {\n text: \"Cancel\",\n type: buttonTypes.NEUTRAL,\n onClick: () => console.log(\"Canceled\"),\n },\n {\n text: \"Delete\",\n type: buttonTypes.PRIMARY,\n onClick: () => console.log(\"Deleted\"),\n },\n ]}\n />\n);\n```\n\n\n\n### ModalTitle\n\nComponent to use on **header** prop, is a [Text](https://www.npmjs.com/package/@crave/farmblocks-text) with `font-weight: 600` and `font-size: 24px` as default, and accepts all the Text properties.\n\n```jsx\nimport { DialogModal } from \"@crave/farmblocks-modal\";\n\nconst Example = () => (\n Header}>\n Modal using ModalTitle on header\n \n);\n```\n\n\n\n## Peer dependencies\n\n- prop-types\n- react\n- react-dom\n- react-spring\n- styled-components\n- styled-system\n\n## License\n\nMIT\n","readmeFilename":"README.md"}