{"_id":"@admixltd/admix-component-library","_rev":"138-4b10b01783449418f1e5de3be95c2cac","name":"@admixltd/admix-component-library","dist-tags":{"latest":"0.5.17","beta":"0.5.14-7"},"versions":{"0.1.0":{"name":"@admixltd/admix-component-library","version":"0.1.0","main":"build/index.js","module":"build/index.es.js","dependencies":{"@storybook/addons":"^6.2.9","@storybook/theming":"^6.2.9","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","antd":"^4.15.2","react-scripts":"4.0.3","styled-components":"^5.2.3","typescript":"^4.2.4","web-vitals":"^1.1.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0"},"scripts":{"start":"react-scripts start","build":"rollup -c","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-actions":"^6.2.9","@storybook/addon-essentials":"^6.2.9","@storybook/addon-links":"^6.2.9","@storybook/node-logger":"^6.2.9","@storybook/preset-create-react-app":"^3.1.7","@storybook/react":"^6.2.9","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.0","npm-run-all":"^4.1.5","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"3e5f877ca9d278036e1bbd39322c2c2670a0f9fc","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ZjNeWvOzx4uLp8VwSu+39s8dqS2Z3AG+H1ZzQ4EV+mB256ov6wSGpl6gDfOw1M6pZT9/P/JdQQjsqhhrFkurjQ==","shasum":"09ffdd4dd357cfd479c3376a7135cf6e2d9d3d73","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.0.tgz","fileCount":6,"unpackedSize":47253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmolZCRA9TVsSAnZWagAA2U8P/1xsw5hIasinfd74IP/R\nXKAY4670hRrptc9cIHuAh4ha4FihTt/9xh/UXJZZSObViPad48QCoh2J0ZbS\nUFI4gia/VM1uSIQ0nIkzxyPGypARgglt9ejWZq+M7wHz/NSF6l1gBvdKl5Zo\nFpYQnxM+dX9kfIwDuhx37lDQxDpnnOpa2r6Lr6ZYpRd9zE4ezEp1a7Bj99ZG\nfzthFKtsqP9tojLKPGc/QgsWIxYDYe0+1MId1fH+BuycSIaJkaQU9rIapOR0\ntLfEJ7F+OAD/Dj5eMZNZbGyp2FjYJFuZTCHTUD4uaeUFtZWC7s+2OixLyCMy\nlIy2+xJELUIcL+DAPU4JoGHPxAQ/cVwTM4FfxrojHZGac7wizJGr6dBRb6Cx\nLF9qqJIcAb0hIMI8hOoZL2oafXQkqzzVwi4hI0G0p5OQHbdQLk8A8RYXa74t\nkJbRzGhuMf5RlDMz8mGVylKVYhhHA+rNZMrZROevGNHRjoO19Nl+kC3swTH+\nglLiXZqD86ldl6F1uvH2UlaoGDXozMskauCAiJI9ybiMmTm9vw1Am/drcWD2\nGzW4UaTGrREQKL086B7C0sBOUbC7cLNF8sCMGq7fjcXJpXYJipgWlDXP/ehX\n2Qx8ftPhzcruLIuQnn8YVUqbS5XpE2CDPOOZULM9thOcOttSs/C5t7kd87yY\n+Ueo\r\n=V5Xx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAaNo2AYS/247RhD3o9qN63nuFFn+JLWN2cWm1zwdPo3AiEAi3BbQ+vMCOvcF+ocdWJ4poydqZZUV3/VcRC4LClN5Rc="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"manuelcanero","email":"manuel.casancho@admix.in"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.0_1620740441116_0.9556218591212908"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.1":{"name":"@admixltd/admix-component-library","version":"0.1.1","main":"build/index.js","module":"build/index.es.js","dependencies":{"@storybook/addons":"^6.2.9","@storybook/theming":"^6.2.9","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","antd":"^4.15.2","react-scripts":"4.0.3","styled-components":"^5.2.3","typescript":"^4.2.4","web-vitals":"^1.1.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0"},"scripts":{"start":"react-scripts start","build":"rollup -c","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-actions":"^6.2.9","@storybook/addon-essentials":"^6.2.9","@storybook/addon-links":"^6.2.9","@storybook/node-logger":"^6.2.9","@storybook/preset-create-react-app":"^3.1.7","@storybook/react":"^6.2.9","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.0","npm-run-all":"^4.1.5","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"7591205dc16d800bfac05ce832073af905c46481","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.1","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-XVNjCdHmJJ4kRPf27B394l8ZR+RrRMmMNFmK319Bq8vnZiUjZp6kHxzOyZULClsjZyuaqI7Do+o0NhgOVhFrbA==","shasum":"5602b4a392d17a3ee7e49b96ff61f5f275f06839","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.1.tgz","fileCount":6,"unpackedSize":2419413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA+b9CRA9TVsSAnZWagAAGKQP/j6w1h0GC0fWTfugxwCC\nNdTZrJ2J2JgSnwuvoSweZp+R07uLv8aimnPbkrI6ICXIt8etv0rjADDMKMKq\nptD3/kEyC9GcRHz0/fjSge6osGerFdYAUzZ3jHnFuxRcTi4jdOoOOmjxstDN\nyzO3rgbTFpk2oiROjHlqDgynj7ZXk75578XezwZnLmhzpSTqf/qSsjZj3+e9\n1o42lwolSKikU8qGU/SQACuO7p4QVLcwjzJiVHFRu5FGkkhLLWW/py83IJnD\n9AgN80wdsx2wAJAsqXJdsYTHILQSet532ggdEJx3OiuX/ACFdKLewY9z98UK\nOCpxxkBSCe5WsEbjnndNy8ymYqdRF5G31qZ7B7GpDo4I5ih+G1IgYaERA3iw\nUpqtUl3QhUksWj8egF1JGnUqll6u6juChP0JVWdATOO9QZOwXPwrG7svo6Yq\nKDHbjrdAOrTSze4HRVcI1tge4Qu+GvD5SiM/hXyAVBjXCdWeheOBeTpMmvhw\n9oCy9ZCsYejXCx3q+Q9BqmiVOryeAVQHa+aI0sAfB4gRF8XysABQIAZ/4nzI\nNALW6MHSE9XxKZxPAeF/pZpthdFu5pjggDtIaH3jEVtLGmMLwZmGBjXJBZzr\ntzV0TyHYDSipiWBkSvrPVg6f/DEXUfN6lRhpwc/jeJhRQpk5uoX5ZaVL7sqW\nOCSi\r\n=fpxf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGoRFxe50sZMboGek1OYfSBW1x3T64liJ6Ny8Wat2TbwIgV1Ukp2xKoMVUUKk721tGdrV9pS17unuOVdrBhhZCyV4="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.1_1627645693082_0.6052469702978778"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.3":{"name":"@admixltd/admix-component-library","version":"0.1.3","main":"build/index.js","module":"build/index.es.js","dependencies":{"@storybook/addons":"^6.2.9","@storybook/theming":"^6.2.9","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","antd":"^4.15.2","react-scripts":"4.0.3","styled-components":"^5.2.3","typescript":"^4.2.4","web-vitals":"^1.1.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0"},"scripts":{"start":"react-scripts start","build":"rollup -c","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-actions":"^6.2.9","@storybook/addon-essentials":"^6.2.9","@storybook/addon-links":"^6.2.9","@storybook/node-logger":"^6.2.9","@storybook/preset-create-react-app":"^3.1.7","@storybook/react":"^6.2.9","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.0","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"cf882836bbd94c0ca4fc65f370f100fb38e1694d","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.3","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-3gVpZTn+mRzoc/dMFGVuGrzEOPeYt/ATyShGlaDgHS6E8dvNkLBCIrvhG6Iqvcpt4w/fLQnosJnXrYmV8Hc5vw==","shasum":"df0a56916d3965493206dde87f3ceba23ab2ed4b","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.3.tgz","fileCount":6,"unpackedSize":2736029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA+9HCRA9TVsSAnZWagAATH8P/jG+FXNa0EK8ew/bF1Ek\nrE6/D5OJFrpsf1WnVaJ5qKN+z3ZSFaGva+v0XJz82XpTQ/tZJkJ1uXtk/g28\ne+01keLSn0++jBUYf+HsxnRV/jxC6qrxB3V2CErXmFxcHWxFOB6AdrwPWTZ/\n1UplVO5qzWBkxDqLiI1OfqQ4cru7c2n0WQWJh3DOLk2tbRSAb/XEwkpeq/iK\ne/Z0bvs9wLtzwt+G8bBc1pQEOMgtsBuJPj45UAy57POEocyYIwr2oFmDc6Nh\nPwfF3CMoHCi28R1gGq042BEBRbFgvlY5qNcLb917DXZEaNKluXhXx7truyNn\nnf1kzv/STvIgnorvGHqEFc1PZMzssQQlanxcWXs7VCvLqI6hza/2D1YDowrz\nNpfJImPEI8K1u7W3V3zVENoMF+Op1qfaBNmceKY4UV5amOtnjm4Z2VEB+Rj2\niWLpQcJSq2LYehhDCpH2AVsM0Vo4hWDh6/ygiYKOR7Og+D7wG8Yl3u1xezga\naTFffoNKthpTYAA/w2nPGMm1c0ceh9NjjhPBOuplh/j3Wg3Lu7QSp8NSuyFl\nOpuVeCtuHZVYLWXPZyDSlAqTGm1RXAnxD/1R521Z9R2TzqFUWbls6qpawJRq\nJhz50R3h6SZFO2Z220MPAK9UkKxHa6c6qwM3iNJXOrkUREu1K1CNx9HfDMHH\ns2xt\r\n=zrY2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiS4HG1wOxJWKBTVPPwJXr81veSG06k3VkkL0TF4g9LgIhAPNfDZDgP7lqldHHDKWWrnW1eSKXBmcX+me4aCotTTql"}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.3_1627647815285_0.9159896970231443"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.4":{"name":"@admixltd/admix-component-library","version":"0.1.4","main":"build/index.js","module":"build/index.es.js","dependencies":{"@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","styled-components":"^5.2.3","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"6d30be873d9e184dc8a987b2eb2229d6e770fe16","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.4","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-sIZa0h4UPqjdSO7iSqgRSh0c2XE17cmLfs/Vt1OqDumuFtzIURL9ZSO6S/GLv9n0o2H6l30imq1sYD0CpL6+Og==","shasum":"a56a39106a851ab40f65a162baf9dd2af739b7e3","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.4.tgz","fileCount":6,"unpackedSize":2736133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQHXyCRA9TVsSAnZWagAA6RAP/2UngAj8MtxN1LTeOT1U\nIFcMywJZsoGo/IQfzYPLg82fWpYXGt+RnuA1GmmTXF6nncZGQcm1LRpYbXLI\n2zHYh9Hf0OXR8XI30I3H4YeVUuS4DLkfloB2OfcdaFf31EVkJnFxsfDBjQF2\nEVLwxzmX3VwpujQnp8RUnJyUPEJPUVKojGgQRDUmIsqzJe6fRJ4DRDAI+G20\nbtEeW2WsmlIP84Oxj4OZfrh1SGyL4Rp8WYjFh4BkEaHjvvVIega6G62gCdXq\nvhPMMmoB19ie8fLB1b2LRfpmJiqOJJfffjdcAQ/rhveY/iTbYgVYVlK0i1ue\nxKHnvbFB0DvUk4BPYk2DF238D4Cu3usILp3fPdY6pLgy5+fx+3UeF3T8DGVc\nDMITxqOvUcuJRfN3BPpwQ6ivFmRhgkFXwHfcZ9LolFFJOkVqg3MQWwMr8umS\nYxlEwfKan5vcn9ak90SUngh7YeybeDquPK+eB7wv9EsqPIi9cbFgNk0777xq\n1Hwj4TN6hSVZigNF4iFTjCKnouhwUnE8u+T8qgFBw8fjVI0M1X2u/maHFAZg\n8Dx/3MPJm+U9F24MpPJxrBvRfPU3qcTPbMczuig1ook3pNjBV4Bpbe2TM+Gt\nmkqvznxytgaN5hGLXIjKmfY8UUBEM2CXX8ZwpKhvw2kBXJu+w6ydfOntFNs+\nUlbH\r\n=3Jtp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4n5vsGNalaG4Ghff5BOz9qo/Njmkozp5zI+u9FLvrzAIhAKGVUvIaGKVHyPYo6OPk4F5JSPIrE+gSpCQHxIdjLWJi"}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.4_1631614450512_0.997662442440989"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.5":{"name":"@admixltd/admix-component-library","version":"0.1.5","main":"build/index.js","module":"build/index.es.js","dependencies":{"@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"tsc --outDir dist/lib --declarationDir dist/types --declaration true && rollup -c","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"200c4f77dafd3525a259990d8126afb5cfd58aa5","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.5","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-H17BfhUOIdIOmEQ52XTmkUoVqFZ+aP3PCTnVdawQNZq+JHoHF6yZXh7PLn2wBcptXP37LiGO5WMAnrOVNDB8AA==","shasum":"d5ad85d45c54e09323c112cb9cf2160fa5074959","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.5.tgz","fileCount":6,"unpackedSize":10636736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQJepCRA9TVsSAnZWagAAbq8P/12a+qTQs281KH2mEZDK\nxhBAqq8woJGfTzS8U83qozdWBL+cemWJeviTwgRDcaCDw2137G0sbHNVnHHG\nKRmNGjceSRKhdy8gB/6exaAB2rRxZsjHDt3UmBUVzeejBJQvdKmK6d4ON3dF\nJVfHk94Bt2z3Y602St8h5M+1XAzp6Bn8yg8GBGVF+R0AK5BeaZ4BJUWR9FfF\nLa6qoNeVXRRnWamysJfSGnhKo/s94ULVCjEZmferxL6mPTyqyBKVCh50nwR8\nP2jkYW2roY5GnUS6cw8Rnu4Ls0EvpF97XMlyrUVUL8UXC5HTVwwO7jBhmcQj\nclVJK01C4TzN3r3J15/jdwOcY0nwM1o+YyczrtxyDoL6IyhzAqunvEY+uHl+\n0bN7Lo0SOaBke7PCVCT0B39Pyn3aH4Kl6sK+DpbIEmxatVAMNcOchR+klZ0e\nbNkOSTCJuIMMisDf8eRMWOEHlK5R4s38QRfjMJhpmonCx3khX3r/32ECGKAR\nh01/4D0glO8CcXtIteVisMIVeJgDX+TyknPsIN7mUCFZgNv+yPi8CEGuMm8O\nxlxVcgIHHXniv0TFFXL6/dwGGlcFu+2tQLs3ZU9Vq+TX3CC2g4Efmd8cPYp2\n/H8OIhCRrOsqlCUy4D5519IL0b89WUOKq8aLib6GxUgyWEuUw1LMr2SwkfLl\nx+Mt\r\n=dm+h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDUAmn0XhikBsKGn24siy869pM5vAC1lXKfGvrAcAoXIAiEAhTnZr6mRqu2o1qAd7Hpa/2en1OXPrzo9cUi85CFut48="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.5_1631623081713_0.737407980016842"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.6":{"name":"@admixltd/admix-component-library","version":"0.1.6","main":"build/index.js","module":"build/index.es.js","dependencies":{"@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"tsc --outDir dist/lib --declarationDir dist/types --declaration true && rollup -c","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"a77ea090f96d1078252929e768d70e9b1db94899","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.6","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-wvKUfluXMUsDKyu1aMuogNLuF/daJIWw6Hdi1z6UjVTsowcrOjDwP/VGQ7KW5KpuZq4alItayejTaNiKAobk9g==","shasum":"438ae8b6bbe143107cc5dea572c38cf1761b5df6","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.6.tgz","fileCount":6,"unpackedSize":10636736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQxgqCRA9TVsSAnZWagAAaoIP/35vt3H2xDqVHoi260BU\nsVhaK4ISS+nRWakG+5+iYnUsZI44uY7JVKxPw3l+TxXWFSBWfW7xhTnk6v6i\nx1nvt0ovXwZasQjbXWiESEIulwF280bTQFRVqBejLGWLJpCDgtNo/vxyEUBR\ndYsuG8bSyZqkt2uBOxfF3qS8jOPoqjHbfW3Bf4J/AUZmNFvs1n1+O2KZbwov\neN1zr4MbeUXILekkK6SeIQUIX/M3+cXRr/jQ+nn7BzgQUQReujnvwsIJgB1F\nRVsbQWsncenPKWsCDXz09aHT0o+bAKNUPC5YDrdEv7JTOl7pCKjM37ruh4e9\ntZw8Qr81y28JzG4sCMWIQgwROqQdyFz7JVDtfVIWQJCJVwchg+kqUqWt9v4H\np+iMI+u/D8dJFYzZHIFY3DOQ7nJGDi68GEElOvxf8rSQxn4Feg71CJJpKNRg\nKbQmPSWGOpJFvBz02FtwjBipEz6L8D51Xanp+KhEBCcMQCQ+mlIe9HQxQ1W4\nsq/ZjfrB6R/c1nz/5DVgaMTuMTomQrzx3CJvy1rmd0ymmwfgklrOS90NRukS\ndu0lJtu7tADAJLANmMdsDAAdpjQeN6Pv83CL+5QWaEoQ4ARF4K9/66bEWZDB\nlTVBjCARMmVuuEjioTm2pr1dmpcLWTnqvPuqgaYwjqEHzJNdFJIaIr9r5vF5\nyKqR\r\n=3rrW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID26hd1S2l4O09AzeW1YTuLJ2sxVlRNs9UHTP2wLNjFOAiEA5RXzuhttdCkjy9K9Db9T03x/XBBrgUQ8sUSFRCQQ1q4="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.6_1631787049914_0.9439966103449382"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.7":{"name":"@admixltd/admix-component-library","version":"0.1.7","main":"build/index.js","module":"build/index.es.js","dependencies":{"@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"tsc --outDir --declarationDir  --declaration true && rollup -c","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"a77ea090f96d1078252929e768d70e9b1db94899","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.7","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-yKrnA+g3L9P3w1WlDs5/Hsy64BUI/BXLKnsX7uyhxEtkc6DlD179FxXTd7XC4+hlGjVvSghpc1TsdrsNi6wERQ==","shasum":"4e4aab7c1a130144b37538167ed96b50ef974ed4","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.7.tgz","fileCount":1618,"unpackedSize":10894330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhRDFKCRA9TVsSAnZWagAAv0EP/2xX1KxFV9WnREajDTvp\nKLUiljVDdqiLOnSGSOQy7U27qoD9ig4DmQLMMoZIRhseQ+mNPhvcrC2DLwv9\n2LLLAulkUZfdxz70OyvXeM0WdeRzo5WAYso0CJPmnlh1fGFuNlJ3zRb6y+en\ntBAwgMPXU7Gaia/zm/B4yxNfwgjvW1iNfhzJysEyMNSlMoH4IO8tGijBNVHD\nZ6KPlMJyXGZ2RUsaVPQfWH01hoE+zE60WCczxe5+xEAW7ra6l/oVC7nvoUvP\nINmsULtugj5E05NzLx2auOmyBMh4Y1tgqVK6Zm4y2ksVICmytlSn2QtnU1cH\nuTCfGVWBfgfx7WjH0d4DWVk+1LHLhOMaFJ0KMSIRrjOSmBC/aUuuKeBw2x6Y\neveIzsvVGyY4mEf4rI7X+DDdnJq0TuR7soMC3NeBTgR7NzHlJC4acxGJmiHk\nn5EFEiv9HH8ggu8S0Vnqt5WkGY+FQAV5r2vWxisi8JGofIlWMHwcTXqQf1jg\nHz3aWEkhZZhyZkUtk9BWKgbgoAQupYsBrGY5waC74vYQOHDQc0FVDs/B4Wci\n+PFSiQmgKks/Ip8Z3iCdP+9YV6ZGbcfJKs2VipWbipNJa9RoXlQoMEjvUiKH\n8CdvvCg59dV/09iZGiVlLcmxKKr7CdpvQST4HUjSR85jbNm9vD6Fn/Dxd7HO\nV0+T\r\n=qlHf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbxdbE4LzdBGHu5/CjrjfdRX4M6LkwWhovOQ0pP46GEAIgULWhTSXdfGe+nzWO3h3su6tX7TKfC5fZNUK+TssAFR8="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.7_1631859018302_0.26501821885527765"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.8":{"name":"@admixltd/admix-component-library","version":"0.1.8","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"a77ea090f96d1078252929e768d70e9b1db94899","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.8","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-+95YZvsz4TRYNa0KR1YPCBbKzNUfiQY4ZrsBy7Vt42RNSDiwXq/9x0J40YHYYH0iZU6QNQ9go0y8Gna4MYj07w==","shasum":"d3637c28fac40bbd2813d98e85c2717c1a378b10","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.8.tgz","fileCount":45,"unpackedSize":6992265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhRE02CRA9TVsSAnZWagAAdEEP/1UE5jlxkksHb4LTvyBp\nHlKYF4Jt13Q+mPj3y/h/z5rOoefaB5xsxGLwTBLN9OJB/3cGpBm5xXTRc6y3\nXkJVAcENZRkZDSsUmxDy6iY1R1kxgdmUUEQtB2PvQ7I6K/KFj8fAx3p1/lb8\njZpAPSJ/m3qQfNpTbaConMUBK5xhGdDHZzEc8Qyq8DKjV4d8lXWbU/+ipCpY\nsTfJOlGpyP65Y+5FYO7oZsAklxE/Afv4znJrN60FlR6kTwheQJZxYT4kFA+3\ng2w39dm3JB88Eyw3RWShCgJ2OdNtQxOllurMz8fKf7OpOEm7L8Lejtzr58ov\naYuo+eP4hEdVJTNgEQJ5a1tygnPR+C1jwavR7+LbLNJ1jg9ZWrP0l0xogfkR\nL0g7U5Bs5YQzpSbzaX5Slc6ZS3AGIPeAu/EhHQf0Vr2w+PVaPjsKmR+ZuQAJ\n4v/+pj/HQNmFVLLc+6zuu1NSIb4O02SMPePKIEvxVkN6pgrCWHjzojarm3zp\nV95AVnlu6kOWXf8pGD0YBk9bdB6+pNQJQmQ/yKMktH5/8OFi9WOVhYErt1KK\n6o7UaKupm6kcN80UkEBYjNe92byhOjrADAKHew42LV+HCYh/jmTXoNYtieTU\nDvkAxhwu9B4QTgMoFrlFOtZsiROxC44cB0Iei/kfBtL4QFy+eYfU89jgN28W\neyQJ\r\n=Y8/l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+SmmIqtz8xPPGDGz1oPai+I8HHf/03PDc6TqKM9+vHQIgLc5ns91IUKMvV0r6bzWkLTYDydx13FmWEXDXvcwvbN4="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.8_1631866166366_0.5863105399133459"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.9":{"name":"@admixltd/admix-component-library","version":"0.1.9","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"be764fd0e379fb84d71ee25ee0e61bc03f6bface","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.9","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-iVaNgC1TNiv8AQzJzqh8uUeSoL3KCceKmYuSKme6is1MXpR69G0IV2Q4j5r8GezkdloKC5tQV1xlQY7ft4ej6Q==","shasum":"799db70d87742e9c927e00e2410fe6f85cc70e8f","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.9.tgz","fileCount":123,"unpackedSize":7237736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhRGqBCRA9TVsSAnZWagAAL5AP/14ZldbwoStekSCY09bv\nwNZC9hnxpZNk7FM3ov0H/AExu2kc2DX61mTyV4d4dXYLIaeLfOzcg67VDL0n\n+g0gUsKcWuzExNJXz5/+v72UdMEmh8UC5bn2bJhZ1Avl/FnNfMjPRlbglI9Q\nCuXIZ9ZE1iMILu3xsPnGjCf3B+wQX+Ev284bHoeOJqNa2xPhe29Ehr5OyDJI\nNCBYBnwsSBFwfxgud7KyO/WFQAP0MYQ5ckLRu/moOWhexCTNGu+EQkOf7Agm\n518K1N66DJBvdJmG+OpZ0pbXKLOd1ccIf1GeFTO37RTdNt2EznVbgnfx9TSI\nHPdwQuxvtfxjgCpgPvs0AGnnNmTmN1aRZ5nEGJAVZIQ6JByxMGOgTPW+u4wf\nXrlKstxzAAZrM1DKDWj8X8svq7QtZTdif5TR+PUHkMWCxxg2td1Y5h6LneyV\nJDniJ8ZB4iKFPzF03Sn8c2nxi1HQr01/QLVJB0qlJ423ztjdbXlNpjHqFWDs\n3iSI7re/AMYpTt5vH3eaBIL7zMJnhKcvJzIXd3NQcqdXQzQIvFzZuQ7F4qXI\nc5pCNmqPCpgybQuRD8Vkcc8tW80vzhixCUIKfjxJTPyk9pRIZPCiAcJ4LX4D\n+dut86+5C7n+fsxFj2JsDgB1XVFdZDyl79zSX3bCdI5juWggDL2C/hQE4NHs\na6Sm\r\n=NEfu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWmk1CzOXdLo5I1xafoOuhSCiSKkYG65/a0Cv1Qwmw/AIhAIqhuORU5leiMY/Jwq44k/kfcbTol1CmxwrAcKJc7WpL"}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.9_1631873664739_0.4294980197162426"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.10":{"name":"@admixltd/admix-component-library","version":"0.1.10","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"d2bc349ffd44e97f40dc64584ce49791e0cefd86","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.10","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-d1qBCyxYdN7ZXzjNjTPqeG+cXyfEM3/+Kq+HKirYSxjoJXYkLyjNj959bJ1V4HFqwZGI4XZ0KoUOyRMekgLbrg==","shasum":"e049377f2966209c7d9ec37649d772a0ad1c18d4","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.10.tgz","fileCount":123,"unpackedSize":8864444,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3JnIcA00tCX7e6G5mOJnuMNjHaMGv11jH1pImSXziLAIgMXUT7an/z0mswf6WRFhUGh4uRO7qbvZgJZoUbOypMmE="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.10_1632140713106_0.5104707824898114"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.11":{"name":"@admixltd/admix-component-library","version":"0.1.11","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"d2bc349ffd44e97f40dc64584ce49791e0cefd86","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.11","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-cNRI/4muie7QmA1+aVt1hAgnhQPfTtvL/VDgyJNENIjnpgh/YdmfKM3IbXqYLqU33nzETjKmQI25BN2K+kn2KA==","shasum":"b3a78f75180174294ad1fdf44d6a353247d7e9bd","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.11.tgz","fileCount":78,"unpackedSize":8849581,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCx7kq516rrzfRZCuifaQTVh+sCl76fntyj/ZGMU5dREAIhAMf6MSfDcGmE6GjjSKaCAK3WiMYm2FNw1an1zcoMWHaN"}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.11_1632405945981_0.38381384062956503"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.0":{"name":"@admixltd/admix-component-library","version":"0.2.0","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"031c4c677e48168a4f4e9354a1b4f4c07ef4efbd","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.0","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-XAY3NCES68PwUaj8iwmfeWc/Ro0nFX/n791W/wB4bKxzZaVMs0w/Zcc6Sn9x4oBFUi073MQ9QvW3qsr4tk3xVQ==","shasum":"fbdb6d2454e753eab342e269eda43ebdd839dd74","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.0.tgz","fileCount":78,"unpackedSize":8850268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9snQLcJOQUXD6azpEjTD4bx07FmnZxV7Lg5JIxugn5AiEA0w8VufPr8D6uTCtJUNNIXCOvblArWMs0TmFDEnojjTs="}]},"_npmUser":{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.0_1633022144686_0.05110010635668272"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.12":{"name":"@admixltd/admix-component-library","version":"0.1.12","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"types":"./build/index.d.ts","gitHead":"565b4ea4665f6edf4da597aac7f75ba5156e9a16","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.1.12","_nodeVersion":"16.10.0","_npmVersion":"7.24.1","dist":{"integrity":"sha512-rSiOFMpuKpAyzjXXNccMZFIoQ0R5D9ODgno+k+bX5xadi87rrEDE6EHWdqcvPUpZ6ITsR5y05r2TrZ+p0D/Kjw==","shasum":"87d470db5009b045c7346bcab6a796a3e8d1653b","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.1.12.tgz","fileCount":78,"unpackedSize":8845420,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDC0FJyVMOdQzE8Usle94PZNP8Yc+nVujRu15LWL4h+SAiEAiLKd1sts20Qhc6WPMaYqi4lf4ReCvaE3A2ViClMLG3E="}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.1.12_1633429307422_0.07245353548654498"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.1":{"name":"@admixltd/admix-component-library","version":"0.2.1","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"types":"./build/index.d.ts","gitHead":"fbf0ac8e3add54d6f22f1d725debd84cb1ed9c5f","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.1","_nodeVersion":"16.10.0","_npmVersion":"7.24.1","dist":{"integrity":"sha512-k582x8XSBHeruQFbQNAcDD2PbW94V7TZ7ACOA89KBCMQYd7Ol7PQXGHzYc5GNaOJ82yFTW5ajVgJJwU2ax0GTg==","shasum":"db6bcebc23d704fc1da43321b5d092bf1b53f40b","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.1.tgz","fileCount":78,"unpackedSize":8845419,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUmtHmLsxUGdaGyeDkjQFOXLgYlwggyugeznCtc+VGfwIhAJjY2mbRmpZlBiLJL+A9gGedKlvAOzv0tf+bkmX3IyV5"}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.1_1633435086543_0.7285735717379656"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.2":{"name":"@admixltd/admix-component-library","version":"0.2.2","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"types":"./build/index.d.ts","gitHead":"d03d695fb0929f562c739b12ad8007dd767d06ae","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.2","_nodeVersion":"16.10.0","_npmVersion":"7.24.1","dist":{"integrity":"sha512-aMOPUtuaCac4kAFeWPYAeM3vpqV/DkBMKC47YFmeeQx21LcuOOMh0G6C9oAaq9xmVZod5g0LUKEdFpkF9IcJdQ==","shasum":"2caa6f7ddf1ccd13feac76bf219593cdc5ee0f06","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.2.tgz","fileCount":78,"unpackedSize":8845801,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICOsQlQM/k5nVFnNzeXLD02PaszEr6PGGLwrP92mPZVMAiBO9dOYLB5PHSaOIcl+FVF4b6R/96XF62dY4g0mjdOSqQ=="}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.2_1633530194012_0.1265695509031104"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.3":{"name":"@admixltd/admix-component-library","version":"0.2.3","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"types":"./build/index.d.ts","gitHead":"bfc3511705782333414a5fa7c1a2556bc97eca59","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.3","_nodeVersion":"16.10.0","_npmVersion":"7.24.1","dist":{"integrity":"sha512-4OwZR7VCbrkjCCTYytyDkp24MbAafQV8JQH8Z8e4RlhugdbTwoJ6aJBlvbrbcskwGyhkWF2JBMXMSFKlqav3CQ==","shasum":"527ec439e5fa6bde570edcc5d451cb9c6e517342","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.3.tgz","fileCount":78,"unpackedSize":8845911,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6H+XKajbqENHNMioVlJZjITYtG/MZ4cxg+kkPIkg3TwIhALx0RXjpfSZs8CdoQaAVvKxYAdwjvmnxq56w7r/E+d2G"}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.3_1633533161130_0.9596825004064573"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.4":{"name":"@admixltd/admix-component-library","version":"0.2.4","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"types":"./build/index.d.ts","gitHead":"03365ca3e62ad51ce6f17d0ab6edd6a47a79b498","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.4","_nodeVersion":"16.10.0","_npmVersion":"7.24.1","dist":{"integrity":"sha512-YzpyLtq37+ja2ZSk+staVUrQjYWXNMFSyreHGwqInIVGrL6xQ29DmDzau8Z4ID/eHjXm7WpbTpe4iN3rIZgYcg==","shasum":"c3b850d1e66297ad6cbc1ef54a89c53bf088095c","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.4.tgz","fileCount":78,"unpackedSize":8845865,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxYkvi58WWJKneIUzwuwQ7aBiHeZP5d6zUZKIlBdPohgIhAORKg+Cjt66713Ez1sr6tOOJTtqy7cSBLfYWmZ/X86y0"}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.4_1633533361317_0.2971085743176647"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.5":{"name":"@admixltd/admix-component-library","version":"0.2.5","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"types":"./build/index.d.ts","gitHead":"30d8337f0d88046ea0b378fd3fb1450566b61bdc","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.5","_nodeVersion":"16.10.0","_npmVersion":"7.24.1","dist":{"integrity":"sha512-HZcvxui+5rGdOSu/W5p8YGvsM5moeAjrDzDtmBLnw17vRYSmc+yYW9FRqFUQJX4+hZkLjxku45jp14XoJe6tGw==","shasum":"186ab4904b54d37a0d6d309619083eadb04acf93","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.5.tgz","fileCount":78,"unpackedSize":8802907,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8yYRtde7HgaOu0SagZdosoznU3GLyZfg9Rj9qWI73gQIhAJX5C8G2xIOIgQyGwtW9xWvo7s+BOxcagrNnc2R06Lml"}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.5_1633607379819_0.48231214790459087"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.6":{"name":"@admixltd/admix-component-library","version":"0.2.6","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"types":"./build/index.d.ts","gitHead":"6a5b219c56539308b9e05ef5985448dbebf4787d","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.6","_nodeVersion":"14.18.0","_npmVersion":"7.24.1","dist":{"integrity":"sha512-NjV3vGZAUyCwiAvozLOETBc2VdFnLQFpGJ79aqubirJIqfX+wQdUaKwpi+QU2H499JwHKmyLtia3p+ogxwdeug==","shasum":"252226107bafc125dca3468217d30eff94af52d1","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.6.tgz","fileCount":78,"unpackedSize":8803955,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFb67I1Z1aW7eXNrcwGgD6lZsLdDwW0SWQq1AQWI1EWAAiAsTogZe+ug8W5eUyN7rMrPQfEkmvDuJ7AWjCKbcbPc2w=="}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.6_1633965121693_0.00010603711513934577"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.7":{"name":"@admixltd/admix-component-library","version":"0.2.7","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"0d3c2017f0ff4d3140fecaae09bfdec1a42f05e8","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.7","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-S9DB5IAIfAACKGpxQVeUu3tK70VjZu8MMOLuhSIITgE7as/F96pZAwwbUGt3Ks8jRGgUpPb2LlRETLcnWsoplg==","shasum":"16a3468d216765293f33d66cbaba23b36f588fcc","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.7.tgz","fileCount":129,"unpackedSize":8846310,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7wcjRqp/x/qY2WsjHs30PQqIY8CfUSwI65pxDpd4SXAiBSq6b8VTVZ42sVHasFfDQff6puk8UCrQyIKTJEEyWwww=="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.7_1634554189212_0.6617387936099612"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.8":{"name":"@admixltd/admix-component-library","version":"0.2.8","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"78faef6c9f2c1d77df0e19a76a725b191e2bdbdc","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.8","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-hnVyJOtfZGs53iE+VnWF75TvajnRwgIHxxlHR1VIOX2VQyhF9bT5dtdsmn0l40pYyyoH+q1WRT/J+bZQjme/1w==","shasum":"4e443e51bceaf02556f069a422085edeafa2f06c","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.8.tgz","fileCount":129,"unpackedSize":8846728,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBtpVLWcQniev36Uxg/P04tTSt+kNHopEfPEDBnIxCAIAiEA8AGq1H1tv0lkt25z0HyzIylYlISeIOirBCVH58SVGs4="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.8_1634558345828_0.915925770649064"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.9":{"name":"@admixltd/admix-component-library","version":"0.2.9","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"5cf5e3329a6880da5180ba49c77dbe6579dfa1bb","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.9","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-iPiJLQx9fbmmcz1jVPZIazjv5iy0uGwFJXByOOF5z1kjDsdYfHz0dnHKJgPhtB9OouYHWo00hmELAkJwpL3v9Q==","shasum":"e305fa7c36539521c9b7b62fc2e7a05c5676bcd2","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.9.tgz","fileCount":129,"unpackedSize":8847066,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcXs8T6BAL46gLzw4gQgELXVrQQ7HrH7FCdqVGyESdOAiEAkFwhyv7flqdvme08n5PtYN/YiK+stAGwruX74AhNF4A="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.9_1634567638204_0.7699674793730205"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.10":{"name":"@admixltd/admix-component-library","version":"0.2.10","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"b0e059e86f69578c69294bb30f49bc168cd1c4ce","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.10","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-cig+momFNdGLc9yrqIRjgcM0PL01ueYltn0/CDMILpxmmzsgPA0TA7FlWJmvaCjGKfix8QBFLFxExLm268QmCw==","shasum":"b66c8841b886ed4d6cc669c1d11881d7e1fe0c3d","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.10.tgz","fileCount":129,"unpackedSize":8847069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK+4zrd3PlVN1MjZofTDBUx0v/e2I42qvVCWZlBArA/AIhAMFNyEteNzJV34IfxzD0bouMqB08gnpXQMyzzgB0x/cW"}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.10_1634570471196_0.4057849050326994"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.11":{"name":"@admixltd/admix-component-library","version":"0.2.11","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"c318b5983b1029837051e8dad3ebcba2a5876a3c","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.11","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Kz7IslLrQCoCmCHJZibsA8nv4MMaj5rjmgzqp0mhs/LkvRY68mMDt3R9taeazulmYpwnsiGkvsLlQilAMCmm3w==","shasum":"625fc748f5da11d99a6cb0ff5e62bd45f70611fa","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.11.tgz","fileCount":129,"unpackedSize":8847648,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaAlbPX+6o2IU88jEsBApYpUu8DBAqZcwiGJ858XsIFAIgTOZ+MZM8K8JWGqN0DY6oN34FBWAWL9aBx3H0wDB584s="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.11_1634643277426_0.5795992894541122"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.12":{"name":"@admixltd/admix-component-library","version":"0.2.12","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"62e1143ba70a526ce60766399912187f9bfbb5c0","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.12","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-uwyGKaspUey1+YD0rYQVtU98ljH7TIhT4pPQ5YCVY15LDaDXwh1ScQmae2mWyS9EYs0z/5F8Ien3G/hK5t9/pw==","shasum":"ee53f6bd73c76a432c27f1b7f1ef9d249ee28fc8","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.12.tgz","fileCount":129,"unpackedSize":8849333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJ6KMaCsLqLHhw0MFtiXMUkrrbpnJRP8n/Z8kG7+rjQAiBwZOV68qfO8F8xI7ZXhOdqsJxGsq/fiv4vYe43dyvP8Q=="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.12_1634645504846_0.8778018827906942"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.13":{"name":"@admixltd/admix-component-library","version":"0.2.13","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"fe6dae8b5d44b12049a621c0aa8a8e197db71e9a","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.13","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-SZjd0fRPyOkqjirn+jARuSZkCp+8QBU+LZ9eB9Y4ugK0qNpICQLwOHFL1cb2hqGnkycCfT3wwg2nnyCWFqlUHA==","shasum":"a1b3114fe6fbcbf75ed5948a8924c8957633bae0","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.13.tgz","fileCount":129,"unpackedSize":8850719,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwCIbO9TNIme+QA43Dmle7x8RZXdVLMRbmiMMATaGmUwIhAMZncuMdfU2N8lAD64UnnuHP/aLO8gmkCh4gPs/uGup2"}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.13_1634658027311_0.14650617665815702"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.14":{"name":"@admixltd/admix-component-library","version":"0.2.14","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"39e3a5c8bf381ee1fd30e7e594eb3502e68da077","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.14","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-BgJMc+KncXOnQaqbDYaBDwMjRndMMckNhIji5Ztoc+IDl7WUuju5J9L8nB5tc2DJFiLvuLApBocwEOJCJTuOLQ==","shasum":"ce7892d432bcc1569497e6b9e307bed52629654a","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.14.tgz","fileCount":129,"unpackedSize":8851717,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3/25URpl5WZMBTa3xjz90VAKW1G3RBHWub8VoYtIkeAiEAkkKAeJINEokyrPqKy77AOD3AVmHiGXAHhaGGQT6HUmc="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.14_1634737522894_0.7207759938110914"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.15":{"name":"@admixltd/admix-component-library","version":"0.2.15","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"e1ffc6cebf5357684a7259b986b4c0ddac96f3c2","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.15","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-rxXOPxX+R0E/uCq559+r9olvnqQwrqZJc7xg965axZbKYlSHga5BVWQEklnSsXg/39Amhq95t+PO4s9uCFZ0Ew==","shasum":"cecad1a15b76eacddd67e711796d4b1aadbed731","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.15.tgz","fileCount":129,"unpackedSize":8852265,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfGhDRCKTGRzRBN2S3sCxuZH9SGIuHZARyPkuvrY0ZtAiAmt0NQJPIdJwI3q0dDV5L644Oh1PJQImAR8hTH9EeLrw=="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.15_1634742683599_0.6565872281685388"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.16":{"name":"@admixltd/admix-component-library","version":"0.2.16","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"b307e8e54c12de490d5d738f8fa15b12b02df320","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.16","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-XzBIc9yrgQEp8RK1yKAdUSSwcT8xcXm1G36zzfQ01eeynkuka3CR8e+X3mB4ByfZrpSroznDWy6y0QiZ+0gMHQ==","shasum":"6f19b69ea5fca3dc90ab2ca2af72bbbd40c3f2f5","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.16.tgz","fileCount":129,"unpackedSize":8852189,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7Mb36Xn0e6Hmd4lRicAcSsEem2bRJNYq8w7+Q+H6bEwIgf0qob2b7QH0sHkRM29+kmyxIhSFijzjpzSqwnYVbo/4="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.16_1634743974771_0.8946327268275636"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.17":{"name":"@admixltd/admix-component-library","version":"0.2.17","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"types":"./build/index.d.ts","gitHead":"0614d00dd798edebb5b6e6009d19429a165490c7","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.17","_nodeVersion":"14.18.0","_npmVersion":"7.24.1","dist":{"integrity":"sha512-xVTh7pOECb8J3eEiYGLfqeNzaqj58OKisxEIc4ZXgKFlqUWSyNvLBwYm5xtbshYZcKRkNn2CK+p//fr648d2Gw==","shasum":"d978eb630035a24265f061fa8685813728e4152d","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.17.tgz","fileCount":88,"unpackedSize":8838586,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0SQAEpYjjkb+Yn/QUh4Kmr7eWBkJXONV6asdxRZSQnAiEArw9NSFlvJw0kPrlrk+M5fe3x3WaKCi8gdNoFlRHOoy0="}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.17_1634804669202_0.6811976213156596"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.18":{"name":"@admixltd/admix-component-library","version":"0.2.18","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"afd969f6cf5f29191431039eb665b29fde025dbd","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.18","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-jF6zEQlzTfIoELLt9VQWSx2COWfeNGVPPXWXfNEA5DF0r4cmXJorSryf/pnMs8wl9gtN9ovlDn4bDQhSyI0qCg==","shasum":"b63bbfcfa9598264cde5d75753b16a6e8e077c33","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.18.tgz","fileCount":141,"unpackedSize":8911113,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID898ymgjxAOiQoympQ6zbynNvdQtpSpJ4rWILA6vfAvAiB2mt/C04GMIHbvmdTAc7j4qvzg3VJDzaqtmrC3AB+XhA=="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.18_1635866795847_0.6676406281648415"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.19":{"name":"@admixltd/admix-component-library","version":"0.2.19","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"8c1d2b6bf433343e356b63d6587aef3e3f9acc72","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.19","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-18T+Jr3TLMKmzKWRucuiEZrks+6VrdwMMDj5+JJoDKyx8+zMmJtWiJTIrCWp/Z86HfLb4X2FK/IkE7MINeHYiA==","shasum":"a11bc1e02f4c3f1ad3de01c207f433960bfdc609","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.19.tgz","fileCount":141,"unpackedSize":8911250,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2/48Uu8PoCgx3wLqO2fMQU227WzXnhtaczeVrS6TBTAiAn3QrkVtCFkF88qqoR/bRwNAb3QFYldC7K87bONik55Q=="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.19_1635867229340_0.9273305782504093"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.20":{"name":"@admixltd/admix-component-library","version":"0.2.20","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"eca12045adc3c156d7296cfc49669e1f54516942","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.20","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-qn+hE/1ohafpQ4tOeKSx0NWwkXK7A3pXUXOdF1W4UBZLvUb4xFMd9e/KWKGcS9qHk74UgT4+qfrQ2Xo7qX9Xfg==","shasum":"be9028060d160e172d62fcdaeecf6fc4987b5aa0","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.20.tgz","fileCount":141,"unpackedSize":8911421,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5CNqvSoRgFo1c7fSwf9f6uyjV3oEejRjTw1waIPBTWAiAW7A8eoUVtRjxg4Kz9zcoOMK7CpY1Tjbdt7y1XYlfe2A=="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.20_1635941380868_0.4464538034476666"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.21":{"name":"@admixltd/admix-component-library","version":"0.2.21","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"509643ad223bc868734903cbfbf97fa7f59a0610","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.21","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ntUx3LIuWfYSFENs6fN9s4hi+DxyOlPWSyMOTyi/n3Y6qyDA8aXiDYwiPCg827IPlGOFPih7dNELBqOJzmEgdg==","shasum":"bf7e788b02a56f0576cddfab0373584fe5c73808","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.21.tgz","fileCount":141,"unpackedSize":8911677,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA3ctxxqxLNhtyLkDW1o8Aks7tmYK5Gd2Y9pRXt49h27AiAMxgP3DssGp/oE4klTo2g76JnraOct17kCDqmX4UHK1w=="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.21_1635956115145_0.7916790734862453"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.22":{"name":"@admixltd/admix-component-library","version":"0.2.22","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"289448f8995a503cda9cd7dcd30a9afa19756835","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.22","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-OwEKl7uYC8+ec5mWoCwxtFzziNSGH8rh8AiMM0Wrwp1SXA3UnfzswYyhozPzq8pqiLeNVGyZMbipqXvaLo8Ugw==","shasum":"6b7a9352af5640c4364d8fbe328bb18318ae33cf","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.22.tgz","fileCount":141,"unpackedSize":8911659,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNzOYA4Oe1tMHO/Y4spnwJimbCo8BHMKmCZFh9jz5MBgIgbZHP5ovI0o+37ptBLKgItVjbLCpOvuHta7zb3fwtivc="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.22_1636044329350_0.17395013084069944"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.23":{"name":"@admixltd/admix-component-library","version":"0.2.23","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"653f041bb7b7e9bb2f8cbf8864c795c5ad8014db","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.23","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-KE69rxw+oYJzG6EhkQMlavaPsXSH1Ou9wWI5bkZd7YYePW+SRH5MV/+6HXZry9y5b9mLzFUtaoukSGUeSMIkBQ==","shasum":"eb82a2298a6e4ee8d50a42e01b99555e42f58b18","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.23.tgz","fileCount":141,"unpackedSize":8911655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8sv+cCCZc+332K5tLE2xc/B+ST0qpy1tKY0pUEwRUTAiAxe5K3RxaBQp0eOaZlctjn0FBKMF+6K2qxJzZQj7NQSA=="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.23_1636047349041_0.28659549824213704"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.24":{"name":"@admixltd/admix-component-library","version":"0.2.24","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"9eeca1bfd121eafe168c26893e988ad6fe989926","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.24","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-17vp6knHX/3mYO3g9+1AbhVu057MpMrWHZyR133A+nsvGL4ASJXutoFWcVTnjTP8jmObujwU1zL0gaHp+AaENw==","shasum":"12494dc904f105b5d8887bc99affde3f58389975","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.24.tgz","fileCount":141,"unpackedSize":8912777,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeiwr4Ud+QMDxqjM/cN1VoJuG8l44LTC8C2JXWO0Z/zQIgUVgK/eEIobRZfVUN7EUQojjijYQWDG0dCxyutep5ohg="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.24_1636384493481_0.5068623840296629"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.25":{"name":"@admixltd/admix-component-library","version":"0.2.25","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"3c950d06645737aba3cfe1f3a77d8bb43f3d8913","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.25","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-oCx7VxCE/rS12dwc0XjznxqWYMw30/ZiyyCpMKgOhEZJ6gMlr3hW1jIGLHUndaDNlkz6LqiybEOyXQDn5ecWZA==","shasum":"86eab915afd394135ca6541217c14d2839a01f6f","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.25.tgz","fileCount":141,"unpackedSize":8917893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnRfICRA9TVsSAnZWagAAkkkP/ivs28LNW5h7C169ipC6\njOwrOYTWrTGWc4VNM0PSYnqU0oDYlyMi/8q+DgD2Vi6EdxxPJ3zil+dR65LG\nCl45harX2okasA8Ide9yP7fMbaH24aoxcqd/rxS57Z2KFHhFTX/tDfmlEcPa\n+3NYR+YrLGlMZirnJVaMrqPuiV+XxwXVBAGg98bdfmPScEp2zF2MC3QY9oDT\nNHx1lx9qBENudM1/PGFNHO9tc328BrFa5UF5Twk3J/kuXxo9mM9yqSleV6u8\nS31vwoaPA7lw9MTWBR9fncLRXn6jTMnKOUALqAoefxvKovsha0C3TpfkLKiW\nKroHdve5inj/9i2zXHD70CoL3QLk6dCxPv9lZ/jWgwwfjMLeib9CefZlv8qT\nEkRKme7O+znQZoa/Qh8xOdqQfI7brsb6RXRzin2g5QUaM6hH8cfPHPhaowTU\nKXEhPmhDQdCHrYi3iaCMpqqAFRCaM0SVMIDfN/guWqx30okBGmWt4QmGT9Ap\nbAW73j+poMY6JyUTLCWOIL6oNJHwUuDWtPO1ei4bJELRrhTDQjPTq/z9S3e0\n+D25xYQTilNsu9IlhrKr1MuyPWuIB7cGzCCxycaZ+sOoAmaUFJfcTOSVqz16\nKG/2I/FYmLhiBlKAIxtKUUv6Qp9Q50sTd9mxzQGHof09zaz2L9wi2O/vyL7B\n6PTA\r\n=qxcT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbt6W/XAay1cZBl7EmqOg/svaR45Vfc7AKDQWAW8vw8AiEA92qjkUOhiI2vzo7xXcaf68X/MwISvNY+VM2PVKlsbIA="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.25_1637685192217_0.2562565820793308"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.26":{"name":"@admixltd/admix-component-library","version":"0.2.26","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"0e9a7152f6c66d21d9c841325b9e850c806f263c","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.26","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-YXxDpaSg75e3HjK9WxqgSIwANloBP9FvIvVb/iKs9SUxENi9I9UFkSwQe8MwvsJH95NbftMbD2DwvvwEkhnZCA==","shasum":"57bd7230c977a8f538ca75da3a204273602b5180","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.26.tgz","fileCount":141,"unpackedSize":8917911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhniHOCRA9TVsSAnZWagAAGk8P/0QLuG8aLEgdRtPwYx1L\nQkDR5KvQgLh+4yntD1/yZ1oY2a+wWTVkrV6fmVIByfsFga8eXE1N+TnjhZXp\nBaVbI4Xx7XshE0Sk+VKzeZaJQ6Uymus0I5NkAMXBwAilR7eQVF0gOdy8N0vb\nIdqxQCmwvb1tUxfXmbG9z5Fshu6eE3eP5KZxhD5jBSlxSFSEZxSJsCYN+4Oh\nJL0x2vLR/XEyB78aL94nyus4lOr84Tk2nq3QjjyuIR2sxxNMqZP7RXr3206p\nxPimEIGZX8UaX/VA9iDJlqZpsripKzkFTxSSDhYpYA/WThCmLFqCiJzK4av/\nVIBkhAUG7lrGMxstFdcLt62WvnXnApVtMDDPytflFShZoYd7GrP/qqPEW5JM\nFApVolxxQM25XIZDe4imqeoYrJwnbpx7AeWKZsHfPyq8D5f+oHj33184zXI7\nILqO8CsPY9kwta0SxdiqdZSnGkbELQFURLND8Y+ZkA75K0DbZ2C5HeYFTOe5\na/ScIRzVF/WYp65Ri8cGBXKpIBpO26bBhYVj3mwtgHZphsRxP4wxWStPPBUx\n3P5ZJtQ0vJILN+GohXIfvbthBqw3Q0zZvauB6+oX0OnPK8WA1FhEJGTbVtw5\nVZYvrt0sjahR3ksiEs7MA39RubC0QTkNoyNKAYEnTYW3hFAhtgKDlsax9DL3\nLdLG\r\n=9OAD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWDRHB77rP02JEb4ru2LY/BPQ2QViCMy/ztvHwQS5hJwIhAPY/LNZReOIdqSy+ymlywqbmp1tLy9KP0h7Id+1tZaEO"}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.26_1637753294355_0.25581711574608845"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.27":{"name":"@admixltd/admix-component-library","version":"0.2.27","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"bf18d55529cfb989edbab9f884bbf7f3f418eef1","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.27","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-NGc2736XK5b2qusRm8RzNvZjxLK0/mgZRr+TamnduOCexRTHTtg+Kyjs8qkQrbqJGD/kvH8pCpz6K9Bmbb/vuw==","shasum":"b79bcd04c79cac43f51799d430061dfeed2677d2","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.27.tgz","fileCount":149,"unpackedSize":8932130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsKW5CRA9TVsSAnZWagAAdKYP/0Ri8br26FEhvFVbvKJn\n3Gu3qu9xQtw0bVPmy6X8tRXtmOB3nXPYG/1YIGhvbAI4OAqLihwRtWYjX9R7\nxk5B7mdbJVOfjKdfsTvboSiaEIVF+G99tspv/hZ0rm/355kyZNB446k3tqT1\n1hbZ2EBA5WaRcT2r/iSnTwYgrJLtvXNjNbUG1irakUypllnOc6mSvG2lWys4\nqU5lWm1422pBdotSB7YHGQPdGmx0pAjF1KdU8ElXNFUTOTtbxuMZvmvzQSF/\n+wE4cAZIGOg062mT6fjH3Ews0Ze1qOMeiC4bkJ1ak0wst/iCgo8pb3waMd54\nL4n9MRvuQV0aMB012DDq+lTIZQYziIxZZtSsO3PlBzY/2GmOX03sFixfZeSg\n6arfkrYYwxO1h4WOruB2BUXA7dT5vwXDhtB2TcZa/qPdQ3kTqWKXhD6Lu/72\nxV+067oxwKa5Vkc5SlOfuFdCUit3xQdpsgvjW6APKYz0vptPu9F6gdWWi+LB\nr/1Bc0Na1Q7bsY7twk/ICtCQvuygwnB7eUzJmlgIbtFGT7at9Rm+R5vjxkwF\nJSaZef1GvkkVFo1zF8atcn0aIgYcEbHdmxDksG6+4bt7bOPL8GuHbbUDyihb\n4OhJwL6Boi4Clv0MCIZbRWyqx4Crq3eg/oeFNGGHtsFXnIYjsCM29Mi6oVPQ\nJVB5\r\n=m24+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbop7bFWM/KZvIyXEXJkdROSxflz4sTMV5Z/OBZdDGAwIhAJoBjW0OXDnLvgXteWD5DHBkG6dTm2m9S3Snt3psYMr/"}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.27_1638966713127_0.6197276776462044"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.28":{"name":"@admixltd/admix-component-library","version":"0.2.28","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"909a7145923364d7fd753147e6f99f07e72b2e23","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.28","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-RZsaa/FZoRFI5Q5pzrIotkV64bEBMAr+7XG0J1Ajjy9vA1DJRtvpiCcmj8UpXWLe/I+9bpM/yfLXbMuIWSrAQw==","shasum":"07842a92fa856580b5ce13e511d5769b28a7b83d","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.28.tgz","fileCount":155,"unpackedSize":9740002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsyEJCRA9TVsSAnZWagAANJQQAIpAq8VazBbOv1kjN1ie\nlTH9FW5RzQ7ojZEn56f1Y3o5ij0+YeGtE4E+srMXnRftmNu/Z1TmnXO1kODt\nxDn501u5L/ecAZ2oQNibqN9E94n4pNJgKF196yBaKiPs5mrY7YhuTw9Zv1dG\nqhZVrz+0UZLiOb8kq0edxF2skmUcasXc4TJyuT5SPilRrbHOiF1qWLAPHkW3\nAmFUDBOEBThdPFLg9F/UI45MBxBibY+wHMw2QS2pl8CGQoc6mvvyc1Z9iTUc\nSbbIe5yEEzECAbEF0f4bqmeH9oo/ez4KSDeJOjJYut0onKl2vsiSEUxaHNom\nPn9IuiUhoBw5PVFRSmh3HsWz7A9XYx1AbvhkgB2dN00BGCO0KsWUBsrb9bIT\nPM22ZXZBTao3oPFNkwwOTjI3mLNGI34/BU8kuPA5lFEL9RAMzOPsvD/BWut2\ne3wAqzgZw4/kKShhxo/WjDP2e6c+lfETk0KHKWsf1JCP7HCO3fdeeQncT1bq\n6YFk5BkikSsbTX9Z/CmxbCg+ByUO+oI11eJmkqZUMYTlmjIeyov8ug066BAx\ntYDzDXrTiU2Gtmoy0ITvARAY++/Cf+wla64eVjwRIXV78HWGcK3QNl26ZS6a\nNSkYSOnwC9ZxdVDKXyMrf6jeimnzga3rDn7syDmtJWbSnazizu1upKh1Fr2r\nc/+d\r\n=3VUv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeOBRIKqFaUUhV5w4TQ/qyMxiaNDExGvQmC8vsuykOFwIgWPEdaLf+ryR18Xl5fkIPtB310Gll3jFrqEjKJ3FOXmI="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.28_1639129352734_0.16157330748921628"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.29":{"name":"@admixltd/admix-component-library","version":"0.2.29","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"c84e676a8acaf49c02cb2ce34e769fe139b5a405","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.29","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-oJwz2qhYnbBrMCMuIav6xEyI/TaH8bEv8D/EO2hajyoHy7O9KN0Kf5gV2HOk2l8jPzWXU+cn0qIIXoF9d9whnQ==","shasum":"3e4dc57ed20ab87e954c334bf287c09784f823b8","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.29.tgz","fileCount":155,"unpackedSize":9740390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhu1SgCRA9TVsSAnZWagAAOSwP/jsq4QVgc19lPH8cqjF2\niXujuUcB3k5vPEDBQi54P0o7c1FSDKEIHxwTH0j1WpR77YqUJJEyogFiPJ6Q\njeImf+VdAEA7jEOGdDh9BxXCvGnCcOqygkl7o+iBEh9ZeL4KI7K9kbLaBk+J\nfH2KxsNTH5s9nM9GawQs1p5rD1D8Mma4pWsczFpLi35+OJHxCOpseIvj5FcK\nRrOuqWKfpq8Le5YW+boD3i75p9FStxRQZ7mbhIp+HyiykuaBWrMM1pEp3Lhs\nLvuU9NJv3X/jj+uzUSDVv2qwc6I6k2wtMpJM8dgmsF7WJsUSmROHNy+oFMnu\nMpAFPWbDcZS0KHBAu46McycITfvRVLc755AX3P/YV/LurM8kPxS+e2taHk0j\n01Q7sfW4S3R4RtFkxYGsAh+DekfTQ37Mpy2b2pR5tMr5vUdI2WNrTEkgtIIc\ntEIFWlvDPa+MMd1iXiV+aw4jxPslpiA1pb0N/6f9+pYtevU4whLZS5n0PxAc\nf1DOijY1vw/snWI9WYbo95cDd6l+BE/bf4YEIY7VoNQ9yOE31v5m3PJomZAj\nIr0ezk1NHltpCfOew3//FcT+pG2wiRaOshOCdGbmPiuTu3ZV4tP60mA21yrl\nyvDHV9pylwmcrK20bR8IzfFPnXxkUDojWoIENGEJWHPUYY8oFRfkPdbbSVXg\nseL+\r\n=PwJ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGqBLMsK/goG8m7Q33Fq1KIZ6rzKPznVWBJ6CRKHFMpAiEApZXDO4wMGtf0HLKwrEmG8bnSZYFttqeCgm/mQYtvBsQ="}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.29_1639666848393_0.35479724839130244"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.31":{"name":"@admixltd/admix-component-library","version":"0.2.31","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"gitHead":"7b1894037266fb85d00940a8f1e8efefc8f9127f","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.31","_nodeVersion":"14.4.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-gpwX58VVnJhM3WnkEsMMY9mcKczwWcOkBVaUMFUuPVe7c9r8v9yR9hTlmDL6vKMIUTxvsXJSpt7pztBcjOu2Dg==","shasum":"68a2708fc96c02fc1652405db2622fb37918b119","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.31.tgz","fileCount":161,"unpackedSize":9741990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwwl9CRA9TVsSAnZWagAAco4P/iKoqwsT1wxjXV1HyO22\nfRP0LSSuVTDa9g7ENsvS8C6kXz7Xg8aehqoiLWvB7kb8FqZZ8ASf3DdAD6L5\ntwi2wuonPRDipXJOhSeVfrM2MLfdTGGeu4tJ0DrHM4FBFahWU8eswrw3unRw\nuXwq4VVQFuKn0PJ07Kw/22vj4XO3PKPReSgRbkb3a4VMx4yFSrJw5NdqSvZA\nd4hZQMNJR+wLDXgyKDlCaGK3BKpZxlw35OkaTzUs4gj9+0JBL2hCa/sY9lDO\n/tc+/FhYCZHxqfdISMmuIY3Od9uORuA6tLs9rPDeKmALwwI6d7WHC/ZCN5p3\nLw+sUU1Qapswxl+T2Zux73sdQJDUC8aRXRLgV8E8jORnooJETwb5HUPp9fSv\n4NzW81rSjYk6Qp0ne/iFlUJMBUR6wgjiV8ZpIa8I0UT5fEI88+97t9KpYNmE\nafGlHXzOlpVp7dRbzX7W1YbeTjedBIX5EFbIHvn6L219x/Nn2q05N5FwFPXG\nON0PvdJOPcxLfyJHY2o/e+Vj5Ncs0pd/DgrA6CpJ9CyoCeRagKtHKhHp9q38\nppoKeDQv97tfEMo8VqZ24hf4jrw71dbSkMff8Pq/WngX5SfdkFmDTkRjfeH4\nWPxQvNOmCgC7u6VgFlIE5WdwdZuVmXWxc+BMOS7RijWrrbziTcZGvdMl7QeT\nm9q5\r\n=MjFy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi0tBCvwBUplnxLDvUCGAfXPcjtoxRo0Gr1GPWayJC5QIhALnYVYvTxNiUDf4Cc75IanImA3/TjHPjj3rjhunhBWtY"}]},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.31_1640171900955_0.5119546139762887"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.32":{"name":"@admixltd/admix-component-library","version":"0.2.32","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"npm run storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"dependencies":{"antd":"^4.17.4","npm-run-all":"^4.1.5","polished":"^4.1.3","postcss":"^8.3.6","react":"17.0.2","react-dom":"17.0.2","react-router-dom":"^5.2.0","styled-components":"^5.3.3"},"devDependencies":{"@babel/cli":"^7.16.0","@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-react":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.2.5","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/addons":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.18","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"^2.1.0","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript-paths":"^1.3.0","rollup-plugin-typescript2":"^0.31.1","tsconfig-paths-webpack-plugin":"^3.5.2","typescript":"^4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"ca504e1de62b3b7eab34344f14281211a4a7266f","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.32","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-duVSJVyYiJBwWHOT0+Q8FPINjlbZhzReFa0AuoNW4Yyv+EKiDLuvg3iAUiIYICFN5blPMrMVg+HTaNR9H0yJdA==","shasum":"30cb97b48edf7fb179e02bbdc3ba316a84aa6100","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.32.tgz","fileCount":83,"unpackedSize":15706674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxEBqCRA9TVsSAnZWagAAKi0P/2Im5uhGnHPfrXHqb/dh\nrHZY6/qL0FxpKQFPpB0zrfnytmbRXL/U+2NOLOxXiJn31ZI/qtb6JXWhHZOT\nQtqsmBmEggyjVYhJRCL4QFWWfUZ3YDymaXtJrhJt2RlcW2dJtNLGShSK1plC\nXnnyCWy+gmZTEf3FuxQNxvxSW/nH+gTGvxntK5SmTb30jnwbiFv0ikwGsxEr\nB3ILwrDcrIZKfd/aDy2mq7yFdvRPiNJrZOqWtE3mWr3Tb7sXXr1wwmd1/V02\nxs38/Ta+VOgFB6MHybqAqkWgWMYUbKbA7OM8pRFhCfo1dYtj2yJfRvgSpRaP\nyvMYKoOONsROm6aJtqObduCvv+cz6/Dst7lNswDQddPISlOjeLRC7zAmIN8i\n6ZZ01DDyjeSjZPmbVO93ZhpwIyMfSJhGu/6mm2RZv+w5tPAPgW9+LM0Rbb4w\nh04A5OwZRjUUcYc0WWFFd9XzhHpHXSd2fix1moSKFpk4mOdfzEZk8PaKvTXo\nKZ05Azp3/ET7Zm4zRC9MzlIqM2fPsd0mpBYAqdp3A/u0jkv7QWVT8Dl/l3as\nR0QLMs557RLJJn+k7cU8GFFxyDPMww9JQDJdaD6wUlVjRPoPSUbjHtTeYa/O\nuBj0h/4v+6iztqVHMJwg4l3uERBXbFFsljJDF6TVrjJHBqXrd7xd7FKM0tsl\nh2pi\r\n=fGec\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLgg0tMkz9J5mzu/7pmkD/YXqDBJUi5/nBga/VEBOZnAiBmbB6UZHAJnIAj5/RD62lAIR/9pkadiRj4WKURMMtLLQ=="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.32_1640251498451_0.6985364372611937"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.3-2.0":{"name":"@admixltd/admix-component-library","version":"0.2.3-2.0","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":"17.0.2","react-dom":"17.0.2","react-router-dom":"5.2.0","styled-components":"5.1.1"},"types":"./build/index.d.ts","gitHead":"c3c138185f87ec976708850b58fbd1bf36a53174","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.3-2.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-AJv644RIMvav5FmGUtLVfDDM1NdDY6JNEyBSBJJJUrBgE4yZf57ZtIcyFjDJdH6OE6mUa3uMfuDJuTrGno5o3g==","shasum":"4d25615c9280813e02b7f83935ddde2781e5d2e1","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.3-2.0.tgz","fileCount":112,"unpackedSize":9843134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxIY6CRA9TVsSAnZWagAAxf4P/AriSnKkLcw4WtYRqDPx\neUhqeZHqxaFQzwm8IECKKipRv8xEv28L7gvi7fWFMLnp1roFkPc6aQ9g2xEA\n+vcVmT6Q8ejXGA5S2Ki5Chyh880FYjHXo3zHkWYuQ8MB0qdco2LCnmZlKEQG\nsquhDHHFswYV0MsV2bufwyvAkXESFzh5R32GU4ND/8+GQSRF0iBQ2tLxMpAY\nFcipipHTro/sBcPTKdpA1veN4LUhUHa5m5TTTTIgfgc/EdgbgsIz/KxjjXAZ\nbMzf1OihwibQ+YFGk6sqDo61BJqR1K3edmjuhyA+TDrMy4zD49KjFArk6bRl\n5fa/Su3ODuqeK+6fqa8nEH5IHE6xmetHlW8pGWHpAgLxwHXwhVLnqO18WqVG\n2CZQZ/izHVvpOn0Q5hAOxOMOKxUPxnClTe+U3028KHLgXV9tP8NkBeULctwW\nEj3ViugUrCYXa0VpiufIMXQetGtnF+8sQ2B8ZTOWwZ7wkW0gRNMhtmg2w7aS\niWrK9SKfU0Kl2JOI5pSS8ROtqwYD05rPvppvrHd+zRjB66SC5sJMAJ7suPVu\nLc4+zbFbSZfdxrIpISQRKXtHiNEjGwQuoxQS3j8AfhvjmsGiA1TNjt6eoDLn\n9huqH9lniWOSbf2rcpbGl/KwuZ1f9W/1O+qFsZF3qS0yjeIeKUbAyu0CNQ4m\nYcX9\r\n=rmJO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBZ6SFEz5qp2JLTCuaWk5VriLUNMouqc6ZmFl1uJZIAEAiEA9ACMWFgP86X/IqAH0WDNkcemD/Fu+3Wkdz9FD/Zx8I0="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.3-2.0_1640269370452_0.30644064294145257"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.32-2.1":{"name":"@admixltd/admix-component-library","version":"0.2.32-2.1","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"types":"./build/index.d.ts","gitHead":"7b1894037266fb85d00940a8f1e8efefc8f9127f","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.32-2.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-SosUVZVXiUxQXNqy/KM0WSYQiPZ4C6z0U6TsvJakNeuYmuV2AJOgCzAo035BwbSxTewCuJu3JI/dWl0g7IPUUg==","shasum":"a15b6f03c7365e17b529c1e1fb8392d2e1162e53","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.32-2.1.tgz","fileCount":112,"unpackedSize":9725890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxIyNCRA9TVsSAnZWagAAo84P/16q1UHPQjxHzD78KGGD\nfdwcnXW/Wn+09lrISj1rkT8dItNk7F78HRVG7T/KydK4xXchy9CgWcsP1/U/\ns3GUrdDYM/wdfmuue64jElKxtIVqcX0eopA6V9nDSpXCdpfeisjIPpmQIKQH\n4BVSJjS7xVy7AjCBhkZVKrugrZdry5vhetsVLZjL6UFTU51rxhJ0X8HTrvZy\ns2hl72b3YREy00U+IyOt/mPJv5Ff12vNZ9a/9Ug/870vQ3GYU4AoIR2vVcnz\nmskehu0tfIi6GIWSzodxniPAG8nRBtvFn7piclgsANdlDp39zNKnn9VQUaR7\nyZoAxynOKdrFxeh7o/4/jDkew/qFrp1uH4KTWd+KRpGNIALClkZSlfw6YHal\nJz3R7PrnUWW0Y5s5n48QplGXIXjZuChcacViGgaIV+WuVb2qvGm1gP6+5Teo\niScEvAkFGE/H/QPrDQNG0wc5uVMCWe44iGCLk2SF2yoevuDUzniaELLELyND\nlm6lyN4oFNZBNdu/VkdF4AflFFWMuHSEbamrdpf7P3iPRvtPAQqMkwgjZR6V\nXRciVjDmEe7uwSp6KMrVL+mYFQT+o77LM9cPtjy7jdSMI3KTRGCAivS9sWaI\naQaKYQXqtCrejCO+du3gAKYAEpKz0ScszENkVUXvw2lAf++Rj4eKQG9xFy4G\ntEov\r\n=Ypc5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9sUwKjNG3ZRSRcTtiL01HuWMH2b8XbXjGYsrUZkf7hQIhAMTpWo5WRa0gDkQxhwa6cT0McpBEkganv8RqLa5rIpkC"}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.32-2.1_1640270989688_0.4776020874837046"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.33":{"name":"@admixltd/admix-component-library","version":"0.2.33","main":"build/index.js","module":"build/index.es.js","dependencies":{"@rollup/plugin-typescript":"^8.2.5","@storybook/addons":"^6.3.7","@storybook/theming":"^6.3.7","@svgr/rollup":"^5.5.0","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.22","@types/node":"^12.20.10","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","antd":"^4.15.2","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"^5.2.0","react-scripts":"4.0.3","recharts":"^2.1.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-url":"^3.0.1","styled-components":"^5.2.3","tslib":"^2.3.1","typescript":"^4.2.4","web-vitals":"^1.1.1"},"scripts":{"start":"npm run storybook","build":"rollup -c && tsc  --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/core":"^7.14.0","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-node-resolve":"^13.0.4","@storybook/addon-actions":"^6.3.7","@storybook/addon-essentials":"^6.3.7","@storybook/addon-links":"^6.3.7","@storybook/node-logger":"^6.3.7","@storybook/preset-ant-design":"0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.3.7","@types/react-router-dom":"^5.1.7","@types/styled-components":"^5.1.9","node-sass":"^6.0.1","npm-run-all":"^4.1.5","postcss":"^8.3.6","rollup":"^2.47.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"^5.1.1","react-router-dom":"^5.2.0"},"types":"./build/index.d.ts","gitHead":"7b1894037266fb85d00940a8f1e8efefc8f9127f","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.33","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-FdQMpNGetb6nKp2fmMu7i3/bk70RvfAXKr7pAFyyHaY4zXGiysnlsZ+6kEcIXHuPVn3bjK1W6ZDcOR+XOykZRg==","shasum":"8fff3b602a4170c8d3e7925dd8cfc7dec3767bed","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.33.tgz","fileCount":112,"unpackedSize":9725859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxI6GCRA9TVsSAnZWagAAlvcP/iG9WhaEdU6IbhM0cp3X\nGz1X+Oj1lym95BStkHYqOdQOgABsTw/q9EiOJQ42+lr0TCoF5joorK74T8bm\ns64RBNLS1cEJvsg82T1FSRvQjApIXtxMjK1ePMJ6yg/5E+gkBoXeBIc3RueR\n3nfSkIRHBsjWusaqweNyix0pk5zs2FFsYAcH7hdxVxcZeDIsAWvF16fyrXEU\n6DRZzy+QSWYPF1UZxv1zGzC0sAJ36smsMEz8lgOIuO59Qn3db/fKwG+T8xfw\nRdIbdOpwvwnsql/lcd/nB6gwe9nVwGq8ptgEsaQURTlnMy7u5boyuKg3TVcF\nPbl6iChmLVsjNMjsFXkrI3aEppxOPXK2lbG14zVJNsVu9vtofDGnURANcdK3\nd/Mldge91sOE7uJnj8iMj+MBvaQUJy6aXCJwvZ91E6LppsPMyjDkxVdQ2J8x\nc0UpFsnlEvQvxAB9M9MWn18JsIQleD13co8kDVaHVbZ+RMjZouGvlXnscNHe\nDVcEKDqElYFgDnoVCnImAfi0rY+1ho+QbTK1yR3KbDMCwa0SfWNouMYLcuit\njjhKa33BrfYYP//3of4GESDQu6T8EUVNKypukXKD53T4tqbRUWW12/Ulc6u/\niJpw/G0CarXyD46YXUUZVfXkluT6dgFjI5YzOUXKGsAZI/aW6VVwiKxuQ6cA\nddsI\r\n=XQ6Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUEPkrQEUOVB217E+uY7/OsIUALpoO/et8UQ3jh5UsVAIgWLdDgyD5zFlZi0m/IGz75Xy9RiUTeEmRI9lm+yR8uWA="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.33_1640271494567_0.9242458169007364"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.32-2.2":{"name":"@admixltd/admix-component-library","version":"0.2.32-2.2","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"npm run storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"dependencies":{"antd":"4.17.4","npm-run-all":"4.1.5","polished":"4.1.3","postcss":"8.3.6"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"5.3.3","react-router-dom":"5.2.0"},"devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.9","@storybook/addon-essentials":"^6.4.9","@storybook/addon-links":"^6.4.9","@storybook/addons":"^6.4.9","@storybook/node-logger":"^6.4.9","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.9","@storybook/theming":"^6.4.9","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"17.0.3","@types/react-dom":"17.0.3","@types/react-router-dom":"5.1.7","@types/styled-components":"5.1.18","eslint":"7.32.0","eslint-config-airbnb":"19.0.2","eslint-config-airbnb-typescript":"16.1.0","eslint-config-prettier":"8.3.0","eslint-config-react-app":"7.0.0","eslint-import-resolver-typescript":"2.5.0","eslint-plugin-import":"2.25.3","eslint-plugin-jsx-a11y":"6.5.1","eslint-plugin-prettier":"4.0.0","eslint-plugin-react":"7.27.1","eslint-plugin-react-hooks":"4.3.0","eslint-webpack-plugin":"3.1.1","prettier":"2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"6c0e663350448d28553e0e95dfca111b50a5477a","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.32-2.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/7GiwOJ+8ZNHwd6B6RX1+348fbWIZ/abMrFmRnUbYsvMNlC6LTlV+86BQznq/AFMRn/JTVbpdJhAx80H0a7E8g==","shasum":"5129477fe25bb1ee2636932c033d8e6e95b9edfd","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.32-2.2.tgz","fileCount":121,"unpackedSize":10935053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxJM0CRA9TVsSAnZWagAAtdkP/RmdU3eYvVAvdYlHyTvq\nKANoAOg6+376y/LN+IV9Lb48/nhRQTxHUDRh7j0Ya+3E6Zi2MNPTh8LWnUCq\n9mxs1cdC+l0YhNipd3Am09k/oXTyruG3com4QWgFEM4Sz91NThaSyVbznka8\n3f8XabrbH7gOYMnqFRAvmKO5Bj7fbNsrDOhUgDaa258zg7vs69giEtZhrBr1\nL2UnJTndevMxSUYrUaXc9Q+hcnWyuipGke+9KmZK4mvcNdLLb1VL6fu/xC5A\nJijACXb91wi21mGjDhuBxr9BTeXMJxSu/ezpmE7AffkkTeVrQuS+JwEA1QXf\n9JzUQR5goZ5lHliRxxr+44uuDKVzEW6jezhQoVjKHvFd8lqY6AhDBAyoOgR1\nS/15/oW8YF8IW+T/65IriuljXGOcCaL/2UI0TKmtfnek0Y/pEZ66lCi+o/sk\nEhs1hBmoKe6nTCKoEf5PmOhih2VEmmXf4yqHr1XpnA0I3S4Swhg4qflexOdK\nagwNh46hD0hc3IKjLnCpXkyymdRGdYrbCcV8rMEnfQqDo1ALkx39hTg2CU2T\nbQVDIuo17jhvcHMNMTGyEO3/T1lmTKA3JY+9u5/yJTPE7k70p2tVOfGFjSfY\nOW2ECZ7tpZGhUtd4dak4ejDiSYWgreh8RRvkbvwrKaVOG+3BRtSKqlCkdx2U\nlp5r\r\n=fVbj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4/+hH4zQ7mQaPDFuczt4Pg6AIENeHlmfImsWL5rzx8wIgb9U+zwisus4msKqMZPivpFpeE7qvtWU3RW5uyG+2GT4="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.32-2.2_1640272692116_0.8030193385913968"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.2.34":{"name":"@admixltd/admix-component-library","version":"0.2.34","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"npm run storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"dependencies":{"antd":"4.17.4","npm-run-all":"4.1.5","polished":"4.1.3","postcss":"8.3.6","react":">=16.8.0","react-dom":">=16.8.0","styled-components":"5.3.3","react-router-dom":"5.2.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","styled-components":"5.3.3","react-router-dom":"5.2.0"},"devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.9","@storybook/addon-essentials":"^6.4.9","@storybook/addon-links":"^6.4.9","@storybook/addons":"^6.4.9","@storybook/node-logger":"^6.4.9","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.9","@storybook/theming":"^6.4.9","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":">=16.8.0","@types/react-dom":">=16.8.0","@types/react-router-dom":"5.1.7","@types/styled-components":"5.1.18","eslint":"^8.5.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.28.0","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"d23d65b8366d503a6537cacf1e04f6707819a849","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_id":"@admixltd/admix-component-library@0.2.34","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-anI6AuuWESkVl6IDIc8Vfb+jKkb5It/yROaK7//z9MgFKZKB2tsOIgy9bY7CRr6TgC30RvDmXoVXtzcQR0704A==","shasum":"298c940f1bf095bc1306a548226fe2efeff344b8","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.2.34.tgz","fileCount":91,"unpackedSize":10927806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxKRVCRA9TVsSAnZWagAAzTEP/15LUSCfL1Jk+reoCjZw\nr/0/hNKA8Q5Bo6sCw/6P6OsJMYO6yLRhiM9VSuQc0+A4/T7kAnCx2jiAm2x7\nhTQ0muneC0jx0c6YT5IeRXSTq18mZc6RoGT33AZfRiP85HBnIjtCePpz+rWH\nQuFZfW1hIXDXhNHKauoBFYY8tiKKHpNmearv+7vwDgb+zwAMfqYbYEx/QXkR\nBCX/Er4vvKOxJNdf6ht57+U8+Cy8Nd+ICwk5rQ0r5k8S/nRdHoagNgRemx7O\nBQUrSJkC4DoPYyB3fSEp/IseDesW1VSyZqu2N/6XovGXN54Y2tXxxwoYnlAT\nG6YJ52zJA9Tzvvi5kXD/oDOnEFTcYHSnCwb7RkIgs0uRf0WkMJ6C+NVZOLTj\n0orjyKXYT1AqzRKM9Koa/MD/Z4Usmo/tcyg05z5ie+oO/1ZCiv86oda/Uu06\ny7JNBSlInGbpWJbM9btyaxc30M12orRVYv/Ru7xM12i18ivdKfwFTouIWjGE\naZytNTE/21yGrOCPH/7jDfi6Pdu/NACPH/VFF2RZHFH4BugdDYu2S9leS7ok\nYZ+RtksPqLMXf9lDoSD96ndsvwi16tQ6uhpy1FAXmXMxsM5MnVvb7M6sGqa1\nFc8+urX89d2SfcRjHvcnztxvHbFTMsM66ytY8xGiBxTiMJtQWqYm+8VVjI+1\nPv3r\r\n=SFl8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6s19csSGm5zsLESkUr9/wBiE4cs5kv6diiZC9DT48JAiA4QHLy1eGKUvpW95B8wy/Cjx4f+aQdvxKW0B1COU+Uyg=="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.2.34_1640277076835_0.9182661003416468"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.0":{"name":"@admixltd/admix-component-library","version":"0.3.0","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"npm run storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.5","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","notistack":"^2.0.3","npm-run-all":"4.1.5","polished":"4.1.3","postcss":"8.3.6","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"^5.3.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"5.3.3"},"devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.9","@storybook/addon-essentials":"^6.4.9","@storybook/addon-links":"^6.4.9","@storybook/addons":"^6.4.9","@storybook/node-logger":"^6.4.9","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.9","@storybook/theming":"^6.4.9","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":">=16.8.0","@types/react-dom":">=16.8.0","@types/react-router-dom":"5.1.7","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"1ca505959708d86c62c8555f97b96150b59f4a79","description":"###Font To use this library, please add Mulish font to your project ```html <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"> <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin> <link href=\"https://fonts.googleapis.com/css2?fami","_id":"@admixltd/admix-component-library@0.3.0","_nodeVersion":"16.13.1","_npmVersion":"8.3.0","dist":{"integrity":"sha512-HnSBilLCcjDkb+ab8KEMSBP+ggtORvcRvDtidvCspVMBEOUDs/eRfs8rhSg/DLy4y5jarsDRE/XRHozwVIMHKQ==","shasum":"3031002f5f453d31f702b6a520ae26b534562741","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.0.tgz","fileCount":129,"unpackedSize":12355232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0vYiCRA9TVsSAnZWagAAC7gP/ic6lPaXiHvdDKKBKvxY\n/Qog0cZYroF3Tba338CsvpfAKoQgSJ/+uivEUAPIGFma4KXWBDL+pHLB8QeR\nHLWRmjqyxZkGNTvoRMq5vVGaoBmi69aHGqQfLmyJqd/FiuBU1/epCWBMaWvR\nRDK11Ao51XieRed9ENGkR3giDO7oYLMiMlvCHiUZ4FoCAizOdNok2uhbdDcj\nAkNwnGY9qHyIaw8fGgWzrarbTiD0KXywCcMZ7n4sqhT2jIkJ7V0S+fwOmqs9\njb/Eo/TCJ5mqEm6JU4rdbj5KfezNVkRlIwwv8XcM0xMzBjHm5akhtYEQHJo1\nQ6moJTKSCgzmwqZ77P5Kj3ByVn60wrG4g3SECE6wQtD3YEQpKBxHU49QbVl+\npALWJ9B5u0X3wJXZLPyREIvkf4I8G/o93OyJkn2+q5rPEnqlHfLH8bY2JygY\nk6l9EWVi6YIeWq9xnko/59mDPfLVi/z9+XgEwajwoI4oLKOSJIuHE8sGFrdz\n+O6RN7KgQovwIJQV+DDgQphc6mfgoZWqdux8B6lCx6BqsIDqF2rzY/cbHZRt\nzI/QLAnwN3fXoe+lw/Mr5lFN+9s1AWNK3QqVEcnJhtp4puxGYWsy4BP2vODS\nCJvxiVyay/CuPGR0qiZQMwt2dTvrBPCvV4/N9KftAZ0tlvphB1lBgqsvQmZN\nNwhN\r\n=/Be0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdqSYVQEWFkgf7N3JZZVMFmfueK53W1plJ1/Qi6goHlgIgZ004utC8w2NZWXxTGgQZdqtlzQS7mBTezdvt8IzCi4Y="}]},"_npmUser":{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.0_1641215522232_0.5728177839348978"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.1":{"name":"@admixltd/admix-component-library","version":"0.3.1","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"npm run storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"yarn build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.5","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","notistack":"^2.0.3","npm-run-all":"4.1.5","polished":"4.1.3","postcss":"8.3.6","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"^5.3.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"5.3.3"},"devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.9","@storybook/addon-essentials":"^6.4.9","@storybook/addon-links":"^6.4.9","@storybook/addons":"^6.4.9","@storybook/node-logger":"^6.4.9","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.9","@storybook/theming":"^6.4.9","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":">=16.8.0","@types/react-dom":">=16.8.0","@types/react-router-dom":"5.1.7","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"6eaa9c976d6acdd1cef1bc5af88578e939274439","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.1","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-gIMVQqPYR4xTIgCazfgFivX/5MrCqs3UrORD0H41wh7HNE0mwg4fnKGclw1WJOCbLF7QF7MrePpiMyO8Hg1l2Q==","shasum":"7eaeb8e774e2eceeed988b9783f480859b8904b7","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.1.tgz","fileCount":129,"unpackedSize":12356494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3af6CRA9TVsSAnZWagAA8VsP/3USpmPBX2NhsmVFve1I\nP8SIdiFpKked8TUAOoWGL83rcs0PwfbZ/iQQN7Jnuec0/LpNT73qpmOzV4fE\n6b0sP6vxlf3gIQWZTLaGoIWm/HN9SnuQikVVf/7Te5A1DUsVFr7Lu/iGRosG\nUzpc62UvG6j7sHQaGQeYhdbuicgLfHam/lD28YSHjDLrrcZfulQp/qvD3GBA\nV9NldHSHdtmZs/5Uf02eP1fakd/WwW1Ep86mejbdgezcdp69YTlOaQCLjwEO\n+Q+lMzHZuZTO4r+tQybj2y84GSWwThH8vTYdAK0zb3TfSJwTURlTXLXWa73I\n/GARDcHscQMf+ka7Aic6DV0Hc3FKErwnJxc0mgaRyGTHHwrIPwdRlsBTzxqs\nbGFz5xN28zEOthZyGDycNEfSuQGu7sxnyrb4ZGAnHTGCHIWN51yk+V5vKWpL\n+2aE8j8IkTQTFSpQ+CQuVXbqzySE+JhbPz8GTY+qRPvzPKenYFAZZMc/0jMP\nqnk/Eui46AJi2EVFloQwCWT0xAYNFhRb0Hcicu4qttj8b60muQm9AkISWZV+\nbPIxtG/cOK4kEgLoSaK19KNB5ivxmuXz2/9zOln8moFl/o9isuv3f7Yr7tzy\n4Rv4vuS6bKvYdF0oYBHsPYJ8b19vy2rxOg6DBdcA8oLO+uNucB/bKRCKy2eq\nyqaw\r\n=8Wr5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaYgvL23ww2ugh4/nsTHNn6mSzjSFeQK9GHzB66XCMvgIhAPTSUr+OCKWNmv9IIQOQhwwVUf8SaRJ9Q2d++zeGB2K4"}]},"_npmUser":{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.1_1641916409854_0.48982708333261105"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.2":{"name":"@admixltd/admix-component-library","version":"0.3.2","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"npm run storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.5","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","notistack":"^2.0.3","npm-run-all":"4.1.5","polished":"4.1.3","postcss":"8.3.6","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"^5.3.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"5.3.3"},"devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.9","@storybook/addon-essentials":"^6.4.9","@storybook/addon-links":"^6.4.9","@storybook/addons":"^6.4.9","@storybook/node-logger":"^6.4.9","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.9","@storybook/theming":"^6.4.9","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":">=16.8.0","@types/react-dom":">=16.8.0","@types/react-router-dom":"5.1.7","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"549ac8a494947e09d642bed87d293ceb1db8f42e","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-JPtAsI2IlMKk7F80rZknwGqBsB03KWmP5iyGJevKJ7XlwLuwOz5xihVxrUNPGzWJeZ+uwbaydMlhcEzJ3MksbA==","shasum":"d9c50e8feb89689ac2ef57a3d51acc7b9582bb31","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.2.tgz","fileCount":129,"unpackedSize":12348435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3cvOCRA9TVsSAnZWagAA+68P/3zd8+umqwK4yqnB8xmh\ntDirCTYJ8GPZ/oMEuLbh7G34TK3Q3QciMu18xc8BJNeSuqDzTNu44GCU3tep\nprak1kgbhmT4wfcHEaDQJe6EF+NtDE3xTg8u7MfzCJY3sipIfRKnjhIEOMpA\nxwP8wDsjwG63LiRfr0TI/3VCvlFCVfAARgZYZW1oVlH1V+Ze/EbGyJjgq7K5\nG+FO4qukwxJq+OpPNdzOIievuuiNlIDTqGUQ27LaZxyRdbt6hgFpSvESm+S4\nNb2FZiehrMTYRBzMtkoxoOQRJNoE8GPi69iRK9SrDczOnEwLAUD38ZLryAX+\nZpL26WIBeVSnTuSioK8nQ/GNVZhfatqd/j3XWn0tvDbYrdpDyJtDVlP8K7zs\n4ZAfxIQsn6wK5qqANQn6+HmAGLwGu/eIp9LxTvPcgmgHesJh4w2CFH2O9lPP\nM34c4XacaN/Jk2wlvor1FvxogBZ7vLeyCCN7fxc6+VJNnhBvMe0NvdgHm8Gq\nRw7BbiH7Mwdh9KOkSsQKeJ+/KMqvjM2N6gMfNQq36eigy6ryLgrQmV31Ic/F\nRtBrxnfjSIeM2Tm6C4dgzduDCRhlP6KbhgsNbjx+FfmEJcT+Y09H3IkU8d7P\nJiAVrHchmoAAVn2HWVYI5aYBEzIpvo2iQHGWdxjJtgOeJmrqPCyQZ50rPsmO\nKcd2\r\n=OXW5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCH86ke3mO7wLxjIJPThz+pIfL6M1pKe1f/rHdAUzKmQgIhALK5K8UTpcDpzRLyy08Asjp61iDI/eMhTYq4lawrIRQu"}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.2_1641925581948_0.3199426222569306"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.3":{"name":"@admixltd/admix-component-library","version":"0.3.3","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"npm run storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.5","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","notistack":"^2.0.3","npm-run-all":"4.1.5","polished":"4.1.3","postcss":"8.3.6","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"^5.3.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"5.3.3"},"devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.9","@storybook/addon-essentials":"^6.4.9","@storybook/addon-links":"^6.4.9","@storybook/addons":"^6.4.9","@storybook/node-logger":"^6.4.9","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.9","@storybook/theming":"^6.4.9","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":">=16.8.0","@types/react-dom":">=16.8.0","@types/react-router-dom":"5.1.7","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"6de0dbd45cbbc958411a4a3e3b36669006511333","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-hMzxg8hWPxhsxeEoBJPz9U90z4Z76m0aMoBayN4fhb8XNbnWWhtNDMEEG1pMg7d6kmoJ4cDGNbIDI/fEf9ZLsA==","shasum":"bb2a32d0f7eda268a5709e608a148cbd769ca6e6","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.3.tgz","fileCount":129,"unpackedSize":12351299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3d2uCRA9TVsSAnZWagAADi0P/16T62+wmN+4bal83kjL\n2x8lLM+cSGvupV9fyRSu6MvidoY8MOw69Bi/v2I3ZdO+CWHm0MqQaqwMFfN5\nXjWUrYQQ+ndRl6jqImXmbYFHaIYqkcpDtIVIt08OcCKyAF5D4vAzKwH2t0Xk\nfDU0FWsEsFzAs7Kisze3yTGs7RUo17OafEL2PFuayvDSNI65JxtsrWuI2MNC\nKfCw4IJTLge1iftDobheYYAoynWj5+nfbJVKbxmveoyhs36zjDdZiTQuN6Qm\n0TllZQtrL/F4SyWdLBLmxzQT4lh35G1vkiRzeMYfVOK9wDwPSphWKDznlWmp\n/mhdZl4lk5m+TtZbgYa2QwxZkOSObfTVDCD1LM83gsGksyYZuxFrEp3bp3qK\nqDTF01fZ7bD7/Rrkl/jthlV7S5wbqX+HczwClTqZgXMFLCof2Sp0eAFbOQ/H\ny4hagefYs79/hnkQvXlB4zU3M5AB8+toEwsfkjev0OHawxHWYvetWkhYAAHG\nbFJJmYVuAKff2i8y15P9qGoHcKCHKVGP5qH/zMkU5vukxCW2EYhrRi6g1L9c\nt6bYLaRop8uNhWC/U8rno/lRHkgK5bDipm9jHnCDx1P22sIE+a1UdLrdf7Yl\nNPEH84T6nttIMpluGmxkH9izCVloObfwh7BP+rOizgG/C4pzZ0XxiSb0PJ6b\nDmGq\r\n=nigG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDw/CW7Alk/ujjT67cova9RusuWwC+fI9EKx1n0w9rnowIhAJA4+xYTO08Jl/SmpBdHIEiS9Pr/3uV5m4GeZKltXQXn"}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.3_1641930158051_0.9583121019351235"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.4":{"name":"@admixltd/admix-component-library","version":"0.3.4","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"npm run storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.5","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","notistack":"^2.0.3","npm-run-all":"4.1.5","polished":"4.1.3","postcss":"8.3.6","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"^5.3.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"5.3.3"},"devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.9","@storybook/addon-essentials":"^6.4.9","@storybook/addon-links":"^6.4.9","@storybook/addons":"^6.4.9","@storybook/node-logger":"^6.4.9","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.9","@storybook/theming":"^6.4.9","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":">=16.8.0","@types/react-dom":">=16.8.0","@types/react-router-dom":"5.1.7","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"b71ea62caf98af79e7975fd613edeb9c59c1580c","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-7gOY+v+5W88ufx5EHA90jnSiLUgXxUhjOD+I2ZWInERRG72t/lCL/EMpCE6qYJ4VICx4fOzcSBXvCf7xPmNvuQ==","shasum":"57cc4bd2a336a52f8a5296aa377b3467adde19d1","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.4.tgz","fileCount":133,"unpackedSize":12354007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3eO6CRA9TVsSAnZWagAAzSMP/ik9DIluMsG90RriYu1X\nQzt1XCgOMTxTwskrYBfHHdWJD3hRqlzdBT7xp5gunve94gRPhOTLMMWn8nVO\nHi7Sv6BPewwuZj6lwgoZAF2AizroUDHlJKMJrOk6o41X9FzK/zKc2i7g/X21\nha4rHT2haiikmgs15kAI0uzkgDIso+6wn/gt25VOANfZzyE13o9COVAALKK+\nRYdxOLvD5HbOQdEC2IRkjDHKAHcWSlhitcDuhC7LWjiWHbIPoGgyIdblrzXF\nkGrQ6qbcf7msSM/LjyTF0vzBqnaphMVHQyUFXkTxovOIwV5RW57AwsTZakN6\nXTytdQ3ePYbwQqs4i3yRP5HXYIplX43U01eMXs8He9LZEzs0JQ0mYjiCJVx9\nIX5davcB0y9w3SuGqrXokzxyv5xz5zB4ftQ3KVGiZTaNZy4kXJFfB7X3Cn4U\npCaP5CNL7HrSc8nsLTT0TupAOTo1XV146iGw0IgedyO+ASvFB82MziCUZRVZ\nrU4EUhYnoGoeHtOZSdcoIu8oQdQ1V+bJ4KE8x/O6+GjMD8mMW/nD5SQ7MzyE\npFV4zObRHepQlut8625dX+20C0ISa6m//SREClwGEWEnNIRvgSqlotxnPyue\nbTpJlB9LzAOHdS6JtUYyNdx2mwlIWSMgFeCVvekmo/Nuz8xZvs+mwfd1K9Fc\nCRer\r\n=PoL7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCe2XBrkcVQ8uqzmoyLmpgn9V2SKcqnC0Zc+VixiVgq+wIgfvAR6MbCqzZWRo5nUzEIz1v++aak2pyP0e385Qg0NfE="}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.4_1641931706279_0.22558084428023362"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.5":{"name":"@admixltd/admix-component-library","version":"0.3.5","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"npm run storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-watch":"rollup -c -w","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -s public  --no-manager-cache","build-storybook":"build-storybook -s public -- -o ./build/storybook","prepublishOnly":"npm run clean && npm run build","clean":"npx rimraf build","deploy":"npm publish --access public","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.5","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","notistack":"^2.0.3","npm-run-all":"4.1.5","polished":"4.1.3","postcss":"8.3.6","react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"^5.3.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","react-router-dom":"5.2.0","styled-components":"5.3.3"},"devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.9","@storybook/addon-essentials":"^6.4.9","@storybook/addon-links":"^6.4.9","@storybook/addons":"^6.4.9","@storybook/node-logger":"^6.4.9","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.9","@storybook/theming":"^6.4.9","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":">=16.8.0","@types/react-dom":">=16.8.0","@types/react-router-dom":"5.1.7","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"56b175ff88681b21b963ac0e6484844ca30af84e","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.5","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-L8+DevCmPRIKs0TxyuLcnB0Z72xxJvWBrwPizMVqyhmsXpm6v+c+oCoELIShQvRM8liiaS7F/NyIAvaKLioLtw==","shasum":"7e6d33c74a3e13d49bc6c2eb3c7d49760e317a38","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.5.tgz","fileCount":99,"unpackedSize":12337954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3repCRA9TVsSAnZWagAAedkP/jNCOwrN2KcMyM751E0s\nAEBp6f5Db1eXkMQyLMPt2PSatgKsTv6MGktCRj9zAOZ3Vu/OUpievZo+gxis\nNhjRYLzgPsk9iJbqeG6BPjPfYTpNZxK70k+EAsxr65mh44dh93vAG/c5daJa\n9ry+3FlCOMpK40mEA2bk8ThVdO6+6gY7S5u+i5CHmjy3rcThJJXbjnN8/hOZ\n8hIkZ0PHYiXgtrqFFCt6Gdpjk7xNxv3jyliPluazNr8TxLX4M7wxDcALDLlG\n1l7MBGCHlRyl80lErL/S6N9aKGRtrEXLLOmEA1KUdpiEhbOIo1OsTDNrrRKq\nNiWwm83O2ywoVc21VyIv17gTDdZOzRHz+6BvsScZOAK+GEpVGDhUHy0Kec4o\nOKIOhDAwnDZLMHeCA+dTQp1qaOjj/+s1P3VQQyAW6Ru4u8/9nj/q1wh1b227\nnjBm/X6byFWHDGSQWqVUXvLuFJAallH88iee+FwCqFCFFIZlWwP16wIv8nFp\nftEKTS1RzrLW/cwn8aC1kJsXr39aTCovQdyMYDLN3OxgB+wB33zYSqPjQYW2\nrv2j3USiO5TLN3X6wvfkvH7KbAfURSH3H7IVyT5mBGt4prp8efzwNdk0ZP/H\nO6viiLgU08MoIv+20dHx9yGF7ot5cqKHJv/zRSQF0VeQgfBtKP0FKoXZOVBp\nMsSb\r\n=WJFE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClEEt13uCOgt8wzNeZFpay0g3dxhtlePdo9nN2Ju2a+wIgSjQI8/QE49CPb1uGUSScIzpnMWxypLMOPNU7zJeppkY="}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.5_1641985961444_0.11929616293024226"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.7":{"name":"@admixltd/admix-component-library","version":"0.3.7","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly","chromatic":"npx chromatic --project-token=b52c2c885641","chromaticChanges":"npx chromatic --project-token=b52c2c885641 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --tag beta --access public","eject":"react-scripts eject","prepublishOnly":"npm run clean && npm run build","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.7","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","styled-components":"^5.3.3"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.12","@storybook/addon-essentials":"^6.4.12","@storybook/addon-links":"^6.4.12","@storybook/addons":"^6.4.12","@storybook/node-logger":"^6.4.12","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.12","@storybook/theming":"^6.4.12","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Preparation\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n```shell\nnpm install --global yarn #Install yarn https://classic.yarnpkg.com/lang/en/docs/install/\nyarn global add rimraf #Install rimraf (rm -rf for node) https://www.npmjs.com/package/rimraf\n```\n\nRemove `node_modules` recursively\n```shell\nrimraf node_modules\n````\n\nInstall dependencies\n```shell\nyarn\n````\n\n## Run **storybook**\n```shell\nyarn start\n````\n\n## Build project\n```shell\nyarn build\n````\n\n## Link projects to work locally\n1. Start building in watch mode\n```shell\nyarn build-watch\n````\n2. Link `react`, `react-dom` and `admix-component-library` in your project package.json file\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n}\n````\n\n3. Add `AdmixThemeProvider` to your project (See below)\n\n\n## Font\nTo use this library, please add Mulish font to your project\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap\" rel=\"stylesheet\">\n```\n\n## Theming\nWrap your app with `AdmixThemeProvider`\n\nExtend your styled-components theme with `AdmixLibraryTheme`\n\n```jsx\nimport { ThemeProvider } from 'styled-components'\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library'\n\n\nconst theme = {\n  ...AdmixLibraryTheme,\n  colours: {\n    ...AdmixLibraryTheme.colours,\n    red: '#ff0000'\n  },\n  someNewProp: 'some value'\n}\n\n<AdmixThemeProvider theme={theme}>\n  <ThemeProvider theme={theme}>\n    <YourApp/>\n  </ThemeProvider>\n</AdmixThemeProvider>\n```\n","readmeFilename":"README.md","gitHead":"179786c0c297034a8f08cc819bac0a2500eace12","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.7","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-WJb0iSTmtpvqrn7nPDNtIsnpf+OC1G9WZfqdKVHWmKT2/Dp1Ou2FVAZmYzpjVhu2u62e0/XvSyeZdqZ370ldAA==","shasum":"997ef40fb21e24994a5eaef4a29d0317be509865","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.7.tgz","fileCount":157,"unpackedSize":14319377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5+9nCRA9TVsSAnZWagAAdxsP/1YsLl1wRUrP8wULCBnT\nwcIqtdAFa5DZ3Qgwy5HIA/IW8wBhEASIcUZjVhFBzZ3lfNVz9pdhWlRL6Anz\nNlLs4gfHtwosSrJyuQmmwzDRLGokG5CJpquqwiLUrW2TT7Qim2ChwfZtPC9t\ncDGTYpuBrVjyVToaUi88MMTALt4MWZxhBASnLKCfgvS3dSlhI46tvQuklOiH\nBT5pvp+kPyHDvhKwNbjjgyOeyiCzHuTnbbA1+ac+afj+I/Vi4sk1C+yTpf6J\nVQuLYqvQcuRKb+lAlxaRsHUQfpLMwZiI2Bnat9D4WgCLkN5n+WliVlMCbpER\noJAeM9p3BwreBKkjae6J7RkqtK5hGvx3J1m5tu82fdM/QMdrmSIPSP49n0qZ\nVmeZue1On8uYB1BKnq1XTLxJY19doMdhsfWRqMcfKkRb8zoRyMtZCuUuAjk4\nVL4sFrSn3U1k5FoZYM4PJ9Q3+6AsiQV241XGoblI56d5QETkjyudCHN1TYf9\nMhX+ML5lvpY0JlSnVike4BhULD7KIxCqm1CZEaHfVVg4ucQL/1pw2opbt3c8\nh4HGnQ1p+Rqfz19xsU/c7NQ4gCVXEe881U+bwQDPmZh08Cb0Hi1VrkldpZkA\nnNkgYBtjqVZJBpO3yAoUvrIJW93ebHXeI+voVvi3Bf/j1y7VREMrfm9SMh4M\nTMLf\r\n=jmVw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG87cHMWXmJEX4/nmNmhNOFjnzQ82DQ0cwnjfUcmU+PsAiEAjNxihxqt5VXtm2F/cEl4VOHSW3xXC5aSXhRYDeAfKSM="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.7_1642590054708_0.9935087902194399"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.7-1":{"name":"@admixltd/admix-component-library","version":"0.3.7-1","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly","chromatic":"npx chromatic --project-token=b52c2c885641","chromaticChanges":"npx chromatic --project-token=b52c2c885641 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --tag beta --access public","eject":"react-scripts eject","prepublishOnly":"npm run clean && npm run build","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.7","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","classnames":"^2.3.1","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","styled-components":"^5.3.3"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-links":"^6.4.13","@storybook/addons":"^6.4.13","@storybook/node-logger":"^6.4.13","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.13","@storybook/theming":"^6.4.13","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Preparation\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n```shell\nnpm install --global yarn #Install yarn https://classic.yarnpkg.com/lang/en/docs/install/\nyarn global add rimraf #Install rimraf (rm -rf for node) https://www.npmjs.com/package/rimraf\n```\n\nRemove `node_modules` recursively\n```shell\nrimraf node_modules\n````\n\nInstall dependencies\n```shell\nyarn\n````\n\n## Run **storybook**\n```shell\nyarn start\n````\n\n## Build project\n```shell\nyarn build\n````\n\n## Link projects to work locally\n1. Start building in watch mode\n```shell\nyarn build-watch\n````\n2. Link `react`, `react-dom` and `admix-component-library` in your project package.json file\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n}\n````\n\n3. Add `AdmixThemeProvider` to your project (See below)\n\n\n## Font\nTo use this library, please add Mulish font to your project\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap\" rel=\"stylesheet\">\n```\n\n## Theming\nWrap your app with `AdmixThemeProvider`\n\nExtend your styled-components theme with `AdmixLibraryTheme`\n\n```jsx\nimport { ThemeProvider } from 'styled-components'\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library'\n\n\nconst theme = {\n  ...AdmixLibraryTheme,\n  colours: {\n    ...AdmixLibraryTheme.colours,\n    red: '#ff0000'\n  },\n  someNewProp: 'some value'\n}\n\n<AdmixThemeProvider theme={theme}>\n  <ThemeProvider theme={theme}>\n    <YourApp/>\n  </ThemeProvider>\n</AdmixThemeProvider>\n```\n","readmeFilename":"README.md","gitHead":"284a97cdecdbeb55b593593f3e32198ea1390002","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.7-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-5bTk3r6vB7AanLixIvErb3jJzLjtoh5iLh6uBmFDlr67MbvQfLWRoFOzojdZH/XQsI37dmKbCpWnB5GIb91SbA==","shasum":"789f1bc5adc0b9c55868d5c870ac6d6aeb7d80df","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.7-1.tgz","fileCount":163,"unpackedSize":15050321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6U2mCRA9TVsSAnZWagAA0UYP/1UYUYx3betHKDYWEMkb\ne9wxVDH7nkaUy6DYqeDLGlWWij3sYigDS1DVCUNwr6VUzXNBc3RLJ4H9WdY/\nfzUMuolGihml8Ll0DK6v8tp8vf3tWCQjnM0O8grm43tZOI1AULGFkNvUDLve\nlbWIHFlVgTXkKv87+nh3ZeMm2mb/2xIN7zL46YDoGAXt03GN8UMKiv3LFLIT\njWRPy0fCuMwCzuw/oLhEnmoQv4dBAnyhI1XXrcossW8VoV1ahF1t2jcV4e00\nvcTALHs0lLektzVDqFej7pyW6x93LldyU8AKSDWNzGP5ElGT7genCN/VbLmW\nm+nbuXbA1DIQzkdJvX0GUX1P2B6xOEtNjLGsxn+XVFFM7dhDnB2GrWtoDhEL\nFIeZzhUGPsQFi0Utk5Mi4XNQhBCFpCLmcwUn2lv/TLqNRPbjuLrDEp4XLmZA\npNnWrcUJ4gvINqOWh/6r/Hw5WYyQo8TTPr3KzVy5AYF3VMXUoFiIb/5BM86d\nQvI6eSJHUb8v54wnATvjnSi4dMVjR3EGCR6cvaaolFJlXajJTWmH1iyh5smL\n2hzqmurEH5OL7YvloXII/vOPw4J00YJWImFR/9FSOtu/s39z6FxWe4jy5s6l\nka1aRuQGXQqoV+E9xkFRxXWqdJsb7g8Md79jm29YjWuAQOMWSyXUgUClSu3n\nNYCo\r\n=gMWT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHL4KeO4uRNp/VLT8EuDVvlgl2OgfiPZgO2aSLxaDrCVAiEA03jmlz2p4kDQjaiCxM+Y5wmJpekk3w4Zm0NZyWIF2EU="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.7-1_1642679718652_0.9644017590891105"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.7-2":{"name":"@admixltd/admix-component-library","version":"0.3.7-2","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly","chromatic":"npx chromatic --project-token=4fe58e2fa4f9","chromaticChanges":"npx chromatic --project-token=4fe58e2fa4f9 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","eject":"react-scripts eject","prepublishOnly":"npm run clean && tsc","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.7","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","styled-components":"^5.3.3"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"3.1.8","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.12","@storybook/addon-essentials":"^6.4.12","@storybook/addon-links":"^6.4.12","@storybook/addons":"^6.4.12","@storybook/node-logger":"^6.4.12","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.12","@storybook/theming":"^6.4.12","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Preparation\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n```shell\nnpm install --global yarn #Install yarn https://classic.yarnpkg.com/lang/en/docs/install/\nyarn global add rimraf #Install rimraf (rm -rf for node) https://www.npmjs.com/package/rimraf\n```\n\nRemove `node_modules` recursively\n```shell\nrimraf node_modules\n````\n\nInstall dependencies\n```shell\nyarn\n````\n\n## Run **storybook**\n```shell\nyarn start\n````\n\n## Build project\n```shell\nyarn build\n````\n\n## Link projects to work locally\n1. Start building in watch mode\n```shell\nyarn build-watch\n````\n2. Link `react`, `react-dom` and `admix-component-library` in your project package.json file\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n}\n````\n\n3. Add `AdmixThemeProvider` to your project (See below)\n\n\n## Font\nTo use this library, please add Mulish font to your project\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap\" rel=\"stylesheet\">\n```\n\n## Theming\nWrap your app with `AdmixThemeProvider`\n\nExtend your styled-components theme with `AdmixLibraryTheme`\n\n```jsx\nimport { ThemeProvider } from 'styled-components'\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library'\n\n\nconst theme = {\n  ...AdmixLibraryTheme,\n  colours: {\n    ...AdmixLibraryTheme.colours,\n    red: '#ff0000'\n  },\n  someNewProp: 'some value'\n}\n\n<AdmixThemeProvider theme={theme}>\n  <ThemeProvider theme={theme}>\n    <YourApp/>\n  </ThemeProvider>\n</AdmixThemeProvider>\n```\n","readmeFilename":"README.md","gitHead":"85437cb4b47527c625c9f10f5753e7719b20f7c4","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.7-2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-2TJvYdFmo7VK3I9xsq4nqsDHa3aTLlB8XeoxLVsifkOAeUzzFTaeDLoZaN69q88yy+YppmrwSJb385neTRf8NA==","shasum":"f095fd5faed0a7199e44b402f85a1dfdd3fae2b3","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.7-2.tgz","fileCount":77,"unpackedSize":393863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6XFACRA9TVsSAnZWagAAsjcQAI8km/MNpDB89hsVNrHP\nrydTfdKrP06DNCJUvWA+rdlT73x4NoyAgGG5Iz3s7F4GGhJwgfKndmXsIyLH\n80A7URL8lLmWvzPGWqIywbdS0Y7Y1d6VcZ/PovxZgdkZ/q5e9pX4cRnjcwPC\nI0j8+fFjLN4mTNlXNPLQQWfdW17F2izSECrXywncg3wHSgRNAfK9xql7p0ae\na93NsCFJsEWiNHKeSHLlVYNCY6DcZk1CVCjZIKceJ0y8aOj3QJjmumdtoyWV\nH0fbJiRXItbzkzGGWDndsBiIdzyAsijv645IYWOFV1Pcz9Iax7GHHElJ6zC1\ntMkk/RKP7UfVyOkncoH2qR/mCJjV6gFZrHfAsD+zP0wbgtQnqFTEW7xgclXu\n0xUygFtMLk6vMln3S2gI4dDR9cB3hUiMDjRg6pmwn3nN0//b3gc4bm2mnhZQ\nNoVmOnQ8IwfMBrT59Y5nOPxVTQ5Hfl2v3ymAolFjQf+qQNm1QHEsvesLYdD0\ndRxPJERTZpib2dluNxpDOQ/3itOxss1AE+sm82fDg+8E9093uvq1itveBGs4\nvIxhutokaNnc0WiHNrEZ0nY5UZOkqWx3FD/DwCjNcukPjSA7Od6lgXjk2rZL\nHhgu1wLLwaVjJgWUeFHYsZxT0aHi4ILwBA02QaAAX1q9wOmIUyBEwNPY3zNt\nVKHL\r\n=j6ZH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFNFec8hVj3ADrlVO2EOe0l6XkGISGpyzzG+30PiTIeHAiAm/7xCUAIYrUvFvPJiTVPFG4ZgsI6XicyIwP6N8l44dg=="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.7-2_1642688832627_0.7605327137357603"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.7-3":{"name":"@admixltd/admix-component-library","version":"0.3.7-3","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c && tsc --outDir build --emitDeclarationOnly","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly","chromatic":"npx chromatic --project-token=4fe58e2fa4f9","chromaticChanges":"npx chromatic --project-token=4fe58e2fa4f9 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","eject":"react-scripts eject","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.7","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","styled-components":"^5.3.3"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"8.2.5","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.12","@storybook/addon-essentials":"^6.4.12","@storybook/addon-links":"^6.4.12","@storybook/addons":"^6.4.12","@storybook/node-logger":"^6.4.12","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.12","@storybook/theming":"^6.4.12","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript-paths":"1.3.0","rollup-plugin-typescript2":"0.31.1","tsconfig-paths-webpack-plugin":"3.5.2","typescript":"4.5.4"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Preparation\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n```shell\nnpm install --global yarn #Install yarn https://classic.yarnpkg.com/lang/en/docs/install/\nyarn global add rimraf #Install rimraf (rm -rf for node) https://www.npmjs.com/package/rimraf\n```\n\nRemove `node_modules` recursively\n```shell\nrimraf node_modules\n````\n\nInstall dependencies\n```shell\nyarn\n````\n\n## Run **storybook**\n```shell\nyarn start\n````\n\n## Build project\n```shell\nyarn build\n````\n\n## Link projects to work locally\n1. Start building in watch mode\n```shell\nyarn build-watch\n````\n2. Link `react`, `react-dom` and `admix-component-library` in your project package.json file\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n}\n````\n\n3. Add `AdmixThemeProvider` to your project (See below)\n\n\n## Font\nTo use this library, please add Mulish font to your project\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap\" rel=\"stylesheet\">\n```\n\n## Theming\nWrap your app with `AdmixThemeProvider`\n\nExtend your styled-components theme with `AdmixLibraryTheme`\n\n```jsx\nimport { ThemeProvider } from 'styled-components'\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library'\n\n\nconst theme = {\n  ...AdmixLibraryTheme,\n  colours: {\n    ...AdmixLibraryTheme.colours,\n    red: '#ff0000'\n  },\n  someNewProp: 'some value'\n}\n\n<AdmixThemeProvider theme={theme}>\n  <ThemeProvider theme={theme}>\n    <YourApp/>\n  </ThemeProvider>\n</AdmixThemeProvider>\n```\n","readmeFilename":"README.md","gitHead":"85437cb4b47527c625c9f10f5753e7719b20f7c4","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.7-3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-LbfmLSE8vslRiYS5wf5Ibj5eLrcJycv7a3t4msSn/JK4cRBfUvJ0ATY2dGom2ssoNzpppPLOl4lEshJOhKpOxw==","shasum":"788ccd822ef0e085f912673e433a59b542fe74a0","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.7-3.tgz","fileCount":157,"unpackedSize":14020932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6XTGCRA9TVsSAnZWagAAnDAP/0FPXbD4leRtTihx5Tis\npelhVwuz/blMTkgMVRvwXKjRry/AVVzoftnfUGnxoUZD1W3gfYcRSBRNfFvO\n1LZFmb4jaETQufOlxsh6tk4zaPGNcB65V7XQ0qTlqC+pQz+KqD8IBJVD6hFZ\n56O/PbrKzHpXzsUnuu7Vdv77BpKTbjZvAq3ze2V5F0BQyfbcA+ROAuB1u9ha\nzNdSt3Ha/v4hyUfAZpjHJu6vvDQq1wYesN+NhhruZMbo/jYlPkCrcgA+6W/s\nmscC1CamXefAPfCy08YRHFD9BhQco99yMSRoHEcsBQzeWRzzFICxmVfoCHs5\nwJOcQdKJ0ZQFNNgXLosFzLMsiHXJmYwUuyXSR1P+oTBIt9oepNzAYyUMNk3X\nDtREJ/k4GG5fP1j9qeK/6pv9qHVSz7Z+yeDlGECNV+IyMAVTnaIcNEtJMxkA\nP+2DkQ/8gM1pDSYf6x7ssh99U8MS1p6DZBEbfXtL0goIiP76iL0fBLP3DzLF\n6JTA2kEuO2AcdoVzY4SlPiLqSt3dLwRVkvmUwPMQZ6Z4c6TN/gGr5lJFpMOs\nrCo2tCfaEEc+DlXr8XjEQ1K+8KDLG5rdVyPC2E6bKsxZ1zsiMx0qPqCn0mx5\nwGkuVtVxi7PAQVia0D2Vg8a8vwtIcbpX3Tvep6jwuaS6g9es3ricyNl1jNlg\nkLM6\r\n=8FPv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEi8rixHbmBP+pXnhUtrJTl657V6l4Z3A4TitY+A6c9bAiAeqy0jfQoQJxjSx5mK0UUvcM2xhAc3R9iutM9PHxyddQ=="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.7-3_1642689734264_0.2065557898946604"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.7-4":{"name":"@admixltd/admix-component-library","version":"0.3.7-4","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","build:types":"tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly","chromatic":"npx chromatic --project-token=4fe58e2fa4f9","chromaticChanges":"npx chromatic --project-token=4fe58e2fa4f9 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","eject":"react-scripts eject","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.7","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","styled-components":"^5.3.3"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.12","@storybook/addon-essentials":"^6.4.12","@storybook/addon-links":"^6.4.12","@storybook/addons":"^6.4.12","@storybook/node-logger":"^6.4.12","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.12","@storybook/theming":"^6.4.12","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"4.5.4","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Preparation\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n```shell\nnpm install --global yarn #Install yarn https://classic.yarnpkg.com/lang/en/docs/install/\nyarn global add rimraf #Install rimraf (rm -rf for node) https://www.npmjs.com/package/rimraf\n```\n\nRemove `node_modules` recursively\n```shell\nrimraf node_modules\n````\n\nInstall dependencies\n```shell\nyarn\n````\n\n## Run **storybook**\n```shell\nyarn start\n````\n\n## Build project\n```shell\nyarn build\n````\n\n## Link projects to work locally\n1. Start building in watch mode\n```shell\nyarn build-watch\n````\n2. Link `react`, `react-dom` and `admix-component-library` in your project package.json file\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n}\n````\n\n3. Add `AdmixThemeProvider` to your project (See below)\n\n\n## Font\nTo use this library, please add Mulish font to your project\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap\" rel=\"stylesheet\">\n```\n\n## Theming\nWrap your app with `AdmixThemeProvider`\n\nExtend your styled-components theme with `AdmixLibraryTheme`\n\n```jsx\nimport { ThemeProvider } from 'styled-components'\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library'\n\n\nconst theme = {\n  ...AdmixLibraryTheme,\n  colours: {\n    ...AdmixLibraryTheme.colours,\n    red: '#ff0000'\n  },\n  someNewProp: 'some value'\n}\n\n<AdmixThemeProvider theme={theme}>\n  <ThemeProvider theme={theme}>\n    <YourApp/>\n  </ThemeProvider>\n</AdmixThemeProvider>\n```\n","readmeFilename":"README.md","gitHead":"85437cb4b47527c625c9f10f5753e7719b20f7c4","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.7-4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-I/RkaT1tsaeyKznzZWfv0WfK2uY3wxo8BKYm+GTY4ftynZWLebhzladKMZTT6DY/aLr8D/2JvY9yp8JIp3ofyQ==","shasum":"2e814a1db4f99647f584f7d29f74c9479734b976","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.7-4.tgz","fileCount":59,"unpackedSize":13473567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6aCFCRA9TVsSAnZWagAAj0wP/RGQkev4Ai5o4upwdRs7\nSqRcUIyxkYdHISytNqc9gwm6qB1+ZsfcHXYvqv4bMhTYAwd9PVtACdO7hyFo\ntLUWZpAmqN+dkInjU3g2owQ79GvJf901gL+3lSLvv5H+YrUOcHT+jwB6F1mj\nL257MV8pq4LQgsTRz6Fklaar3SB4WMR24geAsh1WXeFLVvsmJkmMweCc0L0r\nV936D2oLTO1DD5Efv+x68rkhxOFpsx3Mnw/2OQCgSVwRCktfNNJkwL8A9ahg\ni2CQ43diQvxR3wHvC8ad8Nyssip/o5RkPcBPQrLfNCKxhwN6XdtVwaM1zhqF\nJrZ/OCX7pBs7f0dCpq7DJ9qe0UEA2vnLWc5hsXWYXlVF9mW0lV1rhfjeUe7q\n0ybHZC0et+sDtuLmkp/k9+vG3CMZ3iXUmbN7WDFeGYgX7skvydY3id5QXCLP\nZ3xTt/pV3Ycbql8KJqrGT1h12tLewJqVFRTL+7+3MEQGip0mT3Famw31jauU\n66cu1eQzTw9GGDfwoi5mbrzK6SI+ZfF08q+vwRXIpE+P4QPi2UFr/sOwM75d\nDjdXd0lFvHuJ7VzcS+L1Nmajd8AyxsnN+9TSKi2gf/eNmGZdq3hVWR/DZhFu\nfmTYPl9JpTp0Lp9BAW+EmuiP5GF2F1oe/JY9dWRfZUzJLm8EwuuDOZjPhgw4\nfHCo\r\n=CqWv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEUf56X8DxvjjKf4PdVPARPbM5TEA1a25R5gnBgWJsPAiBP3Qu7AaM06x5SWQDh80klANtu5IEXJrZ9g0SlSE8CWg=="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.7-4_1642700933004_0.5240766450705625"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.8-1":{"name":"@admixltd/admix-component-library","version":"0.3.8-1","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","chromatic":"npx chromatic --project-token=4fe58e2fa4f9","chromaticChanges":"npx chromatic --project-token=4fe58e2fa4f9 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.7","@mui/styled-engine-sc":"^5.1.0","antd":"4.17.4","classnames":"^2.3.1","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","styled-components":"^5.3.3"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-links":"^6.4.13","@storybook/addons":"^6.4.13","@storybook/node-logger":"^6.4.13","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.13","@storybook/theming":"^6.4.13","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.4.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"4.5.4","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Preparation\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n```shell\nnpm install --global yarn #Install yarn https://classic.yarnpkg.com/lang/en/docs/install/\nyarn global add rimraf #Install rimraf (rm -rf for node) https://www.npmjs.com/package/rimraf\n```\n\nRemove `node_modules` recursively\n```shell\nrimraf node_modules\n````\n\nInstall dependencies\n```shell\nyarn\n````\n\n## Run **storybook**\n```shell\nyarn start\n````\n\n## Build project\n```shell\nyarn build\n````\n\n## Link projects to work locally\n1. Start building in watch mode\n```shell\nyarn build-watch\n````\n2. Link `react`, `react-dom` and `admix-component-library` in your project package.json file\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n}\n````\n\n3. Add `AdmixThemeProvider` to your project (See below)\n\n\n## Font\nTo use this library, please add Mulish font to your project\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap\" rel=\"stylesheet\">\n```\n\n## Theming\nWrap your app with `AdmixThemeProvider`\n\nExtend your styled-components theme with `AdmixLibraryTheme`\n\n```jsx\nimport { ThemeProvider } from 'styled-components'\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library'\n\n\nconst theme = {\n  ...AdmixLibraryTheme,\n  colours: {\n    ...AdmixLibraryTheme.colours,\n    red: '#ff0000'\n  },\n  someNewProp: 'some value'\n}\n\n<AdmixThemeProvider theme={theme}>\n  <ThemeProvider theme={theme}>\n    <YourApp/>\n  </ThemeProvider>\n</AdmixThemeProvider>\n```\n","readmeFilename":"README.md","gitHead":"f629c952b04a9e0419805f2c0269d2e2c8ad1e06","description":"## Preparation If you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder","_id":"@admixltd/admix-component-library@0.3.8-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-R75SE7tMy5vNr0iZh7O0uFENzZemZhe4o18cMwGXPnzOJTQ6Vru8DaYNw9wt+rX1tnNwNWRrOY0kttnQ1dkwGQ==","shasum":"e7911a8fc356513a63a0d68b13b1b6bb6f7897e6","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.8-1.tgz","fileCount":63,"unpackedSize":14508982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6qCDCRA9TVsSAnZWagAALYgP/1VWo6fvRvQ4a8Jhfvu/\nGJUAcx84uJMZ4LDLiF9mqKuqd+tK9EiKhGg33uY9T0o5/mnsahxClkHSBWU8\nabeIsETDucCVTjFf/SbWeBVJOyyyGZhFMi1ZFIHYCKRvsKDStrO+iQs6qTaz\n2iO1HDtIDsGIMjENhKA/MoXZZgAzCAnxhg096jCk3rJCTYb8o22Cqt7LfEXK\nF9fJjiIcVWx2LuL5NQIS8K4S+wv8jGS0pZhg8niecZAdFwULJoXLuPYVtuLI\nrXdVdlVbmEsOvZpP/ziku2cdoENzWhRZKk6xnTq+7GHkWpntCqoPqTMK9eev\nW1p15ISHFzfDWZPRVLL4ywV8JGt6icgsnsdk/DPXr71P8q0/e5tuZNVhAQP5\ng/D/NaBshWfhywKCD6u0gHWFLu802eAyFhhY5HZaBCS4GFsf99TZXLF2R/FU\nubtQ1zAk9Tx0TCr9/HauU2yPVd6IxIl3SabKisqbO7BThg5apBsSbAKnZdQd\nFnJL85xnZ41gb2Xa9I04Fo3LDc1fAmlzD7ZJfJafLg1mwGbNW727oHaFwYIe\nAu2Vv9kXyVJCTha5Qxg3iw3ZQ9uFRrYCjchhMjA9NkysYehAPDzZb2XWEEM4\nZF8ceAxutctdPDYnfiByBBb6v+pUSJ/Y37mIx9MMTDIb53tlM5Jx3AID0eX3\npJN4\r\n=fCMZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwwigU4+6FO2d/FOPB11bWvvuanjyH0Oi83JBpvGFYxAiAuMglz0kJHyA5QLjTd6UdaadFzSzYIXWRXejYyd2EDRA=="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.8-1_1642766466798_0.6624814981018172"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.8-2":{"name":"@admixltd/admix-component-library","version":"0.3.8-2","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","chromatic":"npx chromatic --project-token=4fe58e2fa4f9","chromaticChanges":"npx chromatic --project-token=4fe58e2fa4f9 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.7","antd":"4.17.4","classnames":"^2.3.1","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","styled-components":"^5.3.3"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.3","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.2.7"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-links":"^6.4.13","@storybook/addons":"^6.4.13","@storybook/node-logger":"^6.4.13","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.13","@storybook/theming":"^6.4.13","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/styled-components":"5.1.18","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.4.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"4.5.4","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n\n## Usage in your project\n\n\n\n\n1. Install `@mui/material`,`@emotion/react`,`@emotion/styled`,`@admixltd/admix-component-library` as dependencies:\n   ```shell\n   yarn add @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n   ```\n   If you want use legacy packages, based on antd:\n   ```shell\n   yarn add antd@4.17.4\n   ```\n3. Add `AdmixThemeProvider` to your project (See below)\n\n## Preparation\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n```shell\nnpm install --global yarn #Install yarn https://classic.yarnpkg.com/lang/en/docs/install/\nyarn global add rimraf #Install rimraf (rm -rf for node) https://www.npmjs.com/package/rimraf\n```\n\nRemove `node_modules` recursively\n```shell\nrimraf node_modules\n````\n\nInstall dependencies\n```shell\nyarn\n````\n\n## Run **storybook**\n```shell\nyarn start\n````\n\n## Build project\n```shell\nyarn build\n````\n\n## Link projects to work locally\n1. Start building in watch mode\n```shell\nyarn build-watch\n````\n2. Link `react`, `react-dom` and `admix-component-library` in your project package.json file\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n}\n````\n\n3. Add `AdmixThemeProvider` to your project (See below)\n\n\n## Font\nTo use this library, please add Mulish font to your project\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap\" rel=\"stylesheet\">\n```\n\n## Theming\nWrap your app with `AdmixThemeProvider`\n\nExtend your styled-components theme with `AdmixLibraryTheme`\n\n```jsx\nimport { ThemeProvider } from 'styled-components'\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library'\n\n\nconst theme = {\n  acl: AdmixLibraryTheme,\n  colours: {\n    red: '#ff0000'\n  },\n  someNewProp: 'some value'\n}\n\n<AdmixThemeProvider theme={theme}>\n  <ThemeProvider theme={theme}>\n    <YourApp/>\n  </ThemeProvider>\n</AdmixThemeProvider>\n```\n","readmeFilename":"README.md","gitHead":"b853faee177ed284fa15a1da3c334223c770fd17","description":"","_id":"@admixltd/admix-component-library@0.3.8-2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-E7ryebPv+GE7hmC3L5JDDcP6MoLUoQ41ZrQvMrQVEz84tnyjDm80IE8psDzE3XJS2t0EnFNrd3akxkfgwqtnmw==","shasum":"ab842e7d66e3a400c104f1912dd8cb03d8c714f2","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.8-2.tgz","fileCount":63,"unpackedSize":11586363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7nrCCRA9TVsSAnZWagAAyYEP/igUaB60dDiQfSuwlRA3\nJYODdNlPRvFLTcHPkkBqh3ouHW7JV1MmbbJPG8tRVsl6dJlKIYzG3Cio5HT9\n6VW2ENpoMDC2DN0poajNKDA+vOLCJVobh9+BeH/uBgMaZRoIwwaMr4kOKSYG\nQYMguB3PShaPzHmyuPVoDqGSuQ8zJGD9XY0phOjEhyQabhQyPxCkgiUXD+oQ\nD8CaaglgAZLYh5h1jXsmnR7ACT18gs9dTElBvkdJzrLVDrVQ7fVS9PATrTVK\nuAviOx/6iUmGhHu15jOMYN6iPBCMsF8t9N5oNvYKVb0MFpHI85HEqSCBWG65\nF2RCvH/j1tI+YJwFRAAyFIuYA5pPF6sfzGqUaz/5E23+LLQMZ2kT+Mf1RpbY\n5EwCt5UtST03RDsASpARS+tvQA+MWVPoaWp8qGIdeTW1SPlMof5SZaigckSV\nHCEms5T2XxFV+QHJRJMU8Inc+xrCU51ueLqZfFrrITmwSfKGEVwJWIf389iY\nwDPkr9XOYpQXqULd/Pf3teyByNPbA+1nZrN8uOk8CXhcmBBPgndhI6wLxL88\n6jO0kBcXp8eFF140mdj1ko64JkvcancGlEeuf/1hpNZ824oM4k83fuYt5CIt\nBRseaVfvvQ8XdjKGFiuFHyqXeS8atgUuaYYwOwH8Tk1W5Ob146n/Gx0YvU6t\njGJy\r\n=vIpo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTJuoM6TK5SDToa9R9DFWcbsbn16w6cMWjKgiKAku3oAiEA4XcXGzV36/hLEBAyp29e63sumpqQJWOGfSbw9RGlWtI="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.8-2_1643018946369_0.6699252154580901"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.8-3":{"name":"@admixltd/admix-component-library","version":"0.3.8-3","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","chromatic":"npx chromatic --project-token=4fe58e2fa4f9","chromaticChanges":"npx chromatic --project-token=4fe58e2fa4f9 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","classnames":"^2.3.1","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2"},"peerDependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.15","@storybook/addon-docs":"^6.4.15","@storybook/addon-essentials":"^6.4.15","@storybook/addon-links":"^6.4.15","@storybook/addons":"^6.4.15","@storybook/node-logger":"^6.4.15","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.15","@storybook/theming":"^6.4.15","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.4.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"4.5.5","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\n\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n}\n\n\n```\n\n\n```shell\n\nyarn add @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\n\nIf you want use legacy packages, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\n### 2. Add Mulish font\n\n\nTo use this library, please add Mulish font to your project\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<script>\n    var fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n   purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {}\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n    <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'import theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n      <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n   purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n   export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n</details>\n\n\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n   \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n   \"react\": \"link:../admix-component-library/node_modules/react\",\n   \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n   \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n   \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n   \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n}\n```\n\n\n## Snackbar usage\n\n### 1. Wrap your app with `SnackbarProvider`\n### 2. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n   maxSnack={10}\n   anchorOrigin={{\n      vertical: 'bottom', horizontal: 'right',\n   }}\n>\n   <YourApp/>\n   <SnackbarUtilsConfigurator/>\n</SnackbarProvider>\n\n```\n\n### 3. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\n```\n","readmeFilename":"README.md","gitHead":"d8fabb5bcb529159cec24369ae5b726d667310cc","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.3.8-3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-I6osPFnQVbdtsGVy1jBmOn1ui+gq4CobytE8wwkdGkz0IGER+1ZFSrxItW4Gmo4/Wmp04dxeBnD8Nns9AuApbQ==","shasum":"063dbc61a54c4fa9eeb0518bf4203b4fc113cada","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.8-3.tgz","fileCount":73,"unpackedSize":12452253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9ZCOCRA9TVsSAnZWagAA7+gP/2H+CTEfC5r3J57Kt4Ur\n5sdQ7hZyX64XEZmO6orowZcW9uRmLNzmk2VQCMa/ZnEgM/dKxmCj4c+mtIh3\ndcoXzg5e6D5lQzI8SqPywKSOvuPBA5cczLqi24xH9YWke8GGxt2p4LdiC3Aj\nrlVhpFSjbIbR954Zyf5DRVEGMNFjMqIlY/vjIiYjrtMIILCBnBVIkqKfEJyT\ngUO2VSmgJK3LGuBroX0CtWIK0vXkD9kk/gD5/Z9ZLlUxaFL5PFrIrP67eFWK\njRD70qMRgiNrWaNF+hSr7/2RWilW5Hy8vS9V8XSdIe/X0GCOMv9ZETbB1Y8S\nkv3Ck6C+xT6ryWZK/cR2yP903EilAwK59byZ7JzaYAqMSNpU24Q+NPmCKuvk\n6OtHFWFY2CtewVcHHlbL80mnFCy+bv2+8mjOSaczPduAchervsH92YNEd/2m\nyipwgrEpE93L9tbJ+4yiUFx3llki1iyunfF1rOdn/Q3A6g3VyJ6JEGe7BDMX\ny87c3CEml1vGB68SN/VywJKjmEp6aKILTRXZSKGaKUTRh4umaptclfHQKtOB\nd/g7nE56wOzEpepfVa9zaTt67eF2yJCz+9/9GCPvz1IkIzXbH2+exqYW5xWI\ntLy1A45hAzYrWy33o8G5fUYC+vE1UYzQqMwhO4oqr4OiO2l8rSwV5mdi9T7Q\ncwQI\r\n=YrqD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmhUv30BM9M1c0kh6bKpNM3K2mMO604daixCTt5csejgIhAO8WgGDaQxfwANzOskipEgW45mysbX6Ujqoor6ZaGdsI"}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.8-3_1643483277953_0.1436815374040521"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.8-4":{"name":"@admixltd/admix-component-library","version":"0.3.8-4","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","chromatic":"npx chromatic --project-token=4fe58e2fa4f9","chromaticChanges":"npx chromatic --project-token=4fe58e2fa4f9 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","classnames":"^2.3.1","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2"},"peerDependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.15","@storybook/addon-docs":"^6.4.15","@storybook/addon-essentials":"^6.4.15","@storybook/addon-links":"^6.4.15","@storybook/addons":"^6.4.15","@storybook/node-logger":"^6.4.15","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.15","@storybook/theming":"^6.4.15","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.4.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"4.5.5","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\n\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n}\n\n\n```\n\n\n```shell\n\nyarn add @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\n\nIf you want use legacy packages, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\n### 2. Add Mulish font\n\n\nTo use this library, please add Mulish font to your project\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<script>\n    var fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n   purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {}\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n    <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'import theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n      <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n   purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n   export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n</details>\n\n\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n   \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n   \"react\": \"link:../admix-component-library/node_modules/react\",\n   \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n   \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n   \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n   \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n}\n```\n\n\n## Snackbar usage\n\n### 1. Wrap your app with `SnackbarProvider`\n### 2. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n   maxSnack={10}\n   anchorOrigin={{\n      vertical: 'bottom', horizontal: 'right',\n   }}\n>\n   <YourApp/>\n   <SnackbarUtilsConfigurator/>\n</SnackbarProvider>\n\n```\n\n### 3. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\n```\n","readmeFilename":"README.md","gitHead":"40f7e5c4a574c3be046fbdbb5ee5a476b07571a3","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.3.8-4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-EID4TOhpjWFUJscUeo7DCWV9pzxRjzCu9Tfz11SNJANwjagzZrmoZMfJJd8zDvzhWQqaD3ylooAjabIMLShBIg==","shasum":"116eae4546760aaa4d5c01538d180c7fd8ea5e1e","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.8-4.tgz","fileCount":74,"unpackedSize":12399061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9nfBCRA9TVsSAnZWagAASV4QAIPr66JnFfs8W85jDCWm\n+pOnNUIk+1yHcWalug5wcfGKuHiDxUMK/b0RrnHscDLtVf+L+xAHKjUDp9Gr\nU8BzbMgM3D+ie61wfhC6CDTNlWdo7+Cq4mfkkVvE25Q1/QzfR1EHfc46DZ7A\n/+tLBeegcPNllqW3FHOx8LkvOf/OxyGuOm8rL7J3Ys2sArqCU0qYu0e46Duv\nVIzSlLh0Utg9suWJlt3mgGwetfZnHJ+29hNS8BBXzJI0/hQb2RmUS4eyGonZ\niKfncOchAaAm9NCPFGU/uF84+Ool5bW4+RfJLSg5K95LNwUxIH/2fSfVHcET\ncmhFSOQZNDZOTUMtpm3kuu4npGJ4vvuD/E148hkVhvybYWt0Fu615KS1i0Tq\nfYZcS6fVtHJ9Cc7GbK661JOqWfAyBStH7D2OjoYw4LW36MVIz6/obU5A2haH\ndDjNMWxJM5D4HbE+PhGEyd9lHLep7eK2beuuYByN9pXHgcY60xd40Qh7Ta0d\nER6yMHX6SUZGnvAdbOMXzEVX/fjirG4PRNUYhabo+OWtn2vuaCSaXeJIC39l\nzu1YnociYO6oI4hgs1vtagyfsjrNDiKSBfT4S3UxZeP5PI6trAJZ8hZI9lmc\n0BjL7FXw+ucFR5MjgOaNO3Er+dgYIjFYJxhPRIAPRwGCAOuUwiGoLJrsdlX/\nWESc\r\n=aI2N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkrj3+URJ6UY6GwcJqM+CcJqijJ6uqvvpd8pJHQDS8BwIgFJe1W9xWbB0TvKqJck6C+vDl0Lsw7MGOOEoSdScXe0A="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.8-4_1643542465097_0.17584360295448742"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.3.8-5":{"name":"@admixltd/admix-component-library","version":"0.3.8-5","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","chromatic":"npx chromatic --project-token=4fe58e2fa4f9","chromaticChanges":"npx chromatic --project-token=4fe58e2fa4f9 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","classnames":"^2.3.1","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2"},"peerDependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.15","@storybook/addon-docs":"^6.4.15","@storybook/addon-essentials":"^6.4.15","@storybook/addon-links":"^6.4.15","@storybook/addons":"^6.4.15","@storybook/node-logger":"^6.4.15","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.15","@storybook/theming":"^6.4.15","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.4.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"4.5.5","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\n\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n}\n\n\n```\n\n\n```shell\n\nyarn add @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\n\nIf you want use legacy packages, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\n### 2. Add Mulish font\n\n\nTo use this library, please add Mulish font to your project\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<script>\n    var fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n   purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {}\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n    <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'import theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n      <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n   purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n   export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n</details>\n\n\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n   \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n   \"react\": \"link:../admix-component-library/node_modules/react\",\n   \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n   \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n   \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n   \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n}\n```\n\n\n## Snackbar usage\n\n### 1. Wrap your app with `SnackbarProvider`\n### 2. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n   maxSnack={10}\n   anchorOrigin={{\n      vertical: 'bottom', horizontal: 'right',\n   }}\n>\n   <YourApp/>\n   <SnackbarUtilsConfigurator/>\n</SnackbarProvider>\n\n```\n\n### 3. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\n```\n","readmeFilename":"README.md","gitHead":"86c316df4a7ba1d3cc712ffeee91140ac1d65d82","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.3.8-5","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-x2ydiNXdFzCnUq8wvqIT5K0OCNeJJ6bOFQko/TJdKtPc1xPwH34fzmH063ROInu4+xn/QwRZZ102ZyTTzWNKUQ==","shasum":"6876d391319e3236967ae3cf3f8a02e625a7f581","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.3.8-5.tgz","fileCount":74,"unpackedSize":12399611,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9sa1CRA9TVsSAnZWagAAX8AP/RYaE0t/ErqJ12n3QVLc\nd3JfcY0l2+PkFjWexBZN3J2ESBfGKlRDadWVLe7ZUDsL5Fr6uhvuxbNbX6Dd\nbmefdL08aRupmYER667LvHMSlXQO6R96xeDpHzxMf9qPB/JTQqYNaGBkbjMm\nkYwJUtoHZmf7D4pFQx4UZUmCdbsTdGjgdcwGoCAlDUazsENu7uvDwnlpmrS8\nwUZdlJdsKhjyyqSjG62gx4WzDjSStcSen5LRldJgnuSTH+0b5xNRu9YnJxra\nepyaEYK+7lRTdz6eUixNZ0zgaKPOOOeIGKc4r7HcpppYO93upCkIQhH4qdNT\nOl5XdzemOfYWaQ05zkxM32kEAMWjCiAm+KQnwxVflG9o7jbhmmKQySjoO/bo\nh0PyEGrglbzTkFDPpMoKSCqKYZZJ8Wtw+2/cAH4M8Yl6ekVTGpx1by8qWN5H\ngGzjRt9AzIwfKx/hMe5GDLUSTmDbyg+fSP+FTCCkChQ7UI5ZJOmZ0s3Ub+M7\noIXeW/X1v5VN/VAipjhJHxj7KA6VGzKpQjYw5TQjL8zs8AnHj5GpNjr07bve\nz81eJ23TpKRoCYlAtCHNSgMeZ1nUxPxdWmph7IrMvbEVSf8NpchC5Cl9KKT9\nti6ThKwVWe1Yw8aRVtLEqb7rQbDr+IpkMGuD9j8UaT6PN8S/IF9mvKi4ag0G\npVn9\r\n=PulS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeTocobTkGgAdGi59pdnDOR0ETO0wf+N6wOtfI2NBjhgIgEWuKu510PAtDPWdlQJB3KsdSDC9O3jB3vNyn6UyD4h8="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.3.8-5_1643562677374_0.2270509394151068"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.0":{"name":"@admixltd/admix-component-library","version":"0.4.0","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","chromatic":"npx chromatic --project-token=4fe58e2fa4f9","chromaticChanges":"npx chromatic --project-token=4fe58e2fa4f9 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","classnames":"^2.3.1","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2"},"peerDependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.15","@storybook/addon-docs":"^6.4.15","@storybook/addon-essentials":"^6.4.15","@storybook/addon-links":"^6.4.15","@storybook/addons":"^6.4.15","@storybook/node-logger":"^6.4.15","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.15","@storybook/theming":"^6.4.15","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.4.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"4.5.5","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"b5c71534696b97d4ae5f531bf8219340e9436fab","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-O0pppKWzb8pF5F/3gLDRHmimTySdKBjwbDAiQPYhZSK2njRVydoVb9tNwoNZ5J4sXe9ni+jJrFZv2Inuv3DHaA==","shasum":"9fd6d2aad070e8685736d943db2a804d16d56bb4","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.0.tgz","fileCount":74,"unpackedSize":12399649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9/z5CRA9TVsSAnZWagAA/0oQAJ1HpvsbaZtAu6Bcl4TX\n6w1+voVPNBDDkbfY2aMRJArh0BEhpgScpZNnc3WdhAcnm8LmsnoZQskif1Ez\nQSFCl4F0b4EQxy6N9UtA90C4qira3OFQXbCe9/ITTlSNxaA7K/oZtOKAvMe1\ncLRZUg0/l/evEhP7uckH/HN783q5dt1UvGO4iFYvTqo45bLSM6ePzZlbNS3O\nAs/ZKND0C2JqO9b+/7vTW7au6g91A2zuy9igvcFvlCmW4FjU1glgpcoDRMph\nZHJTtslNr2Gz4CvPReoz4vY2JfTog1NS0h/mWM8xtsXBS7cynnBedsBnb9Xj\ni0eF8iZOctcjShUkXsJQ8wYuas6SvPQPywb1mll41HTis08m3NGcBe/+EN9i\nfxHTMuNkB1IJvCQrZ1JhSVohNLKoBXXZY1PfAFjHADvC1h5/Sd/HME1r44JA\nmdKjhCCwqjGPR7P9OCb7P+W5aMwUX4mwQo3DPlaSooU20XI8FbSqJ7Ks1Nug\nlAJoRMQWlv63KGvcDVZfhh/HC68q09OR5+0OWoWiM/T4Z/zTUWyE5bDTk4iE\nYUnKO1+bHBws3RL0okQ6cTNdGP50MAykODB31Op559aGrIC6AxkVNmpkrR2f\nWYeKGznbxayhAQuP0TAAbzNyd7DV5gX1UnycWLQgrm0cbz+9fq5y8dDFimIp\nqZIf\r\n=ZnRB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCim3LNWHo82v2Hi88n2UJifDCMRb6WSvi5WqbiWnKfngIgPrNqWGEoidp4AN08VoumxbgobH0+SBkqFFLjJY19+OA="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.0_1643642105365_0.4677138645294401"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.1":{"name":"@admixltd/admix-component-library","version":"0.4.1","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST=https://services-dev.admixplay.com yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","chromatic":"npx chromatic --project-token=4fe58e2fa4f9","chromaticChanges":"npx chromatic --project-token=4fe58e2fa4f9 --auto-accept-changes","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","classnames":"^2.3.1","http-proxy-middleware":"^2.0.1","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2"},"peerDependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.15","@storybook/addon-docs":"^6.4.15","@storybook/addon-essentials":"^6.4.15","@storybook/addon-links":"^6.4.15","@storybook/addons":"^6.4.15","@storybook/node-logger":"^6.4.15","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.15","@storybook/theming":"^6.4.15","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.4.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"4.5.5","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"efd0b1c9adf8b9f40948d83dcde19aa76424fe40","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-3KEvZdeget9b3O2HI3+NWreUEsw1nogfluCD4SZzgPAbLe/ZDqmoOCHeYY98oAxmJFTiy75nD8w+FMrh+5Hpxw==","shasum":"eb82d90cc073f12f0c48805c3519af0d68e077a9","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.1.tgz","fileCount":74,"unpackedSize":12398538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA9aNCRA9TVsSAnZWagAAvokP+wfr/dAiWAlCnADhQlgK\nbRJXP20y+/4H+evNzZzNGC17AyTXlela7gnBdjMsvG+F4QMBayzIrWKJJuh5\nY8Wc3bovkUSypChHjZX/0pxgZjLLNs6ppDOFJ78if4LUHWqbK4oZ1NKOx45S\nd4bJkpzhsYKOIDdnY0SxuvoF08YvQOBOZeGp+w6K7tn0OGIGd62YtGjjMvK3\naBP+2k+bFJjayHecM4AAif43SyrpGhApjfDnX3ZIX/NQfotxvj82ixcMaam+\nfCqOOth5ZQ0iGlmmN+rHsYxp0IhPEAAezm58gwoPpEpj7g5CVg+WOdTPje/h\npFCFkKl8Uhn02f5HBB6ANdU52IdtZ0vbdFwSmBCWxc8DwcZulX+sivTryBke\nwt17Jnw4NdeyOs7mofv2nrVh/jr44SMDumAlPtd53ftEXFR1v5RkNdqzLARb\ngH8+SM0+Vgs9aaOGh95/LkyFUHaaMjyBsTw+4Hwroe7/EJ1VuUdnIxVBF0jV\nZeNDpXq5fAhKOPNTVkEQy9sEMbZ6Y+/uDHRRmufs90AQ5g9dZoooi7xDy5Ju\niB2MsA0jnFPYFZJ52sjTgFKcayi7Gbl0S0vMywUBeAg+QTSPMgV1Nmuz/kYY\nUMJy7uf9k5PDNg+CdDAfxzy/jvdtsegr5FAdvt6+9LXpQdrw+O8XBWOrbSRg\nWP30\r\n=89N0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbF59e2hEMBhvKcPJvXOaijg5+rrMO7nCznIY0RTL83AIhALMoQ+qvMjD9L2KZP5znaRjiWjHRb4Coxepg/0zZiVxK"}]},"_npmUser":{"name":"andmev","email":"tuhouc@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.1_1644418701734_0.4516913637538513"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.1-1":{"name":"@admixltd/admix-component-library","version":"0.4.1-1","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","chromatic":"npx chromatic --project-token=","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","classnames":"^2.3.1","http-proxy-middleware":"^2.0.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2"},"peerDependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","react":"^17.0.2","notistack":"^2.0.3","react-dom":"^17.0.2","antd":"4.17.4"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.4.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"4.5.5","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n\n## Usage in your project:\n\n### 1. Install dependencies\n\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n}\n\n\n```\n\n\n```shell\n\nyarn add @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\n\nIf you want use legacy packages, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\n### 2. Add Mulish font\n\n\nTo use this library, please add Mulish font to your project\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<script>\n    var fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n   purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {}\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n    <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'import theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n      <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n   purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n   export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n</details>\n\n\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n   \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n   \"react\": \"link:../admix-component-library/node_modules/react\",\n   \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n   \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n   \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n   \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n}\n```\n  \n### 3. Use themimg (described above)\n\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n   maxSnack={10}\n   anchorOrigin={{\n      vertical: 'bottom', horizontal: 'right',\n   }}\n>\n   <YourApp/>\n   <SnackbarUtilsConfigurator/>\n</SnackbarProvider>\n\n```\n\n### 3. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\n```\n\n\n## Chromatic usage\n### 1. Add Project token to:\n```json\n    \"chromatic\": \"npx chromatic --project-token=\",\n```\n","readmeFilename":"README.md","gitHead":"2319a93e8f6e8fdb03f6a55cccb262cbf0be7759","description":"","_id":"@admixltd/admix-component-library@0.4.1-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-oT7xpAVOF6bYULBmeN+cOVDqNivQNtmDScaerE326QYAHerM8ecI87AzptC23X+iKYi58GQbYqLY7TZbESsEmw==","shasum":"f12afd58fef81b6f12356ed7f43b335a8af6a3b8","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.1-1.tgz","fileCount":87,"unpackedSize":6406814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBweCCRA9TVsSAnZWagAADvIQAJJADWS/i33IKHG67hrL\nfIhXa6nUkynJZnbhahkeZxSM8GKEAOWoQ6ov/N25P6Qw2sSlMEqIYlfHrNoo\nXJjrj7pzHHVI+DjggncA9njKjb4ih9+b//qYqzxBHZKYKu70Zqe89bcgPMgM\nGtaEKNvzK2CgsLYymVlaWKLg7PksxGSN3QKq/6ulGrt68cCBLEf6BdYeHy+k\n/xhsjVgeKDmaSHTmv7vy8pdRiaH161RsKoHk0w7pCgfHUtn+6ArRvLiZzWDQ\n6JQNnRPycUVs2ZStEHB8XgNT3cvB4ljhr5gHucLCoeDpnFW7Ef8g2/jk17Qe\nwVjCUe9UFinV874Bw9CkpABOt+W1b4GyA76NSEeV3xjPn7N2WxYvzUNudm3I\nWGihm8/F3itK5DUSEwyDLCD8IiFeJqg9y6c2qo9/H4+jSrcffHR3As9LkJPk\nHFrvnNXXM2Ig9Gcznvc8h/pTG1VnKoYcyH74mS0OOXmAjPCx/cCBXm9u66+a\nR4AwYtqLwo/Pjt11+yWjn4SeJfPB2AcyAWthNBJDiS5e+EozI7KcD0wIE1UL\n2B7wQvI1r+N87zcLdKpS/P3YdPac3kwMe7ItMxIwUSM9beW5nQ5aUxhA4Wy+\n3C4XUyMJefcUGxdw1lCaNmDdWNRfYsfgPPt1KyT4mN/sllIGT1VmRo44GKvT\nPqdK\r\n=vu+x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCl6YNEUX8LN4SOPjJPdz2yWaT8/axbvhsbGJ1afJs7ZwIhAMj0Wfxw1ih7wnepxejWCb3M80AFIOyoIW+fWwPgNmAn"}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.1-1_1644627842702_0.8494069046563242"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2":{"name":"@admixltd/admix-component-library","version":"0.4.2","main":"build/index.js","module":"build/index.es.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","classnames":"^2.3.1","http-proxy-middleware":"^2.0.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.3.6","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2"},"peerDependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/material":"^5.3.1","react":"^17.0.2","notistack":"^2.0.3","react-dom":"^17.0.2","antd":"4.17.4"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.4.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"4.5.5","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"28b8bdae668f978f666dc46bc93e6a8638c33e7f","description":"","_id":"@admixltd/admix-component-library@0.4.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-w9JnnewqN9oOmNJBu3qVOfK0XVss9+h5CPJyB7ZGIkVskEJq+wMJb50A1yrFGGNqDhvR2c5CFa/hPvUos7viXw==","shasum":"db4d3e7e5818aa4021d9ff5b02f09ce8e15990b2","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2.tgz","fileCount":87,"unpackedSize":6406763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCngACRA9TVsSAnZWagAAVLUQAJg/ra1CJIfR6Fnxrp6b\nUodnMLQhNGgOVmpX9uuDF/xfydGIBalcrFwDXpVvfYSUd7ER70tEORcfsuiK\nRtkt75qitD4j29ue12Rj8281+H7F8ToblEQOiQ/pJFcQOE4Pkh/bTAYze6w2\np7+/DyONi3avWqJE5pPpXjLmRSCpDsASeZiO74SXPnUO0JtPTNjrUfzZ5iru\nDpugqAR4BLepIsYQsnK4JVVENPwOSrr7xBx0FwUOwrVXK6SPLrZcpDH+DL4D\nUJ35aXKCp8JRyV9/jAfoNH7NqmxZwKI9kDNM3YcKJLHYwUEl/WQCarrrwmeo\nNY1kcBQY0D9bDaR4iMpFy+GozwZWUm+OWgxa+173NTUAgv2nUNTwzMEWD5xJ\nSJ7wzVpPKBZ4braInai6VdxE9BzZfu2WPD4/ybRIg395ZG4O7YdMvq3ggA7k\njLZAnHSnf0u/hpabuVD2xZO1oDWA08sYUmHasenUz3mcYZtp2uZ/lVau4AvW\nptW+w3gSbRNAAivZVVLDvDCqVUta0FVVbTyU22Ll5KyodORxqbY1ebvUDX7a\no95zbedVcsLu2FruRdOqq4h9TywCJthL7M4TqoacYSD2dYHOclwZpFOTroa9\nFkfryWdBakgU90VxPVuyYDxaUB/iQ3SMh/SOCodRO/+RSBtRmsWuSme3C2Rj\nBzNt\r\n=RBg4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWTmzW1Y45gdueVsSJqAt9wI0MbydGhPC6EE2zumJ+wgIgP1ODiJa2Wnhj/U9v5Zr/wXPFtYaLD4LVNsaR1B8sTcs="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2_1644853247833_0.9647930467875356"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2-1":{"name":"@admixltd/admix-component-library","version":"0.4.2-1","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","classnames":"^2.3.1","http-proxy-middleware":"^2.0.3","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.4.7","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.6.1","recharts":"2.1.0"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","antd":"4.17.4","notistack":"^2.0.3","react":"^17.0.2","react-dom":"^17.0.2","recoil":"^0.6.1","recharts":"2.1.0"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                |\n|----------------------|----------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library |\n| `AuthWrapper`        | Makes child components available only after Admix authorization            |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                      |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"18db69527f8b52e1d0aec92f1ca951fe60824a69","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.2-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-eRsI0MTuQtacUR4hvN8kTTUXOUwHgs3dj4jelkus54yhvvEJ6JIX50UixRN9IlSErx5HgmsszKAWk9Mbn+grog==","shasum":"375be56155f6742cc53a7e37f791834c09228ed2","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2-1.tgz","fileCount":128,"unpackedSize":2211140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIWggACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqfsw//RmPSHGUv0ngWOc2o5cGXRyZ1sRIKCt0+ClDX2VY8yog1f0AO\r\nu13EZcSitIGdNQ97KAnfTzv0c0cJjv487tjVY5NB3fmrE1ElaHg2rSwfONox\r\nJLIOD7/2pJDf7opMmHTAM9h5mFN/HfHjWhluu9g20Wkj2x0qULdW6Gdcm783\r\nk6MHghPqqAB+/j5bcxgLdg8/T2abU0K8zybuzdugHII+tn50kVPl3biRW1M6\r\n3hFJiXX9rQJPS2Hq5HdJJftb3jQfe31pBQDoeXKquEB6jauOAo+aZ2G21GhT\r\nXnSpB0QO8WX2nC94qxklKF7AL5KVUUYco+7drIkc9RXXk3MXVFmhN6bzL+Fx\r\nAYj1byAOl4jIly3GEGyQCNy4n05WdXs8xHtqZ/EeWHRa3PeqOPTovCHRYPGQ\r\nD8SGqJ+GQU9OtjIjb+2/hxWUpmENHbWQzFW5J6hmzPNVESQVBvKz+Hve9VdP\r\n+PT1tgbTpsgZZ9BdAQpMpcugrD04jdkt9Da/XBe7wIsRshwI/Jdgqp1DtTpi\r\nb5SOftL/U5dW8yy46VNPUz9RwHFq/4fru9HgJViEHcMZNhG/cnNV6dVhcDxH\r\n658fyukVs/Fh3cLNhOyV5JSlmEs9nrpkaoU77F+D42UJH4TFcFMh+K2MF45u\r\nnSCWsB9Muz3wGHkakDNMsUzh7EhmU4/fP/o=\r\n=x/2s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6YJE/pDDL6Lsx5SZ+9kgC7h86SHLkolipAg9Y6gDxyAiEAukzqbmIQj2aTdV+SAbcKD7OrGKS1WaxnP156rm2/0r8="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2-1_1646356512688_0.13923444619794356"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2-2":{"name":"@admixltd/admix-component-library","version":"0.4.2-2","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","classnames":"^2.3.1","http-proxy-middleware":"^2.0.3","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.4.7","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.6.1","recharts":"2.1.0"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","antd":"4.17.4","notistack":"^2.0.3","react":"^17.0.2","react-dom":"^17.0.2","recoil":"^0.6.1","recharts":"2.1.0"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                |\n|----------------------|----------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library |\n| `AuthWrapper`        | Makes child components available only after Admix authorization            |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                      |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"530968e4af875bb33cd8f365302f75531636fd64","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.2-2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-7qgsnYwbDiCgfd5C1ZBNe1+6F7P4FtNKFx03SvJ8dpLbxqzRUxyp/n9eZdYzLbUkfL7PCAUtGhso+ReOxEh74Q==","shasum":"07ae29a459960b5918eb23b865e8989ce9da42f2","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2-2.tgz","fileCount":128,"unpackedSize":2211745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIW7sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOyRAAkGUJ4LL/wdDFOApXthsFIa5zSwtsLFH4/1m78yZQREKST3IE\r\nEMQAzbNcGGhsup/5/Rj1pdTuhN4mtyEY54bLwPVnjCY0XiG2la2szXmC9wPb\r\n3/69qx/Jj2vS22q4SNdlvGGjV2wPt5aJ+ntDaGrYROV8wjAvOI0ZfjSiHIw7\r\n0IJgUc0xAY2sZsB6L2dkTTv/9oX5UO53n1GrgVL+5znRRUm4WP2y9F4yBP6j\r\nCf1YMyxSG9wpBIc97t8XZQVyzNKi5O9JpeCUQcahIQ9g/vlxgcr4DhDez5jW\r\nxgGV725N/QenSoF7ndlqFdjEwjvz5k8KWdpzG6csqIhuK4GIWas0EFmaQEqD\r\n9rLTS+PtmDCgIdAVRefYtyKAfggPWg14ktDeZSovVw2sw9BDq91ITMgSl/Fs\r\nZuS9gZSOrjEsTjGQQJvVFgpYOh2TyVy4SYC3hVluXOU4cl510eL9SBAc1+jx\r\no1ivMCFkWrPe7AH/ANSnX4O0icp64/PVsiDZx7mTIIhAc7HA2ZS9Z++5a56T\r\n67UOyx7QIsdbRlGD3OgUCt6BVpIZhE4/skf4+EAafFkkAXEjrs14plFdZUI8\r\nGL+iWNXrFmySA7AKf2zdiKSgKVUhHL+Y30bnyg3SA/sq5L9aXiPeApC7wpLd\r\npXIvMwVru2LY6wD9r9fXco3ql3dr072TOBg=\r\n=4tx4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6wTQ+DHQNqlVZN5ICGDsVfCRZMSEDTaCgqhf+qcCrDwIhAISBzJ9o3CC8HnYS89Yjjh3imiO7pUO0RfrTAPnuoXDi"}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2-2_1646358251911_0.5891947694343924"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2-3":{"name":"@admixltd/admix-component-library","version":"0.4.2-3","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","classnames":"^2.3.1","http-proxy-middleware":"^2.0.3","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","polished":"4.1.3","postcss":"8.4.7","react":"^17.0.2","react-cookie":"^4.1.1","react-dom":"^17.0.2","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.6.1","recharts":"2.1.0"},"peerDependencies":{"polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n  \"classnames\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                |\n|----------------------|----------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library |\n| `AuthWrapper`        | Makes child components available only after Admix authorization            |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                      |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"530968e4af875bb33cd8f365302f75531636fd64","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.2-3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-lktGfM7FPOGcV8YpIh/92o0+eR6k4lcaMKBcRzuE8s1mxVi0yEQ7SC9lFnbYPV2AwtKnCWjMODaJ6SO4GTKUVQ==","shasum":"d374a25910f82bbab877d80024caa162ec7e4e4f","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2-3.tgz","fileCount":116,"unpackedSize":889979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIXpuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsMw//UUB8NDetA863xAyHchmiv9TqqB/k9YSB68Ywta1nG1yOF3m5\r\ngz7zkxqdcdjqvHLVIcZNy01MrI32v4XOr9dJOi491VR9z9cWTAzNry34vUOd\r\n22M1RazjwC4LdW0UZbSz1jn7RQBYdp2eCzJ/qGf/VGLaLhSXwAaYGUM7NnOD\r\npimm/O4jK6WScNl6eF2orbzRcJFQnNXYkB73qPA8aNLK0NyuU2rVs3Jkk3yY\r\n8/wLp3kOUhHJZEg/FOi8B/6jI2o6U+wS8/kI88p72OiZQ9KfFBrV5qI51qv1\r\n71w6f2OlWdWmQbLvj40ut1ASXCxYE/gaXYoOBb7im3UW0sGiRaDVF7ik67lz\r\nns4t/7cLdJ+Q9AroPCr2dz/W+ePV3YW3uJwfUa00Ftl9jhszMybKLD3nAT7e\r\nK6TX2Uojqoo1PEAVEA9B0vGiJOJ9V2V2cOXkWGSmMy7L0tq85J5hHWrOA3I5\r\nFaGQtqhJEm2PPXX7SvAvbGzgnXHuAdk8zUPOFwQ+5HxeRlX3v/ufxI2WBJjI\r\nqwpK/KrQmUYulH8BxCFt6iaX2zmwFDJ7+ZMTD+xEDtI42qRC1mczZalWEpFz\r\nehHqRBXa4+WzyCSMueIcRopB2CCHb9YHo8qy+Cxg/+iu2XbIFcDU1jdiIiat\r\nJ33kRiL2wdnYQDgv2d8Yq2npNLHyhFUFRUA=\r\n=efhK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXrOPJArLnf3yWe+nslQ8OZpnSX3Zdh9U5HPG3R6eklAIgd4Zz5e+cMpvjYPTWC7O6W0AiFaMXamTbDu62r9bYiIM="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2-3_1646361197964_0.9927251314506802"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2-4":{"name":"@admixltd/admix-component-library","version":"0.4.2-4","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2","antd":"4.17.4","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.6.1","recharts":"2.1.0"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2","antd":"4.17.4","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.6.1","recharts":"2.1.0"},"peerDependenciesMeta":{"antd":{"optional":true},"polished":{"optional":true},"notistack":{"optional":true},"recoil":{"optional":true},"recharts":{"optional":true},"react-window":{"optional":true},"react-transition-group":{"optional":true},"react-number-format":{"optional":true},"react-cookie":{"optional":true},"react-input-mask":{"optional":true},"material-ui-popup-state":{"optional":true},"@mui/material":{"optional":true},"@emotion/react":{"optional":true},"@emotion/styled":{"optional":true}},"devDependencies":{"postcss":"8.4.7","http-proxy-middleware":"^2.0.3","awesome-debounce-promise":"^2.1.0","@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n  \"classnames\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                |\n|----------------------|----------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library |\n| `AuthWrapper`        | Makes child components available only after Admix authorization            |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                      |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"530968e4af875bb33cd8f365302f75531636fd64","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.2-4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-xoWRbDZ7m9aCVGVvzIea+x1bPSiso+A+/q8zZzof9rVvgMgfmTnY0OkIEBoEA9eIHghnCfPx86hk1n/Bvf18IA==","shasum":"6b6babc6a51408c587622e9117663ca3e7f4f9ae","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2-4.tgz","fileCount":116,"unpackedSize":891021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIYFqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpgig//SkwoYEB8gNphyxK7DdF5TgZBqGWVUUL9KP5Ry1mZP6jZAVfk\r\nhdEDud2ZRFVNbGO/FKHov04EumJ+2lueRR6zL/KQiIIpRNMH+wdQYEWglzXm\r\nDcPdx5vFJAC8XuoB268rHghGjt1IUZwOqcklx8TWXpBBvBEvwi7B8kQnbbI1\r\nq8eyRuR9W52nC+cJg7tcnAwDRPK/lwKfAl6rfiCAfP9+f/VhxY8YuN8Et+GJ\r\nBgUb37JySdbf5ZS64N92KdY8NeWJ1bwDwyS+YnJUCImhfqczbEbuE6AzyJcq\r\n6f9Sb2xBhClJ7hVBRiZNUeE2PpTGU+8kdW2epVsISpi1G+JfEv7llHY1cxa8\r\nRLaWETDSHYGNRzmhdc6msLDPuyaWFGHPWuhNXMez/6IxUcjwDL4PANKg7DwG\r\nevFbqjwirs9FEJjK4qBDXLMjWoP/Kp4X+naB6tyZ9t/ddW4JZawX9R2lftNH\r\n5VO95P1IWD+kGpCK/JEWbSx5wGbbPSogCQGG6TWGEkVI0zN6xCwaPcBU9POC\r\n+hTyVXW17ftANGvW2NCD/Gv1glrEuz0VA/ZHQRGHsD8e+1jlzvAxjVZZSi2f\r\n+JkhycXM31hQTl4DiN0ngP+0wJVkTX0I0YpVdat3Ao2s/21r0fwQJdUenHC9\r\n7B8QWIvB9eIg/Drmp69WJY3u+PU+8hEOsBY=\r\n=ii+c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfjU40z758IVD2AskLA85W+aKDeQk00ajO82vO4R/SfQIhALbedgLI+Ucnnov4+HU7tuRclh6gKNiCKG4BLzCT5DTW"}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2-4_1646362986590_0.668468796003443"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2-5":{"name":"@admixltd/admix-component-library","version":"0.4.2-5","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","react":"^17.0.2","polished":"4.1.3","react-dom":"^17.0.2"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"antd":"4.17.4","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.6.1","recharts":"2.1.0","postcss":"8.4.7","http-proxy-middleware":"^2.0.3","awesome-debounce-promise":"^2.1.0","@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n  \"classnames\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                |\n|----------------------|----------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library |\n| `AuthWrapper`        | Makes child components available only after Admix authorization            |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                      |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"530968e4af875bb33cd8f365302f75531636fd64","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.2-5","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-aew/TbBW7wGOD0muxCvyPrwyDc1DGsvu1kK3EXajZ7DYhRmC1CGDny3EG+iZqe1yR5Kbr1SHrbr3I/tVZyH9Gw==","shasum":"0281f60a2652bd0a4a052e06a9fd36d2ddde80f5","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2-5.tgz","fileCount":116,"unpackedSize":890079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIYL0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4ig//VqbFqodC5I57A/U2XAYIoR3ozG5jHgjuxKbbkcQ/9GzMRewm\r\ncqaAT/6KH8cJKr8L2lCm9RAVGy2PadugI/ZoisV9kIP0nzz8Jl23+9pEK0Eu\r\nV/J9W/mD1mYP5rmPReu/TYu/r2BwQVWKsOo4qLWQLUNg44STrCtZuI9ZOpT1\r\niZZUguugGpcwph7l3DYGnULl3PEnfEYrXmEXW1csvRTsv7NRDSpDGiFXOafM\r\nMX7jZMWRNsK2FVT3m445p+qaU6vF/1bbnQZC7PAqsv+hxdA56cK3hIvId83s\r\neOEUWERk0p+Z2/ypdXi5IZjoMtwUzYx9XDt2f+aVBvlYaF0w+K6YM/h1WA26\r\nieEaLqa2WkrqScGHBvTFPFljVZPH57kEKToJRt1njzL6gOi2oQPXjfp7tzQ4\r\nU5RzQqMMwuYrhldj0wR3AQnFpYN/sx+J7Vy+WewU5YIAv3Yq/VUZkqJBUghz\r\n9uElHSIfO+FcXHSz+TPO4MFfDZqHg4quXyirSqF5OZlm/Cpyi3fbZqRUvfJ/\r\n4/yQ+grVNyNztiWH0iH9BkgOsvkHf2/TG7EPtF88NivYOZg+23IqswKFHgO7\r\njql7uhdN24IkpHgaY1FF5bnJBfxldmP0af/oX9ym+jUyTk5w/+ShqZziIKAh\r\n/b4q4aL9+zWy2RaC5pu6+5tY05zqv3VMJco=\r\n=rUps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlH73ICzZVc+0RaprrhkMzKCNCMWCL8ZvwvLMjVX2XBAIhAMVwB0jhsaXvRbS/FG+lAKGFidXxrigKvlls2xsIdaft"}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2-5_1646363380705_0.9894390842417522"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2--":{"name":"@admixltd/admix-component-library","version":"0.4.2--","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","classnames":"^2.3.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","postcss":"8.4.7","prettier":"^2.5.1","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-scripts":"4.0.3","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.6.1","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n  \"classnames\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                |\n|----------------------|----------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library |\n| `AuthWrapper`        | Makes child components available only after Admix authorization            |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                      |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"530968e4af875bb33cd8f365302f75531636fd64","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.2--","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-iisTkyziMgLVVUga+1yPYXPluCLdl8oJougkqtbyNjlPK0+XzAqMjdboJSiTYjENczcugm5WS1v7joZLxTkvzg==","shasum":"2f36e102e1aeddb8e9d7199e784d03d77afdd8bd","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2--.tgz","fileCount":102,"unpackedSize":784783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIehgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrp8BAAnu/E9NgwxqEIDiqdpa6Vy4J0J9GiUapmgFN0wqr5Bj/gbHqU\r\nGExVE3bVwUwGnJpDqk3Yr4LLwaskL0PSf8p3qkScrNj1dnf870XxMwEVj+VT\r\nqewj2lu8w7c3JGFT6FMI+jOfmiX0Zr8E2V/cK0umO+xDWoRaNDWW/RBx6FZN\r\nRxgaKOoAhB6MPJKv2Al16ourpv+dr2K/FldHhSueDz7REmo7/xefQO3QlbNO\r\n8pfapt6GWwm1tCr+HtpSTx66fVDU7Ng+HIWkSz3htzcM9LFygXp1CJXLFAjw\r\nlM4d58xmWs/y5/6+VQxxVzEol6uNk6mXpayRVbVm4+Fi8sVydHRH0hsjWSl0\r\n/kbZpbOsPfoq53/0SgCr83FgcwS6nFGRyPO5YM/V6krc75pWUsfHE4jT0mkk\r\nE3LKnDheagsC6T0gZ7CbFKO5CWjBB+idQqOg5PQlC6voZhi9esJk5PS90EBU\r\nCxpazKZoao0U3UG4W5ijMNNkNz4UwcMJhMkA4lKqV0jv7zMTK6csh0pSr3SR\r\nmO7iAgb5ruxNGddwoW0JFK1qxWR/85TFQlixMSRGcobUgvv3aoCa9ha4ZQlv\r\n9YERcrZ5/uuNjl+t5HVuvcPILyEeDBYHAw9k0aSUI9eEZ9nxvQCUYunTy46b\r\npvzixzBg51D5BgENLkXWP99dR1EMjDEnM9A=\r\n=6Hw1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkH05mZETSozd2Pw+lY9knS6GQeh70P3Vzqr1iqTmfBwIhAPaBHdnjPaEYxgYZEm5cFMAqySGbhQl2n8VUY4+oBr9d"}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2--_1646389343825_0.7724228008073528"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2-6":{"name":"@admixltd/admix-component-library","version":"0.4.2-6","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","classnames":"^2.3.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","postcss":"8.4.7","prettier":"^2.5.1","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-scripts":"4.0.3","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.6.1","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\"\n  \"classnames\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                |\n|----------------------|----------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library |\n| `AuthWrapper`        | Makes child components available only after Admix authorization            |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                      |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"530968e4af875bb33cd8f365302f75531636fd64","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.2-6","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-dPaYJfvpfVyqxIoneHPoB2q8s5FuFNbdfRu1mfPVH6RhB667tLC985UhRn11wjSmwTcuJ0EwGZt07nKkaIIkNw==","shasum":"135d732ef8502f9edd9a3ea995ccbd49e1962850","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2-6.tgz","fileCount":102,"unpackedSize":784784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIen0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWtxAAlwcRSn3pf9QbsuiOnPrT1G8854FWd5CZ+vngi+V8QOaTC1tM\r\nKdWvNQeJP3FDBy2kwKuc5Sw5l8EFC+NyxHeF2bILXaOu36+03tNJCF/m8Ncn\r\nHZ6YiWavnbG1SSUTuiqzUQ+BcAIF2+zJPuaUkxCb+PhrxYsXh+Bsev1GYe/s\r\na2CgmASlvS2vvAzs5UNGImL7lkyYizr+n/nEeMxn/DjyCbzWLD86u6PEiykG\r\nsSFH58CcDWckiOzuvGwttwiV43GqUvw6PAd9+sIKDK/WOMlfZc+wIjLia5N2\r\nu5Lf3zPUEYL+Qq7A1eiJy68fE/9Hoe7pFZbIEXEoI408YVKnHhDsODlZaRvk\r\nQ0NmhiU4UmLSmm8GQjlfkXuUcyX8e8IfXmP3+n2M7+lc2ZgD3E6kAMSfVxfA\r\nlfJm6WOrZOv2VfPGD0jCPSlpNlo7a9g++Una6tgu4XfW2r5vJYg9z8y4kAwl\r\nhYhwXs6448uZvByTP+iE8NWCMWj9sj5a4RMhtdzUMrzvE60FRBvsKxFwWuwO\r\nZFvBBRzTjNvZ2HR2CokSOLUYqpICPU1LDn5TrWCZjPG3B9SleX8URFCsBHvi\r\nvu0eWPyYSZc486VDBx8JL4whT0lzXAQrFL0NVzTKAPWTtAOC5j/VAaaby7bc\r\n/iEy6Bmb5r1WBi1DbWjegidA5Yiz/1awVRA=\r\n=PKUL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEKzoNxmTWNPXdG88w76jjLgjIXIlez0sbjucoLaK+cAiB5gMMTu6b1Jmf2OnGIvT4YkyW1qZo6M87aIUG0L1zJpw=="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2-6_1646389748671_0.9401964897577446"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2-7":{"name":"@admixltd/admix-component-library","version":"0.4.2-7","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2","antd":"4.17.4","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.6.1"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                |\n|----------------------|----------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library |\n| `AuthWrapper`        | Makes child components available only after Admix authorization            |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                      |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"91fddeb93a96f72c716a1de951b0886d4212798e","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.2-7","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-SHCB99pE7f4TGuqQH+diMuj3zoY1T7Rn/WEFsQffup2ZPKoDkDQslHZ+yypC0r51l1Btr41PdPzF8TAeix7rMw==","shasum":"e6a3da6cd4c1fec7d74bfc4f98a8a8440f414316","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2-7.tgz","fileCount":112,"unpackedSize":889887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIf5mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyuA/9FaopFlIATJQssEVIGG4J7PQ3wwfnJxrUTFeXfGe+u1W1oa5f\r\n9SiIz1r14gwuOwRJjlUyJX2Vn14ogO1XaS+vO3fppIru15q5odQsnpkLrBd2\r\nagKKOVwD0emwrXC+vUr1dfJtsq5j9/Lw/Xp2Ye0cJwXVknBhg8T68nrCE2SN\r\nH4AlHzvpiO7vkjseRPH2Wb529rdkiz780G7SrrQZ1k5uYvndKtdJuqUx/ZMV\r\nHXhl0+8WRD0y8R44vV0LwY+v1ic3bR77UkgLIQ7B/csK5fXeZKf6VIphjxMN\r\nUmDgMfTTU2jBKsAsyO1S+7r3Xx/rY2pMZBvgQtYV61+0RYjjYvjYiUELzIYv\r\nYqom+hBqZKkEWpwNzG9ue3nGKzX26Ax3xtI/7jBMOdvoyN049d1HLlDwY6M3\r\nNpBV5OIdUPD/wDMVWfyy/BXZ0mKcu4RcPnmUHs+rcg/3wHLEG6kD/JiMDPv8\r\nDaiLG2f9KAHiPkzKPAeXM7gLEJsS9o7mL5BVEq+Zf6WV8gqSoaLcKX4gpRYV\r\nxf6/GPiMq4sFj1x47mI3dS1Ms7hdbpyLpb3sL85kNekg3+1OSHQ0r4Rv8FF7\r\nOCyhL2/lQ6Nf5JEQLmfGEBweUrjBpxfaoeKqXj09eJ3FJM5UffiGMRqaa05c\r\n5LCW4wograCJn6Ostkxfs063ONaKZERV7tM=\r\n=vwvv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqOUTvyooUEgZmCDdkI3jHnlHgqlmnX13eutCy5wzD1AiB5b2KrrKSp2KXNVCP//F7G24cfCsCAUAviVdKNzcsPdQ=="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2-7_1646394982588_0.2516843003900886"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2-8":{"name":"@admixltd/admix-component-library","version":"0.4.2-8","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2","antd":"4.17.4","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.6.1"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"96e9a8e6324ae1f73943b605b4d966586a7aa658","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.2-8","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-QBQvEMvcpWK7T4F+x0KsfxNDdEFsyCgjuC18J3LO7CDSlI7Bk5cHhyPPPNtKzZNBtdj3GayG2+kuVDMSg/2PRw==","shasum":"32d798081f15bc029c4d12edb7e16d833aec058b","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2-8.tgz","fileCount":113,"unpackedSize":899577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKinQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo29Q//QMSyDVh9zh0wh+QhFP5D5sHPFstRptJ7Qrug7ATfRPXeuhFs\r\n5V7iC6Dd8AVjBKw75/TRznIeLZN4dQh3G+2tMB+CtaJzo2PS7WC9hp2GXaTn\r\nh9IRNw+yvh4SDoR3V6TsAZGp51zRJJehz+kNZ2wcC+wfRErfBDB0FRUY2GgN\r\nB4DUHf866OgLosXuQiyFgTYVtozFgidm7tqURtEw2nEb4SJT2tGwvSX/gU3E\r\nIHavHUtNGuOonnwzSbZE08CVGbGyp8M+aswmCMzKqUYMUEquZJcs/7bqLUdH\r\nJKtZr/8yUXbTJGVGBZY0j8d564YKJx4oFCpkAoN7UYT/kwqMw64kmfnBngxR\r\nTZFZxA6Reo4/GKHT0YRk7JfKG+5e2D66Dv0Aes7hqQbZxE0xwW5YxQfcZk5h\r\naSdpO/9qem/9a/wV5UuOZsAG2Y+yknKkvMNa9KQFivhULDh/swmRtSZvzFpo\r\nW8htZN/Vu4JoaX5420lIoKJ9JkzfCpfL6WgkUje0qBqJTCY4e2GFnLB7h0nc\r\ns3E9Z5geitz8VUpPbK8GCk6RapQFpe7IaaXI1/CTYhZTrpJZYH2G8/GwaqYj\r\njDQQ2KmZILxtGAodPbwd1zl/76Wji6VELY5SDTHHSgv/3GTqvUKcQWL9yCDp\r\nhgj/C4po1hRQTYwYeotXoZBiW5mAThuhlSc=\r\n=k2Sc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3nlBjszP44QdnQpuJkmB8X5xrNB6UCOKvRPU3FCbhHAiBTqucu+yioRwsyHH4ht0BOIjlt2oem7PiQ0j/gDs7s8A=="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2-8_1646930383843_0.38955120360243467"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.2-9":{"name":"@admixltd/admix-component-library","version":"0.4.2-9","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2","antd":"4.17.4","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.6.1"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"73baaf23c6b29b7f79e2eeadd5d17145a318fd20","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.2-9","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Pu6xUygG0HmzNys24OG4BbCV2qDAl/fIQKdayPSTUFxBX+k6EDPWY3Jg2NBFiyExemxXJEbl5FiGvJFDsbRdCA==","shasum":"42c42c91fc8ae5925a854a56406b157d41871896","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.2-9.tgz","fileCount":113,"unpackedSize":901002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKyMbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpt/RAAh+crNP8a9Wyb9UY/fCJ8rgqapT/xMoR7Wux+B/BOMIDKKdmw\r\nB4q3T9kpN3yWrKWy8VxITeYCGJRNko3okXQrfaKk0xJnVAuhMY8+5sGfpVqa\r\n+0pwMWunDU8SBXroyxtCbcFENOQMn3TcGiLiG3WYYhCcZhuaGN7S4OJGpo0c\r\nIBIPOKiI3ST4Fgi+i55d9cUAusdmsMklAiKkaExLft+ufYtt85O4HQQesNex\r\n9gMKEks50qIqWiRI2uUhdt++80SJcRpSfmu7IKk5fq8BKzQH0sYB24P/UCFx\r\n3ciRoX3ETpmtMKtagR/D3WPsnBUKO48ERUrIl6SQDA46DQRRuzV2WP9Zbbn/\r\nNCLO9Bh7TVMg5xg5xNmbiW8UJ38tyfsq6HSrlpvmFCiJ2LXAjV9HWvVh2cJ0\r\nUXRTgKDfV3VXgyyAj9OL6x4CDvTsN18AT/3Gv06vjeDkF7sqdO15lWA8PnSJ\r\nnVkdEp12Z+U0qlaj/I7K3pslNVJbqiuyhDH2J9BkVVnnLdm35HfkQJ0cRC8a\r\nHm5DOrS95Q/JbBP9x++5fuTyk4i7KcyrAe5zu8gTIh4wHRTdcXunwBRqkY8P\r\n5LGWox4bd99KCek+fhjMwqNLouwV4xrE+gpQNOasy0IGTckPBHmLs9dU3WsW\r\nJaXN9b66Fp2Qn1ib6A2yINqW+w1yEv9uKow=\r\n=21b4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRW1zF6HVUi1P0z/POFQAikjz3cPmRZ5/aMkUkq7vRawIhAKQhI+YvDIxq2QBrufWSsHcR5cmI85MrqS5qEvXLgq2D"}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.2-9_1646994203011_0.05511714412853519"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.3":{"name":"@admixltd/admix-component-library","version":"0.4.3","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2","antd":"4.17.4","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.6.1"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"fcc50aaa4b27f942a8a1150c1a77dc08446871cf","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-FcTuppWQu+BQ9w9IuNeNQDopT2W1trjg6IAVpUj0qJpqa3KlR9xU1svRvZ4k/hiKBvC5+VeN2IvEBParQrz0yQ==","shasum":"9b201d420d98e8ef06b992323fb06ebedcc00d5e","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.3.tgz","fileCount":113,"unpackedSize":901000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOu0jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpmQ/+Kxkqo9dmtdLfhISQFzP8mW2gE7euYvEWzTuMiUcWRvTBpYF8\r\nSEx2djEfAd0Z3sOOsfnPkTCSEiY9JEDf+UDT8uggcGlN05VqlwfP8BoarIg/\r\nzMRGVSk+xiaVspoMlBbpqjn90nhgij/03r+jOx+3/Rk8+ptKPKFBX2y7IRVf\r\n5L6rjkZ5bPx5+Ht4Ovkr2JT+8ZhZTT5aCNTtcYIky6YPM+o3zTMZyBJHnILW\r\nMCUNOZqt5FsoZONTo1wWVbsGlJukW9SSRv0YgBJWCTxXKFUGrCe8OSQz1S5q\r\niikV5dujpqaw1wAU7gzzd3b1TmrHjn3+Yb38gmqEqFzSrxIhOVi8i/BXC1ax\r\nsF4S1KN776fJpF1sNAgoRIZNWKd1b6yRDndy2VQWRZEEHAnYGcwWFjdxfs6Q\r\n/2zYVu9pl5UDN+b6X2Rc/QRmfpVwYtNM4S0oA89W+oTj/hRBRBlQBP9uX7NB\r\nVSO5Y7P4N0svf9cW0uviVskbZ9mZ7pMjbRDdAeDFfFVH+0q9+ge7vQKHovdS\r\nTtOpnfm+qr/AQBcLsxUoXtwlIaHnLSrjB1L4tmk+0vU52UlubJ7uyMkUUVZT\r\nLnGKco9TDUnpfNf5xc3UpqkLNGR58ECIq+kuz33K5vrXqQcIBz2luyALaJK5\r\naIWmEm09lImLkV7SThNKpaG9MDufqOweCWc=\r\n=s1EZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDntDdAnsABn/wRXFpY8MTQulGI/dvvfiZAYTq42SFWqgIgXOYIl4w5iisAu0H7FYtgPxVqRMwM2csPB4bjhXRlmSY="}]},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.3_1648028962913_0.574666838127158"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.4":{"name":"@admixltd/admix-component-library","version":"0.4.4","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2","antd":"4.17.4","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.6.1"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"d3a1ec182b3e572991011c7776852c2ade27c737","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.4","_nodeVersion":"16.0.0","_npmVersion":"7.10.0","dist":{"integrity":"sha512-JkrqfTck8CpP1xNe7lv9O6QdrnvJa9LQfUFW5fRgOT0qWtPEtAv4+TLVR8+ivNt7LHvcV3bdflWVtmWf+uqQdg==","shasum":"cc3a0f3fa651d628320b3134aba7347a6b93487f","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.4.tgz","fileCount":113,"unpackedSize":901047,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGmdt0W40NgKp0zZDROx3ZT8p71B7/RMAmaaUPIiznjgIgUa1BukPpFbiOhM0gkmanypDWEfvmJhdnrkQ5rtKWLts="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSvLJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSsA//dE0pGf0JSLGVNNuV4FPaqsgfoJJ/ZOBbC230Oh35/BOCkVUV\r\nNjA729mWrgtI3EXZjayMmSKiHbGCG24KqpPcdZULFtPv5J1JfSvlscHQZ9BY\r\ndg1N79nEA9Z7mIxutzZNF5NvoymEnQcbj2kQfeSuZL0VdmeJ4LvxY3fyXuLM\r\nQxhyoGdLYEBsBkgSsizIUulS1rcczWhK5Zn+6i8cg02EAsTAr4Kb15qkDnOS\r\n/pV6D6HEEg3ImO3nLnR5FIVPd1y7BVGpNCpXdeuEEwHJm9d+NTjSpYxME5C3\r\naDM2LUi/9oZAXoiyyi73SAE8j3ZZ303+qiTp+2UyDjZDyYJHuMBtsGe6xyVH\r\neCuIDnRTkIBp9EFFs9ozZy7GfJNOJfFSmtUli/0XelfPdOuZ3MwGkFZKzy8c\r\nLCExmuZJrQ54Fpwz818z62IifvIsWrEnAGxhfmhTYxC4kvgLcT7rV0lC6BgX\r\nvUxYxevb07XTXSoERilJZIkxjvRuOed0lYfVEpvOSa7LJJ8NJ+Y0Nhu6kOsB\r\nwRcS/B41UtFvcB/E4o0wp/mlUD6EHNuX9eY1KfGRf+jZulaaHNbd30Jg1z6P\r\n+ZPnFEskmsRswaKIa71OXUM2cRoA8EZUWlwzF5DzermrIcjwLkA1Fv0URY5K\r\nt3JWXKHAlCyh1M91U4gAFHXdTo7yR1b7DkY=\r\n=4pUr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.4_1649078985515_0.26108758809158195"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.4.4-1":{"name":"@admixltd/admix-component-library","version":"0.4.4-1","main":"build/index.js","scripts":{"start":"yarn storybook","dev":"STORYBOOK_PROXY_HOST= yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2","antd":"4.17.4","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.3","react-cookie":"^4.1.1","react-input-mask":"^2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.6.1"},"peerDependencies":{"@emotion/react":"^11.8.1","@emotion/styled":"^11.8.1","@mui/material":"^5.4.4","polished":"4.1.3","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"^17.0.2","@types/react-dom":"^17.0.2","@types/react-input-mask":"2.0.5","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"^2.5.1","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Mulish font\n\nTo use this library, please add Mulish font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Mulish font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/mulish.css'\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font?addFont():fetch(fontPath).then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()});\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"4113576c3b16c850bb79d76b70b4e4662050593f","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.4.4-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-dWDoANjnH2pW1GcsxKv6+ynn0B4eMKC6R6D0wFVqUTL35pWJN0a7fdz1VUhEi6ejNj6vS4yMqWLTyVk+hQ9xlw==","shasum":"3ff7221380df0eb1815c071937e2b0b5145abcf7","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.4.4-1.tgz","fileCount":113,"unpackedSize":903865,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZdPxMRiHYBnZHbOt+KYXu63sn28P0pNQdI/GH1vcxcwIhAIhkoUfZuOxMcLYxLUS1Rd7IAP316Lq5sU/b/lRylAZT"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTBn4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf+w/5AdjwsLn7py9SJue+fU0A82HiNzAcqzYuqdgES0yTg/k9r7+n\r\n76xLBgrkM8LANRol5lc5lZRE5heXnmIsWbJRLtyLs1TBCMQuynHW3D2QyOBw\r\nqM1W51TKM/lDL96gkqxfpNLH2gBHngIfvx4O+jyvMLAw8K7E2ffr9ZGCqlcf\r\nrUhHKzx250jluHiVhuHhUwfRVX4gW/D7zHAOKxNFJL9XH+hcd48jqFWIL37L\r\nAyPunqZW9IEZ0Di0t4ykxL9v8eem2h/dAvOjTbNBbwQguWNfXwjS5ZEPAdgA\r\nZZQYdqq6vi0WM/EEQmd2PZZ6z2Aq2YpUrM+xavGdnYW0Fq7vth4YvDydI+/q\r\n9Rt/eC/JD/u52psSxl1lZ1T5BVGl71yhZTREsxSNbDY8n5wSAEdu4oqYjdSd\r\nZE/qoKRm2Z6/xe7g75/ITkkR25u/Kt46eKaLZqNWvCNNSaDNk9/ejMRNl2qE\r\nFhN1vjzwXoVSPqkaDXJO0gJByXXH9jLinjVDiOCShyA0d3JesqdK0NwxxtT1\r\nB9vOEVR13ZRNc2o3kTpKHiE7EY5/klF83AIZKO6gXL9upeIpj987JvgYrI30\r\nUsQI2Cqe3BR0ZvBOLatkMHFUtr9YxXHgbUPs6lDTP4jru2EPXveSkyrgo/bQ\r\nevvKiDqv7PWmblRMH5FR/rJmjYcvOmwzjNE=\r\n=fyyl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.4.4-1_1649154552692_0.3825025178955761"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0":{"name":"@admixltd/admix-component-library","version":"0.5.0","main":"build/index.js","scripts":{"start":"yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","@mui/x-data-grid":"latest","antd":"4.17.4","classnames":"latest","material-ui-popup-state":"latest","notistack":"latest","polished":"latest","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"latest","react-transition-group":"latest","react-window":"latest","recharts":"2.1.0","recoil":"latest"},"peerDependencies":{"react-input-mask":"2.0.4","@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","react-number-format":"latest","@mui/x-data-grid":"latest","material-ui-popup-state":"latest","notistackl":"latest","polished":"latest","react":"<18","react-dom":"<18","react-transition-group":"latest","react-window":"latest"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-3WE/MLycUCMZDIc+Ory6YG4yHlyFv6dN9I3f7dOYm9hnBg1XhXbwmg/0ARwfJp5/9d2bG1PUriifm7kWQJaw7g==","shasum":"a9d312608a0b4f40b76302c10bddb2e3407835f6","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0.tgz","fileCount":127,"unpackedSize":1031139,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9t/HQpIqRftaV9r4exkpIIDEUq8dQ+yUFES3CZwvhogIgfLCbuuYpzZarPO2J7bL+eyFj+S+hd9J3aQcoVq2pJ6Q="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVxkbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Cw/+OUh1Mh/KkPZdA8fAA0BjZou7qABKxLBf2iU+i7eXalF6Nzqt\r\nT61qfCLDogyFvQuFaTQV1BUEpVLCZhzXTe0zcQ1F4NoMgaGRWYKVZEdb9gaL\r\nZ9V/PAT6YQg6UcScM9TolXOV3yuS3omkM5sCoCqtwXEs7S5RBouT28WZRe0F\r\nGWANEMu/qogNa2zWUTjmURaoGd2wzDx2KZqZnADkeGBC2NqB65oOT0/ncIfg\r\nECPFIGQ5VKeTjgvGWAjGs/5Ib5OMcK0lUkUuuusAr6Exqc1pffFU7fWUsp+t\r\nkvdAE7Lk2aLvpRpGTPFiz9HxQFIwTpSrVtDhPa0xWbo3zNzO1BhQsBhBZmtd\r\nkz+/lF8ACtw7s+6XHMgUGDNgf8g8gmZnEV630Xl2q97nlAaL8c1guxGmXif6\r\nh8KU/eEpngoBGQXQsCezWEh4UpGxUfNLzcf89m/Gvv7f2BN6nko56akf7dxe\r\nPkJT4OgA0D7sH1sRo4hjNVgKv+wVC1GVoquJG3OPnTUgHPPQ/P01bTESq5u6\r\ncxVwRgjoD0wqicki7AouueaRosVZfu7oBD7xTU3wZAe9x/CK+XDKUHRiMlXj\r\n1hikeYBfe5/KjHLcEwahI1ap30iyRuIAk0ayCDT7HacJNNRc8jQYlLFWENYm\r\n8bmH9H+AWC3D/lBbPeFvj6pIB3FVj87QP7U=\r\n=7NOG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0_1649875226634_0.18674200102482752"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-1":{"name":"@admixltd/admix-component-library","version":"0.5.0-1","main":"build/index.js","scripts":{"start":"yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","@mui/x-data-grid":"latest","antd":"4.17.4","classnames":"latest","material-ui-popup-state":"latest","notistack":"latest","polished":"latest","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"latest","react-transition-group":"latest","react-window":"latest","recharts":"2.1.0","recoil":"latest"},"peerDependencies":{"react-cookie":"^4.1.1","classnames":"latest","recoil":"latest","recharts":"2.1.0","react-input-mask":"2.0.4","@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","react-number-format":"latest","@mui/x-data-grid":"latest","material-ui-popup-state":"latest","notistackl":"latest","polished":"latest","react-transition-group":"latest","react-window":"latest"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-xdPQhAzWtFxvQVjEsY6KVYBIqFh0qDv6aybdGi4mr/rKNwSqLAK3fgYjTX85NdolRcQAXhdoxb6UbQaOK014zA==","shasum":"4607abfa79e0e3fb5550a6d156daeb3579dfa48f","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-1.tgz","fileCount":127,"unpackedSize":1265959,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbV5s82Wm+aUx6s/EpoCBWcHvdZPeLKsUSlxDhrZq24QIgc74M5MOYN+nu6+aCkkRp1qvRClT2pN9c9Bfv6dJK3Mk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWUvjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCkg/9HW9tnimsBV56Pgkf5QKEj2/NDUQdP36BZ+xBrdP4FP15Fvf2\r\nCpLLYGkRO7kdfN2+VA5CMMrF8c6Zs8InKNl8n0TUux/f+DnAe8k8r2yZNNVH\r\nDOBuiQWM1erWK6owHveMEv9WeuHISYlVoJ8tHQI4JiOECotHhs1Puo2LVNA6\r\nQagPWarGH68XUXoITaYTLVQtB+roHZLj9Fm4wvdb89q5wSw1R/svr+8kPc4i\r\njYBuK3Anui/3nniD3guCJUu0wxR6V5vKERFv71K0CI/5O7+Bk/TzMfUepIQx\r\nf24gNd45DFmxWwi0Qf91uOSb+OWNGSgw217j6KrJtp18/7eYagW3JLhSHeE6\r\ntbUNsFnOv5Lrys93SHStQyz26GUPvUTOM4bXUDhne3X9sF2hEiL82R27JX9K\r\nfgUe0OVEBZ4LRF6NMk29RVIdIGl0dw4bi/KojqUhioRtxtKQDW2nUKf8FiYp\r\nB14Rc47x9+PVDayFiZUr8xcixo/GkB9UYvkKdF4RpnsosAa9bcIT+gdR+tJK\r\ndcDTn+WupalsriBmYdmkO5BJzRh5Ewv4Ac8ugUOcdPD8bghY+D+8cZ95Kl6E\r\n2D80Oui8jPIUmwQnLxOV63997qV4qxfaBorGYxW7b5ROAKZsrHaAsQzRbhQo\r\nEzCTD4ZlfQKkPO+7SZy0y+vwkmqeoCpkU30=\r\n=6Y2c\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-1_1650019299095_0.880650305615196"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-2":{"name":"@admixltd/admix-component-library","version":"0.5.0-2","license":"MIT","main":"build/index.js","scripts":{"start":"yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"devDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","@mui/x-data-grid":"latest","antd":"4.17.4","classnames":"latest","material-ui-popup-state":"latest","notistack":"latest","polished":"latest","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"latest","react-transition-group":"latest","react-window":"latest","recharts":"2.1.0","recoil":"latest","@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-bwnOJ5tQpDoIJPYFRzIyvU99AamLLr87qnpnpCDIQCg+HBWLDvsmYHP8vh40kqNvn7joyNPqTJakqTuBGLQMBQ==","shasum":"85404fc5ea99b3594962e323b8eccd7080b63b14","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-2.tgz","fileCount":124,"unpackedSize":1132435,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJTBBCGWsFCXCcxfrShpERrfP2ZlPXDEBkeTNCg9sf+QIhAItbrSvXpP7iPp1n4N6UpPmt4BIwy7CBds6t/VU8QeXk"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWoquACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6QA/8DMlIHSqbYSKdIdP1gkU5Nrsc3VeQa1jtbvz7J2tHz6kHJPlQ\r\nrGzGMeS1oV/zyk+ylrYfh+sU5/uDFm/ttpLvLSU6GI3O9SFLkwEjQFkCQ83P\r\nFVWyDOtIdAisw1eEQDJSTsTol6grFLvlPiadIK8/Dt+7xIrFcSvS8X6TuEQn\r\n6wJICWeJRJ2M1HnKdaHos5ocpa83/Vb7JmP0jQyAU4CWtt982oA57ho62AVn\r\n2cvVyYZ0EYQbbA7SUun7C45HRo6b6OCy0h5ozfeGYVGum/D81CS+xtZKQyss\r\nyH3on7ZOc25dQSLKh1GtU7kYbzjOry/SosJxuCc63rWGkr5Dorb3LROrVq5F\r\n8TuKajCD/2jtGuxv1QGipkpzI0PWSycEu5L2Kwbsom3LVbZAhOZGwIY3ucQH\r\noqfslNVsPU0aUrP/5hLBgc0um1TP3qFnE/MJWlFgbRWQuPo+5LlLUcShgcim\r\nOHxv1EtAaVUmRB1RdYia5L4BaHtzWaiJ3f0FDxUBaFYysFFfuiIb97vDzcU2\r\ntxZl1PMuArpK5Qqb9cktx4Lp7DIykytNY9c/vIeTLYNG/eUO0+94LMN51PM5\r\npzuKJTdfpwxaH5QeZchx1Ml5L7pXBSBqa5BC1hSd+Z5m3ch6+1mznmHM2TJ5\r\nCALCVQqlfioz/gxNVl0sxQbDe90J7c4PRhA=\r\n=CzvW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-2_1650100910055_0.028997086378975245"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-4":{"name":"@admixltd/admix-component-library","version":"0.5.0-4","license":"MIT","main":"build/index.js","scripts":{"start":"yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","@mui/x-data-grid":"latest","antd":"4.17.4","classnames":"latest","material-ui-popup-state":"latest","notistack":"latest","polished":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"latest","react-transition-group":"latest","react-window":"latest","recharts":"2.1.0","recoil":"latest","@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ZErJ7/woyaam3Gtg18tq2RZlKYK6vbZ804PuGUR7C0kDC+Fk8RakALA3l1islFOU398LwFhmhJULd7fvqDAElg==","shasum":"14e310616c2b93459c2dccd2d1a3acc8496663a1","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-4.tgz","fileCount":74,"unpackedSize":876728,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl/X6yKRMjMPMTYIonQ6Qdm0TnUbkfmFcZowo9V1ZHMgIgFL9fkB6RCVuw855GjY/qKFgzDbQ8XH6oWb5quJXWXuk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWpuLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/wA/+IJAdNLTac3fF9z+O9BVwaspsnn4XyWHfgfLXLiUoaoN8FJdK\r\nwj8Iz9xFa3aJECb7j3kJu7vJVTJPcMVRDn6Ivpmpa+Df/a9AKkCGpY+u+stC\r\n8UtALQou8QKLh6+deSH77pH6SJn6uISkVtD6lz+gXIoXovVolOSWKr0V8B8z\r\n/dOyp3+Pomk77hXgXyfGv7fls0Yjuv3OC2sywj+kK2qPJTSA/szOfUCc40fo\r\nrQ31FppTPAs29aXSNqwJ8VcYz+g/dZJVF+4C4C101RJynb9xGhiwaMbL0hUr\r\nOA7m3tvjbfu1PcYf8SdRBcsb5QFKNEBQjQz/CYAUoXALywRaKtGpJBtsRmDC\r\nzACuHKlGoAZMixSg9CWK257+AG6NpAC+1oAWfEAxvImUJh5hVuNdXvJv/9io\r\nkujtZliSURg77gDugo7+ayF/mAUSmWSmMX7K+9G1F/nk6AhnjQhoYys90mMU\r\nsZ6HsOKrc1GpUqW9576js1SR/TJSvEdv8ocIVSn4D/kGM915CkHpidveU2+R\r\nTuBJky7wSlU8huDA5ms2lRia01pgdmne9kvTfjbk9Ecz2Es0GzoGzPx1nJvI\r\npWpifABmb7npNOWq+hxoGvnvI6B5SIAUgyPGGnSZa8a8mivth5RZjk63Cy9X\r\nNtXwtYDDT4Y4okZ+0m0GAGjcKGMmNETAhAY=\r\n=pzl1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-4_1650105227629_0.02408897790555531"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-5":{"name":"@admixltd/admix-component-library","version":"0.5.0-5","license":"MIT","main":"build/index.js","scripts":{"start":"yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@mui/x-data-grid":"latest","antd":"4.17.4","react":"<18","react-cookie":"latest","react-dom":"<18","recharts":"2.1.0","@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-5","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-T+f7BDhhxx91HLYVc2+dNm0L1pVr2dTVdG1dWGSeB+9fA9wiyVUv4zzQabu9KuM+/540vFlfxiW3Hd843SVXtA==","shasum":"47e33c446a2c7394b09828923d342144be71e62b","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-5.tgz","fileCount":74,"unpackedSize":876764,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFXFYp6qYIrqlrO6UJuz/glZwe/4/fEo0YELYBgqsWyQIhAMDY+oPJ9MQzqqKP8PrZRHn/wWN53xUGiCJ37Io4BV2l"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWpyfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIshAAkvl2ClMmAhP5pMtEljJ8cqWlZ4BA5ovGSEKLER6IfyzVojSJ\r\niyPaqn/6prpN7xByE9NVZnAStM1S8ccA6IxCyARqyqif5kZDpqExvM0Ma4CK\r\nwoVn9Cfg1DpK6NQ9MJi09OZsSvz2fMdadPzQOzccukVJl9qp1iXRCQ8ylrU2\r\nASnL72dp2/coMt/eFHy9CfxEBuv74H7kU3G+a7V4rRdcmHw7NcNkCviknpyx\r\nMnDSmT75Qc54mYp3Ve1ZBxXG69OAMhpaD3efKmIyZJuwI5t/Npa3xiq1Wiox\r\nKjWHwHHE0gLAJQT3afAI5D3QzXLO3lW7a8yFogbXcX0BK4jm+Nlio0LnEeLo\r\nQ3psUvGxMC2wP8Deesbiwub9M4dQ5zjPSp3mJJBJwSyC1pN6i9qULSRbyMCt\r\nxTp454IHdE/iyslHGFJZt18tE5KcNjNtLl5EYUJffZW5Fer3DkceHEQVrRXt\r\nkV4AMfH/b3+FAwyYG0V+GXcxa/DAfKbj1shPSXN45e9uRbcsM13PkU1nI9gY\r\nXC7mPXJLrIXGpyqA5/U6n4GSGjBIwdNorJrk75+RJpY18Lv+cDB4YojQ/Dee\r\nRz12d7cUviOGA+VP5UR0pHeuB6epUDeVvj4+wEDPfO9rIFsFfAJVG58gzkzY\r\nePcWI8e6pT4wL0IYS4LbJ9+qj+BlguUUc4A=\r\n=s/xf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-5_1650105503604_0.40692056717210434"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-6":{"name":"@admixltd/admix-component-library","version":"0.5.0-6","license":"MIT","main":"build/index.js","module":"build/esm/index.js","scripts":{"start":"yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@mui/x-data-grid":"latest","antd":"4.17.4","react":"<18","react-cookie":"latest","react-dom":"<18","recharts":"2.1.0","@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react-scripts":"4.0.3","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-6","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ZVby2gtbO5Gf0qk7o/C2wH3D8dHe93u2XzVvjRxo0FQoecTk0pP3SrRLkVaWzUycF1+Sjw9ai78URpMubBbMhQ==","shasum":"0f1982ebbcb0b139e3e7d6808ee80f4a4bc9c793","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-6.tgz","fileCount":66,"unpackedSize":568563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6HV6NloDdA/ent/TtF7pOFkh536SNxCsIy6kV+0arqwIhAP2+XAsRY56db8B3NYl3ileqiHsflLr6tPD8ykGwyUqn"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWqE/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorPw//dp7CH3dQAo7k8RIwItyNBrtbbDRhAAymwb4bqwJExjHcgsVN\r\nTLXskdq7M/2oPkmJ53BJ78rD0OLHnYJKAenuemLaO1KluZrAYGYx9lsZoo4J\r\n3rlqtdbxwNXqVAF91kMoEsnsh9YmF3WO4RoIqAAPcQuU34XD0dWtGMHx0cXZ\r\npe9Gtsg0cyw/huO/FTsq26aF+Ad20C3eU6uAFQ3dRrkHetWKYv7SDGDWy1Ix\r\nBozMWjZyNR8wO5SJWCowetXZZbxP604Jvd1Hblvdk39bMLybPkEcTp8R7mGK\r\naS2u8qQHxWwwzGhBbFtYzAGvw5kOZXHCn7i/CYVtuqck6InWT8AwyU98rLBO\r\nc726GWcCXzo2Ht33r9CC2GGzX/LO2GLKPCQXxuEcBV/IK6KEmhjL/P1cRv+P\r\nwFDzTWYZ398Bj+jGzJBxEELGKYVJs5KUEuLmeE12tlchNMwWizeMaE4x4+xN\r\nDhQVPJAiLmQ6ZPIXLQNhOlJ3ebr28Mw/TDIpCMhz5iGyZD0Iawr9RFNMdLif\r\nrY2/mE/ABAC8HANKXfBG/7OTsCzzj93CJqOGTGZEQBWujo+UkDS/Ek+3ZJqW\r\nRIPBIjCX+pN1ersTK3TwoXkDiQC83npzY29XlChbqR5zJuULOZ3wZc2JdWxq\r\nI7ylOXckPUI2sR+oSDgw4yUXrAnrSA8jQqE=\r\n=MTOZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-6_1650106687614_0.269261466155281"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-7":{"name":"@admixltd/admix-component-library","version":"0.5.0-7","license":"MIT","main":"build/index.js","module":"build/esm/index.js","scripts":{"start":"yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"latest","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-7","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-hq7xfM0CAaHpstsjYlIGKSQN+mqkKScIiIet+sh3Gjs1/OTXhVWHcx30ID+fSmLLocsR/3jqTOHE5ecQZ36Kmg==","shasum":"ba08343f1dcd95707187f3dc7b3497ba36056d3f","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-7.tgz","fileCount":70,"unpackedSize":572248,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmDMdyoZJbRzhWWDS2LQkte4o7Neg3WYNn0aNrbntFGwIgVi7BVdzu1ZkPKH/Y2uXtB1dGdY0ur1nRgrdFtuWECEU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWriRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8rA//dDFfjWr9BVFElRPEob8Jod1jiLrhA9xJbgJ9gje96BSFptoC\r\nEF/qz/AaIMYKdReHUpF1j+HmEOaodxRubSQ+3FHUDGHeF47TaphljG97bl58\r\nPYpZk1ovfwX+JeutjLL5CacG8CF6P/gw4O0j9nPcI4GaBlEWjp5pWaDTt2Hp\r\nMS1IjPiPzvV+rhDhk6juF9LN02lRcuMFfeiLO/Ayya/H/L0kGS+Ig3FN/Ffv\r\n7FhIrfiBuxzzMuQcesEJ3ozJ8PVezfFeukVDA2+QXufrmTFFnQr+c1TiMZhF\r\nOBfJDVAgjKrJd0fIq2XQZctiBI4xrUGmazC+vdBZzUAezmENMOEisNufZU98\r\nCWihyHGwvzPK5BDCUhgzULAMxjS0qxjvn+V6XOSjgGyntWZgtHcGIxHoR8YH\r\nL+glDdWCilD72YWM1hJ2wQP7h6b7PMhhxv/cBqzmPLOA4LEpn8Mzc4BI6fLZ\r\nB2rMDGPtiYVlrirKpSiCjAt3Tz4QMkg793ZImwjiA33jNgYByAZlz4uMNWKJ\r\npx3YZlSiNEK3RwXvE22p+PdBfs2lJGtizuVsL8rbIyyou2G5YTzfBTZukjNy\r\nzYUKSDfL2CtAED58uMQ/kyuAqVDLgFKasJuZU9/k4KnrGJZgLVgRvhWyNjct\r\nXbJhbfMfTNIjdY1GzzHHCbqjTgm/ArhY14o=\r\n=cudP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-7_1650112657284_0.6509979541085344"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-8":{"name":"@admixltd/admix-component-library","version":"0.5.0-8","license":"MIT","main":"build/index.js","scripts":{"start":"yarn storybook","build":"rollup -c","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"latest","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-8","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-zpz0QZCSwkieTBSiVXKo8X2/H0NmHBhjX3FBYcln9jledI7lEAtRzvVExmM5zQ3spH7+JeaN4OvaDBgT+9xgcA==","shasum":"2bc8a28d104da05ff7bb1113497e4ebc3fe2382e","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-8.tgz","fileCount":70,"unpackedSize":558747,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDobMmq3BhysOrzJYZTZtLJRCICNX3HF1WwVLiWo5z9bAIgGUwYRonowP2DFS2ANzHaYIAK3aqnUe9QLZI++fTfi6M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWr6hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkzQ/+Jm+ovTP6Es4/fPINp9lMYfPGXFVuXkZ4B7QXWi4BWY5zKGZA\r\njcKN9Q1huEYfCqGH77lkL6RP80M3hNmUuJ3YGq1k56ZlVjAd6BN47j0fEWyQ\r\nAhXhqb5mAsbeqlDiFsCpxIR9fKNKeP4lbt6HHT3ATkvcTKIJlsERu78uhI/q\r\n4hw4vmYHgaZSd/BtijGxKkvctx9rrVgmT9ygJbVsgwy2aS9qm4PnNqMELn/8\r\nmTHCY88zYP7VehG/XZ6hqTA11CO8vDOUYF0gkmFKrEOsamwqUN6TIEhpJMT6\r\nIOUN1rhKsagkcveZZCpqvHoGq96hHl44yrVWwg8VwnEZKG6dmGtp0dGaqvLi\r\nnhqQcvN/cdzghs0e3lN4G3AUpb6JXFauVO9HhFEvzipfS/wMw9xYaTSK4lzT\r\ngJCuj3nApJS080Ndis4zKnMBtcHjvjlDsflcObk1MmrCEDj+x+BuflVLWvlN\r\nIkkH4GsQaeGxUESZeXAMGfMZkCiHrFNv3f/bvvXPPLvKeHTa+1mKg+6nWP8b\r\nDwWIgJvg9jDnxhF8pHezF5tygohKT7o3p/JTtJSJUAcIk3lWZ+sRy0GKCjRg\r\nwudjU+X45PjLSCCWobzTj8tzdj7l0SEM6SxL/Rzuf8QKP3iyYxhN/zK8EM9D\r\nUs4OuG1wSnOyoXAj/od956QOez25A5d20qA=\r\n=9ang\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-8_1650114209380_0.4429872610872774"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-9":{"name":"@admixltd/admix-component-library","version":"0.5.0-9","license":"MIT","main":"build/index.js","scripts":{"start":"yarn storybook","build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c -w -d","clean":"npx rimraf build","deploy":"npm publish --access public","deployBeta":"npm publish --access public --tag beta","prepublishOnly":"yarn clean && yarn build","storybook":"start-storybook -p 6006","test":"react-scripts test","lint-watch":"npx eslint-watch . --ext ts --ext tsx --ext js -w"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"latest","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./build/index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-9","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-2qG86bGu4OqYA7gkNXRKRn0jSaUKdkFFEsN39HkfCcZon6Af+f89HjaeSXyOsnPoiIc8llMrTQiV42Sj1nMrwQ==","shasum":"3bd6049d3b3c927888be6a21293821ac0eb39960","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-9.tgz","fileCount":116,"unpackedSize":1325552,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFR1WY0gfZoedBLtsFqxiX/G+7wH0FNYliSFaSiwTyQAiEArG7RZ0IsTkoYpRCSqFe0WqcSfWREN3oT1o8JHRQJzfw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWuE3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgZA/8D4xtpEPBZFvjkY7kCgXP4DZ6s7f/oPOY0MGUT+RlvhyXZam8\r\nO/Sd2sTxZokOIECEaBJOaR+jUdprImDmLhgu7ph+iyCxoVIdho0t+e1Vrjsj\r\ngfJa4uw3v9xMjVvImt+eBLSO4hYsqb2uEcNX8q/dseUTyLDFxuugelt1UN7a\r\no+67S9SQzAdrEl20/aFfExeqoyR9jVvRaXwpTJ5W3bpPAwu+UWjw12tX5sC2\r\nPlhnwR0jv8RbufWzjV5XLGqNPXDrEzroZMMoXt7ELCbzP9b6x5EEgm5aQ1o0\r\nnAtf5ZlQkKLegEZOmQpWUe4HpcnBPmvKy+/EzYS0y7jCUNLyvVoZ4XIteo/F\r\n98T0uvXtHo0fvphYBk6OGJMMK1Ka9PBprksQqt3p1ZTYYN7kdMaa71O5VNr7\r\nWWr83StffYHl0oDH/quBadZkkXIcI5bxOgxRaKJcce/gdRY7+MCjPKk6UjYX\r\neYlHzZuCv3X214HUjhdIQH+Gp2n0PXeYFYBC9HqtwSs4HVbeuddHs1T6xNfA\r\n1NtpM4KMmPnSVSNneR4MMnQLufJZ9iPXVIxlfeCqPvB3Mk1zGaoy0MuLW87i\r\nPOjKw2RE3VQp5x30oNslOpW9sMsrStB3VGRa5Y8llDAG8Mf0pjwSmSytgwTj\r\n/vHn3nsP9flHIOC281sZsBtk7byZhc/dOI8=\r\n=JZVe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-9_1650123062851_0.7898198488837658"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-10":{"name":"@admixltd/admix-component-library","version":"0.5.0-10","license":"MIT","main":"index.js","scripts":{"start":"yarn storybook","build":"rollup -c rollup/rollup.config.js","build-watch":"rollup -c rollup/rollup.config.js -w -d","build-storybook":"build-storybook -o ./build/storybook","clean":"npx rimraf build","storybook":"start-storybook -p 6006","test":"react-scripts test","preDeploy":"yarn clean && yarn build && cp package.json build && cp README.md build","deploy":"yarn preDeploy && npm publish ./build --access public","deployBeta":"yarn preDeploy && npm publish ./build --access public --tag beta"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"latest","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-10","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-9AMfk3/pb467A6c5nxd5k8i4BbuWvgEOcsOjHblTzlrnoVtzxGYct7jbQjaDUWBu8IMFhhZfbR+TCrrhiml45A==","shasum":"1c397d7f862fa60913d217c6fa5584817464504f","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-10.tgz","fileCount":3,"unpackedSize":21421,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaQPXKa0v6x9lCeR9khTr96o1MLTa++keZawZO8snqWgIgVblEHtR5bqmfY1sMBI9QXT8u22qA1stwgIGVly/jDrE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWuzyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+0xAAlyGyiveU+2CIghZcDfpOpMp0FFyIpLi6Mra1w0C7gbB8oo6R\r\nNpc+NDwMh+g4ouAqPKBNa0c7Yljjz1bMmSEcpLNPpmI7MiE2e3rXClw44TcG\r\nMzsOla129AWKhZ55t6TMs8qVunMkVB80zJJvfK84QtSBUZI1S8A4bsWSLOJP\r\nQ5XIT1UeqGeIUhtM//WOg3XFAIo/QYyky06b7Jv28V/0NoFhBvJHKlC2/FF/\r\nECrTiBMXku3+ptMYHPQW2VPIBu0wJx3ycPgCCOcySGZxEOBplM1QY2sm+hG9\r\nVqOz/Hag+PVYj03pOnVJG7VccVo5f570z32nG+MwHhUqALX2QrBsGltiC1vr\r\nDOx9X4G1vDbS2CvmcjZLXITUz5uKtK9bTMCUOg92AelC0EwsR3E7Sn/yqMml\r\nB/ioaNqQEayTrHbPZXszHu8LMghYak2RRQAHarVsASTL2t6yEpiLtpVjeCvE\r\nfTdde4XrplVBxrkwkcqW8keyQlWB0LxM0QufVO7/G/y+wN3lpuHgRV9nBRqB\r\n/tRxC8E6daI6ISfvNo7ZRluRuqdY5e/qj4VSgX/KftGS+0m+z7r0Gv42bRyz\r\nA4V2zMtbzJwiuD7QFfy60KsJKo/PTFjtl4H6XZyJjXpkMwxENcewgmvg3Ear\r\n9etqLRzkxpLkUCcEXlmVAvhgdZrOE95xlXc=\r\n=ke1W\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-10_1650126066123_0.39642995577617746"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-11":{"name":"@admixltd/admix-component-library","version":"0.5.0-11","license":"MIT","main":"index.js","scripts":{"start":"yarn storybook","build":"rollup -c rollup/rollup.config.js","build-watch":"rollup -c rollup/rollup.config.js -w -d","build-storybook":"build-storybook -o ./build/storybook","clean":"npx rimraf build","storybook":"start-storybook -p 6006","test":"react-scripts test","preDeploy":"yarn clean && yarn build && cp package.json build && cp README.md build","deploy":"yarn preDeploy && npm publish build --access public","deployBeta":"npm pack ./build && npm publish --access public --tag beta"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"latest","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-11","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-cT7X9jGe//pgMDmiK5/7vwBh7XcUI6KWSQzkrAR+WIAytvpPu/kU1O2G9vitxFcclmIsKlH+CfGn7RdzH/ZE3w==","shasum":"f57948fcc3a7c7e6a9dc52d1e0c9e11cf481a39c","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-11.tgz","fileCount":205,"unpackedSize":1489265,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDuqgqx1PsZ9B18focBd0R9bJl42SPluVu4+s9wxmFTAiEA3fzs+GXRbKR/KP0r/ewI9lZKhrJZi2YrbX7ERcn6lk0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWu46ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6lA/+Jdtm+SSEdW2OUo+zwSoprD/aZNOK3MA8YU7GxJuEqOyRj3aF\r\nL9ZQJ/Ly8E4zBQ5D/9MQvLv5EQS7XLOkUlLCf0fxa+BrJ6yoZ5d8gZ9g2EI1\r\n1Fvuz3UtaLOISW3z5LQrOKt16mrw+PgHelOPArfrd3nsmgK/dPCkYQZ2mfZ1\r\nSL/RJeU9EqCO0BHivhZXu72jn2kkRmPCylxLDfr04g7UwqARgsI3Ww5ltpzi\r\nKP6p3FZfBaCJ7mOcmSAVTx/M1XIIUbsiYMBsikekoJAlqJS6ntxHsYmqAIlI\r\nG6VFOVkej2fecGlNUjIJWdOLV37Ltl3iaLMhEASmu5H8Py0mUoxQlQ4UgkCl\r\nl2dYeYrrIhiOLfq+YuLqawwlovkhMSp8Q2ojf0e200/jb0KUzN+F4cBT6CXW\r\nwAZGj4JKiBMQhRN2KbcufSuL8xSxPEhNzlf10wcZEZM52HdlOCUD+5bQMWpP\r\ngXa3YooeTgKwp5Y+GbxA8odHqYjr61o3Ck/7HRxAryxnpXV8vN6l5IJYyr/r\r\nZrV1xJbXhmrCwzfXTEVNrQyZkVo15YATH4WQP0e0cVyURDhd7LQuNz4E/gy9\r\nYifSolwBWNELBzNFcLtY0DLev/KQcMCDZn6hehrSG0e5LkvPz1widcDN291d\r\nAedmATb7+aDX9igSuGeW42wsbDxQyDU+/og=\r\n=9DpT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-11_1650126393879_0.8850521499643664"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-12":{"name":"@admixltd/admix-component-library","version":"0.5.0-12","license":"MIT","main":"index.js","scripts":{"start":"yarn storybook","build":"rollup -c rollup/rollup.config.js","build-watch":"rollup -c rollup/rollup.config.js -w -d","build-storybook":"build-storybook -o ./build/storybook","clean":"npx rimraf build","storybook":"start-storybook -p 6006","test":"react-scripts test","preDeploy":"yarn clean && yarn build && cp package.json build && cp README.md build","deploy":"yarn preDeploy && npm publish build --access public","deployBeta":"yarn preDeploy && npm pack ./build && npm publish ./build --access public --tag beta"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"latest","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-12","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-6zY2fL5IigeQR0Ubs6tW/TNsMo3VSJt0bmgiiCrqWMX8rvauFJvjh6MwfNxK8lcxy/7aNnVkf9Gv2djrMJpuMw==","shasum":"8c53e2305e56be9f1117d0261a184174371db12b","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-12.tgz","fileCount":116,"unpackedSize":1325844,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHR5J9TGEgo1TYBl10Xb3QMxeex5bVD2TlURko7sWC5dAiEA0Tktf2ESfr4lnByKG0FfziNfQmLFK34Es8gSw/J2Faw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWu7oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKBw/9H59zjVuQR7wa5tkmFuHk7r8Rfla04qNnvyPD15o729TUco4e\r\nWM3RG9WfwI/jNsbDwQFbVj8Uud5bDgKZB5shWdkoZf2ptyphiThDuS1/CV6O\r\narvp1ycdR87SlkrJkq8/H678+EmEcAVl87XJlQ18gmTnjVb86l1eCsOZkw79\r\nCguvdcDuFNN46JBk6Br7267jXslFS+k6uxDxdUUKWQMxadVZlTtxCUQQpuMU\r\nWuU034T2g2MIgv6K+euhBaTHmHArSnHfMxaNakwypLmikvA8rik+vL8pBS+q\r\ngm+NOS089A76+O4N7TQR8m4gNXaJrWUCds0ICfXaHoNgvhV7AoeISUmMdMXg\r\n3FRowwlY070DO1Q/X6Q49K8qM0x5b/1A8AkSiWzmbM/SytwnUIE7VWSxEP0X\r\ncsTRAbVTxuNzv1RgtxQGhb15WENJ8XiO8sF4iXaP0E2/BMvJymm8MJS89Ks1\r\nl+Rn+I3sp6Ga1mGvb6+8QjfHLGHnd7mKwmkYUzVQgujknq0SYapE82binnAe\r\nnWsYAsq+8OaOyLtR/p1ApMKu2AZp5+IEK+cOBfrUfHTKab0ZcjIxdM8APuWM\r\ni/4jDFE6oWZHcoTqLlXfUNYrdP27jOMTcIzaML3TSEjXWFRMy7595m6CuNGr\r\nRmdmG/t708e1RiJ2sLJLl2XnchufykFxogU=\r\n=QRcB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-12_1650126567848_0.5283835947880582"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-13":{"name":"@admixltd/admix-component-library","version":"0.5.0-13","license":"MIT","main":"index.js","scripts":{"start":"yarn storybook","build":"rollup -c rollup/rollup.config.js","build-watch":"rollup -c rollup/rollup.config.js -w -d","build-storybook":"build-storybook -o ./build/storybook","clean":"npx rimraf build","storybook":"start-storybook -p 6006","test":"react-scripts test","preDeploy":"yarn clean && yarn build && cp package.json build && cp README.md build","deploy":"yarn preDeploy && npm publish build --access public","deployBeta":"yarn preDeploy && npm pack ./build && npm publish ./build --access public --tag beta"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"latest","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-13","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-B1dyWk93YYkyW5rRbpiWN1biLEChqfe55kLv0aVaezc6vbFVQnHDBx6m4VpVXN9/27xffSEHj69yKfNjcg1ong==","shasum":"c09747380c5737fb3084211b82dff2c38ea4db40","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-13.tgz","fileCount":116,"unpackedSize":1325586,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7QRtuiPIdAvqrx5UJcV+zlTfdiU8Jkedmzq+N68q9hAiEA6ca7dx/xyrgkrt1u1ha0QAxfX75OvfxUUSuXeJ9TGoc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWvQPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVkw/+I0C3ipOORxxV8T1Tu/vTaaiKVZugupsK+IMoKH5ifM2qj0r9\r\njb9hMwmLqEEfLpZqm+AoChvDRbUWYeFsCQJkrpDAPCbXB1uJhpH+CY/aquow\r\nPd3WH+uXb4wNCizeN+8lbe3QBRpYa00TqgTv+N4ZP+Dn4MSOzjr3F4faGOp8\r\neZWcX5rA0YtDwjdtpOAMCSQCSHzRmCV56DpjIIZF/OGIFKT2H8tmFF68t4gj\r\nHwYlVx83aWEoKTg1Yif0s6ZMH6H/xfEY0Eji1vqbfoZnI9WwrcQ+XudYeGbY\r\ndCLgcc20dg5qqj1L7qTql7YLE60/RRTxkupr/H60KslVWrWn+aP0NlE4O313\r\nt95QZA5r9xT4MABKNZs2Q3ASmRu7eJDHETEItixRTWUG2orNErSbfsq0I3j2\r\nBD90iJtuVT82A0TG9xEJqXCdQRjI1CNHBADB41lgk2Qg36qSP8g4Gwiwjknt\r\n58bItksXLCpuV6MLrXy0qfViE/T+5kBs6wzbPMjFlqPLBDFNgBTQ5aXm46Xa\r\nNB+4QWB6iIcEzCxvsvRtQLlQAnny+XIclP8hr8FIoSKaCUOkiINfLq/BxVNA\r\nPQvb1XxuHBuMHKc7A/2z5t7Bm3nOqw3TM/3qyY5Q0UPPzonaAsv1qIz1X+cf\r\nEx4esn+fWxqYPavQ+C02rxXkGR6GhEmfR68=\r\n=CrkN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-13_1650127887440_0.3606202018094422"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-14":{"name":"@admixltd/admix-component-library","version":"0.5.0-14","license":"MIT","main":"index.js","scripts":{"start":"yarn storybook","build":"rollup -c rollup/rollup.config.js","build-watch":"rollup -c rollup/rollup.config.js -w -d","build-storybook":"build-storybook -o ./build/storybook","clean":"npx rimraf build","storybook":"start-storybook -p 6006","test":"react-scripts test","preDeploy":"yarn clean && yarn build && cp package.json build && cp README.md build","deploy":"yarn preDeploy && npm publish build --access public","deployBeta":"yarn preDeploy && npm pack ./build && npm publish ./build --access public --tag beta"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","notistack":"^2.0.4","polished":"^4.2.2","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-transition-group":"^4.4.2","react-window":"^1.8.6","recoil":"^0.7.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"latest","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.18","@storybook/addon-docs":"^6.4.18","@storybook/addon-essentials":"^6.4.18","@storybook/addon-links":"^6.4.18","@storybook/addons":"^6.4.18","@storybook/node-logger":"^6.4.18","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.18","@storybook/theming":"^6.4.18","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","http-proxy-middleware":"^2.0.3","postcss":"8.4.7","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\",\n  \"react-window\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"7d715f5242727e453c6380df3a6369bb5b6b3130","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-14","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-BGdR17lZzjFX4bnIeTx6NLYr3OGRdFzTMM0U6S9uuy6bnECgSGIG/6MlG01tTcqs/mCj+fhGyU97nLPRBC3LUA==","shasum":"4f2090071cc2502ff517cea924d0960f60d85de7","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-14.tgz","fileCount":112,"unpackedSize":980259,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYZbgryxgp9CLtvU87bsd+SQRannNP9e6NxR0Uea6TlwIhAJD8V5xRKYiQxV3bN1OwBPVx/Aji5nrgrP8uc84TgRNJ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWvTuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpotw//cBU35SoGHoO7iXa5ZDTiUVlMDJtn8sDkECLcaCXlWKfEVNeQ\r\ndFldoMylkA1vuR5fKgHPiJHOVfBdxNLMm0FVM9umvHwJA5mF8E1CDm/FC1k9\r\nQ/WroPjAy69OSYRmK5uEuP60Be0i2TrYmb7ZkQh2jdjxcxvOIMaROY0Tl18J\r\n2bYlkWPT389p7a6s3m4L7GBmpJoT/ers471PKzzItRhMw+4+O/JofeU7VJA9\r\nI8jaxf52KiID/8ZRz2KUC8Rq5irrnLSNK2+ShTBQd9MVK9ztOUTwrhDDDEmz\r\nNL045M4aZicq6aOG1qat+6RCGpb1FmKjZ0pu3+oZLyL2vZs2xDc9K9weUi9p\r\nKQC40NaiwvpM3wuH2hnzXzUz07bHKh0LYI0t9BbbJoUkxx1aU3Hiw+um7iZh\r\nN5wDc/3nEddR7Ot3dpyojAcpduGrhdwVxh84XNixvz56r8cdCrC1PRTa3HjF\r\nQVfvgpFtfmy7Z9teZiYplgqKJ3gVSPVwOZbJ8loPoHiQf+2EHRN8B5tLfJkg\r\nxPJojBJmGoyrj//q3M9n8UeChilzlxXFNbpBidd/yUZapOUiuz/dVcCe/UUo\r\nFw1EqMJ9u3iVjQwtbQzDGiRwzin3QBvbEcjy6aDkiKdOST0iJ+UYU5cHDmbr\r\nQVLNkyCU8elpPtPEaEnIb870G8KtliyWvgo=\r\n=K1Cq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-14_1650128109700_0.6654837348699578"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-15":{"name":"@admixltd/admix-component-library","version":"0.5.0-15","license":"MIT","main":"index.js","scripts":{"start":"yarn storybook","build":"rollup -c rollup/rollup.config.js","build-watch":"rollup -c rollup/rollup.config.js -w -d","build-storybook":"build-storybook -o ./build/storybook","clean":"npx rimraf build","storybook":"start-storybook -p 6006","test":"react-scripts test","preDeploy":"yarn clean && yarn build && cp package.json build && cp README.md build","postDeploy":"npx rimraf *.tgz","deploy":"yarn preDeploy && npm publish build --access public && yarn postDeploy","deployBeta":"yarn preDeploy && npm pack ./build && npm publish ./build --access public --tag beta && yarn postDeploy"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"devDependencies":{"notistack":"^2.0.4","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-window":"^1.8.6","recoil":"^0.7.2","react-transition-group":"^4.4.2","@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","postcss":"8.4.7","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n### 1. Install dependencies\n\nInstall this packages as dependencies:\n\n```json\n{\n  \"@emotion/react\": \"latest\",\n  \"@emotion/styled\": \"latest\",\n  \"@mui/material\": \"latest\",\n  \"@admixltd/admix-component-library\": \"latest\",\n  \"polished\": \"latest\",\n  \"classnames\": \"latest\",\n  \"notistack\": \"latest\"\n}\n\n```\n\n```shell\n\nyarn add polished notistack classnames @mui/material @emotion/react @emotion/styled @admixltd/admix-component-library\n\n```\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"96c1ae4e5def686444b35b59a486fd04af70c83e","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-15","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-PGoclxZkx17H0OlE1JmUv6gy3TPcI0AMFTPmud4mL3yn7xSb1irSrOuL4TNne81R9Nd9oFwpFonPs4cIjp/CdA==","shasum":"c09a885239ebe792618873957db6c3918f027951","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-15.tgz","fileCount":130,"unpackedSize":1075734,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEisXvo3j/iscG7+GnUUN7JeRej77yLKIHIWJ/B3L2zPAiBiiv+0UJHqvPgrCIM/sXd1Nfv/fhfYmDGXelk83oX+FA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWxQPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBDA//WCrHvTUibh5bEiHq+Py//o1Wqq8IfjgzSUMmdu9dRciZuaMJ\r\nOKyGlQ65aSWIk10YWsRl/EPhI5gO41N+4fOu0d5TNI4r3AAIqBANbFHOmhSG\r\nnSQGRh/BqlHoxob6BTH5xp1i2LPRHPsc2REeU3EKdchXwe7qiPQlJN3vLtuG\r\nJYPmFEJ8xEdUHDoxr+YjT5jg+w5sTFa0Qp70rZXFjEjHzQfRJzjWca3zd55o\r\ngm2GwGYFaD881G/sacqF+adTfKfDyUceGhf6txvsccIzxtPrP8o4BloKifo5\r\nPAgaTyb7ifx7wdtTE/ubcL/ZiH01nMPwM1gItx61nQFYUqiFzRbmiYqXzI83\r\nhFs7H6lvK4zd3zBVQJR080zV7+NWgSC7i3qgjYdAh5jIWJTSTntSMutOQOth\r\nW8MJNcYiNcbSjGOfpx9bVlZwDeJdAJptLpp3BMTiINsickMOam6DGlJkg8pj\r\ni7MHBQ3f+LOadOYRbc+WRKye4HZm0gFJigeO2qbVYHTl1cZLEr/MAsbttelj\r\n1inYbmsiFRHZ7IBBHQxEFJyl9lngLe5TpjrAvxN+a7LXXQqD78P9sDONmPhj\r\nfGmCSFOS0LtoxXsQS2y4ikY0kTxnZeI/g260fUCPmrKe30zh3renr/euO4zP\r\nB+u/Z343DMUgOsJ1b6hEol0DSGQk8ngQLM8=\r\n=uTUg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-15_1650136079099_0.8454826003566134"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-16":{"name":"@admixltd/admix-component-library","version":"0.5.0-16","license":"MIT","main":"index.js","scripts":{"start":"yarn storybook","build":"rollup -c rollup/rollup.config.js","build-watch":"rollup -c rollup/rollup.config.js -w -d","build-storybook":"build-storybook -o ./build/storybook","clean":"npx rimraf build","storybook":"start-storybook -p 6006","test":"react-scripts test","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat && rimraf build/modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --include=\"*d.ts\"","build:pre":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules","build:post":"npx rimraf *.tgz","deploy":"yarn build:pre && npm publish build --access public && yarn build:post","deployBeta":"yarn build:pre && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"devDependencies":{"replace":"latest","copyfiles":"latest","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-window":"^1.8.6","recoil":"^0.7.2","react-transition-group":"^4.4.2","@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"5.5.0","@testing-library/jest-dom":"5.11.10","@testing-library/react":"11.2.6","@testing-library/user-event":"12.8.3","@types/jest":"26.0.22","@types/loadable__component":"^5.13.4","@types/node":"12.20.10","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"latest","chromatic":"^6.5.1","dayjs":"latest","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","postcss":"8.4.7","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-scripts":"4.0.3","recharts":"2.1.0","rollup":"2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"2.0.0","rollup-plugin-dts":"4.0.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-terser":"7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# Admix Components Library\n\n## Usage in your project:\n\n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n</details>\n\nTo use `Descriptions` component\n\n```shell\n\nyarn add recharts@2.1.0\n\n```\n\nTo use `Autocomplete` component\n\n```shell\n\nyarn add material-ui-popup-state react-window react-transition-group\n \n```\n\n\nTo use `Table` component\n\n```shell\n\nyarn add @mui/x-data-grid\n \n```\n\n\nTo use `MaskInput` component\n\n```shell\n\nyarn add react-input-mask\n \n```\n\nTo use `AuthWrapper` component\n\n```shell\n\nyarn add react-cookie\n \n```\n\nTo use `NumericInput` component\n\n```shell\n\nyarn add react-number-format\n \n```\n\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`:\n\n```shell\n\nyarn add antd@4.17.4\n\n```\n\nIf you want use `Snackbar` (See below):\n\n```shell\n\nyarn add notistack\n\n````\n\n### 2. Add Inter font\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\nUse: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontPath = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    function addFont(){const e=document.createElement(\"style\");e.rel=\"stylesheet\",document.head.appendChild(e),e.textContent=localStorage.preloaded_font}localStorage.preloaded_font&&!localStorage.preloaded_font.includes(\"${fontFamily}\")?fetch(\"${fontFile}\").then(e=>e.text()).then(e=>{localStorage.preloaded_font=e,addFont()}):addFont();\n</script>\n\n```\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n## Develop\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn dev\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n\n## Link projects to work locally\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `peerDependencies` and `admix-component-library` in your project package.json file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n## Snackbar usage\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library';\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:-------------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n","readmeFilename":"README.md","gitHead":"dd3abbf0f3463b79a5205479018a841ade6246f1","description":"## Usage in your project:","_id":"@admixltd/admix-component-library@0.5.0-16","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-xW+t3neQVWectmtC+oTlU6LKTm2Viaf4j73n8MDHwR5dBkuKzs5HrIoPnK4+cQ8KY06BWO55O9uhmaFQD7jeMA==","shasum":"aa7f20e10ddcdee329294ba3c5bb27b155c3c40e","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-16.tgz","fileCount":142,"unpackedSize":1923324,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzu8kWCGPa6rvpUoqCcspVLwAPVxLp6cFkWbpNs5NegQIgTFgaUe5fUIKCxZ6iTIh2y1RWC0QA0uruIn11w/EEubA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWyQ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGag//YtbvixBXiM6rQEqw6FckyuONjUnbjyP4cLoGyNJD2tVB7Iz0\r\nXC9DYQxT8WYPtE1fRgHNuHei+oU4qNDhdQiKE+kC0T9EINFUWU4IxRIJkGpv\r\nvMRTmjHnc/OmM+s4TxJE4mUNzQUBmeTZUrhq8Teofx/i34FgamGLpJjaiJrT\r\n+dFSp4cBh3SEorecqPodxLob2GFU6Qkv1YRWKNrHCeAElzAZy5VHJ6qR7u/+\r\nxSj2SQhE1RDKCbVJZ2ZBdXHmZGMStIQexY+nysEg3VFggpJqOGVzFpEBMnQR\r\nQS0Ur8X1jOPEuk8vZzDkHp6z8U8UFZffBg+7PnkZ7PpglUZ0pDTCvYNmsuIQ\r\nDrdEhuFYEXO0nyC9nn767z7CcquCXCJDd4Mil6HE9sf9e8+ETwjl81YGumyB\r\nzLvHPS4mUWe9EyHYATV/SW/wx9yyiJSwSGuIsSjI6ak8cHLIM8vV9w7vfbT7\r\nFY2Zbg+dJcigL2+1AGCz6eqlP7dQgG3QkD9ukbwa13r5WSTS/d7DrhD4N6f0\r\nXuc6wTspNXCSm7/5jhshWkl+ynkG3V1988qOzG+QhsKTRBd1XF542m9uB7Po\r\n9xnM+INMy/5PDpNg9tbwZrT7IrUDBH4KW1NCNGh0xLTG318HcZFyGOxX1TTT\r\nHZIYzzMEu3y5V+HjXz0K75xLuUVq80Xat4w=\r\n=K3sf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-16_1650140215607_0.21311020423212845"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.0-17":{"name":"@admixltd/admix-component-library","version":"0.5.0-17","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm publish build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts@2.1.0 antd@4.17.4\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window react-transition-group\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"9ed686c78c6ffb24bc3cc30943db0ace116f7ffe","description":"```shell","_id":"@admixltd/admix-component-library@0.5.0-17","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-JiBQsjDQ/Pf1benEwJWmoMRQrMRhzld74YJREMpHZqajnNRGUQCfDVZuDMlCW9LH6HNIO6cKtAYvGz1ZDrIsNQ==","shasum":"eadd08fcab1244e373e5f4141fb65e668fa730c8","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.0-17.tgz","fileCount":142,"unpackedSize":2057465,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKRO3Wo5kpXvTJolDh7Nlpr2hgmLNRHiXHDSpOFoD+EAIgDC87Xfwhv5AlCTLezuLE0Rp4Q94uVn15gbEGYknoL2Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiW0JxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8JA/+Pg/87bjOXMnPyI4m/Cb359a+bI5okIA9w/EDaOzouMQA+2XR\r\nlOOe5j27lFSFYAXlqFMUCY5POMWLcakKD4wKWnppG5XdZfRpyJspRswzPwDy\r\n7irriav7VItJU54VtnkRRax7+LCtlp/Jx6ZozlvpziBCn2DX3PPeae9MiDz/\r\nbDQ7m0JfjA2VIShVRLBBK7ayhHMtceHmn7GEW/BUE1i2yLOS3zjYbUQuJkiu\r\nMGdxRYcaM+S38uv3KF2eZfaFJricMm7+/+obxoH0QUnBEiv+mM9w9apzr8GP\r\ntamr4FCtaqEQA0g8BHk5R4c/IOFAe5+nL2G4JpslLBNyx+XdZtYzAVHWbAnu\r\nQwWTvfODqcaAiYjPRwaQ9WopISc8EVDpaig36CsMtSWb0oBY0nRt8+BQmYzA\r\nYveg5kHoJcw16ftTgsLcNs3CduqTqGV4uwHIgbKpJ0ChsE/jNIXwRXdaM+o7\r\ne5s+b7jr8kgQnSa9tln//79lP0TXGA0XsH4eG8MW3skQpDuoA7IPw9nDhoJ8\r\nZdWOxWtwdqr23CeRNm/y9U65J/a31aG4RQfohSiOX/GMNCTgisyYcLZ5f3fq\r\ns2uqisgwuJE4IJRt+5/+KO/ma51iYwM7dCFJc3IMPwZaPCY5fGmv1LmZsE8I\r\n7/ZKKgjqPRR4GPMDgkisWkdStSAXntrRkQo=\r\n=FfER\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.0-17_1650147952948_0.27369044585071123"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.1":{"name":"@admixltd/admix-component-library","version":"0.5.1","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","gitHead":"d02b53be9218aa1c2300bc1d603fde98bde01bee","description":"```shell","_id":"@admixltd/admix-component-library@0.5.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-8JVdfNOjbGiUd7IVIJxI8+gmXJKTc3+lXPwFx3fgjGovwhN5v9XthOsxbiiGwjl4q4UC3KoFfK6ichZsAXAM3Q==","shasum":"4d1fea7a55880ff4b5a974212d1e5ad85eb6577d","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.1.tgz","fileCount":141,"unpackedSize":2057375,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNqVOYMBbLdRjmmUMS3Y3/DbI1owJTrCMfdaoH2Uq09QIhANJdjxNyUwRQEoj65/S/LLMMZUUOPiWFIQqrz6R8Kc4m"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXuEnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW8w//UldP2JOWpBCRnMcw7s4Wd1bvOX4hjFuGSptDIjQUQs7FcLK3\r\nDhBgkto1SMIZUEEW583+7YwsUwSzlbiNF/iRDskn+S8ZJ6mmJy49ZYqAxv4G\r\nBQoueMCcJArrz43jZ3tAuwHgVXOPV2qBoxdGgT596IpI8UxDWpFjHR1IKRrY\r\nj03KOa0lCLZ4SldA7bPR5Z/siLyjsGepuu24XbjEh0sSPSPNx3ukyQs57zXs\r\nQFrqODiFfWjRAUGAC6aO6VSaAY+XBG6tj9P9oN/QZPOMr0yzRQpCMHYcmIaQ\r\nuOM1SYz+WCyxaMW9+6naod622lC+9z0vRKL8vPa/Rc0jojfIomRYvoElnTI1\r\nL6ty8GqF2jbel7fyIqxPMEDdJdh8hJV5o3t27yEeJwL2UW9L0/o4F26Yp5Wp\r\nNJPg6wQsZw+XJkuLM6bpluGAOxBZWmTCeSwW6Ir9pSJ/AqxDw7cuA0DCDxqu\r\nlEHlzVRfHYCRORebRUDmQL1NnPeHed4K7F5s2QNjL1fmGXXjVWP2+I0ZEBQ3\r\nH3SNv6v7GsyVED+t+VmWAKbhwqYAofkDdJOilerX94KnyxfTZkTBul4qmGUG\r\nlvMTl5bYZ0YdjCiiEvsk0c7ZIwX1nSnrl1b4qcPmyyTJY59fUn2KPwr8djV8\r\n4X0BejWKFBIXEhstG19qCCZ1b7kJOLzfgTU=\r\n=VmRG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.1_1650385190843_0.5009394187724616"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.1-1":{"name":"@admixltd/admix-component-library","version":"0.5.1-1","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts@2.1.0 antd@4.17.4\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask@2.0.4\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"6813d40bc2a402f607bb26edc14d0f0f51152d75","description":"```shell","_id":"@admixltd/admix-component-library@0.5.1-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-1dOBVenOjZbt/UN/rXUz5DZUFYlRkxhsorDzA/Kg6Of7eOj6x3aXX6HJPLaNObJxOx/77ReBY1OsBfToB/ArHA==","shasum":"0c84a52fa394ca39a590183ad521257d362acf3d","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.1-1.tgz","fileCount":142,"unpackedSize":2071145,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbVpXNXpW0gZeq3FmxTJ8tt/AO9i0zc+GdLaHhy9aVwAIgf2CCqKxjpXEGYJRNY4UiQC7BZLRcU4KePASea12HBkw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasRWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlmg/+JC6338XG1HxfC8nkIqwsLMZfuhnGYzvieBLn2REgRccO40Vj\r\nLUz5JuW8DoCAciCpV4dbd7DFIDReMTrD72F5Vsr9kwT5djsETqtsaz2UVEMb\r\nM2RrX+/39/tqlxu+dp0lpBdFTOLCgVj6oT/DbO1g6ZhT0ovLWzKH1UZGrKHY\r\n399Ch4ctUWQ+elb+DNFFZ5DrHDSbAJYUeX2uF6mIHb4+XlLpyD1RMsCu1+C7\r\n9lhmSCiHnuBS8pNRdVUImwnQ6fCiaSjXqgi5OJ5RWG6jBRTExXYIMZG+ak9k\r\n/4v2SUqvD1eCZBs/INxo/gqa7s0mT0AqmhrfEIzKn5mmtxN1D8ass8m/AhVr\r\nmuLen1OmN0bjQJ9o0YsF616vFGiDagKUagzxbVqSW1DBSCIN0V2BUbzTopTp\r\nIJ6zKnjYaJBtC/G8yNhO7vozh2hoG8bdgroiQJHrnk7jGITjQ37qotLxon2Q\r\nn5FbSGQoBBw2bHvK0KCLS17oIGRIAWFsEZeQjbxAVtTHdvAvew2DF7ot2r+n\r\nqo0cZg8KGqCe8GSVXK2TbzwS+rbYU/NKAocrw7X5m3LGQjJbayU4krLOQ9/s\r\nLvGdeUeRzFaH+vIUVCPxs4PgtwhJas4/mkN0JrLkBQrxFmK63IwF8k4xevks\r\nyfj7JtKomlh/qjbCDzcDRynqpUWgyRpC3Uw=\r\n=hZvb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.1-1_1651164245933_0.012035809308825751"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.1-2":{"name":"@admixltd/admix-component-library","version":"0.5.1-2","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts@2.1.0 antd@4.17.4\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask@2.0.4\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"6813d40bc2a402f607bb26edc14d0f0f51152d75","description":"```shell","_id":"@admixltd/admix-component-library@0.5.1-2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-M83WWG3SqWxUvzYln/oN1cXeSpabI5LmjqZeuctlUrMuPshsjaqiDu12l5rJSWponng82YJyDcEOL09pIHznIA==","shasum":"585a84831e35fab5ae966813577fd6d270be94b6","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.1-2.tgz","fileCount":142,"unpackedSize":2071936,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbY+QryxJ0uTPkkEtMyr4os4+FBCuckRFy52CK/DpS3AiEAxrufnQo4ieVsW1K3CBBMNUhLFF/JaX7Ql7mHUanJRdE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaunzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7qg//ZNBYgaSasz7tpc09wxhIjVCphmGTsTz4IPjPsOMTC0zfLl3w\r\nij///omGbqHuRAYZ5ew46t6i86EhcFwXK4OLjxWNxXjm8J9ojd2JAz7OVkkc\r\nn8r+ksXToxUCyoSQFsNq5bKfsNkLQTaKvvnIxlcxoX/MJe8LJWQY2JrXcCIN\r\nrhQGKqbMFbW6yVUO4Yi3CAS4aozNU5AM9e5UykaAMEFr35a4nS6C/0n4aT4+\r\n6sPPru46l8U764pv5iXF/X8Q9ZZmGYybRmb9Uu97y8W0SwbisOoy0lISWtvv\r\nLJArSXJcvbrEd+zwcogmENht95Pmv0KPJPnfiTLBkv0sGL2XGgC0hrvTjR1W\r\nuD7gCwbMyUKnubzpW4v0hYPojuyNX8Q19oNfZMVtAv0MHNeXz81d5yGGWMDv\r\nlf+xMfJhKX4Y1vyjeIvIMdMVHkRlvtdSJKsGnhy4SO48lVeDhUJJN4Aq6++L\r\n+WQ8x3ELOWpzUIv5rQ51o5GmmeRZvUqQSXdnoh6uS6pXLhXqRbV1AenSFoRK\r\nNBFWIWpv45Kk+lT8b2BxvBAoMorp/mtEPRbY73OyE/C35gncHOoMuGc3UuLt\r\nwONYihGiNtw2EGyCS7nuYSSg8P9dp+YYYK8ZcXYYwYT90hKJ3xW3gNRmWBWB\r\ncfwv0kkgZRRM9h85XcKuDwd8t64Bbzzw7II=\r\n=mWon\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.1-2_1651173875226_0.30205475599878917"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.1-3":{"name":"@admixltd/admix-component-library","version":"0.5.1-3","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts@2.1.0 antd@4.17.4\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask@2.0.4\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"7ab26858f2acb0aa6f9c60acdccf5bad34754e99","description":"```shell","_id":"@admixltd/admix-component-library@0.5.1-3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-J+cMQVd4fzSofln2tEiAIvy24VDh94WTVia2uctr2CJJbh4fsWw1CiRVpAaBDFKwxVxV9lS4wsnN7IRgdj/z1w==","shasum":"331a10ea02d4bbbd762226c644713e83dab9c93c","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.1-3.tgz","fileCount":142,"unpackedSize":2163861,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDwpSbBQ2wwfX+kOjdF+YGX0KWIK6g0ah4fOzdV7/csAiA2XlbSqvEbWhk78oAEA3eOLNzPMWtux9lFx6/vls0tAg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicBFHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUtA/+O6vER65HYmrFujmaakXh+UbVrUqudDKHwJLyuv7392Andy7R\r\nzitOUtqX1/88Yn31DBus+vdnsx3WkskAEsFm7pCWK0sYoFDiahtYVZ7fBQ0N\r\nWg324tbG3idQh2gJNl9+ZCOhpqVBaN+1XO91gCPcx/R+4yB6Z8x+VVmHp15o\r\nr9S6SO2fhMuQNAKO1aYZkcqqMPnyHLrqhj/RfAWnXa8/iJxJnRlm7DimFyc5\r\nsoYKIKvHVQvLsiZrjArbS5bgSqG1cxU9fA8GLPharzk8mYGwec1WMPsUYhnP\r\nRRdWvHjI4mHm6Dc+ZzW+v3FKroTqDPJCbNoGr6CiCrD3rRm8YWTz0Vd81CqH\r\nndIO7agxJ0u+f0EJzQeeMWVB/xKZFpsQGNfkTuuTdZaeEjfRS1sKXW0G+Toq\r\nAfNJRhTfog2iFI/S6WdoU5IVA4if9PnTbu1oiNaTBvN/+iWNl4oq8rWLh+Ru\r\nwA34eFghd09JAIMitbR5oH3OLAjnWxknp/3N1dhPCE3c5YbEH90glF3ftH16\r\n7DRm8q41GooiBGGfv/gebSzFyXEDew3RUUiQKiXo3uBiW/oRtCNiXZbjh9zM\r\nqVHayXbq56sFqfhfuVwJ2tpiXoNgQKJbCfPVAtb7lOszsuKze3hI0sZSgJah\r\nvsSSkGulewmztzJH2mAvmj9o3gIS7g++Hck=\r\n=fpm4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.1-3_1651511623346_0.9200185886530066"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.1-4":{"name":"@admixltd/admix-component-library","version":"0.5.1-4","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts@2.1.0 antd@4.17.4\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask@2.0.4\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"7ab26858f2acb0aa6f9c60acdccf5bad34754e99","description":"```shell","_id":"@admixltd/admix-component-library@0.5.1-4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-XbZjwj5sym/4y3gyPFSGbelL3C56g1JNZzUHuxCgSPrCFsFKQWZy/60fO43N7bAlvhW3bWHZ64l1Qk5llaUamQ==","shasum":"e84ba2ab960de03498964f9ad4b6522be5087b5e","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.1-4.tgz","fileCount":142,"unpackedSize":2164035,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDECHWfaKz+TricCpYiFRyWI6soHOG1Ns90MuvHwKrDGwIhAL/HdaIX9cUX86i8xqFimxY0Pm9y+gjrbchGf5IMlO5e"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicBaRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmod9w//alATMykk9Z0ZZBFRWpNrh92DiMM1cJwieKZvV7iVSybULToB\r\nPD5NjcM08XOsUceNGYlH6z3CZ+G+facJDYltei2L0gBn91pzfRkXvu9yZMlj\r\nL90LkI0+U0AixqpnHWA5oLEeb2aZc1qJdI5fr1vz6KGVDyGjg/A7aNvT/y1X\r\nOhRN2U89rjWqnHaAqYZqjyY+glxGcGSlwNAAm6Aqr27Kh68QOzGuEGJRdqMO\r\n3UzNSzQFS/63PtZsTALKbSuBMWKp+khD55qEi6bBHsHxIF1gICRQYtVPcrMk\r\nTukBJwZUkneM7H3MBVzkEWe23VjbJY/s/chmuRNbx+GVG2Gbx6ysSRgcfYZA\r\n7aEb8fkFbePcXiu69/LKe9G3Aab/uVhcV8fnIx0+pbjPa6jewnTvmLKXI8FZ\r\nPjSk7Nv/t+/xsC/KQ4wEgUfpkmE+UOVNUPIqXx6Hdb+DU98UEqfoBN5AjCjY\r\n8gGppfUHsv8P0batfDZ0k4FvIxxbdUhdK9OWBxGoV77684+O/GZe2ylTQsbX\r\nufgyztHALa8pzRk/zJwjF0AZIdhPWbsCI5Cjijj9BOj7SUyUEY7XgjoWFEKG\r\nMtWoCIoPL0GrTkla/vbXiahwyTjhWsD4yVi+pR1JCskciJKK5Fz1hhDoQ2Jv\r\nuTZ9J1L34nUUY4JABX2WOx/qRdnJbRxolnI=\r\n=i+IR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.1-4_1651512977507_0.09066515750181514"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.1-5":{"name":"@admixltd/admix-component-library","version":"0.5.1-5","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts@2.1.0 antd@4.17.4\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask@2.0.4\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"7ab26858f2acb0aa6f9c60acdccf5bad34754e99","description":"```shell","_id":"@admixltd/admix-component-library@0.5.1-5","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-MQayLTlDSrhWineWplxqkTAWPx23zjb8vdFBL/doCKP+xwaROgfIu32Egqm0JG/eht6T0MPbD4lMoJXUXDYRdw==","shasum":"538f12a6477cc4308d3640732a667af3d4455340","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.1-5.tgz","fileCount":142,"unpackedSize":2164035,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHxrdZrz4V0uqotTzk8DSvqdJQaQofcEodNnA7RX57XAiEA2y8E2GhQGYxSdZDCMmcIOWRYe+wLXfN+FP26QFRH2mo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicBonACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUHRAApMlQ5t5J110ThmzzBvMos9EHc+I8Zn+UvTfQjXlYWRMClB1u\r\nu2PM2DdyJNjKUPZUF6t7aTSSEbTNGuZNBKMlaO9ZZikbBThdZOJ1u9T+bnF0\r\n480iLpScXpcSkHW4dFAs0hfLFs26W8W65cEjKwu0+/nlzn1aE+BesoTYXrC2\r\nXW9Q+WW4NhwdPlpj8CsqyjFoZhYWuap+tmKYetQMObGRxyYhVB5Kgqo3dMgK\r\nDYIIeld0+yqe4vupiMyH0f93DMNksvepQFjuqHG6b5X9Q+qor1A1M6hdKbzD\r\nBHLX+jFSRLccHliJ3xJiZw6V8zaunLRQS13HMxXTxoJQmSEeSRh0cP6G0GIg\r\nn6PsInW1IDhP/wJ8SkkNN/W+vJ1GrUbnF34nkythlNvPWk4F4dxtnRBZXAxY\r\nTeY6s6EdXblW2GG8A1Oc+7XrCBIB+4qnqo5j1JW1gpp2ZqU7IHvroDmoSTVe\r\nWTwcDc7wbocqVIGcK03sugxv58He3SUBRhKtkVr8ZDC62Oi3q9P/lKZRJH9s\r\n0LdiXZPPYzil2k5vyztuoCGkObCN8rhIu1LSpkXW/L0STWtahUbdy9pQFcdQ\r\n0U5l36J3Gvr8KQbwbVSNH0gii4FCnWFevt6RJtACPTiKuud2ouH2zKbd3yWb\r\nyt+WXvdGdGanqJFa7HrQCETmk6UqJrR+I8U=\r\n=5Uj8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.1-5_1651513895702_0.13280183857953087"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.1-6":{"name":"@admixltd/admix-component-library","version":"0.5.1-6","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts@2.1.0 antd@4.17.4\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask@2.0.4\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"b3984ef36114a86371ea673af3e396c72ddfd42a","description":"```shell","_id":"@admixltd/admix-component-library@0.5.1-6","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-gOYZx8ld0C7dtOtdEeb77FzlnJJ2qL4AS9waSvmQnXf5iunT/DPcaaoe1R6A4sdcw3vAdYVlSpXTU+jsPDaeFg==","shasum":"4f75f4277b0d29a632082da2e220eb4d1e3741f6","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.1-6.tgz","fileCount":142,"unpackedSize":2164052,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmZN98xJ2OuwlQtj2n84eHis4/qWSQfhZ4IIITfm5M6AiAgezRePngV0juEh9mUICqOJMKV2mq3iRAIe0uqFaRInw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicDE4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQqw//cGmGpEKz1YjCtGw4F70vu5NGCcH51YW3VdSZZy/DF6PXFtcK\r\nlg83Yw5NEgZ04kkdtdoCppUci/EhaCL9pTME9eAfvolosFfGxI2Dk8v84fD/\r\nW/JUcL2jXDNrhF2h7E/Pnc4P/rWSHdhPck49xCmQOk1FbovkTjWFbviu4XGW\r\nUZNMqLKpyUk2yk8F3wIXItyj8xBw/Yvq7m9zkbk/ch7Jd1u1oig62Z6owOKR\r\namzcMR8WfsXHzrMQhAyepQDwBq3tC9/bhPB/ppxMb+nY4SEliKzPGNGGUUc3\r\nCIMFL38cZC+mAYTd5CuLKFbgMSk64IbEJkkgjy+oVzwt9YNT+vxRQ2IOhjrX\r\n5R2hUU5p9B3kTH/MjnRlc/eXzzcXRVVGj3ZQe0LMwzy+6vyCVHx4WWM789YJ\r\n+tt9qq838PcTfrINMjb/6D4//Bz4SLrB119tFevmnLS6sozFitbrVUKZkzxq\r\naldKzqxsYkOKkwlCtvlQxvzQe0tibvndYC+cCzm83r8PqPzPzkWSKpfU+jdc\r\nj4kEYR05ows8k/vwbffIy2KtViAk5jGJwBHf5417K+NHS2adieDGGEua+aiB\r\naI+a3Q59dtSLKavLAbljTHEfNeNLlv16FBKRLm2sUIxwP3vEGr+JLnA5wDhx\r\nDu+5M5DJ5ykkBWDbwbYZ+VYBr/rAOilBdZ4=\r\n=q1gK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.1-6_1651519800293_0.5345075676416344"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.2":{"name":"@admixltd/admix-component-library","version":"0.5.2","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"63a4beff840b73dbb09bf88c853a52c05853832f","description":"```shell","_id":"@admixltd/admix-component-library@0.5.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-NwJ1rqfguwHCt8MSSjRvUb6bqlUo0tTBSWQSLtQ8cFqu6OwEyeeq2BhSiAb+oezBFzUcGRePqMXlskQJfMzyKA==","shasum":"e9e8aa974df220812ef6711d2cb44694c26ccea1","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.2.tgz","fileCount":217,"unpackedSize":1105823,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUbK9giDq7q7EzdbVMsKimJSrKVWAK10XkiOg7ry9IsQIgYaT+js3d9YO/6VN+d5XbYhFABozVXNO5H69J9Dlc/IY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicmGTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXrQ//RywM4kEA8yhiuwP0D4Og9tw0NN9HdE3tpkfCVB6emjlx5XlV\r\nSvEpDb+PzF/PmRphGX2ZYQrhRebytGIudDzcWbmllklnPk5Fi1nrQpm92Xb1\r\nbdKVziTA7xAiNoeyXK2cAW3QPrU5BUEsY9HgyjQ0saUx8oengUE5ZDl7KL7Q\r\njjEf4g0riioL+HkIOE0HT5780tfMHBbNa2PvDWYuun3u3aHJFXyipleB9You\r\nLoLJXNorj5JOnmHYt7wOaX7R+lsWqpgk14vNLwVkSCpqKnaYT3KtmerZYeCm\r\npyFRzXBJf5uP208e6cnWfGVbDyUa5CG+VepJjtx0SEpTro/MZ/3c/qkCgcnP\r\nLFTVrxv2H0S7CZNtCNWWe58rWHspq67kxSqrxSFSgcEuHk76tDPRhJzyQAtH\r\nhvoGe9emAXScdeMfFWXmCMZyzpPKfoqjRFa4r1z1F8FO9efR+3AtuA8bPGNh\r\nn8/IuupwWSARoVoiy6XLFqyAJmRZimNmVTMoG/lTKbtr6DZ6ZOvSK+DhDKYl\r\niWRpstbtirjfL5+fMwulGOgdBJnRL+FeJMvu1dprmCksI0Ys9k1AVwBF4+uT\r\nq40FpCWT4M+E1+xCumZrjty6z0aBRqYd4cUzYs1E9Fckm8GpAGIryDb3tqCU\r\nv9HZ6MpfdUd12Q7PEQOsrqhoyWXfz5SdDfw=\r\n=dTSt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.2_1651663251030_0.08222848654492831"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.2-1":{"name":"@admixltd/admix-component-library","version":"0.5.2-1","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts@2.1.0 antd@4.17.4\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask@2.0.4\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"c1cf7386b47040be255d4b396e25224f151fa810","description":"```shell","_id":"@admixltd/admix-component-library@0.5.2-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-m0S7FibxQN+qndDD7ZMF8yq5c65jDQUCoPbXZvAtQLfFestV7DOp8Gp3WNiVjqt9/Il3iKCokj4ZY8qBjqXm9Q==","shasum":"39dc44d6c6caac26abb14b3d69d4bff243685d9f","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.2-1.tgz","fileCount":144,"unpackedSize":2283980,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+p0pG5/pQZrgh0H48i2W4MeMz69qlf4vGkyntfrRm0wIhAMpWF0/QKUkGI3vzfJWJ5iykzcFxRQ6gVBxofn6aqdoN"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicmWKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXtg/+L8GDHVoP9hJrZ5qX5NxmeWenUC3+SoR2LkC8UnR+fhLpcAg1\r\nLcGp85PKOMKJsWvumReuHooQ8DUFNa2vdQt8LY7vS50ClYoHWWW2BXwVcPzM\r\nDRLuKOynr/L/EOSE3xvG1B5UHiEt2d+yqqpEff4rLpkqr+ytk3d0ImOJaGGa\r\naKis6OQFFxPb1elns96Uzam5Z95E0bAC3+zFNba7X/OQjArua6V/2dJw4Qog\r\naC5YLneWUJwpzwzgXAAMDVdmtkN/ob6FTCufIAOB96uMw8cCNPpyp/w1V6+q\r\nYNHQzsETYNWlJA/yjE90iRKwsk/YevXJtMtx2UEOWGN8QLjV+Xg38Um/A+S+\r\nhKcRPXpi2u3+2iSnwFehcwUR3nCDbVZioMBCXc3qmcJiN6LQdZ+OF/si4dzn\r\nllFIc//8LLv01uSDpbTYUZsOAgN3t5/ATeqh5TkxmY+YsFeEJzrmbThFjpXs\r\nhw+LMLMV5uuyehgbumpa40JyAGC2pa/eQTiGHvKocH332VJqtWloqHNIYFPQ\r\nO4Mv6fnUe6t8iSnJv2/8rC33A6e/f7SqynAzofLg7m8I0G1TcjZTYN73J3Lo\r\n0wi5cXi8YPx3hB887w6ioQsBvqTZU5dBom1P6THPaqp8U1XEXaivsLzEuGmR\r\nfRADGLgs1r6U8rYLuqNQidU1nPVgT0PrqI4=\r\n=vFDH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.2-1_1651664265848_0.09071903472311682"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.3":{"name":"@admixltd/admix-component-library","version":"0.5.3","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","gitHead":"9ecb7c2d3e69f691ced6bc55890467a05597782f","description":"```shell","_id":"@admixltd/admix-component-library@0.5.3","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-zoDJ+bHlPW6HXx+GGDytwx2L0qujtssxYhIqWflnjtAhUFTL+oh+kzuPEGXbLMaAD75FjeX9em7NhFMtk4QzhA==","shasum":"56d9c6ae0beb10f5ac86d7eefcc4bd006ea3a8bc","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.3.tgz","fileCount":142,"unpackedSize":2186150,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9pHcr6Blf0dMX5/itAlYnjfe4Rv8chsGlphcEpgGulQIhALZZQ/pJyp3SqBZRZvHTp8a+P0hxz0Tk2WfY5vT1Mfot"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicnNFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrp2g/6ApEwlIqazSq30P2g0lgu3wdW0NDxoohqgSunewTD2sRSpB2s\r\njrQmv/+u5DkOGkZWzOuv1FDB5yRrz3bAoML2wBppD6d63GxThgWft5Zqy2k+\r\nk4mEvRZnB+6lJJSCYbcsEqSon1wFOzKU3zkUDbrlXyv2rTKjiBX0yPK1snmH\r\nVnYxPiKoJExAVFz3O/5EiV7LNDkEQp8FZjJhTVlkhVGb268UHquKJnfD0uqK\r\njlFEHPgPYVbQA7EtboxFFd3Lgjg7zYjcwpefFguw2hpxtGZd7mtDUBcega0f\r\n+sfY0vIp9PLT8H7AUg0lBko+a8BwnDQ0oKTu/oDs4d+rE/4gd8OGuxVrw20h\r\n+ZWu3vWeyvmKDHhB432EH+fXiwhIE9bbNW+lqWXtP8GypTmzWmcoNQD+APjQ\r\nBTsobaQ6zV/AHcR5lQa/Hpbb4DeqnemFSo8+81+HRYKJPBlnbsnUI/5D4rEJ\r\ntRk4nqUI92zt322IvJbTRbTfWrY38IEFjuTSwuqPNTecM6JsKx6Qxs2OnIbH\r\n1DxR+0JDWuEECf2sTkiL4wC+I+3grsnNLgi/PQdx82OlGBnactxMkDcbI7nO\r\niCVANVn+P/Tp5L8w0AAzX4kUR7AHh5xQ8sd7OMdzZm+xKLdWJDhLN5361bLZ\r\nuBS695OWxtqcjJX1ZjVfPgXt4B/eSQiNGSs=\r\n=/Zpc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.3_1651667781107_0.07198255287512278"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.4":{"name":"@admixltd/admix-component-library","version":"0.5.4","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-transition-group":"^4.4.2","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","gitHead":"9ecb7c2d3e69f691ced6bc55890467a05597782f","description":"```shell","_id":"@admixltd/admix-component-library@0.5.4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-OzHH03sj5SIvvL28KyZ8sxRYkpK1yiLMK4n6W+OmwQTRJ7khFBUcVShtT84NIFTXRmg33Er/AkjUrAihavP0UQ==","shasum":"25035c83c4d3255c1677823b7b9f99f814161cb7","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.4.tgz","fileCount":142,"unpackedSize":2184573,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWtdtjheVlQoZigQhd43E9MRi42h9ck3pFMq5h/A6nvQIgbTkwaGhAJT6aB9gD3PJ3ql8//FrTOQGWGQAGRHwn7Hk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic5m4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRVQ/+IYJNYZjSfWWTbk1j3/T0cLeyfN6guZlh/8lCR+hYz3cPsyDM\r\nwN+Nw8EgTs96CY9VK9ysEL/ZQwRinjNo8NmBjPSuwn3DxhY3ucT7NOnaQovP\r\nyr9QfbGcAGNQgjszR0hPOdPPt7BFEcCrlUzPRUsVsskxVFCP6As21wWn9LBD\r\nxQH0MVUA35+E6WdSAGqZAJG3SMiVs03MpPONDiZ/s8CjgwymZVpP5hR4ucqG\r\nsmhOjPcgEf23i2gj1DUvXVZjuN8b1/rseU3a9SrdZ+k5C7RGEjYEEExTM/aC\r\nkzfSGJqTHhCX4fDwS687MRdlq9etENYTbLCo1+K6923TiNYBVcx/0d1+2L2b\r\nxJi9ITYcPXopOJmt0b3YBc1gRpynoF0twuti4fR4hPO5ZiU0aphogNiCn2mL\r\nj1+BMLOrva7RBeE75PWt4RUBH8EuykY/AY2pzlkTdJA7qEM5Z7Qus94eCCmz\r\ngQ6DH3sucs1USeUmRhJJ7JPCNjEoQQQn2hfdj9jdjSEo1W/iGtdKhqBRH0cu\r\n11Y6hZ2mFup/ni7BeomjVnne9d6OO56Lne5U4vIcTGrZguy6Oei34jMl4Kuc\r\nOHqMTp4/0HWwN3P5O/9vEZpxJeWmny7XVdqYQ/Oy5ILXDh6FEyziV45G1S12\r\ni6eygAMdpHRXtear94l6eMdfGcU+a0+yg1E=\r\n=jTbi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.4_1651743159769_0.6290344688219542"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.5":{"name":"@admixltd/admix-component-library","version":"0.5.5","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","gitHead":"6d293cfa92733aef7491240ea6869844eae2b9c4","description":"```shell","_id":"@admixltd/admix-component-library@0.5.5","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-2cAF83TFMrSzO2Fv5H/9gM11+G6naMPDPOaFx6uynXqHAWHGqxy5siH9Ku+b95Jbjms+uFQEesj3vfcMs+W6kQ==","shasum":"0a51504237fecf7796edd75c9f2de48a52ea4162","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.5.tgz","fileCount":144,"unpackedSize":2282405,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2khdP9AJo0JvDbJcANtoL2OG0PnliBlK6M7C9L+8JTQIgWaXF43az0jXMP4ve9OuU/jcWcFHGw5tFnHn5hyAF6Ig="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic7vPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqpeg//fBTddLlz+0lwlmzN3ovZs97a/M9VKDTwLNTEsE9bH3erkaj9\r\nRy/AdVNlns/JBv2OwpWZpjz+Lfxl41JEjBSn7Ole36eCvkJIvyzPGF8qbdFe\r\n1KJnP5icLn3XJzEwyFpemjG9XcSZaY3GRH8t3TvJmwicwdN0oJT7HB/VIT1m\r\n2oZPtAad/IiuhkvSVvyt+wY+qtMzXP3CQHzuj1f0nykXok9okGnkqUrEYh37\r\nxKU4OfJLQ3lon2smHYz1rSc6fdcsVzeplH/3miyUNVxbdCNe9Jz4fcBDNNbq\r\n8aK22QNnWOF2w8qucImyhnsQ4hj9Pnqcyo+HwqQn3I8d/sDFGPp1KKo0Pqsa\r\nsdEo+cCZqaI3qMbmGF0VXVBhpSPsLdltftUDAApzSkFiJgu1GDUFe0oUFBSi\r\nn9QRuXyU4b952u6JYggJ0bUeHUOJR5yJqGPAwDefSiwJuyrHy2khgiOJapq5\r\n3S29E1ZXKPESa/sL3CFCoKdudoKM84HMl3npb60+yzvzALfULGdGKTg4rwrQ\r\nR5rcESFZMXyupOjzcYXJDsXwWixXzbrwvLWjXNcPZ4rqM52kB8Wkjm7GILiA\r\nO/WMjGmc+zwadueMx6ZwYxc21P60yXxSGPzulaAJuEkc+vzzL9gJNMRJghc3\r\njdGLamSPofheHvB+GEYDaLm1199A+mBZdzo=\r\n=zLBK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.5_1651751887696_0.910324247053597"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.6":{"name":"@admixltd/admix-component-library","version":"0.5.6","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","gitHead":"326cce487085a3093ea12f0c40d974499a3fd913","description":"```shell","_id":"@admixltd/admix-component-library@0.5.6","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/5F/1sACTp/EnlSxJo8ucVnOGHuvPHP+vGheYwx4NOyGXRSXXvTk0YXkNgNGDzSwnq0uVf40W6Zwxg0+jXM4sA==","shasum":"5e64a42956b8193d774f272fdaabdf0542a41a53","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.6.tgz","fileCount":144,"unpackedSize":2283335,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHdDvfJw0cBIePbMZ71qcXrWKxKSyK2UJI52pEvEXuOAIgbuntMp6Lmskd/Q03Jjkht3wl3ZXAEqCuR/mWE8R1tRU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic9oUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7sQ/+JuX38b3XzkczSZ4bRVBm7C8zzM/dfdCIKacVQDg8S1EO36S3\r\nUP/A+h/xSppeOQucoMkHk3RBD5gxTlSnr2MVMhkWOBkDfsAUNFPA/nibJbih\r\nacESo/MK5BnncgTSGeV4X1nwpmYCrKduCnRtKZLC2A7eG5Gabi2lwcPsYzoY\r\nin3GCvdprChKAsTK3OTPIttn0ck2Qfsqt1ouR18MT0xNAWsJ/XhrwpAna6wa\r\ncZCPyJXeM7b9C8hH7wcIrm8qasHFdFlZ7PA2VBWY0LexIaB4hpnCiBdg652k\r\nT6baRKJ/xeEmWUc9tO/X7HlpeWmLnnHLsCkW6lei7R7OJF9/zWiHa/3RteOs\r\nCmGR+5OS8GEVHG+ca+H+Rp2Dfvada1zFdHYh1hgbzGlBjmuY86F5MN3cnp+u\r\nhpTYPrGQ4dQHqD8Q1AdHPIKQJvXk5pAAnTp7VYjtOU0b5HYvxegMyC8L6mzB\r\nGJkNvVz6z5olRuD/ZJZ/SQkR8W/PLbY9x2kED/j35zRS/6VE8mGdmuwqt3uy\r\n4+4+joSNFTmUzHAHG/u+H7OVZunPGGhF7gRuzmvh32yyq/C0uzFB/gBEqcaj\r\nl4Lcje1HyhYrcsNjVW9IpdufjyR684fVh5wHA33iLknGi3G2V3uab0JSytMX\r\nQZVXjcYHJQlHedMxuxrYTrc/+/YLQhq1z9g=\r\n=u1Dt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.6_1651759636648_0.2676513409549248"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.6-1":{"name":"@admixltd/admix-component-library","version":"0.5.6-1","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts@2.1.0 antd@4.17.4\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask@2.0.4\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"5c6f310796ed36462a44e3f199c9d511863e4b73","description":"```shell","_id":"@admixltd/admix-component-library@0.5.6-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-grWBorSi5hnJw0yx4uMkbu2htRBwNKHXX+U3+rspXUeDRttHmi/2RrXUh63hgRtRLVmaFqXSFSrSGQNUz2z8Lg==","shasum":"9a6b64d8d9e0dbbb584d230f1896232fe53b5e6e","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.6-1.tgz","fileCount":144,"unpackedSize":2289039,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoijlQvpngNaKaEOXuPh7Q2qAdkMltU8BxMvNXuxvcvwIgL0JOdPs3hK4uMJX+jb1qlfXCfbkmFsNa3OrQBYfEyv8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieVh3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrPQ//T3RM+P2AbAC3mcAq168OdHsWetscvUWe0WfypkBqcN3kT0E9\r\nJm8Z73+BCB76VqWxyRrSucFgDmkaFr72NeqXinsyfQU9psk8dc1WJn9ie6RP\r\nr+tkASTLwrMukQg5MrbuAZUgAILW3ieLGfZytHzE5NKjnO/RdwM4nsQyKDy2\r\nq37lLXmTe9P1oWMsUpdC13mLC0dBS0beC77Y+yo1KQrNZxOwyBrAW1Syu/gL\r\nhVD+9LvdlV+nkOg7RfPG/Bck+dZaPl+MOn2n9/PjOJVdnRCYtu0lafzt18p1\r\nnaTfAF4OQuSF+vCI2tY7O77WhW2LkVbNIU0zzkr0mAKjAK6fmB28eOll71eI\r\n4LinxjJQhwUq4T1qsv9B3M2OK0vRbHag8zyX/VeLyckwONmTbWruOPxr2t/B\r\nrqP7rWXJurj3939UIRUIwnOnDcMLakUw+Ulfnw1LT5qaWX0bDAghjPtJYinF\r\nHs4yFXvDC+JHfNqHmCsNwLvJnfdTN5GQDYpAL1pur9z/oQkwAGVCErjLdkZe\r\n2q6jUhm4IWXakvrSq8sonABxXV6DHPyDtxyRzPDcbQ4fk5aNIfRV1zH2hxjF\r\nBayX0hiLzi5tQStN1JZlEjUlnle2tRtlPQd3grwkT7ht2QzihKCBJ2G+HTNe\r\nRiJR40lRtkZ+OqTkgyd0nyyuyfYn0KSbLGM=\r\n=tDou\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.6-1_1652119670637_0.47211112974276337"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.7":{"name":"@admixltd/admix-component-library","version":"0.5.7","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","gitHead":"5c6f310796ed36462a44e3f199c9d511863e4b73","description":"```shell","_id":"@admixltd/admix-component-library@0.5.7","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-lvCIefE+u5VQAOI3ZZFNAWx9JFHlJX0mwJkaC+5CA+b0MkFaUoAELDIng4K3zdSiNiWsEI5FuVgzSnuFT4/UPQ==","shasum":"a0b1974eb4043ab78a3d277466e9c527fd0e6407","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.7.tgz","fileCount":144,"unpackedSize":2289037,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEDNMyv/xBcmRQ5LZZCvQGnD++9HigF+U8l3sxtVqvAAIgfYgtAXiLVY0sIDyzZvMoCMyaZj3TIYxtkJqC5ES8bys="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieo1IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqU9A/+JyKMxpOVzc/eU0PA20Fyny8qX17KWES5WVSkqf5UWnDXvf2j\r\nuL1yL9PVxf3FAAs0WSCmFCGWR/Ff558OA12Si+v6R8leVJ2ZyHEdyro6mIy+\r\niAlNG7nKPv3rz6ws3MG+CRVOdUVgOIplAB2d7pZP5gi9vwdQs8vQrGHiCc5P\r\nLDW7Dz2EtKnydIbwyknGOT9Jvb0QLNWDz6s38yTzfvPSojlJIhKA6G1NYSsB\r\nXBf5o+emaSca0AqDQJ5e8CRHHWyu5kwMKC1Hyp8dCT3eRska7BzDAlB1IB3N\r\njBFYpbucdV3Pbxe/KqnP66FLBFYkU1h/BsYw3Fw0k1pX7nk/vDyZe6Vrh9qI\r\ntqA+Ur/mtUB9dWqdlii0xsdv36zorAtg+y5rS96Ew3ZdaOlVhb7QuOPGV+SK\r\nBc/iH/OsUPGc2shZxM7dR2Bg6MV1Gs0AVHlUFtjJrNKP9GGKGQeoPqlfKMS/\r\nl5zAkuJqeRpQBOMLqXI9pPIoBa+iL85e9u1APyOd7SbRgP9fvubqUGFuuoTJ\r\n164VP3q/K3BiHRPICUZEuvH4KlZt+TIo6lw8/0uMUe1giNLTzx5HAmKnGtE9\r\nPKikKrQ37i6WKtJs6umCDQG//qnEngBgGz3OEUPw2eIjDohypf9nBzrYFusm\r\nZIfXEuvfVzcM/OMSu8pa830I+wVp7tUpRow=\r\n=/JJh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.7_1652198728056_0.741234116689645"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.7-1":{"name":"@admixltd/admix-component-library","version":"0.5.7-1","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts@2.1.0 antd@4.17.4\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask@2.0.4\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"09db52dc2d4976799f36114354ef7d94248dcba0","description":"```shell","_id":"@admixltd/admix-component-library@0.5.7-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-CHYKld1kUA/VJV93Ib8BJEpQwLOOOXvp8Qud08SkeVIphkwDDSGHM9nCmhpV9xiRXCiQjmlnsIPOPyatQ/3iIA==","shasum":"d3a46f1b9196a39751728ebfdcef2b0f4d2e26f1","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.7-1.tgz","fileCount":145,"unpackedSize":2301125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD78lv7p3MWwZvTsmByhenbwFt8YuGk9XMc3QRJH9YEZAIhAMBZzWSEeJCQcSTb42QgsRr1gggfsXz8zqlYc+YLRwRl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigo73ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQbhAAmAREJcjqbIcDvk6DKpKwqkfYM+djxDzup6+1ewYbZDI575oc\r\nBXrPP0aCkIZoxMfiBaNuh6Z0pVTdX6rzvffr9O0sVJuRwor4MpTHbmrwop4S\r\nx0Suj1J6LPdmfe+czx1P2gP4ja/TEg+VHZmcZDjfnRuyyWVB6BEILCpZ23o3\r\nAW2ImADeG6kVn9pQ3fOuZ/i7zuzZiVDUL5FkbpBhknIhr9TzPxPV32oB0cdP\r\n1R1nYg5WWpkU5wuUhiRrrqiY2Vihj6uv2YJ8ICNF8eTODLdIwrtY4dWM9cY4\r\nz1vLKmZNxfoAoZ3LAqi7wfDb0aZbDZgvSh6gAnTRseGvZ6gJfaa8Au1H6hBE\r\nBLpLzAybB2lrl2efiix1CKHDcpXJve400YkzBP8m8EB0E1JAfnbdegCMh6Me\r\ncMq0QQDAlETBEQS+uIcF1dqvYm+O51P/BTkaNskoF8feYykLQsZNaUbQu0EA\r\n78cbvVhboBYq+rLktQw7jyGbp25ebvGvo5MWOUL+O1M5BywMhEKxEW3g+HbZ\r\nnL8rv4T5qw2F64jXRUrGIzR727PsZjsSjA784AXgKhY1AF4qeaVLwC1/idDk\r\nUZ4I940G5+IrDRZEuFZirHkJJp8jXIhtmjrGW5e14JmwPaw+yhZ34xKfItv2\r\nQzM/jxVY5EZGAzHE2Qx9qL2RLgEl6qZZobA=\r\n=ZdYY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.7-1_1652723447070_0.7755684541609331"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.8":{"name":"@admixltd/admix-component-library","version":"0.5.8","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","gitHead":"0b1911a865b27731665f5e3bce6d061d440b620e","description":"```shell","_id":"@admixltd/admix-component-library@0.5.8","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-BzaWUgnuuAWktvlicc3liGDHtLVmFBqWNWm2+qzDsIi9H3/5x7N6Rxrjhtdv0lQELMvPnjmrpcSU61j0t0Ae/Q==","shasum":"073df3d753f219ad40400a12017b56a33d837031","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.8.tgz","fileCount":145,"unpackedSize":2301725,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4gMfEeUJgUZC35WQ/S8zP4rH/PuCybbVr8tXSOfwOFAiBeW/GxtU6BTFE+qkEuT0S6ozjYRJDOf18PR17YvCxrHQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig2hAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1oBAAhjpFzYJDBTe9T1P5kIiy3m08TsPyBLvld3euz7rPnwd4Odt+\r\nq1SNXS6It+ils96dMqNQXr11ZfYLGLzaILZQDiNB6E3vB5XzMbxeNecD2uNS\r\nucmr2N3pdppd+GRSOjrCxytNrdWwbV9BUccBpgmcZeuqhdwocxrQKIe8rCls\r\nQfWWoJcvoTJ7TMFFtjjwYTxHdS1pU0xwlM2618+T5QYuidLCRegRCPR19ugs\r\nu9SgJ9sv5ZVT0uAkIaxExtJvda2Su0lszNqhmJ66W17i945OjjGTYeNMUiGb\r\nlWYEkquRmU7hEwYWGWgPxqCgdESzhwn3ZK+MZsYuFRD8MRLa4OT3ynHGwqc6\r\nqgStlpzU5reeVMXhgohhKPJCmftMTwYgp7CrLnXbsc8O7FkUzbIz0JwoZ/Sg\r\nY3o+v38g6C7j99jIIJHaNY46vlrbXl2hEJG9TKn/YWNrLrXI3Xb+J0CEcMt3\r\nDeDJXBfuETinHA60o/Ip9SNZ0b8+eIiGM7YpkM85+aiiOFnH+HerWbTG2SdL\r\nJmUmAIvGhEs4aZKuBnABOOYuNqRhlrYMxGZOeCRJkHvPeOiddCx0CnIBq987\r\njsPinfvFwnJefbKMYs34zT/IrS75Z8DxI9gOJyC1EauE9AKfJQt2IPYUEavB\r\nH+3HmCGYps95qnvcQPXnnHotevgrGcQMCP4=\r\n=+0g7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.8_1652779071774_0.12573125798949403"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.9":{"name":"@admixltd/admix-component-library","version":"0.5.9","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","gitHead":"500b3d821eb5adb9d202cdfef321fe8de56b9898","description":"```shell","_id":"@admixltd/admix-component-library@0.5.9","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-4Dd19q2rAy1cLgztXQWIhDoXICwB3VNNmGuyySFiJBn8G26jfSAQ56AieKgAkDcnIj5n61//aLz1ImZ5NTbuvg==","shasum":"d241e281495c5248d3796fd297d8cd4fd43c8fda","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.9.tgz","fileCount":145,"unpackedSize":2300152,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGiEIc4Tso/KGEWVIKB380xOdfIA1/WiJ3qIgHGSgHFAiEAi8Kbfkyd+4pbxXUHdxMGwD4JGibHLvSlRxRk+yQnLLI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih2ZRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Fw/9GLWTUDERDh6rnzoFnJHu4k38NVhLPWtAktKHetOUYSVPVKaa\r\nU99oapcCDVGmsdS93QL37Ts37gs6nfJbQ9Lybue4hqSquEAShmUTGooEeU0a\r\nPQjbZVW0nCU6uglqtd1UsOMqaKDeqv3/PEZnDfBYjGybZRtwsvWY1WJzCXAr\r\nBwDUQ+aAo5lzR6skp5zgb9810ZqlKkFhgXQjNAwibs0e7Bebffb0WrcYO3I2\r\nKRSXRQAVGpEn+eOMmF6eDn3TDkKYymcJrfDeN9yyRmIx73Qob3fID4aHLJ1e\r\nUe/FRVSpQyNUknPnw7nwNFg2TNB2vP/ubmDc9syQnfRNkoRDrgLRnftlhqOJ\r\nIN9Px2jZA3xfBCPn/HqEXpho3+XLzob0PwhI73vZqiNhj/WCvqQ741QyB+9i\r\nxhF0isXFolfEUAmF0rOs53t9dbqS9TO7XVtFUHJgMCMmq8G8kKMpJ4jzpF29\r\nq7Kc1tpaHbybB4Cde01X0MM0xPyqp5CKCgcuVn0NBfna40GZaAOiL8FvnnwP\r\nzXyapCyTUCBD8jITsl3yDQchzpzrULjjLqRIwOxAjIObIeF3mA0XM6dyyAo8\r\nfE8KchUcNUDNaCdVVcgi6Qc/Kbv3P35VKiWrB3ABZEvtII7vmRtNHus7MG5H\r\nKPJCSRlcaUI+BSn2fOSc0x1DuTcO0DWKPG4=\r\n=GS83\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"manuelcanero","email":"manuel.casancho@admix.in"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.9_1653040721245_0.2790966600543696"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.10":{"name":"@admixltd/admix-component-library","version":"0.5.10","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.4.22","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.4.22","@storybook/addons":"^6.4.22","@storybook/node-logger":"^6.4.22","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.4.22","@storybook/theming":"^6.4.22","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","gitHead":"abd8e02c07c6335a67e693c0f7e8bf06ed064c1e","description":"```shell","_id":"@admixltd/admix-component-library@0.5.10","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-BjvADnYuwNR2zcDjDErpU8rUhWY1DXeS5TiHwYdHlYLnLadd2BKH2sPaHWILJHUjp9DK6+i2GTMYud3rCPKjoA==","shasum":"2d4692ddf85bbda70ded3889e0d3a4535c880ae4","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.10.tgz","fileCount":145,"unpackedSize":2303464,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDv84VuDtQf8EWbLaPtt0Xh+m0HAvRmVSqizSfrUlYQGwIgZzWbmUiKe0RTBigv714slRf/YBsTKPjeGryrfCbrDmU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii7LZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofPQ/9F5HrDHg5xNbt8+fKxDpvYCYvAE7qaWR5//xMh9hK803jjAQ1\r\n4gk4ZdzEdDmmRyqbL9y83w7FG/IV08Di/oV6aGCeImDR2OMB4Wy42kYAsC96\r\neifrhnUAIbuQ8aV13RFvtaA4NWX5WF0x/Io7QRJOnjj+9Y7Dl6XUf/byHDza\r\nPaDVHhS2ONdDGJCTIg7WBSoTDk60Siq4HYeZtfR5QMDFigGtI3JJGVCXnqoD\r\nOfrwbVzyh2zXZkvtxH4Sua1buaOIK9rfog8berd8UOtJS7HQFbl4cSmhV+pN\r\nrW4C5Akf7A4i+VkBhoK1G4ulbqQ/+pMuaCUF25b+KbcAmt6Whu/JllQgtLys\r\nwQ2OYTckW+T1lzNOQsZifWQo8LEQoWmZuWr45dBLKWq5Q/aZnOexKPIZRa9v\r\nWt+rGrd45jfcYVMmnmX3vugCneQlq2FyyHSvANhnFmi6bcN/rxLc+Cd6BgoP\r\nNulg7ozG/6zyzNQtV1QfaZcd8kAkZrJSCsqFvm3pq9dt1ptKm7QqvNH26dz5\r\nIJCjXBoqD1SdHDuwSLTBun6JuDyvemeESFZdNzd2VhNkpxX0ZlqBHDDusYMJ\r\n1z0aNhY+Hro3HEWqVufm2LwMbb82O/fogMLPa4aOc9hS3/rAwkoOBDiyVdEi\r\nXIh0MzTqvvX+m5MohPso3shSBf1lgOuY4c8=\r\n=beah\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.10_1653322456905_0.8610862551898621"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.11":{"name":"@admixltd/admix-component-library","version":"0.5.11","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","react-transition-group":"^4.4.2","polished":"^4.2.2"},"devDependencies":{"@babel/cli":"^7.16.7","@babel/core":"^7.16.7","@babel/preset-env":"^7.16.7","@babel/preset-react":"^7.16.7","@mui/x-data-grid":"^5.9.0","@rollup/plugin-alias":"^3.1.9","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.2","@rollup/plugin-multi-entry":"^4.1.0","@rollup/plugin-node-resolve":"^13.0.4","@rollup/plugin-typescript":"^8.3.0","@rollup/plugin-url":"^6.1.0","@storybook/addon-actions":"^6.5.6","@storybook/addon-docs":"^6.5.6","@storybook/addon-essentials":"^6.5.6","@storybook/addon-links":"^6.5.6","@storybook/addons":"^6.5.6","@storybook/node-logger":"^6.5.6","@storybook/preset-ant-design":"^0.0.2","@storybook/preset-create-react-app":"^3.2.0","@storybook/react":"^6.5.6","@storybook/theming":"^6.5.6","@svgr/rollup":"^6.2.1","@types/node":"^17.0.24","@types/react":"<18","@types/react-dom":"<18","@types/react-input-mask":"2.0.4","@types/react-window":"^1.8.5","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","antd":"4.17.4","awesome-debounce-promise":"^2.1.0","chromatic":"^6.5.1","copyfiles":"^2.4.1","dayjs":"^1.11.1","eslint":"^7.32.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","notistack":"^2.0.4","postcss":"^8.4.12","prettier":"^2.6.2","react":"<18","react-cookie":"^4.1.1","react-dom":"<18","react-input-mask":"2.0.4","react-number-format":"^4.9.1","react-scripts":"<5","react-window":"^1.8.6","recharts":"2.1.0","recoil":"^0.7.2","replace":"^1.2.1","rollup":"^2.61.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^4.0.1","rollup-plugin-execute":"^1.1.1","rollup-plugin-external-globals":"^0.6.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-visualizer":"^5.6.0","tsconfig-paths-webpack-plugin":"^3.5.2","ttypescript":"^1.5.13","typescript":"<4.6.0","typescript-transform-paths":"^3.3.1"},"resolutions":{"@types/react":"<18"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"types":"./index.d.ts","gitHead":"8e916a317bb851425de428a66a08f11eecfb3d53","description":"```shell","_id":"@admixltd/admix-component-library@0.5.11","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-lf9otBRqNNzz96jemHSrTQdF/pyDbKsacITAfMqqICU0hG02qr5g6V+aGiyM2G+LwAt+u8zgmNDEDTO+w8tJUg==","shasum":"bd51aa092585c13a06b642d2dc69f7129c07a99e","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.11.tgz","fileCount":153,"unpackedSize":2426333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLqi06DblUAzBRpbIO3lG733begzBPpPC0RyZObGEu2AiEAp8rQM6M8wg8/qdmeDxag0iMGMtWkY+4WvZDMRnjq3wM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilzqyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDxA//Q5/+3UsAmcS42ov1uGDZUJdlT2/3aq4mpcSHE1dA3gtuvOC3\r\n9KApfHg72GhBHB/2UscNaw/D/BlwtMSIsgx7Dm91DJmbcbtCGU1HML+1nbo4\r\nxGhGabV/5umjnS7fORexrPO80fB7TBxNIDdBV552mxR1GTEZGmLpFwCqnnnq\r\n5ZmQKSANwvT7Ea9iHjg0LMZhXBZq9ujAxVxNIh/FENU57oxkCJh08nuEENeo\r\n32N8uP0QjDoYDghQXIx0v9Iv27h0jefy/ArjLfvfGJolsjRwuUP5dcj+tIz3\r\n9Tv3kj00O+6rICLFhcjyQ2QOzxJ5ZmSjrquYabh40QMx5AVLJR58kTWCyanX\r\n+BipeuTAHtM7ti32kLgwLhuxYmIHAxhtq3OIgNj90nGOSHT4NCYBAqvkgP0H\r\n0Ik74w50hBTzbAgyWOLyMqZiNA1yTKNMfB/6sjz5nKzT8FT0KmF1jN3K/gAZ\r\nWfjcP2C13oo44PYn5I4D7lkJXEFSm1cleJ9EVc9Z8xxWiPjD3xplbuujZ0O5\r\nYOBac8qd+0eMSI48JxOpE6qYMfYE8EZfudYkLnwvOzRnYKRLOhFqHv5eB9hG\r\nWXL2Xx/7Eq5CamrVcOY4NdsVdqhzN+hyNxERC8PFrFnWYSEdNYCl7RMRYT1G\r\nRaiu+hJLxJ26+Qe5p9BjjamTeR/fnyaIobg=\r\n=48gS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.11_1654078130641_0.7871017821455975"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.11-1":{"name":"@admixltd/admix-component-library","version":"0.5.11-1","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2","react-transition-group":"^4.4.2"},"peerDependencies":{"@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@mui/material":"^5.6.1","classnames":"^2.3.1","material-ui-popup-state":"^2.0.0","polished":"^4.2.2","react-transition-group":"^4.4.2"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"^6.5.6","@storybook/addon-docs":"^6.5.6","@storybook/addon-essentials":"^6.5.6","@storybook/addon-links":"^6.5.6","@storybook/addons":"^6.5.6","@storybook/node-logger":"^6.5.6","@storybook/preset-ant-design":"latest","@storybook/react":"^6.5.6","@storybook/theming":"^6.5.6","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-input-mask":"2.0.4","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"latest","react-cookie":"latest","react-dom":"latest","react-input-mask":"2.0.4","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/MaskInput'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts antd\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete\n\nTo use `Autocomplete` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n### MaskInput\n\nTo use `MaskInput` component please install:\n\n```shell\n\nyarn add react-input-mask@2.0.4\n \n```\n```jsx\n\nimport { MaskInput } from '@admixltd/admix-component-library/MaskInput'\n\n```\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"39f77bfb56ef2fcdcaf3b9be7211c944cd6c7857","description":"```shell","_id":"@admixltd/admix-component-library@0.5.11-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-EMDEN4ELS73pz3eJ5uMsZPKXlGogh/ZiLWzOYVRc5K0AZvXX4d6EnmwQeaib7zJLYEopr6mdzoTtF7qfsDko0g==","shasum":"65abda3b90fb2a414c95ee9bde7121e1430f8dfd","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.11-1.tgz","fileCount":154,"unpackedSize":2450748,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUgREkKKg5Y4f09XZCB4r9zAL5VmOn6Z4V24LonpuPWwIgSRDI7e4VpvGKyVMoUDCtBFhDMfjubGK6IOPpjDW6cuU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioMOQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwjA/8Dk7lm25ImF5UoXMNih5Cg9K0xxucnSBcom/8pHVtL1kOQNgk\r\nBRyJirjgmEzc2BPXkh09kL9NOzd4ghR1gPOIZN3B37APRlEdK9a8aYGY18Js\r\nquODWwJooj3fkZ0oZ71k9hmYsDNsIIH4q6KX3x21OdxgwlWZQPslj+j9JaJK\r\n9lqNDYbb9dy4qjWAUJ/BI4wNIAOGLCDJmDurAXH5u/mk87pL4WLQpYRTvjjd\r\niWfXrBmJeXN3c5oMLDDR1N59eWQE1aGk1Tq/t3Ocut9ibz7hH8EXqM9jC8Xr\r\nNUKmeepBHtbaFjIUfq4x7WusssEV3HbwkY7udnhmvpW4LtWLhxlXYzQagb5C\r\nAmru14/T0iuFydIPAimQ95dwF4jgFLizx2CVnXMWR9KTjqLJkDnoQdfksE1C\r\nzvYm2AnDjTx0GROB51hqmn41ylptxCJeMhrzEz+qbCXJDMUo/0qBZaBa6MrK\r\nD5SR5CGCeVuDzVUKyeBE0I5Tl4AtlQC7E4Obg0aZPQk+ESYoOAHOBCcBY9vX\r\nCkx0bvY0uHQ18rLlwMMLB51u9zOikar0xZ9Q0TG5/LCJ9XMFSDr3MBcinxRK\r\n/StX9qeZ/qwtGn5obQ/RJucg7jpG8Dbyq5Wm9mG+3UOlKbxeO7qF8ZqhFP3t\r\nVsWMWdOnJRzQySgt16zJb3pk+gqLeoGJQxM=\r\n=JbrK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.11-1_1654702992710_0.8070935660177441"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.12":{"name":"@admixltd/admix-component-library","version":"0.5.12","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","gitHead":"6b215b0d99bdf334636d0a7b031d235d352040a7","description":"```shell","_id":"@admixltd/admix-component-library@0.5.12","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-SI1k6yOnyNFoltyHTWfFRjTIye5GWRZRhrXrXMos50Gb9mL2O7BmEMX+m4eQUQdGi6JwB7qANjR61BoUwPBhfQ==","shasum":"4588bea7489f3321fbc98f281df1fabdf0d0e221","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.12.tgz","fileCount":166,"unpackedSize":2401379,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyVGF45u4bvhF6VgyAllac0pBOu26wHAi1F7Yopr1pvQIhAJh6jrTzoWnl/ZjWPu3fZc7Zj8xHoqdJjgJ6GKuvQcR0"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisgpNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQBBAAl8ft8Zk6lE61nGBWg46qcEQrZhyVewV8DHdJDSvXxCxueOFs\r\n4J+N6zuODTvPGaeTh/GguSOTfzkOk+nBvUFhJaYbz4e1gQ9jM+ioRsZ0num6\r\nt92Lig2KQaEu5T+97w4WBiT0SrfvQVk50lxLeQLyVCYafJqOpLo3YJvlDO+y\r\nj4YkDy31M4GsLxkvJUq/QgwX/HaYqAZMWwXPbk2bXNYIKNRXd/QROhaDxoSH\r\nAI5nDmQeF80pGRNIxBb3wroQlzUMkXn5mcoDa/pWMWZRGXvAinnowzLd1tqD\r\nw2uEro/R5fl7HHw/r47Yr5ve7quXo761VHCOVkPWfQpjyJepvXG/hI1iH0a4\r\nfw/VyifnHbA/9zV7EsoNJKSsOqbM4ZDYWgHvOYPiUvHwGdsDC8945WpIGcd8\r\npzqGBgWefcOGPax2XGMNalBbZc4Pgt697FEWjCvT7AiUp6dsvtVTm+qzFsgK\r\nRwfSoLfJEooeqVYptD/9Udt1u4WkWlCH3l4GUM9n4y3e0x1bWSWDorzJjZKM\r\ngyEvZLpv7Ts6ob7KebWkxOj7tnfD+r6wFOmjx8O0jG5Ga8ayUXqLXBznVNuA\r\nX98eVUoM0XN0FHeEg5647uK5PaoUBUG7a+/5X9j84r0FqsnAYjN7liVQOrgu\r\nAV43wTrmi2I6MKvaiquukA0SD7GUPfzmLko=\r\n=J2pA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.12_1655835213485_0.7712194498934797"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.13":{"name":"@admixltd/admix-component-library","version":"0.5.13","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","gitHead":"3c0702dc49ff7fd89a35319e71187ee1d0bafa7e","description":"```shell","_id":"@admixltd/admix-component-library@0.5.13","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-SPwwSGtY21AHy3YtMbPyufHqDRCDEnUNOLIY6fmZTuHPb1UVGyCv4mw8NjBZbrJey3yOxDRk1wy3+Tj/Mqhl3A==","shasum":"ba4adbe7d401392189f167ba8217e9a6f94d044e","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.13.tgz","fileCount":166,"unpackedSize":2401450,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwK2S8VctOamU5wDe3+T6ElqE1sn2zdwCVdrnaFHZYHAiAEWgpTgwBse/ouDSoRplLg2PcNZ4IjQI/vI0CHYfOTrQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitKvBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmWQ//clOStPo+67A/7jeUaxAi7tMkgHhKQaiFAGsso3AieOVgfsec\r\n0RoFTTOVGYlAj3s8ho7a6jhEupsB2Cg6jvNeRcprq6Ayiz8xTldXLxGGoVnE\r\nJsFysX8iis7iE/cz8j/QsOr5Fx8f23vvdBnaOP0F48bE0jltbpwxlFUUTdlR\r\nAPts2Kw+lMCmnJI6iwR2jSTSsahMnxKxhsUso9Yfsf21nVih9gq7fmuPgxOc\r\nYyUh41kECRdv8cPsG1qooDFUuU14CEZWQiQ3gwy2Dxy4qF9dwx0RXMt4TMjb\r\n5Okwb+9NeqjUZh55mG+9QDgmz/fNtA7D2XUQjaoLnFCi5UlJFFQyA4NFAdt5\r\nNk4O5jtrkbDccr/KSiN5WQDN8YE6xTuY3c1yDenEPed/yt3mKETH3pWWlC22\r\nV6LOgyIJrU/y6XhHHADS1mymYLUr2MxhvCvKgeCyBSs7FZKY0C0pyN3nUkky\r\nz+80O1gJDcTkwCyovpQdLYNP5Q7CxcG9tR9A6imbUVPpVS2T/CC1xH7v9ttd\r\nWl2V//z5gPfM6EZd03RjsacuQJrQhvkAWsWjT2Vv2NoblYENqjDrXmn6UEiB\r\ntqb6pSZFMbuIiZtuyKDNRjg82OHmXR5wbH7T8leOgKY+vvfXUeUypTdoG0Al\r\nkzX+DudOcha57jG+LwKJc3bnPU30sa3gI9k=\r\n=2lNz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.13_1656007617539_0.3292172475277009"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.13-1":{"name":"@admixltd/admix-component-library","version":"0.5.13-1","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts antd\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete , Select\n\nTo use `Autocomplete` or `Select` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete, Select } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"5d99fc12209989173033db20a8c63e42957cd7ae","description":"```shell","_id":"@admixltd/admix-component-library@0.5.13-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-QYR0pVcFaSgfXAIAiOszqZuDTaJd+MoG442Z8XqjB3bS97JTPvbzPcDp1EOjgwdwEU4xnfGjSXYBuBMkOZDVDQ==","shasum":"981449ac8587fece3af96abb39ee5796ed30becd","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.13-1.tgz","fileCount":166,"unpackedSize":2400287,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDsYnd766WwFTkF7dkk/ZH3pUfU4CWNopjpJAwJYke5AiEAjTxoIM4uiKJsY7wdV1wEgs2RW4CjmP8gFEhx1krf12s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8SjoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtUA//VlCgvyYsn5aMulNgbe/xRCnBVuSZY2/Aftgah8sSbriCPbm6\r\nPHO6NQ5GEPeQA0IH8UiQMXlJga9t2YefKKXV/1CbBvgcqAYu/mwwMYh1VvRq\r\n5+TzIjw4GHk0wE3SUBkN42Nl9yvg7eXVP2KKUa2crU4KRspuXvs6VMDV/U/6\r\nxOMmbmM007drCBLykzrcfB39MmnZ3p32qG5TGDrawMZNCpWGsoPUXne7zF6Y\r\n3NWU6FWAgTX5kq/Dxi3eW4C5CZ5q08lHjRhkkprsdgPCyLgOEJpeOL3XFD+w\r\nfaXMCESip/oTIv9+BKrGr/RLU9jeQ+LkAFT+pu8xHyheZgyuqLS9z/p9CrmM\r\nzh4TFIO60E59YC7qn3DTl1rEz0UzntZ68GOVmfUuBgEuQ2AxhSFghGnFxIqz\r\n7uIHXdTiLj+atdTz6QhXeLkFmU6oEQAt3tjV/JTEEW/ivzVlvzfSscCD+UG+\r\nohSHieCoT03Yflfp2/1noFRclqmAgXMWY+nYFIMjPtxSv6pY7UoiEa6i+vhb\r\nhVGL9mgXF7XSX3xMOF3A3kXPUWpcKGeanUsJ8RPTx6zbaGX2H8X/9vTi3xgI\r\nNJOm/3lHH/aI66pOalt3qHOgunOtKRXhnB36z8zZUAxVjzIm9aLjR2vPtMZW\r\nSU5coTVPYOIeqzUDN9BLwgUureBJScOmRmE=\r\n=I4QI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.13-1_1659971816503_0.1683619508422829"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.14":{"name":"@admixltd/admix-component-library","version":"0.5.14","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","gitHead":"5d99fc12209989173033db20a8c63e42957cd7ae","description":"```shell","_id":"@admixltd/admix-component-library@0.5.14","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-hikDy27emwp77wlYC1oee+o8+kY7TRaXOmnKVwHqe0oyGianvSw27zpLGSsSTM72vtRr8up5VAnYaBviBNvEog==","shasum":"58b250938025bd8e1a05b13761b0485da87fc009","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.14.tgz","fileCount":166,"unpackedSize":2400285,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHwQT3OL2T0G8Eoartp9m57M6tgbJ3U/5iHJ/R55S/WwIhALDprA8Kcf+mlnBzjH3WOw5ChozUBN0jfwfH5iiFbKS3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8SmCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEKg/9GMBmp9jrNJO3EodB/3uTzct8DePgVb2SRBA439a89Gunzggx\r\nR0YxN0nHeMeKOAq695EJIoLLu57JzkNs8liDlPXkEsGl2rCNMJ0TsxCY7sdV\r\nmoh80juwDzsDiMmJSQYyyKya26vMbAuh7ubXuUZAqfvCGZK5KHV/pZ8ulDtZ\r\nv71kPMM4aCtesAi25GrRqD3eTdX9MkHqOAW5PpLfQHyc6QYqxiokCF9OWZ9Q\r\nd/ePN4Mq5x5tO4OVt2d6LwJVHHlYIyWbwtM0sN3x/++js2tum/N7N8DI3wis\r\n/rEGYmmqcnrkEEdQthx7oXBcJ9MdSLpy2Cn/zJx8X8nfdo6jFHohzlgb2pLC\r\nlkygPlIzKoDuYSk14qP1Ck9Y2/b6tSOBwTCUU0aAd0t0NpJaT8CaKSb0QXZN\r\nWfLHHU/E1SESQsembpfamTv3s7biP1TKBNoxb5fYD0KgsIcasjxDebbeRhe9\r\naCek8FffwWWTvgZf61Usmh7OcfMFtCK11JsIf9dY0HKRTuhxkPH5U+tw+zaB\r\n+7QvYlI7Iy6mvvjAlTvbkU16gwy9qpJMMxJSXfxEsZREObhey9elxgMbSahh\r\nvOX8I9b4Be/VOG4jywDTOoXkUPQrj+3VK4rKr6BqoM7hBh+bfF5dW1Z8ClEj\r\nAYPmt/b5ShPhtImDcSSRtXkt0cVVE2z8lsU=\r\n=6NZ8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.14_1659971970145_0.7308545598204219"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.14-1":{"name":"@admixltd/admix-component-library","version":"0.5.14-1","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts antd\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete , Select\n\nTo use `Autocomplete` or `Select` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete, Select } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"b621484f99c00cc920f75068e4baca08a0b94978","description":"```shell","_id":"@admixltd/admix-component-library@0.5.14-1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-QO6kvGMQom8puHPK3hzOQlPUNmBQRDwzXYkbZLl4NXWfq3SbZ8gzEVI+sVVckLLkW3KV+Rkr/ZUpm0RfiBinZw==","shasum":"feffaf62c04e8f6701b00195e2ded1fd6eaf31d6","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.14-1.tgz","fileCount":166,"unpackedSize":2400350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8xybLNMrP0gW3tF5Rs9J7aQbtQ6z8wtSuVRNDx4PWRAiEA0LDC+RIKB8CykGrRU27dkidl1qmqd4H7maaom26wKLg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAiHtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO4BAAkNQpl2kxtRZfed+4rLI1E310eBp03dUtOAjEyoVfanxDHRSm\r\npIIHrZt+AZS5WavvwVCY43m6+mrSLZ0T8zvSH/QkD0bSHquHlsGWzWBrbtfJ\r\nHcDqTAd+9F/ww8HfUkQxSPlutgeq/EY4JwEDOXVi76QdA9h8hq9C3wSntJs3\r\nU5lCXoVMieQ1ee/25j+d1x5JcIaB9X0XRDqW0F4hrkfEYv+x8qgfTPmps7Ig\r\nlBk4b4CMONauzHvTZgF64+Hx0M+AjbP/5V/V+TH7biZXiu4B0UZ9H3xGfKja\r\nWmtqCercMcbhsptYezBq3JMWthe7hNHT/Yq8FY0eN+/fAQPx3Pcjjf0LUBPs\r\nNewGL5/bG/bh0XTlofKL9Y4vZbh/TuI9t3PN4i29dEU39l+FkUhaStoUuLKV\r\nD7oUpdZtLoPqNp/47IoZD+tU1XH/W0vGLhCpojbtQzhVZDGGuxNc+iS5qUhs\r\n6iKaFh1HUrPw2RJFELxJY7Kb9hVfaiKTDrKf3jYoyMv+CFZ/YJZDLbCxa44a\r\nbjHkER1FEqampXCtMzlcumUvkJQhvFO8mrI67k4dUcsVRinPXROSiL+Z4Zq0\r\n/7T3YVZTUjYHFYNpefER3CU19xKWDlLJ7lVCHpVi7iNHLbyydEd/Q7KYuV+t\r\nP0IikRTTQw5WV7LZ2BmhCWhZ+BhdoiB5a6E=\r\n=1w3i\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.14-1_1661084141647_0.3469895702351842"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.14-2":{"name":"@admixltd/admix-component-library","version":"0.5.14-2","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts antd\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete , Select\n\nTo use `Autocomplete` or `Select` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete, Select } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"b621484f99c00cc920f75068e4baca08a0b94978","description":"```shell","_id":"@admixltd/admix-component-library@0.5.14-2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-KVJ6hgNTJM8wptXMCrKZto02HntiMIf7xMqSNlFBwosj4Vc0VN7YTjp1MEQVEb0dXJwrbnmCkViKFAgNJcHzIA==","shasum":"8b07981974a3b40e955052f5ef8ca111fe54e924","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.14-2.tgz","fileCount":166,"unpackedSize":2400781,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYEjn57z3Yjt8iT79MRj59sIXL2L7IKrK1KJX+OFZdwAiBI6QGivsofOh9rY6Npte5gKA64jLSJSHWWf8zVWv3Bdg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAiglACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+cQ/5AHoJ57xfCjtM5I3NiRL2ZGLtmVvQ95iKDolRM4ZqEn+cwZ2t\r\nTjRoEXlw8S7vjoSVHlmMNDGkeK8k4RBbWHcNup+sjWwz6jYXZ91vZCv//2xx\r\nRGxE8WIDOHbR9/wuV1cbj4i+a4tjHw6FJjH6IGuaG8KHN1HRfO/yvi8SZsHv\r\nURcJITj0TD8lRoink8xHgtrXsFYbwwM62zorXv2qGMy/26M9kt2yzWbWZxBM\r\n7Wo8oXJfl19OqXlEloSfZrq5MRUuirFav0XLmIZ3RrZ5+ylDvcSDrG40eD9N\r\n0bkQ3u3jfBsmr2CpXPKz0vRUNP8sUcWPwXOy8+GtEHgYhL0BHY9iaZwUZbl4\r\nHrDdsmLCQu4UvZ3TMsoMm0XfRKPdJmTjWzlqxY1HIe011trB7fPJi8JZa52B\r\nlBUuXp3hsOwXkTdscc/c0RNuO1Oa9y1ArsHSLx95CjtEHQq9e+1bRbQXz/ON\r\nOeX0vvI7RHBb7SastRyAeiEg71Wbm1j9Iqe6XD/8UYwR8JSavoSe328MkIw5\r\nJ+kxeqUUH9M7npMCNbMpPgCRTbtY9cWZdhDAEw5eBIjDtaTrMclcu86k3SmR\r\nsB/pG9x997fFk1/mb9onJXVah5cu65fQVzlV+WKS6QrYff97UIahcasQkYve\r\nypy7Khg22y5/Xnit52Yi7aiE9XnoZL8dGwI=\r\n=WFlI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.14-2_1661085733754_0.9776008686333373"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.14-3":{"name":"@admixltd/admix-component-library","version":"0.5.14-3","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts antd\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete , Select\n\nTo use `Autocomplete` or `Select` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete, Select } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"b621484f99c00cc920f75068e4baca08a0b94978","description":"```shell","_id":"@admixltd/admix-component-library@0.5.14-3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-d30DhNauN4WWHXePApXP1a2C/f/Hd9ecDTt5Wj82TeJMbDKvTA96DVbiGcOpfqXeUz1AKVO1QgjZhKjfjF1taw==","shasum":"53a5e26488e660e7df9f4c62ad327151e76a8f41","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.14-3.tgz","fileCount":166,"unpackedSize":2400909,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnsSZ2YfMVw57eDZTqnq2j7OOotITLMXDnbjePL3YScAIhAPGq87LP1l5mG1b6IzajQpy+G3wqYu5dhmOp+PMTUPvj"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAl54ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD1A//bbvooUxuIAYIId/o5w2izDuSLC++bGCjUruvM8mWM39ZH9MC\r\nnj+HUDnXtjidMF9igx84Nux06PJBi0RyK6/46DvIlclL6HeRvp0A4t9Aki5H\r\nEiK3q2zwPUADLaIPyNC8fq9N1sFgxKlRfQaQo7d3oIJMD515u5y/nxkIzkd3\r\nWcDHVH9ZDF+iNP77xRxVApqMJCzSJLCbu+/FuouzpWrnGAwLVg9hyk+9QhcX\r\nGgKmhvxyXwUhVcgZbXjb9vD2Mnj4TRz9irn68qBuyFEhTEjzehMWGRs3Y4ae\r\nKVYKOqzExPOva8mesDzvMBc7RNu+LkhQ9gbkx/wirJtO4/3H0S3O6nOKEs/c\r\nBniq4CZ55iys/jBGebNdCuS5jo+58egIu/xF1jWZKeFkcZDOnMUJgxWPmloP\r\nPNsE0v2aDykWpmChA16GLDdKK0y5ejqHW1KOPfWNL2TBEwpOrPQ1ZWTvues8\r\nQ5H15bGHmwIqsZj/E6aS06xZKCE4bS8Eq1EZyfJRjPmtGiGlYJ8Vvcq2uHoZ\r\nvt1bpf6Ls0kj/qOp0QFvz+lnIZ3Px11u/sR8XsQjAFEbKZ7anVRx6DVo8cCZ\r\n3wpvGQ0EnbFe6oJ7l5L3QuuCayMlCwc0lLUpL8YW54Sp57WCgKgdDPpIsHtL\r\nyGFf0advItR+qURFOGbkFdqBa2mu8DdsXY8=\r\n=9qNE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.14-3_1661099640601_0.764825208624178"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.14-4":{"name":"@admixltd/admix-component-library","version":"0.5.14-4","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts antd\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete , Select\n\nTo use `Autocomplete` or `Select` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete, Select } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                | Description                                                                                                                                                                     |\n|:--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`    | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `childrenWithProps` | Pass props to children                                                                                                                                                          |\n| `numberFormatter`   | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`  | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`        | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`            | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"b621484f99c00cc920f75068e4baca08a0b94978","description":"```shell","_id":"@admixltd/admix-component-library@0.5.14-4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-sNiD8qoaTaO9Qva4+rvkhp2CoLFmN1VNYAhZC+Od8qbwWiO4bjfzGYRgPNSrTBBX1rlHtZz5mmR4vgr9v2QuKg==","shasum":"395108107ff7367aab8b38a779aa910c28cb3a3a","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.14-4.tgz","fileCount":167,"unpackedSize":2436229,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx0FTTzpu4BeuyspENwegcG7qdNzp/ms96ezeZpuNUvwIgCeCTQyLa7/hHgnsfZczrJ7HyTRHFl7bBceLymPAP7Bw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEhFDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTiRAAjdFzfY/som65avzIwnfn6+Bv5r11sPxV6ZgVGSUp4FEvjdLV\r\nC6nJioXoe0J+Npc+QoKL6fvtCdnpGSHzZWIzuVAZd17z1Qjq//WvwJA4PQCI\r\nGsL8vTBwromZKgZsoa2YxYNTGaflYPDW579Mg4g3xax3DT3ofWXd4sX/CMZP\r\nGvxW/Y96LgBp5eRFyzXiga8svsM6FMeXWWy7Ssmti7U45xyIZ44xJLhLtW9R\r\nemc7xFKlN1Pj3VuBWSvK36SraZhwdndGueP4Uu70bBAcPL5hwB07s2AVIMlq\r\n2+1Llcv7PIDtjtx0opJRKRjtIxQ+Q1HVFBGY7yrEtIIbXQO+fYCbBtV88bXT\r\nW86msLWNovv0oCSTEkKukN5gdcb/lE/F1h3F/qfsvHBHq/AzgdJjOUDwslHT\r\nJTa4iTdzXwGC3hqOg6NByXiwtL6UoOhjoe2DseXwbAW1OYxQ9kIhj+M6BEW1\r\n584ko/m8qgperdsqpjww5igaXFMgrkc/ryCanmpxE6fLEBDKQCtGXe3bnDyJ\r\nAIV9fU36ngeYWPLsh2iKUY8m4mdqmoKaZdWHAFpTp42eKpdAyiL7tGvXOR31\r\nP6plhSl7SJPlWhNfw8DNNlyFmsHiQhwo6wWn8FxJBtApI0DPigAirsqqt9ry\r\nVWKqtl9XMhKHaWJje6MboyYDVzuNHR31zgQ=\r\n=ic8L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.14-4_1662128451049_0.9267484676296771"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.14-5":{"name":"@admixltd/admix-component-library","version":"0.5.14-5","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/beta.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![package downloads](https://img.shields.io/npm/dm/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![package min size](https://img.shields.io/bundlephobia/min/@admixltd/admix-component-library?style=flat-square)](https://bundlephobia.com/package/@admixltd/admix-component-library@0.5.14)\n[![package min zip size](https://img.shields.io/bundlephobia/minzip/@admixltd/admix-component-library?style=flat-square)](https://bundlephobia.com/package/@admixltd/admix-component-library@0.5.14)\n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts antd\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete , Select\n\nTo use `Autocomplete` or `Select` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete, Select } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `PromiseAll`         | Allows you to receive a response from Promise.all as an object                                                                                                                                  |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n\n## Utils description\n\n| Name                      | Description                                                                                                                                                                     |\n|:--------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`          | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `trimUrlSlashes`          | Removes unnecessary slashes from the URL                                                                                                                                        |\n| `fontLoader`              | Loads the font file into the localstorage                                                                                                                                       |\n| `childrenWithProps`       | Pass props to children                                                                                                                                                          |\n| `ignoreRecoilErrors`      | Allows you to ignore recoil errors, which are usually incorrect                                                                                                                 |\n| `getURLSSearchParameters` | Allows you to get the parameters object from the search part of the URL                                                                                                         |\n| `numberFormatter`         | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`        | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`              | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`                  | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"488a3736cf7b101007ea2452d0cbc9e0396430b8","description":"[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library) [![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/bet","_id":"@admixltd/admix-component-library@0.5.14-5","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-qN1W12LpFbYY8mIzXPsggvUnQZSQJv9mTT1yM4TvRdhPE8n9B7nqtNXUZAHl7N7wqO9W2NaOfTND8X1QqoqWCg==","shasum":"3a67305ac7c2b8fe8c3655f38709533e07bf3f28","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.14-5.tgz","fileCount":173,"unpackedSize":2445991,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+m6kcjUeEvefACC/iAY8JdoX9VfDnpIYsgZRSooJ4xAiAJO7RS1eoGljpyBjqiI+bJJjUiXZ7/PpGuW8O0J+nhRw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjE+ieACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqp2w/+JxoDUO24jn92QnM9gHQxBt0mGG6nyTAphjU+X+eDaPdFDoe6\r\nP/xc/VS7Ebz540cmzPczmrThMy1O7MC2SCRsXhF4RaBDyxiML4eX0b5BGLYn\r\na4IvBP8e9eljm/Nd2yGLR/Jo8SDEZ+IhfKsbdoQuFREoraxB0VqulUrYnqLe\r\nV6awNM2ShbwHEYBLta111AlFSTMWMnln4KVvR2Pwk08cg81AvLUaetkujYf4\r\ndnYW3ujZuO1atpKmmh0A6b5uvdHPvQ5vOgt+GSFi+BTYPUCzj4zfTiyF34nx\r\nFtJutOyGzjC1Ky81EPp5+R8ivuOj7yXloQGOYp+iPpSNktDThv+mlIkKtmEE\r\nmf02vQiHmSB/jPYtR/zqkgNPBrNDrvsUYgrnUPJ5hJCA0O4MJCXauoLD/gNi\r\nHGDCtg4hr4M8W80wIsxL+TuFbanHt4pBI/C7L8aF1WZISkFn4QblbLpnVzOs\r\nIeMVBN8xsN8xtiDTb2HUOKv0O/CFFtipbDV/xm8W8sAtO/YIq7EdD+7MpdCl\r\naLMBdZjkf1kNL+UwncN6c/ziViwPosCEC6N+oDExH1lniuxwW7LPPhFXzjJ2\r\np8iQUegG6sE3axuVR4n182v3TIiP8JYLlAuhGUZkGOP+JSLogabX1z0b+N08\r\nomMDvcFeBJU+AzY3XTNUtTNbxu6oFKXpy1Y=\r\n=mpLb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.14-5_1662249118490_0.9393858895507319"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.14-6":{"name":"@admixltd/admix-component-library","version":"0.5.14-6","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/beta.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![package downloads](https://img.shields.io/npm/dm/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![package min size](https://img.shields.io/bundlephobia/min/@admixltd/admix-component-library?style=flat-square)](https://bundlephobia.com/package/@admixltd/admix-component-library@0.5.14)\n[![package min zip size](https://img.shields.io/bundlephobia/minzip/@admixltd/admix-component-library?style=flat-square)](https://bundlephobia.com/package/@admixltd/admix-component-library@0.5.14)\n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts antd\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete , Select\n\nTo use `Autocomplete` or `Select` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete, Select } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `PromiseAll`         | Allows you to receive a response from Promise.all as an object                                                                                                                                  |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n| `useWindowSize`  | Allows you to get the window size                                                                                           |\n\n## Utils description\n\n| Name                      | Description                                                                                                                                                                     |\n|:--------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`          | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `trimUrlSlashes`          | Removes unnecessary slashes from the URL                                                                                                                                        |\n| `fontLoader`              | Loads the font file into the localStorage                                                                                                                                       |\n| `childrenWithProps`       | Pass props to children                                                                                                                                                          |\n| `ignoreRecoilErrors`      | Allows you to ignore recoil errors, which are usually incorrect                                                                                                                 |\n| `getURLSSearchParameters` | Allows you to get the parameters object from the search part of the URL                                                                                                         |\n| `numberFormatter`         | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`        | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`              | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`                  | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"0d3b6470b0a0a5977e96afa394432b13d5d1945c","description":"[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library) [![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/bet","_id":"@admixltd/admix-component-library@0.5.14-6","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-YyIqznVDxnJqgRSf6VZLxAzDES6XN/HDYqhFMEH1xqDuoxXUFiTH204A6EvGFX+GXtsllBZY4fy7T3um5c1RLw==","shasum":"ca6ce9445de162acdc40c02ba02cddefcc6b4d62","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.14-6.tgz","fileCount":173,"unpackedSize":2446247,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFR4TmBaHPQZ2ISBnwF00Ykr/UASDg8+TAHybYuSlhKcAiEA1cxwhZ1PU6cTQV6NcNezRlAMpLF2W+jiN5oiYZ15meo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFRf2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMmQ/+Kfi1bvahlshqpBZAcUZfPK66dnI4bkGiKQxWCrH+SNJWUd7O\r\nKeub9gLIuGWTWQKyV04jUUbj4toIg1ypMM15njTa3DnidwOfy1K2j1DtbcQ2\r\ngNNFQMcxJSBd9eWGE4uzrX1u8Q3ei891aIlxINql8jSfZWbdF2Z3ozY0Hkhc\r\nqmONHIw2Rpsb9LJVvlWG2klXxi0AJMxMXXszpMFPPBOMJ6hc2ObJTW2GGyUO\r\ndLMjmwKJ+/OHHVfUOzfAdkEnB5iRe+LqjoJ/RzEaU8VwIOF8OynpgMMmoBSC\r\nPyfzxpTNSOiarI2dOE1M27c8jERFvJCXLdyRrwGxlcdZ9jbU6FL9oXocfqnI\r\nKcVUKVcUE/EY3XZohhOqxR1VSpDAsEM6/ehvH6IUxVbPkctRBo7AtOOVw+EF\r\nb8CzvYm8hqCOBLumiOK7zTlwgL51E9BXJArn+n28rtl0XBVnduvNMKUo1tqW\r\nReFxkpxrNr8h86BwxZxAHQ7c9J5vG686923n0OSVEmnH5yUDDCSlL5Y9ijmU\r\nSHEqRZtG+ds0IplKBqAsQQOx1KoUlUZIvtgo5dX/s5Jr/MAyRPcJ47AIA4K0\r\ntnXBqnf/tMC4V3tJ36KGadQAYlVpS/Je75A4EEIzdqm4rP5t7yxP2STeHng/\r\nRYHquW+6Nm0h1AYTHNp2m7wIxNqjwhm1rnE=\r\n=rGsY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.14-6_1662326774041_0.9973774086261202"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.14-7":{"name":"@admixltd/admix-component-library","version":"0.5.14-7","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","readme":"# ACL 🔷 Admix Components Library \n[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/beta.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![package downloads](https://img.shields.io/npm/dm/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![package min size](https://img.shields.io/bundlephobia/min/@admixltd/admix-component-library?style=flat-square)](https://bundlephobia.com/package/@admixltd/admix-component-library@0.5.14)\n[![package min zip size](https://img.shields.io/bundlephobia/minzip/@admixltd/admix-component-library?style=flat-square)](https://bundlephobia.com/package/@admixltd/admix-component-library@0.5.14)\n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts antd\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete , Select\n\nTo use `Autocomplete` or `Select` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete, Select } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `PromiseAll`         | Allows you to receive a response from Promise.all as an object                                                                                                                                  |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n| `useWindowSize`  | Allows you to get the window size                                                                                           |\n\n## Utils description\n\n| Name                      | Description                                                                                                                                                                     |\n|:--------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`          | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `trimUrlSlashes`          | Removes unnecessary slashes from the URL                                                                                                                                        |\n| `fontLoader`              | Loads the font file into the localStorage                                                                                                                                       |\n| `childrenWithProps`       | Pass props to children                                                                                                                                                          |\n| `ignoreRecoilErrors`      | Allows you to ignore recoil errors, which are usually incorrect                                                                                                                 |\n| `getURLSSearchParameters` | Allows you to get the parameters object from the search part of the URL                                                                                                         |\n| `numberFormatter`         | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`        | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`              | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`                  | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","gitHead":"0d3b6470b0a0a5977e96afa394432b13d5d1945c","description":"[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library) [![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/bet","_id":"@admixltd/admix-component-library@0.5.14-7","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-gwJJz7F5A8CVKGw5k3wDOkVbOZYp2ajo/k+8I2tqLeEh4/Itwj7lFj9KCPnf9hXqPJfAL6Q11V4zcwKriQBF3w==","shasum":"1ba749c3af724cd3760c4103e185d9f39b48f81a","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.14-7.tgz","fileCount":173,"unpackedSize":2446321,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGkefqmSclJrArQuzWHHhmePajeVO/VJWtXcduj+1ycRAiEA2OIE/geqVwbr0IFFHwoj8j/COJO7PM7zwb7LNBiPbWg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFRj/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHGA/+PtcV4YWn9d2mjAd7yUHJoFu68J/eM5xAcCIJoKI3ZBL3XQZL\r\n32VE5FUvGJ6b/tSKOJT9Pk5UXF1GO/QlozfpWme66QTrCeTp6yjHZ9rWLDy4\r\nIcKBWfOtvl7W0Y8huiI5FIkJO6heqtdrXn/5owRsrkVB6u1FJI2jCZbnvH4/\r\nh84I8kN1aRdrAXhfWbwGSSNL4lICwORft3zdQOz8uF3hCp3zJHZ6s+RG2yo2\r\n15nlPnB1eYaQHoI9SDaPsmaMtzwWn1X0kYckFvZFh8LnoMggQWCrX4tFSJPb\r\n1+6avKeDIIMoMpsSzhOhhSuCfvJ7JXQQw1kVUpEt0lCF/d8kNk7L3aXxoMj3\r\nh0S3jVUO6G1kMjdGt/F2uBNYa6/OAvYtJJlQ7CEQOd2NEWvR/GpdSdA2k9SC\r\nokcup02XsSdvPsRw8scB+f3R30zAF+mjJ/uLmDOnu+pS7F/S3wLKmW+lzGy1\r\nEWIL0FjXuqzQLASRs9tbl3qGHw+9E8CKrTNtfQFpgSNvEQaF+g2T82HIRwbR\r\nGOgePuRb9WahKCGXh9tGPXo3PqLdiKiIpwqFtQNZzSxy0n1+tXecmNT5lp6w\r\ncBzw79A7gQ5ouPBSvJKg+Bnnx1TJ+WzV0S/CZylRss958EGx7NssVNYBqA8h\r\n5kUtKE5+eeygNKHdQdcYjgt9MJvWOtfs06g=\r\n=yakh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.14-7_1662327039088_0.7740969423865862"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.15":{"name":"@admixltd/admix-component-library","version":"0.5.15","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","gitHead":"31038b051ef8535d0595a385c5988415f126c5d5","description":"[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library) [![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/bet","_id":"@admixltd/admix-component-library@0.5.15","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-B85XYg/t0qY9qf+LJWibbN3lBf6MGIp/2segXflByDYLt2V1TZhFVXFjS3sjX0dFYveV1tCfXXyzxNNe5ktJTw==","shasum":"68c4a0941a55c9cc917eaebfcc1c2ea7526e0a17","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.15.tgz","fileCount":173,"unpackedSize":2446319,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPm9ko8IEj6MrYlQaoTx2LgrS4Niymx4xW5HrU5E034AIgXemSu3wK1XWiIHTts+3M1awlwj+8F2dl54RnKo0SlWM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFUjgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqw5hAAgfFsNSZnjODf+5iYOcYtsaTPcUIS9aLCXXagk7u2BKvBHO//\r\nUjzBLNgWGZBKPjzr0zOAuzuaUmCY85ixcRbChZrqtVcQrAjng5I/SnCFq06+\r\njyJqb8kNRfqN/kX1NRmz6/IfkvWqLQMnquhusAQWsfWcc7aXEiraGsIJmxF2\r\nBVccv8ulQaOL/jJJbbZXVfoaiMeNK5ipWkYkLJjy0xoNmScOYj+pdLMFZo1k\r\nhHFL6lsobCPreYFAQl0Yhes74eTlzt3B8jNuG0eWlCxpT71VRCj5IA7xqKZD\r\ni3FDdNBk7Uuw9fACZzX2ocQh0tCbg+jr9k7/Y+uGIGJNgXc96R6NHHwbAqcx\r\nf6dKjBDBqhPUATwESggH5vjIxBIV1lHid1yPfPYwIxM1Fwpjo16g9w5eNBdn\r\ncS2D+p1xaehnQ0Fn1XxnNScWEvLZbQ9O34Y2kY2W0mNJS5VVYieehU/4tzGM\r\n1r6P2NBp599qcauV/IxB+96n+2saZgwTUqZJISi5/KGaOo0lHQeWa4nZ4lVZ\r\ngXCwVdXQkCz31i5xCzGv89KRiM4d8ydtXbeiYPoKrgSSMmWQdW7fPq439M6g\r\n0rnFxIHCe5WRJbdnM3wmhgINQTj+agzdaj+uf1tWsIpeitZm3YtyxRYgeccg\r\nM3VSMcJ0h6knWcgvTLWONT1CtNQpBcMU7/w=\r\n=LaQ+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.15_1662339296671_0.7777237593022228"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.16":{"name":"@admixltd/admix-component-library","version":"0.5.16","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","gitHead":"b55ef04ebe57cc13f3aedb87b7f12c55f2a2f860","description":"[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library) [![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/bet","_id":"@admixltd/admix-component-library@0.5.16","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-DfuFwJj4ylGYbPV6/53mnIcfMpfW0Pgw3HVGRqWH+vYIAPsiyjfPTLnsxp9QpQyZERiaW0V6OHV1B37HZFx0BA==","shasum":"153920a799c53c7b68dc294986df5f97601b5717","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.16.tgz","fileCount":173,"unpackedSize":2446307,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGTXnNDTK50ckWezgN4IeWF+sTWcexmtmhICHWcc6v24AiBlWqwswi1Wp+83VcS0wNYPJyRho0svsPN8hr2EuKIgxA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFdaEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBKA/+JkCSEms8Ftvxu48HC7f9H3MYfix9gZeM/bALlgiTRgPatyr7\r\ntkOmD7mLYoewPb+BFeD27oRiMYeV+6CMY8EUVfHutANjVNbEex2XuulB5zci\r\na5th0L0VL9NLYQFES9eMoOoeAWNR9FUi4zuXdBodyShuhQxVNVgF75EVN3x+\r\n6+BASXXqRHSbtLawD1rISktTlpgXr2X+I5Gf7toM+TyDDq4dDmxUZD8UCAMv\r\nokVPGYE8EnnFPvTEmHnqlVdePeFOsSDdbshu78lvp1GAEZdsRued3kCyRnY5\r\nQBtzaAYnhqy9stN/hQDny1TAoyq6atMjTwPnEFQXiho7DItQVjLZfYmLng45\r\nbcO4+rQ7I5is1KMl3uIP4kjdwBOMCBUu627c8niAL4n96QLYV3qqUvDdhwLl\r\npXWAJQbeHxtFYOiF6ACO/O1EyHzbPNzu13abdBYUmh3Q2lI/3ai6xk6QdcuP\r\nbS9QOcMjt/pca+L6tELrECA2C9cCbEmtmGLmi6oMcDnf7pf4jmAh5Cyi+YAG\r\nHcKGAUI3LhRSxSZsF2ucEl+KlSQPqi9m6p3jj+fp8g+RHZAsZnj/FD+joq44\r\n4j5ypSEZ8uNONjSXO14LnANGEhYOe4ndUswMnjRm4o2A3upLEM8z2MKbv2jV\r\nrV/tE6v8gkng1V5MkyWwSwOwvr0ikp2NQTQ=\r\n=pCjF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.16_1662375556084_0.510903445331198"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.5.17":{"name":"@admixltd/admix-component-library","version":"0.5.17","license":"MIT","main":"index.js","scripts":{"build":"rollup -c rollup/rollup.config.js","build-storybook":"build-storybook -o ./build/storybook","build-watch":"rollup -c rollup/rollup.config.js -w","build:build":"yarn clean && yarn build","build:copy:main":"npx copyfiles package.json README.md build","build:copy:modules":"npx copyfiles build/modules/*d.ts build --flat","build:clean:modules":"rimraf build/modules","build:post":"npx rimraf *.tgz","build:prev":"yarn svgo && yarn build:build && yarn build:copy:main && yarn build:replace:modules && yarn build:copy:modules && yarn build:clean:modules","build:replace:modules":"npx replace '\"../' '\"./' ./build/modules/ -r --silent --include=\"*d.ts\"","clean":"npx rimraf build","deploy":"yarn build:prev && npm pack ./build && npm publish ./build --access public && yarn build:post","deployBeta":"yarn build:prev && npm pack ./build && npm publish ./build --access public --tag beta && yarn build:post","start":"yarn storybook","storybook":"start-storybook -p 6006","test":"react-scripts test","svgo":"svgo --final-newline -q -r -f src/"},"dependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"peerDependencies":{"@emotion/react":"latest","@emotion/styled":"latest","@mui/material":"latest","classnames":"latest","material-ui-popup-state":"latest","polished":"latest","react-transition-group":"latest"},"devDependencies":{"@babel/cli":"latest","@babel/core":"latest","@babel/preset-env":"latest","@babel/preset-react":"latest","@mui/x-data-grid":"latest","@rollup/plugin-alias":"latest","@rollup/plugin-babel":"latest","@rollup/plugin-commonjs":"latest","@rollup/plugin-multi-entry":"latest","@rollup/plugin-node-resolve":"latest","@rollup/plugin-typescript":"latest","@rollup/plugin-url":"latest","@storybook/addon-actions":"latest","@storybook/addon-docs":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/builder-webpack5":"latest","@storybook/manager-webpack5":"latest","@storybook/node-logger":"latest","@storybook/preset-ant-design":"latest","@storybook/preset-create-react-app":"latest","@storybook/react":"latest","@storybook/theming":"latest","@svgr/rollup":"latest","@types/node":"latest","@types/react":"latest","@types/react-dom":"latest","@types/react-window":"latest","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"latest","antd":"latest","awesome-debounce-promise":"latest","chromatic":"latest","copyfiles":"latest","dayjs":"latest","eslint":"latest","eslint-config-airbnb":"latest","eslint-config-airbnb-typescript":"latest","eslint-config-prettier":"latest","eslint-plugin-import":"latest","eslint-plugin-jsx-a11y":"latest","eslint-plugin-prettier":"latest","notistack":"latest","postcss":"latest","prettier":"latest","react":"<18","react-cookie":"latest","react-dom":"<18","react-number-format":"latest","react-scripts":"latest","react-window":"latest","recharts":"latest","recoil":"latest","replace":"latest","rollup":"latest","rollup-plugin-analyzer":"latest","rollup-plugin-delete":"latest","rollup-plugin-dts":"latest","rollup-plugin-execute":"latest","rollup-plugin-external-globals":"latest","rollup-plugin-peer-deps-external":"latest","rollup-plugin-postcss":"latest","rollup-plugin-terser":"latest","rollup-plugin-visualizer":"latest","svgo":"latest","tsconfig-paths-webpack-plugin":"latest","ttypescript":"latest","typescript":"latest","typescript-transform-paths":"latest"},"resolutions":{"react":"<18","react-dom":"<18"},"browserslist":{"production":["last 2 chrome version","last 2 firefox version","last 2 safari version","not dead","not op_mini all"],"development":["last 2 chrome version","last 2 firefox version","last 2 safari version"]},"types":"./index.d.ts","gitHead":"235f6b1609a62cab3a2410963cd5bbb8e0f8ba31","description":"[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library) [![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/bet","_id":"@admixltd/admix-component-library@0.5.17","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-twLNiWmmis2er/dSfeMxeYBweC+BzAPclTQf5iIf+gie37m+tr91HECyetgIf2vOZ1HELWYI+tHAyoWEdpD33Q==","shasum":"6fb8685e8bd7e168502364a89f09b01e380d7883","tarball":"https://registry.npmjs.org/@admixltd/admix-component-library/-/admix-component-library-0.5.17.tgz","fileCount":173,"unpackedSize":2454851,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDv56m+HzY8q7NlVIR7PsOY4qqtOBRKQFbnruf7FTHrRAIgKaH+7tbn+PoBzNxf9HhtCaDbZJT5UlWC9LXl1YEOYos="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahfqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorjRAAkcREBj1VSi8j28nL7aaLDEUXSBrCruCdtuDkeQ1/COgicGK/\r\nNLZVy7Rn4uVStgABIhFt2Lr0yMucunqU2jhOeOXcS2ZpsrJLM0KqWUHqYapg\r\nmqZKDqQPD2C4z1X+cKFicqS7ydjmM9iNnH0Tfu6ECty5Nm/vsTow9xGxNvwV\r\nHJNKlIcdYQMPqzUTEibdLqYPcp6/dLmLucjYRkcJOeD5IbTU9kBAjWAnILPF\r\n8T/RYCTjyr4Epy+Yu4qnE9KPkm+XULplwWaeLt1cBtbdsjr87u+RF7GVx2j1\r\n13L3PiM0a6MYIwiXFKdXCrZXv82T855LBgEbDsHr/F9hAlK+FToHSiSNqaRh\r\nlacSTYng1LtCLwm369JbmXHct09yCvU1+iFwvxhX06dBqwKVf+m9yoc7qz9I\r\ncPSkZwpcgukS81NWYX9OdVWkM+3o5KUjvihsBELSq78yqZ/MbkCBgQNNziNo\r\npyUue7xKqfNSsj/7ULpYpwac7YnC/+U3Y1r48FIRFxnxpB6XHe1WHMDO4/P1\r\nfR/3qn+KrwN0ToiU6kYf4BgKHEC36OGC6N26OFlscxTNmOk0E9bCQjR11qZR\r\n8quVnCIRbPNgo37tcpZcirfi4CqntVSEVYoI51J1WXA/GSMPaXp/M/UTRAGC\r\nwsYC72SE9CvOtpw3+vKzDC8v7c/pTdC/Ch8=\r\n=qIJs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cr0wd","email":"freshcrowd@gmail.com"},"directories":{},"maintainers":[{"name":"cr0wd","email":"freshcrowd@gmail.com"},{"name":"andmev","email":"tuhouc@gmail.com"},{"name":"admix-ksmike","email":"michael.copeland@freakout.tech"},{"name":"manuelcanero","email":"manuel.casancho@admix.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/admix-component-library_0.5.17_1667897322222_0.6193370676055245"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2021-05-11T13:40:40.768Z","0.1.0":"2021-05-11T13:40:41.267Z","modified":"2023-06-02T14:29:37.071Z","0.1.1":"2021-07-30T11:48:13.289Z","0.1.3":"2021-07-30T12:23:35.490Z","0.1.4":"2021-09-14T10:14:10.705Z","0.1.5":"2021-09-14T12:38:01.912Z","0.1.6":"2021-09-16T10:10:50.084Z","0.1.7":"2021-09-17T06:10:18.483Z","0.1.8":"2021-09-17T08:09:26.795Z","0.1.9":"2021-09-17T10:14:25.045Z","0.1.10":"2021-09-20T12:25:13.373Z","0.1.11":"2021-09-23T14:05:46.240Z","0.2.0":"2021-09-30T17:15:45.114Z","0.1.12":"2021-10-05T10:21:47.707Z","0.2.1":"2021-10-05T11:58:06.673Z","0.2.2":"2021-10-06T14:23:14.179Z","0.2.3":"2021-10-06T15:12:41.375Z","0.2.4":"2021-10-06T15:16:01.532Z","0.2.5":"2021-10-07T11:49:40.034Z","0.2.6":"2021-10-11T15:12:01.929Z","0.2.7":"2021-10-18T10:49:49.412Z","0.2.8":"2021-10-18T11:59:06.057Z","0.2.9":"2021-10-18T14:33:58.459Z","0.2.10":"2021-10-18T15:21:11.478Z","0.2.11":"2021-10-19T11:34:37.614Z","0.2.12":"2021-10-19T12:11:45.080Z","0.2.13":"2021-10-19T15:40:27.482Z","0.2.14":"2021-10-20T13:45:23.081Z","0.2.15":"2021-10-20T15:11:23.781Z","0.2.16":"2021-10-20T15:32:54.998Z","0.2.17":"2021-10-21T08:24:29.431Z","0.2.18":"2021-11-02T15:26:36.039Z","0.2.19":"2021-11-02T15:33:49.664Z","0.2.20":"2021-11-03T12:09:41.141Z","0.2.21":"2021-11-03T16:15:15.373Z","0.2.22":"2021-11-04T16:45:29.707Z","0.2.23":"2021-11-04T17:35:49.236Z","0.2.24":"2021-11-08T15:14:53.644Z","0.2.25":"2021-11-23T16:33:12.419Z","0.2.26":"2021-11-24T11:28:14.536Z","0.2.27":"2021-12-08T12:31:53.355Z","0.2.28":"2021-12-10T09:42:33.041Z","0.2.29":"2021-12-16T15:00:48.670Z","0.2.31":"2021-12-22T11:18:21.296Z","0.2.32":"2021-12-23T09:24:58.731Z","0.2.3-2.0":"2021-12-23T14:22:50.756Z","0.2.32-2.1":"2021-12-23T14:49:49.861Z","0.2.33":"2021-12-23T14:58:14.801Z","0.2.32-2.2":"2021-12-23T15:18:12.348Z","0.2.34":"2021-12-23T16:31:17.125Z","0.3.0":"2022-01-03T13:12:02.705Z","0.3.1":"2022-01-11T15:53:30.201Z","0.3.2":"2022-01-11T18:26:22.228Z","0.3.3":"2022-01-11T19:42:38.516Z","0.3.4":"2022-01-11T20:08:26.757Z","0.3.5":"2022-01-12T11:12:41.761Z","0.3.7":"2022-01-19T11:00:55.042Z","0.3.7-1":"2022-01-20T11:55:18.956Z","0.3.7-2":"2022-01-20T14:27:12.795Z","0.3.7-3":"2022-01-20T14:42:14.516Z","0.3.7-4":"2022-01-20T17:48:53.272Z","0.3.8-1":"2022-01-21T12:01:07.074Z","0.3.8-2":"2022-01-24T10:09:06.620Z","0.3.8-3":"2022-01-29T19:07:58.209Z","0.3.8-4":"2022-01-30T11:34:25.317Z","0.3.8-5":"2022-01-30T17:11:17.650Z","0.4.0":"2022-01-31T15:15:05.628Z","0.4.1":"2022-02-09T14:58:21.952Z","0.4.1-1":"2022-02-12T01:04:02.878Z","0.4.2":"2022-02-14T15:40:48.064Z","0.4.2-1":"2022-03-04T01:15:12.968Z","0.4.2-2":"2022-03-04T01:44:12.131Z","0.4.2-3":"2022-03-04T02:33:18.151Z","0.4.2-4":"2022-03-04T03:03:06.748Z","0.4.2-5":"2022-03-04T03:09:40.871Z","0.4.2--":"2022-03-04T10:22:24.126Z","0.4.2-6":"2022-03-04T10:29:08.986Z","0.4.2-7":"2022-03-04T11:56:22.762Z","0.4.2-8":"2022-03-10T16:39:44.070Z","0.4.2-9":"2022-03-11T10:23:23.220Z","0.4.3":"2022-03-23T09:49:23.211Z","0.4.4":"2022-04-04T13:29:45.690Z","0.4.4-1":"2022-04-05T10:29:12.907Z","0.5.0":"2022-04-13T18:40:27.043Z","0.5.0-1":"2022-04-15T10:41:39.329Z","0.5.0-2":"2022-04-16T09:21:50.468Z","0.5.0-4":"2022-04-16T10:33:47.896Z","0.5.0-5":"2022-04-16T10:38:23.790Z","0.5.0-6":"2022-04-16T10:58:07.819Z","0.5.0-7":"2022-04-16T12:37:37.498Z","0.5.0-8":"2022-04-16T13:03:29.586Z","0.5.0-9":"2022-04-16T15:31:03.059Z","0.5.0-10":"2022-04-16T16:21:06.261Z","0.5.0-11":"2022-04-16T16:26:34.137Z","0.5.0-12":"2022-04-16T16:29:28.065Z","0.5.0-13":"2022-04-16T16:51:27.693Z","0.5.0-14":"2022-04-16T16:55:09.989Z","0.5.0-15":"2022-04-16T19:07:59.304Z","0.5.0-16":"2022-04-16T20:16:55.829Z","0.5.0-17":"2022-04-16T22:25:53.130Z","0.5.1":"2022-04-19T16:19:51.024Z","0.5.1-1":"2022-04-28T16:44:06.076Z","0.5.1-2":"2022-04-28T19:24:35.403Z","0.5.1-3":"2022-05-02T17:13:43.596Z","0.5.1-4":"2022-05-02T17:36:17.752Z","0.5.1-5":"2022-05-02T17:51:35.933Z","0.5.1-6":"2022-05-02T19:30:00.536Z","0.5.2":"2022-05-04T11:20:51.298Z","0.5.2-1":"2022-05-04T11:37:46.101Z","0.5.3":"2022-05-04T12:36:21.411Z","0.5.4":"2022-05-05T09:32:40.110Z","0.5.5":"2022-05-05T11:58:07.930Z","0.5.6":"2022-05-05T14:07:16.899Z","0.5.6-1":"2022-05-09T18:07:51.001Z","0.5.7":"2022-05-10T16:05:28.333Z","0.5.7-1":"2022-05-16T17:50:47.384Z","0.5.8":"2022-05-17T09:17:52.047Z","0.5.9":"2022-05-20T09:58:41.401Z","0.5.10":"2022-05-23T16:14:17.096Z","0.5.11":"2022-06-01T10:08:50.947Z","0.5.11-1":"2022-06-08T15:43:12.916Z","0.5.12":"2022-06-21T18:13:33.802Z","0.5.13":"2022-06-23T18:06:57.792Z","0.5.13-1":"2022-08-08T15:16:56.855Z","0.5.14":"2022-08-08T15:19:30.409Z","0.5.14-1":"2022-08-21T12:15:41.844Z","0.5.14-2":"2022-08-21T12:42:13.946Z","0.5.14-3":"2022-08-21T16:34:00.850Z","0.5.14-4":"2022-09-02T14:20:51.320Z","0.5.14-5":"2022-09-03T23:51:58.890Z","0.5.14-6":"2022-09-04T21:26:14.262Z","0.5.14-7":"2022-09-04T21:30:39.351Z","0.5.15":"2022-09-05T00:54:56.931Z","0.5.16":"2022-09-05T10:59:16.313Z","0.5.17":"2022-11-08T08:48:42.465Z"},"maintainers":[{"email":"freshcrowd@gmail.com","name":"cr0wd"},{"email":"michael.copeland@freakout.tech","name":"admix-ksmike"}],"readme":"# ACL 🔷 Admix Components Library \n[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/beta.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![package downloads](https://img.shields.io/npm/dm/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library)\n[![package min size](https://img.shields.io/bundlephobia/min/@admixltd/admix-component-library?style=flat-square)](https://bundlephobia.com/package/@admixltd/admix-component-library@0.5.14)\n[![package min zip size](https://img.shields.io/bundlephobia/minzip/@admixltd/admix-component-library?style=flat-square)](https://bundlephobia.com/package/@admixltd/admix-component-library@0.5.14)\n\n```shell\n\nyarn add @admixltd/admix-component-library\n\n```\n\n### Subpackages list\nthis packages not included to `@admixltd/admix-component-library` directly and should use specific import\n\n```jsx\n'@admixltd/admix-component-library/Api'\n'@admixltd/admix-component-library/AuthWrapper'\n'@admixltd/admix-component-library/AutoComplete'\n'@admixltd/admix-component-library/ChipArray'\n'@admixltd/admix-component-library/Deprecated'\n'@admixltd/admix-component-library/FormAtomGenerator'\n'@admixltd/admix-component-library/NumericInput'\n'@admixltd/admix-component-library/RecoilNexus'\n'@admixltd/admix-component-library/Snackbar'\n'@admixltd/admix-component-library/Table'\n```\n\n# Usage in your project:\n\n### 1. Install component-specific dependencies\n\n---\n\n<details>\n<summary>\nList of component-specific **optional** dependencies\n</summary>\n\n\n### Deprecated\n\nIf you want to use legacy packages from **deprecated** section, based on `antd`, you should install next packages:\n\n> They are in the deprecated section because they use direct or indirect dependence on antd, for example AdmixButton in AppDiscoveryItem.tsx\n\n\n```shell\n\nyarn add recharts antd\n\n```\n```jsx\n\nimport { AdmixButton, AdmixBarChart, AdmixBarChartProps } from '@admixltd/admix-component-library/Deprecated'\n\n```\n\n### Autocomplete , Select\n\nTo use `Autocomplete` or `Select` component please install:\n\n```shell\n\nyarn add react-window\n \n```\n```jsx\n\nimport { AutoComplete, Select } from '@admixltd/admix-component-library/AutoComplete'\n\n```\n\n### Table\n\nTo use `Table` component please install:\n\n```shell\n\nyarn add @mui/x-data-grid react-window \n \n```\n```jsx\n\nimport { Table } from '@admixltd/admix-component-library/Table'\n\n```\n\n\n### NumericInput\n\nTo use `NumericInput` component please install:\n\n```shell\n\nyarn add react-number-format\n \n```\n```jsx\n\nimport { NumericInput } from '@admixltd/admix-component-library/NumericInput'\n\n```\n\n\n### AuthWrapper\n\nTo use `AuthWrapper` component please install:\n\n```shell\n\nyarn add react-cookie notistack\n \n```\n```jsx\n\nimport { AuthWrapper } from '@admixltd/admix-component-library/AuthWrapper'\n\n```\n\n### ChipArray\n\nTo use `ChipArray` component please install:\n\n```shell\n\nyarn add react-transition-group\n \n```\n```jsx\n\nimport { ChipArray } from '@admixltd/admix-component-library/ChipArray'\n\n```\n\n\n### FormAtomGenerator\n\nTo use `FormAtomGenerator` component please install:\n\n> [More usage details](#formatomgenerator-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { FormAtomGenerator } from '@admixltd/admix-component-library/FormAtomGenerator'\n```\n\n### RecoilNexus\n\nTo use `RecoilNexus` component please install:\n\n> [More usage details](#recoilnexus-usage)\n\n\n```shell\n\nyarn add recoil\n \n```\n```jsx\n\nimport { RecoilNexus } from '@admixltd/admix-component-library/RecoilNexus'\n\n```\n\n\n\n### Snackbar\n\nIf you want use `Snackbar` component please install:\n\n> [More usage details](#snackbar-usage)\n\n```shell\n\nyarn add notistack\n\n```\n```jsx\n\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\n```\n\n\n</details>\n\n### 2. Add Inter font\n\n---\n\nTo use this library, please add Inter font to your project\n\n```html\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n**Or use local Inter font copy** (Preferred for ssr)\n\n> Use: https://amio.github.io/embedded-google-fonts/ to store font in one file with base64\n\n<details>\n<summary>\nHow to use local font copy \n</summary>\n\n```html\n<!-- Your html file-->\n<!--suppress CommaExpressionJS -->\n<script>\n    const fontFile = '/inter.css'\n    const fontFamily = `Inter`\n    /**\n     * Save font into localstorage for fast refresh\n     */\n    ;(function() {\n      function addFont() {\n        const e = document.createElement('style');\n        document.head.appendChild(e);\n        e.textContent = localStorage.preloaded_font;\n      }\n      const fontExists = !!localStorage.preloaded_font && localStorage.preloaded_font.includes(fontFamily);\n      if (fontExists){\n        addFont();\n        return;\n      } \n      fetch(fontFile).then(t=>t.text()).then(t=>{\n        localStorage.setItem('preloaded_font', t);\n        addFont();\n      });\n    })()\n</script>\n\n```\n\n</details>\n\n### 3. Use theme\n\n---\n\n<details>\n<summary>\nIf you are using `@emotion`\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `@emotion` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport type PropsWithTheme<T = unknown> = T & {\n  theme: ITheme\n}\nexport default theme\n```\n\n#### 2. Redeclare `Theme`\n\nhttps://emotion.sh/docs/typescript#define-a-theme\n\n```ts\n//emotion.d.ts\nimport \"@emotion/react\";\nimport { ITheme } from \"@styles/theme\";\n\n\ndeclare module \"@emotion/react\" {\n  /**\n   * Should be interface not a type\n   */\n  export interface Theme extends ITheme {\n  }\n}\n\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `@emotion`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider theme={theme}>\n  <App />\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <App />\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n\n<details>\n<summary>\nIf you are using `styled-components` (Not recommended anymore)\n</summary>\n\n#### 1. Merge `AdmixLibraryTheme` with your `styled-components` theme\n\n```ts\n//styles/theme.ts\n\nimport { AdmixLibraryTheme } from '@admixltd/admix-component-library'\n\n/**\n * Your styles\n */\nconst projectTheme = {\n  purple: `#DDA0DD`,\n}\n\n/**\n * Override theme styles\n */\nAdmixLibraryTheme.colors.primary = '#000'\nAdmixLibraryTheme.colors.secondary = projectTheme.purple\n\n/**\n * Extend style-components with theme type\n */\n\nexport type ITheme = typeof AdmixLibraryTheme & typeof projectTheme\nconst theme = { ...AdmixLibraryTheme, ...projectTheme } as ITheme\nexport default theme\n```\n\n#### 2. Redeclare `DefaultTheme`\n\nhttps://styled-components.com/docs/api#create-a-declarations-file\n\n```ts\n//styled.d.ts\nimport 'styled-components'\nimport { ITheme } from '@styles/theme'\n\n\ndeclare module 'styled-components' {\n  /**\n   * Should be interface not a type\n   */\n  export interface DefaultTheme extends ITheme {}\n}\n```\n\n#### 3.Wrap your app with `AdmixThemeProvider` and `ThemeProvider` from `styled-components`\n\n```tsx\n//App.jsx\n\nimport { AdmixThemeProvider } from '@admixltd/admix-component-library';\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\n<AdmixThemeProvider>\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n</AdmixThemeProvider>\n\n/**\n * Or same without AdmixThemeProvider\n */\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\nimport { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material'\nimport { ThemeProvider } from 'styled-components';\nimport theme from 'styles/theme';\n\nconst muiTheme = createTheme({});\n\n\n<MuiThemeProvider theme={muiTheme}>\n  <EmotionThemeProvider theme={theme}>\n    <ThemeProvider theme={theme}>\n      <App />\n    </ThemeProvider>\n  </EmotionThemeProvider>\n</MuiThemeProvider>\n```\n\n</details>\n\n### 4. Enjoy using it, you are wonderful! 🎂\n\n---\n\n## Development\n\n<details>\n<summary>\nHow to develop new ACL components\n</summary>\n\n<details>\n<summary>\nIf you haven't used `yarn` before\n</summary>\n\nIf you haven't used `yarn` before, please make sure that you install dependencies in an empty `node_modules` folder\n\nInstall [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) and [rimraf](https://www.npmjs.com/package/rimraf)\n\n```shell\n\nnpm install --global yarn \nyarn global add rimraf\n\n```\n\nRemove `node_modules` recursively\n\n```shell\n\nrimraf node_modules\n\n```\n\n</details>\n\n### 1. Install dependencies\n\n```shell\n\nyarn\n\n```\n\n### 2. Run storybook\n\n```shell\n\nyarn start\n\n```\n\n## Build project\n\n```shell\n\nyarn clean && yarn build\n\n```\n</details>\n\n## Link projects to work locally\n\n<details>\n<summary>\nHow to work locally with ACL\n</summary>\n\n### 1. Start building in watch mode\n\n```shell\n   \nyarn build-watch\n   \n ```\n\n### 2. Link `dependencies` and `admix-component-library` in your project `package.json` file\n\n```json\n{\n  \"@admixltd/admix-component-library\": \"link:../admix-component-library/build\",\n  \"react\": \"link:../admix-component-library/node_modules/react\",\n  \"react-dom\": \"link:../admix-component-library/node_modules/react-dom\",\n  \"@emotion/react\": \"link:../admix-component-library/node_modules/@emotion/react\",\n  \"@emotion/styled\": \"link:../admix-component-library/node_modules/@emotion/styled\",\n  \"@mui/material\": \"link:../admix-component-library/node_modules/@mui/material\",\n  \"notistack\": \"link:../admix-component-library/node_modules/notistack\",\n  \"recoil\": \"link:../admix-component-library/node_modules/recoil\"\n}\n```\n\n### 3. [Use theming](#3-use-theme)\n\n</details>\n\n## Snackbar usage\n\n<details>\n<summary>\nHow to use Snackbar everywhere \n</summary>\n\n\n### 1. Install `notistack` package\n\n```shell\n\nyarn add notistack\n\n```\n\n### 2. Wrap your app with `SnackbarProvider`\n\n### 3. Add `SnackbarUtilsConfigurator` next to your app\n\n```tsx\nimport { SnackbarProvider } from 'notistack';\nimport { SnackbarUtilsConfigurator } from '@admixltd/admix-component-library/Snackbar';\n\n<SnackbarProvider\n  maxSnack={10}\n  anchorOrigin={{\n    vertical: 'bottom', horizontal: 'right',\n  }}\n>\n  <YourApp />\n  <SnackbarUtilsConfigurator />\n</SnackbarProvider>\n\n```\n\n### 4. Use `Snackbar` anywhere\n\n```tsx\nimport { Snackbar } from '@admixltd/admix-component-library/Snackbar'\n\nSnackbar.toast('Hello world!')\nSnackbar.success(<>Hello <strong>world</strong>!</>)\n```\n\n</details>\n\n\n## FormAtomGenerator usage\n\n<details>\n<summary>\nGenerate atoms and selectors for recoil to use them in forms or in please where you need control state based on object\n</summary>\n\n```tsx\nimport { useRecoilState } from 'recoil'\nimport { FormAtomGenerator } from \"@admixltd/admix-component-library/FormAtomGenerator\";\n\nconst initialValue: FormDataProps = {\n  name: 'Jake',\n  surname: 'Smith'\n}\n\ninterface FormDataProps {\n  name: string\n  surname: string\n}\n\nconst {\n\tAtomUpdater: SomeFormAtomUpdater,\n\tDataUpdater: SomeFormDataUpdater,\n\tDataMerger: SomeFormDataMerger,\n} = FormAtomGenerator<FormDataProps>(\n\t'SomeFormKey',\n\tinitialValue\n)\n\n\n\nconst SomeComponent = () => {\n  /**\n   * Control value for specific field\n   */\n  const [value1, setValue1] = useRecoilState(SomeFormAtomUpdater('name'))\n  const [value2, setValue2] = useRecoilState(SomeFormAtomUpdater('surname'))\n\n\n  /**\n   * Control array of fields ( useful for errors )\n   */\n  const [value3, setValue3] = useRecoilState(SomeFormAtomUpdater(['name', 'surname']))\n  /**\n   * value3 - returns first non undefinened value from list of fields \n   * value3 = values1['name'] ?? values1['surname'] ?? values1[...]\n   * setValue3('SomeText') - updates current field form value3\n   * if value3 = values1['name'] - updates 'name'\n   */\n  \n  \n  /**\n   * Controll all values\n   * setValues1 first call  {x: text}\n   * setValues1 second call {y: text}\n   * ===>\n   * {y: text}\n   */\n  const [values1, setValues1] = useRecoilState(SomeFormDataUpdater)\n\n\n  /**\n   * Controll all values with merge\n   * Merge values by parts like:\n   * setValues2 first call  {x: text}\n   * setValues2 second call {y: text}\n   * ===>\n   * {x: text, y: text}\n   */\n  const [values2, setValues2] = useRecoilState(SomeFormDataMerger)\n\n  \n  return <></>\n}\n\n\n```\n\n</details>\n\n## RecoilNexus usage\n\n<details>\n<summary>\nEasily control any recoil atom from anywhere in the app\n</summary>\n\n#### 1. Add `RecoilNexus` in your `RecoilRoot`\n\n```tsx\nimport React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport { RecoilNexus } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function App() {\n  return (\n    <RecoilRoot>\n      <RecoilNexus />\n\n      {/* ... */}\n    </RecoilRoot>\n  );\n}\n\nexport default App;\n```\n\n#### 2. Use the following methods to get/set values passing your atom as a parameter.\n\n| Method             | Returns                                                                     |\n|:**---**----------------|:----------------------------------------------------------------------------|\n| `getRecoil`        | getter function                                                             |\n| `getRecoilPromise` | getter function, returns a promise. To be used with asynchronous selectors. |\n| `setRecoil`        | setter function, pass value to be set as second parameter                   |\n| `resetRecoil`      | pass atom as parameter to reset to default value                            |\n\n```tsx\n// Loading example\nimport { loadingState } from \"../atoms/loadingState\";\nimport { getRecoil, setRecoil } from \"@admixltd/admix-component-library/RecoilNexus\";\n\nexport default function toggleLoading() {\n  const loading = getRecoil(loadingState);\n  setRecoil(loadingState, !loading);\n}\n```\n\n```tsx\n//Loader\nimport React from \"react\";\nimport { useRecoilValue } from \"recoil\";\n\nexport default function Loader() {\n  loading = useRecoilValue(loadingState);\n  return loading ? <h3>Loading...</h3> : null;\n}\n```\n\n```tsx\n//Atom\nimport { atom } from \"recoil\";\n\nexport const loadingState = atom({\n  key: \"LOADING\",\n  default: false,\n});\n```\n</details>\n\n## Helpers description\n| Name                 | Description                                                                                                                                                                                     |\n|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `AdmixThemeProvider` | ThemeContextProver with a theme included in it for Admix component library                                                                                                                      |\n| `AuthWrapper`        | Makes child components available only after Admix authorization                                                                                                                                 |\n| `PromiseAll`         | Allows you to receive a response from Promise.all as an object                                                                                                                                  |\n| `Snackbar`           | [Please read](#snackbar-usage) snackbar usage section                                                                                                                                           |\n| `RecoilNexus`        | [Please read](#recoilnexus-usage) RecoilNexus usage section                                                                                                                                     |\n| `FormAtomGenerator`  | [Please read](#formatomgenerator-usage) FormAtomGenerator usage section. Generate atoms and selectors for recoil to use them in forms or in please where you need control state based on object |\n\n\n## Hooks description\n\n| Name             | Description                                                                                                                 |\n|------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `useMerge`       | Object.assign for the state, used as an analogue of useState, but without overwriting the entire state, but only part of it |\n| `usePrevious`    | Saves the state of the previous render                                                                                      |\n| `useFirstRender` | Detect is first render or not                                                                                               |\n| `useWindowSize`  | Allows you to get the window size                                                                                           |\n\n## Utils description\n\n| Name                      | Description                                                                                                                                                                     |\n|:--------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `childrenToText`          | Accepts JSX and returns only the Text from it. Useful for logging                                                                                                               |\n| `trimUrlSlashes`          | Removes unnecessary slashes from the URL                                                                                                                                        |\n| `fontLoader`              | Loads the font file into the localStorage                                                                                                                                       |\n| `childrenWithProps`       | Pass props to children                                                                                                                                                          |\n| `ignoreRecoilErrors`      | Allows you to ignore recoil errors, which are usually incorrect                                                                                                                 |\n| `getURLSearchParameters`  | Allows you to get the parameters object from the search part of the URL                                                                                                         |\n| `numberFormatter`         | Shortens the number with formatting `(K, M, G, ...)`                                                                                                                            |\n| `transientOptions`        | You need to add to `emotion/styled` so that attributes with $ are not passed to the component EX: `const ButtonInput = styled(Button, transientOptions)<{$primaryColor?: ...}>` |\n| `handleBlur`              | Triggers a loss of focus for the user                                                                                                                                           |\n| `uniqBy`                  | Filters an array of objects by field `(no lodash)`                                                                                                                              |\n\n## Chromatic manual deploying\n\n```shell\n\nnpx chromatic --project-token=YOUR_TOKEN\n\n```\n","readmeFilename":"README.md","description":"[![package version](https://img.shields.io/npm/v/@admixltd/admix-component-library.svg?style=flat-square)](https://www.npmjs.com/package/@admixltd/admix-component-library) [![beta version](https://img.shields.io/npm/v/@admixltd/admix-component-library/bet","license":"MIT"}